Group 4 presentation_information_architectur
-
Upload
schen25 -
Category
Technology
-
view
148 -
download
0
description
Transcript of Group 4 presentation_information_architectur
![Page 1: Group 4 presentation_information_architectur](https://reader035.fdocuments.in/reader035/viewer/2022070303/5496edb7b47959962d8b5f6a/html5/thumbnails/1.jpg)
LESSON 4: Information Architecture Tutorial
By Group 4
![Page 2: Group 4 presentation_information_architectur](https://reader035.fdocuments.in/reader035/viewer/2022070303/5496edb7b47959962d8b5f6a/html5/thumbnails/2.jpg)
![Page 3: Group 4 presentation_information_architectur](https://reader035.fdocuments.in/reader035/viewer/2022070303/5496edb7b47959962d8b5f6a/html5/thumbnails/3.jpg)
![Page 4: Group 4 presentation_information_architectur](https://reader035.fdocuments.in/reader035/viewer/2022070303/5496edb7b47959962d8b5f6a/html5/thumbnails/4.jpg)
![Page 5: Group 4 presentation_information_architectur](https://reader035.fdocuments.in/reader035/viewer/2022070303/5496edb7b47959962d8b5f6a/html5/thumbnails/5.jpg)
![Page 6: Group 4 presentation_information_architectur](https://reader035.fdocuments.in/reader035/viewer/2022070303/5496edb7b47959962d8b5f6a/html5/thumbnails/6.jpg)
![Page 7: Group 4 presentation_information_architectur](https://reader035.fdocuments.in/reader035/viewer/2022070303/5496edb7b47959962d8b5f6a/html5/thumbnails/7.jpg)
Organizational Metaphors:
![Page 8: Group 4 presentation_information_architectur](https://reader035.fdocuments.in/reader035/viewer/2022070303/5496edb7b47959962d8b5f6a/html5/thumbnails/8.jpg)
Functional vs VisualMetaphors
![Page 9: Group 4 presentation_information_architectur](https://reader035.fdocuments.in/reader035/viewer/2022070303/5496edb7b47959962d8b5f6a/html5/thumbnails/9.jpg)
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
![Page 10: Group 4 presentation_information_architectur](https://reader035.fdocuments.in/reader035/viewer/2022070303/5496edb7b47959962d8b5f6a/html5/thumbnails/10.jpg)
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.
![Page 11: Group 4 presentation_information_architectur](https://reader035.fdocuments.in/reader035/viewer/2022070303/5496edb7b47959962d8b5f6a/html5/thumbnails/11.jpg)
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.
![Page 12: Group 4 presentation_information_architectur](https://reader035.fdocuments.in/reader035/viewer/2022070303/5496edb7b47959962d8b5f6a/html5/thumbnails/12.jpg)
Design Document
![Page 13: Group 4 presentation_information_architectur](https://reader035.fdocuments.in/reader035/viewer/2022070303/5496edb7b47959962d8b5f6a/html5/thumbnails/13.jpg)
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.
![Page 14: Group 4 presentation_information_architectur](https://reader035.fdocuments.in/reader035/viewer/2022070303/5496edb7b47959962d8b5f6a/html5/thumbnails/14.jpg)
Defining Navigations
![Page 15: Group 4 presentation_information_architectur](https://reader035.fdocuments.in/reader035/viewer/2022070303/5496edb7b47959962d8b5f6a/html5/thumbnails/15.jpg)
![Page 16: Group 4 presentation_information_architectur](https://reader035.fdocuments.in/reader035/viewer/2022070303/5496edb7b47959962d8b5f6a/html5/thumbnails/16.jpg)
List of Navigations
• Global Navigationso Home pageo About pageo Contact pageo Etc…
• Local Navigationso List of linkso Section of articleso Etc…
![Page 17: Group 4 presentation_information_architectur](https://reader035.fdocuments.in/reader035/viewer/2022070303/5496edb7b47959962d8b5f6a/html5/thumbnails/17.jpg)
Design Document
![Page 18: Group 4 presentation_information_architectur](https://reader035.fdocuments.in/reader035/viewer/2022070303/5496edb7b47959962d8b5f6a/html5/thumbnails/18.jpg)
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
![Page 19: Group 4 presentation_information_architectur](https://reader035.fdocuments.in/reader035/viewer/2022070303/5496edb7b47959962d8b5f6a/html5/thumbnails/19.jpg)
Design Document
Architectural Blueprints
Global and Local Navigation Schemes
-Nav Bar-Global and Local Schemes
![Page 20: Group 4 presentation_information_architectur](https://reader035.fdocuments.in/reader035/viewer/2022070303/5496edb7b47959962d8b5f6a/html5/thumbnails/20.jpg)
Shelly Chen Samuel CuaStephanie LopezManal BejaouiSkye MillerChris Mitchell
Source: http://www.webmonkey.com/2010/02/Information_Architecture_Tutorial_-_Lesson_4