Visual Explanation: Visual Navigation

simply ben by ben huot

Screenshots of Website Navigation Components

An easy way to see how to navigate my website is to explain the basic components of it. The following pictures show how to use each of my website components for basic navigation. I am using Simply Ben as an example. The same concepts apply to the other websites, but with different logos and color themes.

Style Switcher

You only see this in Internet Explorer 6 and it doesn't work.

screenshot of theme switcher under the failsafe theme - not here anymore and doesn't work

screenshot of theme switcher under the advanced theme

Navigation Bar

The next major component of my website is the main navigation bar. This component is used to switch between my different website domains. The red circle is around the current website. You can click on the other icons to get to the other websites, which each have different color themes, different logos, and different content. Simply Ben has the free stuff section called Blank White and the Technical/Computer section. End of the Beginning has most the multimedia, including the music, photos, drawings, and animations. Ben Academic Fast Track has most of the books and the about section which includes my introduction and resume. Ben Labs is the website for things that I am working on that do not fit into the rest of the website yet.

screenshot of main navigation bar under the advanced theme

screenshot of main navigation bar under the failsafe theme

screenshot of main navigation bar under the mobile theme

Interactive Widget Navigation

The next major component of my website is the interactive widget navigation. This component is used to go to different parts of my website. It fades between different pictures that correspond to the different section of my website. If you have Flash enabled, the images will remain static, but you can flip through them.

screenshot of interactive widget navigation under the advanced theme

screenshot of interactive widget navigation under the failsafe theme

screenshot of interactive widget navigation under the mobile theme

Navigation Lists

The next major component of my website is the navigation lists. This component is used to go to different parts of my website. It consists of headings above and buttons below that take you to different parts of the website. The lists should be read from the right side first and then the left side. The logo for the website is usually on the top of the left side under the standard two column layout.

screenshot of navigation lists under the advanced theme

screenshot of navigation lists under the failsafe theme

screenshot of navigation lists under the mobile theme

Footer Navigation

At the bottom of all my webpages that glue together my content, there is a a footer navigation. This component is used to go to the front page of the current website or to my website technical/computer help section. It consists of a book and arrow with the words front page, which will take you to the front page on the left and on the right is displays a red octagon like a stop sign with a question mark over it, which will take you to the help section.

screenshot of footer navigation under the advanced theme

screenshot of footer navigation under the failsafe theme

screenshot of footer navigation under the mobile theme

footer