StylizedWeb

Subscribe to our updates:

A Design, WordPress and Tutorials Blog.

Dedicated to helping you learn the art and science of the web.

Fundamentals of Web Design Layout: Part 2

In my previous post on web design layout, I discussed the role of layout in design, covered two examples of well executed layout and discussed what contributed to the success of them. In this post, we will cover how to analyze and plan for the most effective layout for your project. To plan a layout, you must first understand its purpose. Layout -- loosely defined -- is the organization of elements on the page. To be more specific, I define effective layout as:

The organization of content, elements and objects on a page such that users can scan over the arrangement and understand the relative importance and relationship of everything they see.

To elaborate, successful layouts organize elements on the page based on importance and relationship. The more organized your page is, the easier it is to look at, understand and use. An important distinction to make, is that organization is more than arranging things in a neat and cleanly way. Organization is much deeper, the arrangement of elements must inform the user about them.

Applied to the web (and layout specifically,) organization means elements on the page are arranged based on how they are related or connected. Elements are arranged based on their relationship to other elements on the page and the context of the website. Interrelating elements are placed in close proximity to form a cohesive group. Elements involving the sites goals are more important, and are given more space and visual prominence. For example, a site designed to sell books would arrange book listings so they are seen first. Users coming to the site will be looking for books, so placing them in an visually obvious spot (top center of the design, for example) informs them of the site context and makes their primary action (browsing books) effortless.

In order to design an effective layout, you must first understand the relationships of page elements. Only through understanding the relationships can you arrange them in the most organized way.

Understanding The Relationships

As I eluded to earlier, there are two types of relationships you should seek to understand. First, is the relationship of an element to the user or clients goal. Elements that are vital to conversion (a user performing a desired task, like purchasing a product) or user's goals are more important and should be organized as such. Second, is the relationship of elements to each other. Users interpret everything they see, one universal interpretation being that elements in close proximity are related. Great layouts are designed around these concepts, allowing users to understand a design without conscious thought.

Relationship to Goals

Example user and client goals for an online book store

How an element relates to user and client goals is the most important aspect of layout, so you will find it best to start here. To do so, you must first know what the client goals and user tasks are. Hopefully you have already uncovered this during planning and discovery phases, if not there is never a better time to clearly define why the site exists. This information can be obtained in many ways, interviewing clients and stakeholders, looking at site statistics, performing field research, etc... Design research is a subject best left for another post. Regardless of your method, first understand what users and clients want from the website.

Important elements should be placed in larger spaces with more visual prominence, like a content well. Lesser elements can be placed in smaller, ancillary areas like a sidebar.

With this information in hand, list all of the site goals (for both your clients and the users) and then rank them based on importance. Having a clear hierarchy of objectives will make future decisions to prioritize easier. The most important elements should be given the most space and most prime locations. Elements of lessor importance can be placed further down the page.

Once the list is created, create a second list containing any element which relates to the goals (ie: call to action button, primary headline, photo of product, etc...). Elements which relate to the most important goals should receive the most visual prominence, those which relate to non-essential goals can be deemphasized.

Identifying the most important elements is half the battle, but you must still consider how elements relate to each other.

Relationship to Each Other

On a form, the submit button and cancel link are related. Laying them out next to each other is visually logical.

Elements on a page have relationships. Some elements are intimately related, others are practically unrelated (the only commonality between them being the website they live on.) A pair of submit and cancel buttons are closely related as they both control the functionality of a specific form. The cancel button and a home link however, are almost completely unrelated.

Adding a home button is illogical and confusing because it's unrelated to the elements surrounding it.

When designing a site you will understand these relationships intuitively. You know enough about the context of the page, user and clients where relationships will be obvious. Users however, have no idea the relationship between elements. This is why the layout must communicate it to them.

An example of grouped elements, an a group with a sub-group

