• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Information architecture tutorial  lesson 5
 

Information architecture tutorial lesson 5

on

  • 403 views

 

Statistics

Views

Total Views
403
Views on SlideShare
403
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