Types of Website Design Layouts
We’ll talk about the three most common layouts, and explore some of their advantages and disadvantages. (Types of Website Design Layouts)
Regardless of whether we’re talking about liquid or fixed-width layout design, the left-column navigation format is a time-honored standard. The layout of the Porsche site, pictured in Figure 1, is a classic example of this configuration. Many sites that fit into this mold don’t necessarily use the left column as the main navigation block sometimes you’ll see the navigation along the top of the page but they still divide the layout below the header into a narrow (one-third or less) left column and a wide right column. It’s like a security blanket or that comfortable shirt with holes in the armpits that you wear once a week even though it drives your spouse crazy. For those reasons, a layout featuring left-column navigation is a safe choice for most projects.
1. Left-column navigation Figure at Porsche
The downside to sites that use left-column navigation is that they can appear to lack creativity. It’s been done so many times, in so many ways, over so many years that they tend to look the same. That’s not to say you should avoid using a left-column navigation layout. At a guess, I’d say that 75% of the sites I’ve designed have a secondary left-column navigation, but I do try to mix it up a little when I can.
Speaking of mixing it up, how about picking that left column up and sticking it on the other side of the content? Then you’d have a right-column navigation layout. (Types of Website Design Layouts)
If you’re going to restrict your main content to one side of the page, it’s more widespread these days to push it to the left, placing navigation, advertising, and subsidiary content on the right. This is an especially common configuration for news sites, social networks, and websites with expansive navigation schemes that are unable to be contained within simple top navigation. BlueCross BlueShield of South Carolina is an example of such a site. It features several different layouts and color schemes for each section. The screenshot you see in Figure 2 is a fourth-level page that is, it’s four clicks away from the front page. By keeping the secondary navigation on the right, it stays out of the way of visitors who, if they’re this deep already, are looking for some very specific content.
Fig 2 Right-column Navigation Layouts
Ultimately, the decision on whether to put a navigation column on the left or the right is a judgment call that’s really about the amount and type of content you have to organize. If it’s a simple site that doesn’t require any secondary navigation, consider a narrow, column-less layout. Good design is often more about what you leave out than what you put in. If you do need a secondary column, just remember that the content is what your visitors are there for … and more and more, they’re looking for it on the left.
The typical three-column layout has a wide center column flanked by two diminutive navigational columns. The ThinkGeek store shown in Figure 3 is an example of this web page layout staple. 3 Although three columns may be necessary on pages that have a ton of navigation, short bits of content, or advertising to display, whitespace is essential if we’re to keep a layout from appearing cluttered.
Fig 3.Three-column Navigation Layouts
Just because the left-column, right-column, and three-column layout configurations are the bread and butter of most web page designs, there’s no need to feel confined to these layouts. A plethora yes, a plethora of design showcase and design pattern sites have been created to feature new and innovative ideas that might help you think outside the box, including the following (just to name a few):
Unmatched Style at http://unmatchedstyle.com/
There are a ton of great CSS galleries out there. Unmatched Style is more selective than others, and the video podcasts and interviews are usually interesting as well.
CSS Drive at http://cssdrive.com/
Like Unmatched Style, CSS Drive is a CSS gallery. What makes this one special is that they do a good job of categorizing featured sites by color schemes and layout.
Yahoo Design Pattern Library at http://developer.yahoo.com
Similar to Pattern Tap, but with far fewer examples and variations, the Yahoo Design Pattern Library is a great place to learn about standard user interface elements.
This post contain the content of book The Principles of Beautiful Web Design by Jason Beaird