Information architecture tutorial  lesson 5
Upcoming SlideShare
Loading in...5
×
 

Information architecture tutorial lesson 5

on

  • 439 views

 

Statistics

Views

Total Views
439
Views on SlideShare
439
Embed Views
0

Actions

Likes
0
Downloads
5
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Information architecture tutorial  lesson 5 Information architecture tutorial lesson 5 Presentation 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>>>
  • 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 Jennifer Cao Dave Bermudez Karen Marshall Hugo Diaz