Information architecture tutorial lesson 5Presentation Transcript
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? 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.
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.
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
Sketches don’t necessarily need to representstructure or organization. *all images are from google
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 Option GIF - Animation *all images are from google
Create mock-upbased on sketches>>>
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 Jennifer Cao Dave Bermudez Karen Marshall Hugo Diaz