Web Multimedia Blog

Multimedia Web Design Advice, Photography, Video, music, Mobile Websites, and Company News.

Common Web Design Layouts

joel reinke - Sunday, March 20, 2011

From my last Blog Post, How to Make a Website: Planning Stage, there are 10 parts. I will now go into more detail on step 2 by giving more examples for types of common webdesign layouts...

Please note, as I am building a lot of materials for Edmonds Web Design, for any Edmonds Website, there should be at least 1 ferry boat in your design somewhere! :)  (Ok, sorry, It's an Edmonds Kind of Joke)

From last episode:

2. Sketch Homepage

Don't worry: No artistic skill required, just draw boxes on paper and label them. 
(GLOSSARY OF TERMS at bottom of article)

  • Take a sheet of blank paper. 
  • Think up an ideal layout that matches the image of your business (see below for examples)
  • The Homepage sometimes has a more graphic layout than the rest of the pages, but it can be the same format as the rest of the pages too.  Some standard layouts for web pages are:
    • Header with Left Sidebar,
    • Header with Right Sidebar (common for blogs),
    • Left Sidebar Navigation,
    • Header + 3 columns. 
    • Option for all of these: have a footer or not
  • Some other, less standard formats are:
    • Fixed Footer Navigation,
    • 3D Layout,
    • Flexible Size Format

As a better reference for this important step, I put together small images for each of these layout types to help give you a better idea of what are standard web site layouts:

Header with Left Sidebar

A common layout. The left Sidebar is often for Navigation, but it can also be for other things and sometimes the navigation is in the Header. The Header often contains the Logo, tagline of the company, sign-in area, search bar, and important Links.  Often there is a Footer but its optional. The content section changes for each page but the other elements of the page stay the same for most of the website.


Header with Right Sidebar (common for blogs)

Just like above but the Sidebar is to the right.  Because the emphasis is not as strong with the sidebar on the right, the CORE navigation isn't usually in the Right Sidebar but blogs use it for things like Archives, Tag Clouds and more.  It puts more emphasis on the Content which can be good.

Left Sidebar Navigation

No Header! You have navigation in the left sidebar and a logo above it. Content start at the top of the page. Again, footer is optional.

Header with 3 columns (Left and Right Sidebars)

Like some of the others but the content is between a left and right sidebar.  Usually for web sites with a lot going on and many different categories of content.

Fixed Footer Navigation

The Footer on this one is the key.  Not as common of a layout, but useful for multiple reasons.  The Footer is locked to the bottom of the webpage and never moves.  It should always be visable.  The navigation is all in the Footer. It's kind-of like the layout on an operating system like Windows. Another advantage is the Content comes first. Disadvantage is it might throw visitors off.

Header + Content

Super basic but common layout: Just a Header then Content below. Can be a great layout, just didn't need a picture to explain that one.

3D Layout

A fun creative layout that uses 3D to create a new, unique browsing Experience. Unlimited possibilities but you have to be careful to not throw off your visitors.  Too many possibilities to go into here.

If you have other layouts you know are very common that I missed, please comment to let me know of those other types and I'll add them.

Glossary of Terms

  • Header - Top section of each page on a website that can include: logo, tagline, links, navigation, etc. Not absolutely needed for a web page but very common
  • Footer - Bottom section of each page on a website that can include: links, copyright info, address, map link, widgets, or anything you like
  • Left and Right Sidebar - Verticle section of webpage that is next to the Content that includes links, graphics, tools, widgets, content summaries, or just about anything.  Usually repeats on all web pages on a web site.
  • Content - Section of the web page that holds the important info for that page. It usually changes for each page on a site, whereas the other elements stay the same (like the header, sidebars, and footer).
  • Website - All your web pages for your site, as in everything at www.your-domain.com
  • Webpage - One, individual page on your site that has content plus a header(optional), footer(optional), sidebars(optional), etc.
Post has no comments.
Post a Comment

Captcha Image

Trackback Link
Post has no trackbacks.