EXAMPLES OF SITE DIAGRAMS |
 |
| |
|
| |
FRUITS |
|
VEGETABLES |
|
CARBOHIDRATES |
|
PROTEIN |
|
RECEPIES |
|
| |
|
|
|
|
|
| |
|
Apple |
|
|
Zucchini |
|
|
Pasta |
|
|
Poultry |
|
Chicken pikata |
|
| |
|
Peach |
|
|
Lettuce |
|
|
Grains |
|
|
Fish |
|
Fruit oatmeal |
|
| |
|
Banana |
|
|
Cucumber |
|
|
|
|
|
Eggs |
|
|
|
| |
|
Pear |
|
|
|
|
|
|
|
|
Dairy |
|
|
|
| |
|
Pineapple |
|
|
|
|
|
|
|
|
Red meat |
|
|
|
|
|
|
In this site diagram about the food pyramid, we can see 5 sections: Fruits, Vegetables, Carbohydrates, Protein AND Recipes.
The Main Navigation should ALWAYS be visible, and always placed on the same exact location on each page (Site-consistency) |
|
| |
|
| Each section has a number of sub-sections (you see them listed in columns underneath each section name). |
|
| |
|
| You can choose to have always the subsections visible (Up), or to see them when you click on the section name (down) |
|
| |
|
| |
FRUITS |
|
VEGETABLES |
|
CARBOHIDRATES |
|
PROTEIN |
|
RECEPIES |
|
| |
|
|
|
|
|
| |
|
|
|
|
|
|
|
|
|
|
Poultry |
|
|
|
| |
|
|
|
|
|
|
|
|
|
|
Fish |
|
|
|
| |
|
|
|
|
|
|
|
|
|
|
Eggs |
|
|
|
| |
|
|
|
|
|
|
|
|
|
|
Dairy |
|
|
|
| |
|
|
|
|
|
|
|
|
|
|
Red meat
|
|
|
|
|
|
|
| |
|
| When you choose that the user will have to click on a section-name in order to see the sub-sections, is a good idea to design a way of highlighting the section you are in (with a more saturated yellow in this case). |
|
| |
|
| Even if you decide to have all the subsection-names visible at every time (with the loss of real-state that this means), you should device a way of letting the user know which page he/she is at, without having to look at the content. |
|
|
|
| |
|
| As you see, the Navigation should act, at every moment, as a MAP of the site that orients the user and facilitates the navigation. |
|
| |
|
| Once you have decided on the content and structure that the content is going to follow, you will design the functionality and build up the navigation. |
|
| |
|
The next example shows a similar content built as an interactive application with Flash.
As you see, the Main navigation has been placed vertically and the subsections are displayed also vertically through a pull-down menu.
The mini-site was NOT developed through html, but through flash authoring (with Adobe Flash).
What you see is 1 flash movie.
Flash movies, can be displayed in web pages, and there is a short piece of code that <embeds> the whole flash movie in the html page. |
|
| |
|
|
|
| |
|