1. Information Architecture
Tutorial- Lesson 5

2. Visual Design
 Main purpose is to provide users with a sense of
place. (Where am I on this site? What pages
have I been to? Where do I need to go? Why am
I even on this site?)
 The goal of this lesson is to take the site’s
structure and map it into visual design.

4. Layout Grids
 Contents that describe web pages and defines
structure and organization of the site:
 List all possible page types
 Have several different layouts and styles
 Create a rectangle, then block out elements of
design: branding, advertising and sponsorship,
navigation, page titles, header graphics, and
footers including copyright.

5. Principles of the Grid
 Branding- Informs
users that they are
still on the site,
usually the upper-left
corner.
 Advertising and
Sponsorship- Banners
(Where does it go?
On each page?
Logos?)
 Navigation- Must be
consistent on every
page

7. Sketches don’t necessarily need to represent
structure or organization.
*all images are from google

8. Already of design sketches for client approval
*all images are from google

9. Design Sketches
Establish a look and feel for the website
*all images are from google

10. Need to know the sizes of all the graphic files
JPEG - Compressed Images
PNG - Transparency Option
GIF - Animation
*all images are from google

11. Create mock-up
based on sketches>>>

14. TADDAA!!!!

15. Design
Document
Document the Visual Design of your site

16. • Layout Grids
•Diagrams
•Design Sketches

17. •pictures of page mock-ups
•snapshots from web-based prototype

18. Useful when constructing the
site: adding or subtracting
content while revising the site

19. http://www.webmonkey.com/2010/02/Information_Architecture_Tutorial_-_Lesson_5
Marissa Ruiz-Urrutia
Jennifer Cao
Dave Bermudez
Karen Marshall
Hugo Diaz