Web Page Layout - Examples - Good Examples

Good Examples

Wikipedia

This is a great example of consistency and good grouping. Every page is stylistically the same, with the links for working with the individual page at the top, and the navigation on the left. In this case since actually users use the editing/page links more they do belong at the top, because navigation is often done via links with in the content.Wikipedia Homepage When one looks at main entries it becomes clear that there is also a standard layout for different domains of pages, like countries or people. Also, the content is clearly broken up into logical sections that are easily differentiated and found. Additionally the designers have put links to outside sites at the bottom of the page as well as clearly marking them as such. Overall the layout here makes the content easy to understand and navigate, thus enhancing the communication of the material.

Backpack

This site is designed for organizing ideas, notes, projects, reminders, etc. It really only has 3 page types. The home/login page, the main personal page, and the Writeboard page.Backpack Main User Page Once you log in the style is very simplistic and common although the functionality may change based on what you click the layout stays the same. The main controls are up at the top left, and the secondary clearly marked on the right sidebar, with the content in the center. The content sections are clearly separated by divider lines. The Writeboard pages are equally easy to understand, the main editing features are on the top, the main content immediately below it, and additional information on the right. This of course is undistinguishable from the Main page interface for the most part, making the change over fairly seamless and easy to understand. This very simplistic layout allows for a quick and easy understanding of the site and still allows for many uses.

O'Reilly

Finally we have the O'Reilly Media site. Some people would say that many of the sites I critiqued as bad design because they were inconsistent, aren't possible to make consistent because the different parts of the company are so varied. Well, O'Reilly is the proof they never counted on. Here's a company that sells books, and magazines, runs conferences, sells online content, offers services, and runs numerous websites that are huge resources to those in technical professions everywhere.Backpack Main User Page But despite having sites for such varied content, they all look remarkably the same, and use the same navigation scheme. If you've been to one O'Reilly site then you can easily find you're way around another. The content is always in the center of the page, and each part of the content is clearly differentiated from the other parts. Grouping of items is always done in a logical, semantic, and consistent fashion. The main highest level navigation is always at the top of the page. The number of navigation links at the top is kept to a minimum, as are the number at the bottom of the page. Indeed for a site this large and varied it doesn't get much better than this. If only every browsing experience could be more like O'Reilly.