Wireframing and design short course

Embed Size (px)



Text of Wireframing and design short course


2. Where IT Lab Bootcamp fits in the designprocess 3. Information ArchitectureInformation architecture (IA) isthe art of expressing a modelor concept of information usedin activities that require explicitdetails of complex systems.-Wikipedia 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. 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 sites taxonomy.Yahoo! home page-- November, 1998 6. What does IA look like?Designers use diagrams to visualize different snapshots ofthe information environment.Some of the more common include . . . . 7. Concept modelsConcept model mapping out commercial elements of a website 8. FlowchartsBacon Flow Chart from clusterflock.org 9. Site MapsSite map of the Research section of the Victoria University Library homepage 10. Wireframes 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. 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. 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. Site Map Example: Portfolio 15. Site Map Example: PortfolioSite map for Rob Yurksaitis Portfolio 16. Site Map Example: Portfolio 17. Site Map Example: PortfolioSite map for L. Warren Douglas Portfolio 18. Site Map Example: Sharepoint intranetTop-level site map for a Sharepoint intranet 19. WireframingWith the design document and a basic site structure itstime to wireframe out the site.which leads us to the second part of this presentation! 20. Wireframes Definition (via wikipedia): visual guide that represents theskeletal framework of a website. Depicts page layout orarrangement of websites 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. 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. Wireframe ExamplesTool used: Balsamiq Tool used: Gliffy.com 23. Wireframe ExamplesTool used: Powerpoint Tool used: Adobe Illustrator 24. Wireframe ExamplesTool used: OmniGraffle (Mac only) Tool used: Visio (PC only) 25. Low Fidelity vs. High FidelityTool used: OmniGraffle 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: cant share withteammates via web very easily, issueswith interactions are harder to discernwhen not in an interactiveenvironment.Tool used: Paper and pencil 27. Example problemLets work this one out together!Were 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. One solutionTool used: Balsamiq 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. One solutionTool used: Balsamiq 31. Resources More web tools:http://mashable.com/2010/07/15/wireframing-tools/