Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Presentation 2

241 Aufrufe

Veröffentlicht am

Veröffentlicht in: Technologie, Bildung
  • Loggen Sie sich ein, um Kommentare anzuzeigen.

  • Gehören Sie zu den Ersten, denen das gefällt!

Presentation 2

  1. 1. LESSON 4:  Information Architecture Tutorial  By Group 4
  2. 7. Organizational Metaphors:
  3. 8. Functional vs Visual Metaphors
  4. 9. Functional metaphors Functional 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
  5. 10. Visual metaphors Visual 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.
  6. 11. 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.
  7. 12. Design Document
  8. 13. 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.  
  9. 14. Defining Navigations
  10. 16. <ul><li>List of Navigations </li></ul><ul><ul><li>Global Navigations </li></ul></ul><ul><ul><ul><li>Home page </li></ul></ul></ul><ul><ul><ul><li>About page </li></ul></ul></ul><ul><ul><ul><li>Contact page </li></ul></ul></ul><ul><ul><ul><li>Etc… </li></ul></ul></ul><ul><ul><li>Local Navigations </li></ul></ul><ul><ul><ul><li>List of links </li></ul></ul></ul><ul><ul><ul><li>Section of articles </li></ul></ul></ul><ul><ul><ul><li>Etc… </li></ul></ul></ul>
  11. 17. Design Document
  12. 18. 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
  13. 19. Design Document Architectural Blueprints Global and Local Navigation Schemes -Nav Bar -Global and Local Schemes
  14. 20. Shelly Chen Samuel Cua Stephanie Lopez Manal Bejaoui Skye Miller Chris Mitchell Source:  http://www.webmonkey.com/2010/02/Information_Architecture_Tutorial_-_Lesson_4