Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Blue print


Published on

  • Be the first to comment

  • Be the first to like this

Blue print

  1. 1. A Blueprint for Successful Web Sites Information Architecture & Web Design Web 2003 - June 18, 2003 Beth Bailey Kim Eke Elizabeth Pyatt
  2. 2. IA & Web Design <ul><li>IA Overview </li></ul><ul><li>Design Document </li></ul><ul><li>Activity </li></ul><ul><li>IA Process: Next steps </li></ul><ul><li>Your next steps </li></ul>Today’s presentation
  3. 3. What makes a good site? <ul><li>Or, what makes a bad site? </li></ul>IA Overview
  4. 4. IA: What it is <ul><li>The blueprint of the site/project upon which all other aspects are built </li></ul><ul><ul><li>Project scope </li></ul></ul><ul><ul><li>Goals, mission, vision </li></ul></ul><ul><ul><li>Content and functionality </li></ul></ul><ul><ul><li>Structure </li></ul></ul><ul><ul><li>Navigation and interface </li></ul></ul><ul><ul><li>Interaction </li></ul></ul><ul><ul><li>Visual design </li></ul></ul>IA Overview
  5. 5. IA: What it isn’t <ul><li>IT’S NOT THE SAME AS: </li></ul><ul><li>Usability </li></ul><ul><li>Accessibility </li></ul><ul><li>Web Design </li></ul>IA Overview
  6. 6. The sum of its parts… <ul><li>Before you begin take time to: </li></ul><ul><ul><li>Identify individual components or pieces of information </li></ul></ul><ul><ul><li>Consider the nature of info (static v. dynamic) </li></ul></ul><ul><ul><li>Conceptualize the whole </li></ul></ul><ul><ul><li>Anticipate future growth </li></ul></ul>IA Overview
  7. 7. Mapping information <ul><li>Concept maps </li></ul><ul><li>Outlines </li></ul><ul><li>Organizational charts </li></ul><ul><li>Spreadsheets </li></ul><ul><li>Whatever works best for your brain… </li></ul>IA Overview
  8. 8. What is it good for? <ul><li>Absolutely everything! </li></ul>Design Document
  9. 9. Overview <ul><li>Physical documents in which planning information is recorded </li></ul><ul><li>Essential in the entire process </li></ul><ul><li>Each stage builds on the prior </li></ul><ul><li>Can refer back to them at any time in the project </li></ul>Design Document
  10. 10. Allows for… <ul><li>Walk through of scenarios </li></ul><ul><li>Opportunity to view the site in action prior to programming </li></ul><ul><li>Collaboration tool when development does begin </li></ul>Design Document
  11. 11. The Document <ul><li>Site Goals </li></ul><ul><li>Audience </li></ul><ul><li>Scenarios </li></ul><ul><li>Competitive Analysis </li></ul>Design Document
  12. 12. The Document (cont) <ul><li>Content and Functional Requirements </li></ul><ul><li>Site Structure </li></ul><ul><li>Layout Grids </li></ul><ul><li>Page Mockups </li></ul>Design Document
  13. 13. Part 1: Mapping Info (10 min) <ul><li>Read “meeting notes” from scenario </li></ul><ul><li>Identify all possible information to </li></ul><ul><ul><li>Meet client’s goals & needs </li></ul></ul><ul><ul><li>Consider nature of info </li></ul></ul><ul><ul><li>Consider future growth of site </li></ul></ul>Activity
  14. 14. Part 2: Organizing Info (10 min) <ul><li>Group information (categories) </li></ul><ul><li>Consider all possible labels for info and select best </li></ul><ul><li>Create an outline or table to identify your main categories </li></ul><ul><li>List the information included in each category </li></ul>Activity
  15. 15. Part 3: Compare <ul><li>In small groups, compare </li></ul><ul><ul><li>Categories </li></ul></ul><ul><ul><li>Overall organization </li></ul></ul><ul><ul><li>Types of info included or not </li></ul></ul>Activity
  16. 16. Debriefing (So what?) <ul><li>Organizing & labeling info is difficult </li></ul><ul><ul><li>Label interpretations vary </li></ul></ul><ul><ul><li>Future growth unknown </li></ul></ul><ul><ul><li>Designing a system </li></ul></ul><ul><li>And you still don’t have a clue about what the site looks like </li></ul>Activity
  17. 17. Life “after” documentation <ul><li>Navigation systems </li></ul><ul><li>Screen design </li></ul><ul><li>Prototyping </li></ul><ul><ul><li>Paper, web, graphics </li></ul></ul><ul><li>Present Design Doc & prototype(s) to client </li></ul>IA Process: Next Steps
  18. 18. Your thirst for knowledge <ul><li>IA resources </li></ul><ul><li>Usability & user testing </li></ul><ul><li>Accessibility </li></ul>Your next steps
  19. 19. IA is the blueprint… <ul><li>Broad & growing field </li></ul><ul><li>Design Doc is small piece </li></ul><ul><li>More research now </li></ul><ul><li>Good IA contributes to usability </li></ul><ul><li>Use your knowledge & creativity for good… not evil! </li></ul>Summary
  20. 20. Questions??