LESSON 4: Information Architecture Tutorial 

By Group 4

Organizational Metaphors:

Functional vs VisualMetaphors

Functional metaphorsFunctional metaphors relate tasks you can do on the site with tasks you can do in another environment. Photoshop, a graphics program, relies on a lot of functional metaphors:You can figuratively “cut,” “copy,” and “paste” graphics on a computer – as though you were using real-world scissors and glue.

Cut

Paste

COPY

Visual metaphorsVisual metaphors are based on common graphic elements familiar to most people in our culture. If you are designing a music site that allows users to play songs, you might want to use the traditional “start,” “stop,” and “pause” icons found on CD players everywhere.

Set it in Stone 

-Create a text-based, hierarchical map of the site called “site structure” listing.  -The major sections you decided earlier are the “roots” of the site structure listing. 

Here's How:  A) Fit them to your rationale or metaphor. B) Map out the organization of each section with items from content inventory.C) Indent lower levels and repeat the whole process a few times.

Design Document

Architectural Blueprints

-Visual representations of the site structure. -shows how elements of the site are grouped and how they link or relate to one another. 

Defining Navigations

List of Navigations

• Global Navigationso Home pageo About pageo Contact pageo Etc…

• Local Navigationso List of linkso Section of articleso Etc…

Design Document

Design Document

Site Structure

-Necessary for a website to function-Evolved and easy to use-Easier to define a navigation system-Designing page layouts and templates becomes easier-Metaphors

Site Structure Listing

Design Document

Architectural Blueprints

Global and Local Navigation Schemes

-Nav Bar-Global and Local Schemes

Shelly Chen Samuel CuaStephanie LopezManal BejaouiSkye MillerChris Mitchell

Source: http://www.webmonkey.com/2010/02/Information_Architecture_Tutorial_-_Lesson_4