Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
Information Architecture
Information <ul><li>The communication or reception of knowledge or intelligence </li></ul><ul><ul><li>Text  </li></ul></ul...
Architecture <ul><li>The art or science of building   </li></ul><ul><ul><li>Design </li></ul></ul><ul><ul><li>Structure </...
Building Blueprint Bedroom Sleeping Living Room Relaxing Den Books Kitchen Cooking Dining Eating Garage Storage
Website Blueprint Services Contact Products Main Staff About
Levels of Information Architecture <ul><li>The Internet </li></ul><ul><li>Websites </li></ul><ul><li>Site sections </li></...
Page Level Information Architecture <ul><li>HTML title and filename </li></ul><ul><li>Description (metadata) </li></ul><ul...
IA Deliverables <ul><li>Page Flow Diagram </li></ul><ul><ul><li>Interaction diagram </li></ul></ul><ul><ul><li>Flow chart ...
Page Flow Diagram <ul><li>Define navigation </li></ul><ul><li>Define structure </li></ul><ul><li>Visualize page relationsh...
Horizontal format <ul><li>Used to describe interactive sites </li></ul>Services Contact Products Main Staff About
Horizontal format <ul><li>Used to describe interactive sites </li></ul>Services Contact Products Main Staff About History ...
Vertical format <ul><li>Used to describe step by step flows </li></ul>Return Date Payment Departure Date Choose Flights Fr...
Boxes (symbols) Decision External Process Output (print) Database Jump Page Page Page Page Page Stack Page Group Page Page...
<ul><li>Double arrow points – two way link </li></ul><ul><li>Single arrow point – one way link </li></ul><ul><li>Dotted li...
Wire Frame Diagram <ul><li>Paper prototype </li></ul><ul><li>Mockup </li></ul><ul><li>Page script </li></ul>
Tools <ul><li>Visio </li></ul><ul><li>OmniGraffle </li></ul><ul><li>PowerPoint </li></ul><ul><li>Pencil and Paper </li></ul>
Questions?
Web Head Processes
Prochain SlideShare
Chargement dans…5
×
Prochain SlideShare
Information Architecture & UI Design
Suivant
Télécharger pour lire hors ligne et voir en mode plein écran

5

Partager

Télécharger pour lire hors ligne

What is Information Architecture?

Télécharger pour lire hors ligne

A presentation on the basics of Information Architecture including my IA Pyramid concept.

Livres associés

Gratuit avec un essai de 30 jours de Scribd

Tout voir

What is Information Architecture?

  1. 1. Information Architecture
  2. 2. Information <ul><li>The communication or reception of knowledge or intelligence </li></ul><ul><ul><li>Text </li></ul></ul><ul><ul><li>Images </li></ul></ul><ul><ul><li>Music </li></ul></ul><ul><ul><li>Video </li></ul></ul>
  3. 3. Architecture <ul><li>The art or science of building </li></ul><ul><ul><li>Design </li></ul></ul><ul><ul><li>Structure </li></ul></ul><ul><ul><li>Space </li></ul></ul><ul><ul><li>Function </li></ul></ul>
  4. 4. Building Blueprint Bedroom Sleeping Living Room Relaxing Den Books Kitchen Cooking Dining Eating Garage Storage
  5. 5. Website Blueprint Services Contact Products Main Staff About
  6. 6. Levels of Information Architecture <ul><li>The Internet </li></ul><ul><li>Websites </li></ul><ul><li>Site sections </li></ul><ul><li>Section page groups </li></ul><ul><li>Pages </li></ul><ul><li>Page elements </li></ul><ul><li>Paragraphs </li></ul>
  7. 7. Page Level Information Architecture <ul><li>HTML title and filename </li></ul><ul><li>Description (metadata) </li></ul><ul><li>Title on the page </li></ul><ul><li>Subsections </li></ul><ul><li>Paragraphs </li></ul><ul><li>Sentences </li></ul><ul><li>Words/Keywords (metadata) </li></ul>
  8. 8. IA Deliverables <ul><li>Page Flow Diagram </li></ul><ul><ul><li>Interaction diagram </li></ul></ul><ul><ul><li>Flow chart </li></ul></ul><ul><li>Wireframe </li></ul><ul><ul><li>Mockup </li></ul></ul><ul><ul><li>Paper Prototype </li></ul></ul>
  9. 9. Page Flow Diagram <ul><li>Define navigation </li></ul><ul><li>Define structure </li></ul><ul><li>Visualize page relationships </li></ul><ul><li>Define site scope </li></ul>
  10. 10. Horizontal format <ul><li>Used to describe interactive sites </li></ul>Services Contact Products Main Staff About
  11. 11. Horizontal format <ul><li>Used to describe interactive sites </li></ul>Services Contact Products Main Staff About History Mission
  12. 12. Vertical format <ul><li>Used to describe step by step flows </li></ul>Return Date Payment Departure Date Choose Flights From/To City Airline Reservation
  13. 13. Boxes (symbols) Decision External Process Output (print) Database Jump Page Page Page Page Page Stack Page Group Page Page Page
  14. 14. <ul><li>Double arrow points – two way link </li></ul><ul><li>Single arrow point – one way link </li></ul><ul><li>Dotted lines – anything different than a standard link </li></ul>Arrows (connectors)
  15. 15. Wire Frame Diagram <ul><li>Paper prototype </li></ul><ul><li>Mockup </li></ul><ul><li>Page script </li></ul>
  16. 16. Tools <ul><li>Visio </li></ul><ul><li>OmniGraffle </li></ul><ul><li>PowerPoint </li></ul><ul><li>Pencil and Paper </li></ul>
  17. 17. Questions?
  18. 18. Web Head Processes
  • arqadrianlevy

    Jun. 19, 2009
  • pealmasa

    Mar. 19, 2009
  • Romouz

    Oct. 8, 2008
  • Jim10

    Sep. 25, 2008
  • nnoakes

    Nov. 24, 2007

A presentation on the basics of Information Architecture including my IA Pyramid concept.

Vues

Nombre de vues

2 337

Sur Slideshare

0

À partir des intégrations

0

Nombre d'intégrations

49

Actions

Téléchargements

187

Partages

0

Commentaires

0

Mentions J'aime

5

×