Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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

527 views

Published on

Published in: Design, Technology, Education
  • Be the first to comment

  • Be the first to like this

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

×