WEB AUTHORING. MAT 108

Alejandra Jarabo
Media Arts & Technologies Division.sbcc

Web design.
TO NEXT PAGE

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.  
                             
FRUITS VEGETABLES CARBOHIDRATES PROTEIN RECEPIES  
  Orange   Celery   Bread   Read meat Cesar salad  
    Apple     Zucchini  
Pasta     Poultry   Chicken pikata  
    Peach     Lettuce     Grains     Fish   Fruit oatmeal  
    Banana     Cucumber           Eggs      
    Pear                 Dairy      
    Pineapple                        
 
   
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.