Related elements should be grouped together into a common space. Unrelated elements should be kept far apart. Often times you will end up with groups and subgroups of related elements. A sidebar for example, typically contains non-critical information and actions. Within a sidebar -- which is a group itself -- you typically have sub-groups of related elements. The "Stay Updated" section of this blog contains several related elements all grouped within the site sidebar. The "Stay Updated" section has a headline, latest tweet (which has the tweet itself, the date and user handle), icons and links to RSS and E-MAIL subscription. All of these elements are closely related.

The grouping instantly tells the user the relationships of the elements. On a broad level, one doesn't need to read every word in the "Stay Updated" section to know the elements within deal with the same subject mater. On a micro-level, the layout informs the users the RSS icon and the Entires RSS link are "one unit."

Another good example of this concept is the split column approach in the Categories / Archives section. These links essentially take the user to the same place, a list of previous articles. They only differ in how the list is filtered. Rather than creating two separate sections (which communicates non-relation) they are contained in a single section (which communicates a relationship.)

With in groups are "micro-groups" where closely related elements become perceived as a single unit.

To understand the relationships simply create an inventory of all elements on the page and document how you would categorize them. You can do high level categorization such as "navigation, primary content, actions, etc..." or detail level such as "archive links, calls to action, utility navigation, etc..."

If needed, you can always use card sorting (a common IA practice) and put each major element onto a card and pill them together based on their relationships.

Layout Next Steps

Once you understand how elements relate to site objectives, user goals and other elements you can begin crafting a layout. Because the function of layout is to best organize and display the elements on the page understanding the relationships is essential. The word "organization" by definition means "the structure or arrangement of connected items," relationships determine connectedness.

Read the Whole Series

Fundamentals of Web Design Layout Part 1

Leave a comment on Stylized Web Have some feedback? Leave a comment

22 Comments So Far

  1. LeSean McCoy Jersey white

  2. Youre so cool! I dont suppose Ive learn anything like this before. So nice to find someone with some original ideas on this subject. realy thank you for starting this up.http://www.moncler-butikken.com this web site is something that is needed on the net, someone with somewhat originality. useful job for bringing something new to the internet!

  3. Such an awesome poct and very supportive as well.It will help many people who are interested to make their career in Web Desiging.Thanks for sharing.

  4. Not only was the information in this article first class the way you presented the information was great and added 100% to the information. This I also think was the hidden message as shows you the right way to do things.

  5. cant wait to read what you have to share… do well in south africa n win the tile for mumbai…cheers…
    This is a great post and makes me think of where I can fit in. I do a little bit of everything mentioned here and I guess I have to find my competitive advantage.

  6. You made some good points there. I did a search on the topic and found most people will agree with your blog.I was very pleased to find this site.I wanted to thank you for this great read!! I definitely enjoying every little bit of it and I have you bookmarked to check out new stuff you post.

  7. The Layout looks real good so far. Keep you updated content and I Will continue to read. best suv

  8. It will help many people who are interested to make their career in Web Desiging.Thanks for sharing.

  9. No doubt this is an excellent post I got a lot of knowledge after reading good luck. Theme of blog is excellent there is almost everything to read, Brilliant.

  10. Those who want to enter the world healthy and permanent form, which is a product of choice for African Mango, now in Turkey. Because people prefer to use a 100% herbal product that helps people to enter the African Mango form a single product.

  11. For the designers it is more useful… Thanks…

  12. thaks lol

  13. aaa its really?

  14. Try to look for a gta san andreas game gta cheatcode for gta san andreas game…

  15. Pingback: 10 Finds for the Day: Web design (theories, ads, global samples, info visualization) | icepick

  16. ver ayari tabi ya

  17. ilginc bir blog hos guzel

  18. Those who want to get into the world healthy and lasting type, which is a item of choice for Africa Apple, now in Chicken. Because individuals want to use a 100% natural item that helps individuals to get into the Africa Apple type a single item.

  19. There are some very interesting comments on this one. Anyway, thanks for sharing the info, good read =).

  20. Some good points about web design layout. Relationship to Goals is most important in every web design layout. Good to read this informative post.

  21. Pingback: Fundamentals of Web Design Layout: Part 1 : Coders lab

  22. Awesome article.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>