A) Main Navigation. B) Billboard Area.
C) Secondary Navigation. D) Car Model Navigation.
E) Shopping Tools. F) Owner Tools.
G) Topic 1 Mini Ad. H) Topic 2 Mini Ad.
I) News Updates. J) Legal Copy.

Consistency in layout

The navigation bar shown here is a major identifier of the Volkswagen website. Not only is this floating navigation bar present in the same area on all pages that you visit within the VW site, but it also exists outside of the site. If you were to navigate to a local Volkswagen dealership site, you would still find that this same bar is present on their websites also. This creates an overall consistency not just with this site, but with all affiliated sites.

The car navigation area that is present near the bottom portion of the billboard is a very important part of this website. It holds the main information pertaining to the product that this site was designed to promote, the vehicles. As you scroll over the names, the windows pictured pop up, taking up a significant amount of billboard space. That goes to show the importance of the information it holds.

What really makes these so nice and easy to keep in mind is not only the snap shots of the vehicle present within, but the layout of the buttons is the same across the board. What I really enjoy, being a car enthusiast myself, is that critical information is listed in an easy to read manner. I am told the size and power of the engine, as well as the msrp and a few options. Then, if you want additional information if what you read interests you, you can easily get to a page all about that specific vehicle.

The one other thing I like about this setup, is that within the buttons, beyond the different vehicle pictured, each vehicle has a specific color used to help differentiate it from the other vehicles.

Navigation Clarity

Color Coding

As I just spoke of, the colors for each vehicle listed on the main page are different. The example I have used here is for the Rabbit. On the main page, as well as the page devoted specifically to the Rabbit, green is used to help unify not only the car from one page to the next, but to unify the site as a whole. It becomes obvious that whoever had a hand in the design of the main page also had a hand in the about pages. It is a great way to translate element or carry them over to the different internal pages of a site. Plus, this gives that extra bit of variety to keep things interesting at the same time that it makes it all similar.