Information Architecture    Tutorial- Lesson 5
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...
Layout Grids Contents that describe web pages and defines  structure and organization of the site: List all possible pag...
Principles of the Grid                   Branding- Informs                    users that they are                    stil...
Sketches don’t necessarily need to representstructure or organization.                                      *all images ar...
Already of design sketches for client approval                                *all images are from google
Design Sketches   Establish a look and feel for the website                                   *all images are from google
Need to know the sizes of all the graphic files  JPEG - Compressed Images                             PNG - Transparency O...
Create mock-upbased on sketches>>>
TADDAA!!!!
Design         DocumentDocument the Visual Design of your site
• Layout Grids•Diagrams•Design Sketches
•pictures of page mock-ups•snapshots from web-based prototype
Useful when constructing the  site: adding or subtractingcontent while revising the site
http://www.webmonkey.com/2010/02/Information_Architecture_Tutorial_-_Lesson_5                    Marissa Ruiz-Urrutia     ...
Information architecture tutorial  lesson 5
Information architecture tutorial  lesson 5
Information architecture tutorial  lesson 5
Information architecture tutorial  lesson 5
Information architecture tutorial  lesson 5
Upcoming SlideShare
Loading in …5
×

Information architecture tutorial lesson 5

461 views
384 views

Published on

Published in: Design, Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
461
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Information architecture tutorial lesson 5

  1. 1. Information Architecture Tutorial- Lesson 5
  2. 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.
  3. 3. 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.
  4. 4. 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
  5. 5. Sketches don’t necessarily need to representstructure or organization. *all images are from google
  6. 6. Already of design sketches for client approval *all images are from google
  7. 7. Design Sketches Establish a look and feel for the website *all images are from google
  8. 8. Need to know the sizes of all the graphic files JPEG - Compressed Images PNG - Transparency Option GIF - Animation *all images are from google
  9. 9. Create mock-upbased on sketches>>>
  10. 10. TADDAA!!!!
  11. 11. Design DocumentDocument the Visual Design of your site
  12. 12. • Layout Grids•Diagrams•Design Sketches
  13. 13. •pictures of page mock-ups•snapshots from web-based prototype
  14. 14. Useful when constructing the site: adding or subtractingcontent while revising the site
  15. 15. http://www.webmonkey.com/2010/02/Information_Architecture_Tutorial_-_Lesson_5 Marissa Ruiz-Urrutia Jennifer Cao Dave Bermudez Karen Marshall Hugo Diaz

×