Your SlideShare is downloading. ×
0
Wireframing and design short course
Wireframing and design short course
Wireframing and design short course
Wireframing and design short course
Wireframing and design short course
Wireframing and design short course
Wireframing and design short course
Wireframing and design short course
Wireframing and design short course
Wireframing and design short course
Wireframing and design short course
Wireframing and design short course
Wireframing and design short course
Wireframing and design short course
Wireframing and design short course
Wireframing and design short course
Wireframing and design short course
Wireframing and design short course
Wireframing and design short course
Wireframing and design short course
Wireframing and design short course
Wireframing and design short course
Wireframing and design short course
Wireframing and design short course
Wireframing and design short course
Wireframing and design short course
Wireframing and design short course
Wireframing and design short course
Wireframing and design short course
Wireframing and design short course
Wireframing and design short course
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Wireframing and design short course

362

Published on

Published in: Design, Business, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
362
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
7
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

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/

×