Interface Design
Navigation
Organizing, structuring and finding information
Navigation: Designing a persistent global navigation system for accessing content from any page
Browser restrictions, screen resolution, file formats (again), layout, web safe area, scrolling
Review 
Designer's Toolbox: Web Safe Area
Levels and hierarchies: Global, primary, secondary
Navigation Strategies: Lateral (cross-linking) vs. Vertical (drill-down), Linear (pagination, previous/next) vs. Non-linear (hyperlinking)
Affordances and Controls: Links, buttons, icons, and other visual cues to interaction behaviour
Review Design Meltdown and look for examples of various navigation strategies.
Grouping and Categories
Assignment 1
Create a page with links to 5 example sites and prepared to discuss them - identify type of sites, audience, navigation strategy
Example Site Types:
Educational - informative, about a topic. Subject or topic? Audience? Navigation elements?
Portfolio/Gallery - presentation showcasing creative work in a meaningful way. Type of work? Audience? Navigation elements?
Game - fun interactions, surprises, challenges. Game play or interactions? Audience? Navigation and/or controls and affordances?
Narrative - story telling. Topic or theme? Audience? Navigation elements?
Marketing - promoting a product, service, company. Audience? Navigation and transactional elements?
Other?
Sample Assignment Grid
You can use this table on your page if you like - don't forget to copy the styles
| Site Name | Type | Audience | Content | Navigation Elements |
| Amazon | Ecommerce - Online retail store | Consumers, shoppers | Various products, descriptions, recommendations, communities, customer prefrences and profile | Product categories, sub-categories, various pull-down menus and selectors, global footer, global customer account links. Many graphic icons. Pagination and sorting on search results pages. Linear purchasing transaction. |
Assignment 2
Create an information architecture diagram (site map, flowchart) for your project site.
Convert your infomation architecture document into a web graphics format (gif. jpg) and open it in Dreamweaver.
Create image maps for each "box" and make them link to the actual page on your Project Site.
See the example sitemap based on this site. Original Omnigraffle file
Assignment 3
Page anatomy - Identify each element of your pages, define each style that you have applied to them and create an external CSS file.
See the example page anatomy from a from this site.
Browse CSS Zen Garden to see how a lot of different designers create variations on the same page with the same content using different CSS files.
See the example style diagram from a typical page from the class site.