Crash Course in Wireframing

4,394 views
4,118 views

Published on

Understand what web site wireframes are and why they’re used.

Published in: Technology, Design
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,394
On SlideShare
0
From Embeds
0
Number of Embeds
1,819
Actions
Shares
0
Downloads
42
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Crash Course in Wireframing

  1. 1. Crash Course in Wireframing by Marcel Moreau
  2. 2. The Web Processis usually something like this:
  3. 3. The Web Processis usually something like this:STRATEGY – research, competitive analysis, IA, wireframesDESIGN – styleguide audit, moodboarding, design compsDEVELOPMENT – code, integrate external systemsQA – browser testing, stress evaluations, performanceLAUNCH – site training, tying up any loose ends
  4. 4. The Web Processis usually something like this:STRATEGY – research, competitive analysis, IA, wireframesDESIGN – styleguide audit, moodboarding, design compsDEVELOPMENT – code, integrate external systemsQA – browser testing, stress evaluations, performanceLAUNCH – site training, tying up any loose ends
  5. 5. Wireframes are web siteblueprints, void of design.
  6. 6. Types of Wireframes Lo-Fidelity Hi-Fidelity
  7. 7. Acme Meat Co. NAVLo-Fidelity BANNERGreat for brainstormsBudget-friendlyGood flow tester MAIN SIDEBAR FOOTER
  8. 8. Hi-FidelityMimics final layoutcomplete withcontentFunctionality checkAnnotated deliverable
  9. 9. AnalogyBuilding a house“Do whatever you want.”
  10. 10. http://flic.kr/p/b9XcTX
  11. 11. AnalogyBuilding a houseDIMENSIONSNAVIGABILITYFUNCTIONALITYFLOWREAL WORLD INFORMATION
  12. 12. http://flic.kr/p/8vunZ2
  13. 13. Same ideaBuilding a web site“Do whatever you want.”
  14. 14. Same ideaBuilding a web siteHIERARCHYNAVIGABILITYFUNCTIONALITYLABELINGREAL WORLD CONTENT
  15. 15. Benefits of WireframingEFFICIENCYFOCUSSPARKTHOUGHTFULTEAM HELPERCONTENT
  16. 16. Example: Quaero Redesign
  17. 17. Redesign GoalsGenerate more leadsSimplify complex messagingAppear more like an agencyBe memorable
  18. 18. Tools to create wireframesSOFTWARE WEB APPS Mockingbird Balsamiq LumzyOmniGraffle Microsoft Visio Axure
  19. 19. My Setup + Konigi Stencil Set OmniGraffle
  20. 20. Thanks! @marcelmoreau

×