Creating Great Layouts

Everyone has a website these days but what exactly differentiates the okay from the great? A great layout goes a long way to making a website a joy to both develop for and use. Great layouts get visitors to come back time and again.

When should a website be redesigned? Content may be king, but if content isn't readable or simply can't be found by the average user, then it is time to redesign the layout of the site. Clutter and stagnation are the natural progression of any website.

When I speak of great layouts, I refer to the overall structure of each page and the site as a whole. Each aspect of both the whole website and the individual pages that make up the website need to be carefully thought out.

Here is what makes a great layout:

The next sections cover each of these aspects in detail.

Simple

A simple layout results in a simple site. Many websites start out with simple navigation but through various "needs" or internal politics, the navigation soon bloats out of proportion to the rest of most pages. Here is a good rule of thumb: If you have to put a search engine in your navigation, your website is too complex for 99% of all users on the Internet. That doesn't mean you shouldn't have a search engine or that it is a bad design - both could be true - but it does mean you have reached a level of complexity that may be unnecessary.

In addition, the more things that can be interacted with on each page, the more a user will find it to be difficult or confusing to navigate the site. Even two column layouts increase site complexity by many magnitudes. This can be offset by simplifying the content in both columns. This shows that there are tradeoffs that can be made for increased complexity that trick the user into thinking the site is simple to navigate and use.

Consistent

Consistency is key. If a 'h1' tag is displayed with certain margins, padding, font, and font size on one page, it shouldn't be different on another page. Cascading Style Sheets (CSS) helps to take care of this issue that used to plague websites in the past.

Page layouts should incorporate the main site layout and then apply custom page-level modifications on an as-needed basis to help create a uniform experience for the user. The most common example of a custom modification is the homepage. Most homepages rarely follow the same page layout as the rest of the website. Search engines are slowly adapting and may eventually obsolete the homepage altogether because many users are using search engines to find that "one thing" they are looking for, which is almost never on the homepage.

Interior pages should basically be identical in layout. This approach keeps the site simple. It is also "boring" but boring can be a good thing. Great layouts do not attempt to "wow" the user by having each page be different.

Elegant

The elegance of a website is typically viewed as in flux with whatever the latest trend is. However, some elements on websites are viewed as very inelegant. The juxtaposition of an advertisement smack in the middle of textual content is inelegant - that is, it becomes difficult for visitors to tell where the next piece of content on the page is.

Color schemes should match across the board. Hyperlinks, for example, should fit into the primary theme of the site. Suddenly having a giant red hyperlink on the page may attract attention, but it is not elegant. There are ways to fit into a theme and yet appear important to draw the user's eye.

The use of whitespace should be liberal and provide meaning. Whitespace should flow around the content and make it easy for the user to locate important content on the page at a glance.

Fonts should be easy to read and sized properly based on the HTML tags used behind the scenes. Margins and padding (whitespace) should be applied to keep paragraphs and headers separated at consistent intervals. Elegance is found in readability.

Intuitive

Is each page intuitive to read and use? Can the user find the content that they are looking for without having to use a search engine? Are pages named normally or with "creative" names that no user will ever guess with a search?

Creating intuitive layouts requires years of experience. Use small, simple, common words that exist in the dictionary that carry the intended meaning. If you see "Download" in a site's navigation area, what do you expect to find on the target page?

Intuitive layouts are implicitly Search Engine Optimized/SEO-friendly because users are already searching for these terms. The key to good SEO is to build content that makes people want to read your content instead of someone else's.

Beautiful

Beauty is in the eye of the beholder. And beauty is fleeting. What is beautiful today may not be beautiful tomorrow.

One thing that is definitely not beautiful: Advertisements. A lot of websites use ads to generate extra revenue but ads are ugly and destroy great layouts. In addition, experience has shown me that advertisers have zero taste for good design, the ads themselves never fit into a site's colors and theme, and ads kill browser performance. It isn't any wonder that users are slowly discovering the joy of ad blockers.

Beauty can be relatively timeless, however. A lot of art portfolio sites made today, for example, will still look good five, maybe ten years down the road. Sites that rely on content, however, typically change up styles every 6 to 12 months to stay relevant.

© CubicleSoft