Wireframing and design short course
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Wireframing and design short course

on

  • 484 views

 

Statistics

Views

Total Views
484
Views on SlideShare
461
Embed Views
23

Actions

Likes
0
Downloads
5
Comments
0

1 Embed 23

http://carishurd.com 23

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Wireframing and design short course Presentation Transcript

  • 1. INFORMATION ARCHITECTURE MEETS WEBDESIGNInstructors: Robert and Caris
  • 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 site’s 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 it’stime 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 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. 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: can’t share withteammates via web very easily, issueswith interactions are harder to discernwhen not in an interactiveenvironment.Tool used: Paper and pencil
  • 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. One solution…Tool 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 solution…Tool used: Balsamiq
  • 31. Resources•  More web tools:http://mashable.com/2010/07/15/wireframing-tools/