Lesson 2 – Layout Organization

In our previous tutorial, we explored how to “trim the fat” and create content hierarchy to automatically make your website easier to absorb, and your visitors don’t have to work as hard to get the information they need.

Strangely enough, you really don’t need a whole lot of creativity and design skills to do this and your website will start to look much better than before!

People always associate “good design” with having the ability to come up with ground breaking creative art, but it’s really not true. By following our actionable and practical tips, you too, can create good design!

Layout Organization

Now that we understand how to organize your content better, let’s take a look at layout organization.

Layout organization refers to how content are positioned in your site, so to make your content easier to read.

How you actually layout your content makes a huge impact on how long people stay on your website, and how successful you are at communicating your message.

Websites with bad layout organization makes reading very challenging (example below). Even if you have trimmed down your content and create an information hierarchy (based on our previous tutorial), if the content is not laid out in an organized way, it will still be hard to read website (which is bad design).

The key point here is you don’t want the audience to work for information. You want to make it as frictionless as possible so to encourage your audience to explore your website in more depth. When your content is laid out well, it makes your site look more professional, it will make your design look more appealing, and it help your audience to absorb information better and read it faster.

When we created this layout organization guide, we researched how the human eye read and absorb information. We learned how to create layout that complements how our eyes function and how the human brain absorbs information.

The best layout is one that separates content into bite-size chunks that can be easily digested, and guides your visitors effortlessly from one section to the other.

What are the 3 Methods to Achieve an Ideal Layout Design?

Here is the method to achieve the ideal layout design:

1) Columns & Sections

This is the simplest way to organize content. It is surprising how many people just stack content after content on top of each other without thinking how they want their audience to navigate through their site.

If you think about how newspaper or magazines arrange their layout, they organize their content in columns. We absorb information most effectively when our eyes don’t have to move too far from side to side.

By writing in columns, your audience will take less effort to read your content so they can better absorb your information and stay on your site longer.

2) White Space

One of the most common mistakes of bad layout is crammed content. Adding white space can actually help improve reading speed and comprehension.

You don’t have to use up every single inch of your webpages. It helps to create separation with white space so to make your site flow better.

Create some space between articles, images, quotes and highlighted information – this can help make information rich websites look a lot less overwhelming (automatically improves your design).

3) Color & Typography – Define Content Hierarchy

Color and typography are essential for defining content hierarchy without making the site looking too busy.

Most people make the mistake of just using bold, underline or italic to separate important content. When you start using a lot of it, it creates the opposite effect. The site will begin to look crowded with bold, underlined and italicized text and the site starts to look messy and confusing.

Instead, use typography techniques to create hierarchy and capture attention in a stylish way. Texture and tone control the order in which the user reads. The key to creating hierarchy is contrast, which can come from simple changes in weight, scale, color, tone or font.

CASE STUDY

The following is a good example of a website that has good to-the-point content and defined title/headline, summary, and detail.

Unfortunately, it has some simple layout mistakes:

A) There are title/headline, summary and detail, but they are not very apparent. The title and the summary blends in too much with the other content so it is not very easy to scan.

B) The site content looks squished together and so it is hard to separate where one article begins and ends. As such, the site appears to be overcrowded, confusing and challenging to read.

We implemented the 3 layout organization method to reconstruct the website:

BEFORE

BEFORE

AFTER

AFTER

1) We used the content hierarchy strategy to highlight the page title by enlarging it. So now it communicates in a much clearer way regarding what is the purpose of the website.

2) We used the white space strategy to re-organize the page summary. We made it narrower and introduced more spacing to make the page easier to read and navigate. Because of the increased white space, it also creates more focus on the summary without using any boxes or bold text. So the site looks cleaner and more professional.

3) We used the column strategy to separate the articles into two columns per row. We added text box to create more separation between each article. Now it is much easier to spot each article instead of looking at a “wall of text”.

4) We use the content hierarchy strategy (typography and color) to define the article title, summary and detail content. The title is the same font style as the page title. We made it smaller to indicate it is less important than the page title. Since the font style is the same, it creates uniformity and makes the page look organized.

The summary and detail content uses a different font style. This helps to create a clear separate between the titles and the rest of the content. However, we kept the font style the same between summary and detail content. If there are too many font styles it will make the site look disorganized. So we use color and font size to create separation and highlight different levels of importance. As such, the summary content is slightly larger and has a different color than the detail content. Now it is much easier to spot the more important content.

By implementing the layout organization methods, we created a more organized and easy to read webpage. We were able to separate content into bite-size chunks that can be easily digested and guide your audience effortlessly from one section to the other.

Again, you don’t have to be a naturally born designer to do this. Just by applying some of our techniques can make your website look much better and more professional.

Now look at your own website and try to implement these strategies to help improve your site’s readability! By doing so, you will automatically improve your design.

How to Reconstruct the Example Above

The updated layout from our example above can be constructed with some very basic Weebly elements.

You can use multiple column element to create the column structure, by stacking one multi column element on top of each other. With Weebly, you can’t automatically “pull” summaries of your articles into these introduction blocks, but you can definitely manually insert titles, text and images for each block. It takes a few minutes to do each, so just build them out as you create new articles.

With the outline border around the blocks, this is just a bit of styling and while Weebly doesn’t give you the tools to do this easily, you can make the adjustments through the CSS codes to style the blocks.

If you are proficient with a bit of CSS codes or if you’re working with a coder, this is completely achievable. If not, there are a lot of capable coders available for a reasonable price on Elance or oDesk. They should be able to help you make these minor styling edits very quickly.

For Tomorrow

Remember in our introduction video that we said that having your own website “personality” is important for your design? We’ll be diving into that tomorrow with practical techniques to help you create personality and branding around your website.

We also have a very helpful tool for you to use to help you along the way, and we also spent a lot of time preparing many case studies!

See you then!

Jeremy & Connie