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)

Left-column Navigation

Regardless of whether or not we’re talking regarding liquid or fixed-width layout style, the left-column navigation format may be 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 ample of this configuration but they still divide the layout below the header into a slim (one-third or less) left column and a large 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 that includes left-column navigation may be a safe alternative for many jobs. (Types of Website Design Layouts)

WEB PAGE ANATOMY 

1. Left-column navigation Figure at Porsche (Types of Website Design Layouts)

The downside to the drawback to sites that use left-column navigation is that they will seem to lack creative thinking. 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 ought to avoid employing 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. (Types of Website Design Layouts)

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)

Right-column Navigation

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 options many totally different layouts and color schemes for every 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 (Types of Website Design 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 straightforward website that doesn’t need any secondary navigation, think about a slim, column-less layout. Sensible style is usually a lot of regarding what you allow out than what you set in. If you are doing would like a secondary column, simply bear in mind that the content is what your guests square measure there for … and a lot of and a lot of, they’re trying to find it on the left. Good design

Three-column Navigation

The typical three-column layout features a wide center column flanked by 2 diminutive guidance 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. (Types of Website Design Layouts)

Fig 3. Three-column Navigation Layouts (Types of Website Design Layouts)

What Should Be The Screen Resolution For Web Design

Finding Inspiration

Just because the left-column, right-column, and three-column layout configurations square measure the bread and butter of most online page styles, there’s no got to feel confined to those layouts. An excessiveness affirmative, an excessiveness of style showcase, and style pattern sites are created to feature new and innovative ideas which may assist you to suppose outside the box, including the following (just to name a few):

• Unmatched Style at http://unmatchedstyle.com/

There are plenty of nice CSS galleries out there. Unmatched vogue is additional selective than others, and also the video podcasts and interviews are sometimes fascinating further.

• CSS Drive at http://cssdrive.com/

Like Unmatched vogue, CSS Drive could be 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.

BEAUTIFUL WEB DESIGN LAYOUT AND COMPOSITION

This post contain the content of book The Principles of Beautiful Web Design by Jason Beaird