Wireframing and design short course


Published on

Published in: Design, Business, Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Wireframing and design short course

  2. 2. Where IT Lab Bootcamp fits in the designprocess
  3. 3. “Information ArchitectureInformation architecture (IA) isthe art of expressing a modelor concept of information usedin activities that require explicitdetails of complex systems.-Wikipedia
  4. 4. What does that mean?IA is essentially about categorizing and organizinginformation.•  Like with libraries and archives, web environments needstructure to insure a user can find information easily andefficiently.•  A key element to practicing IA is visualizinginformation architectures in the form of diagrams.
  5. 5. What does IA look like?Early websites offered apretty explicit view of theirarchitecture.Home pages served asmaps, visibly groupingcategories with their sub-categories to revealthe site’s taxonomy.Yahoo! home page-- November, 1998
  6. 6. What does IA look like?Designers use diagrams to visualize different snapshots ofthe information environment.Some of the more common include . . . .
  7. 7. Concept modelsConcept model mapping out commercial elements of a website
  8. 8. FlowchartsBacon Flow Chart from clusterflock.org
  9. 9. Site MapsSite map of the Research section of the Victoria University Library homepage
  10. 10. Wireframes
  11. 11. IA in the web design processBefore you start designing you need to . . .•  Account for all of your content•  Document user and stakeholder needs•  Understand the technological parametersStep 1: Design research (or gatheringrequirements)
  12. 12. IA in the web design processAll of these details are organized in a design document.With these requirements, an IA can begin designing thestructure of the site.The design document is a combination of what and how.Step 1: Design research
  13. 13. IA in the web design process•  With the design document as a guide, visualize the webarchitecture through IA diagrams•  A key step is building a site map, or “a visualrepresentation of the relationships between differentpages on a web site.” –Brown, Communicating DesignStep 2: Generating design ideas
  14. 14. Site Map Example: Portfolio
  15. 15. Site Map Example: PortfolioSite map for Rob Yurksaitis’ Portfolio
  16. 16. Site Map Example: Portfolio
  17. 17. Site Map Example: PortfolioSite map for L. Warren Douglas’ Portfolio
  18. 18. Site Map Example: Sharepoint intranetTop-level site map for a Sharepoint intranet
  19. 19. WireframingWith the design document and a basic site structure it’stime to wireframe out the site.…which leads us to the second part of this presentation!
  20. 20. Wireframes•  Definition (via wikipedia): visual guide that represents theskeletal framework of a website. Depicts page layout orarrangement of website’s content, including interfaceelements and navigational systems and how they worktogether.•  Usually lacks style, color or graphics, since the main focuslies in functionality, behavior and priority of content.•  What a screen does, not what it looks like
  21. 21. Why wireframe?•  Wireframes connect information architecture to visualdesign•  Wireframes help you figure out how your site should workand relationships between the pages•  Wireframes allow you to rapidly prototype pages to trythings out before you commit to a design or layout
  22. 22. Wireframe ExamplesTool used: Balsamiq Tool used: Gliffy.com
  23. 23. Wireframe ExamplesTool used: Powerpoint Tool used: Adobe Illustrator
  24. 24. Wireframe ExamplesTool used: OmniGraffle (Mac only) Tool used: Visio (PC only)
  25. 25. Low Fidelity vs. High FidelityTool used: OmniGraffle
  26. 26. Wireframe ExamplesMany times paper (or whiteboard) isthe easiest, fastest and mostaccessible tool for wireframing.Advantages: fast, cheap, easy toiterate (use pencil, not pen!)Disadvantages: can’t share withteammates via web very easily, issueswith interactions are harder to discernwhen not in an interactiveenvironment.Tool used: Paper and pencil
  27. 27. Example problemLet’s work this one out together!We’re going to wireframe out what the homepage of yourportfolio website might look like, given the requirementsbelow:1.  You want to include the following links in your globalnavigation (which appears on every page of your site):•  Home•  Portfolio•  Resume•  Contact2.  You want your blog updates to be featured on thehomepage.3.  You have determined that you will install websitesearch functionality so that users can search throughyour site. Be sure that this function is included in yourwireframe!4.  You want your contact information (name, phone,email) and your photograph or logo to be prominenton the site.HomeResume Portfolio ContactItem 1Item 2Item 3
  28. 28. One solution…Tool used: Balsamiq
  29. 29. Example problemHomeResume Portfolio ContactItem 1Item 2Item 3Now try it on your own!On paper, wireframe out what the resume of yourportfolio website might look like, given the samerequirements:1.  You want to include the following links in yourglobal navigation (which appears on every pageof your site):•  Home•  Portfolio•  Resume•  Contact2.  You have determined that you will install websitesearch functionality so that users can searchthrough your site. Be sure that this function isincluded in your wireframe!3.  You want your contact information (name,mailing address, email) and your photograph orlogo to be prominent on the site.
  30. 30. One solution…Tool used: Balsamiq
  31. 31. Resources•  More web tools:http://mashable.com/2010/07/15/wireframing-tools/