Yes, I know that I've ranted before about this but here are some real-life examples.
The navigation of your site determines, to some extent, the design of your site. It just isn't possible to accurately design your site without a completed and signed off blueprint.
Why? well, I'm sure it's obvious that a small five page site has different parameters than a five hundred page site. Even the length of the link descriptions has to be taken into account. There are limitless variations and designing your website architecture is a complex job. (Limitless? OK, probably not, but a hell of a lot).
Here are some examples:
As you can see, the top level of the navigation on the above site is pretty simple. That's great for viewers; they can easily find the sections they want to. The reason I'm using this example is to show the links in the subnavigation on the left. The longest of them says 'board of directors'. This determines the cell size of that left hand column. If the longest word was 'board', that column would need to be narrower.
The site above has completely different navigation. The top level links are near the top of the page in a horizontal layout. This is what the viewer expects to see and this makes the main level navigation intuitive for them. A special subnav leading to various artistes pages are above. Then, within the copy, there are 'read more' buttons to take the viewer to extended articles. This shows the importance of having all the copy on the blueprint prior to the design process. Maybe some pages are just too long because of a great deal of copy? Will they need to be carried on to another page? This is an example of how the copy length determines the design.
This sub-section of a website shows a different type of navigation. The site showcases properties in New York. The properties are listed down the left hand side. The subnavigation, at the top of the page, leads the viewer to details about each property - location map, plans and so on. You can see how essential it was to have all the information on the blueprint 100% corectly before designing this very complex website.
This appears to be a very simple website with horizontal top level navigation. Howver, this is a huge site with details of hundreds of restaurants. How on earth do you arrange that? With the help of the blueprint, the designer created a subnavigation on the right hand side of the page which allows the viewer to see the restaurants alphabetically, by type and so on. This huge site is now easy for the viewer to use. This is a great example of very complex site which is very easy to navigate.
This is a much bigger site than the previous one. There are many subsections with additional subsections within them. The answer here was for the designer to create the user-friendly top level navigation. Each subsection then has its own horizontal navigation below the main nav bar. You can see that in the panel on the left, each of those sub-sub-sections has even more navigation. And note again how that panel is determined by the length of the wording of those links. Yet, even though this is an enormous site, the viewer can find what they are looking for with ease and within three clicks.
Another large site with extensive subnavigation. And yet, the design of the site is calm and clear. Working with the blueprint showed that the top level navigation, the links that viewers are most likely to want, should be in their own navigation with lesser-frequented pages underneath them. You'll note that again, there is sub-navigation on the left hand side of the page which is determined by the length of the link wording. This is a huge site and yet the viewer can easily find what they are looking for in a relaxed and user-friendly design. This would not have been possible without the blueprint.
The examples above have mostly been from large websites. The screenshot above is from a much smaller restaurant site. The top level navigation is horizonal, making this intuitive to use for the viewer. The subnavigation shown above is for the menu page and the menu links have been designed to be under the page's graphic header. Again, this is instictive for the user. Thanks to the blueprint, the site works well for the viewer allowing them to find the information they need quickly.
As you surely know, I could show hundreds of other examples but I have some real work to do. But the examples above show that the design of your site will be affected by:
The main navigtion of your site
The subnavigation of your site
The sub-sub-navigation (and in some cases, sub-sub-sub-sub... etc)
The wording of your links
The length of your copy
Related topics:
More blueprint stuff
Blueprint roundup
Comments