Crash Course in Wireframing

  • Published on
    21-Nov-2014

  • View
    3.299

  • Download
    4

Embed Size (px)

DESCRIPTION

Understand what web site wireframes are and why theyre used.

Transcript

  • 1. Crash Course in Wireframing by Marcel Moreau
  • 2. The Web Processis usually something like this:
  • 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. 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. Wireframes are web siteblueprints, void of design.
  • 6. Types of Wireframes Lo-Fidelity Hi-Fidelity
  • 7. Acme Meat Co. NAVLo-Fidelity BANNERGreat for brainstormsBudget-friendlyGood flow tester MAIN SIDEBAR FOOTER
  • 8. Hi-FidelityMimics final layoutcomplete withcontentFunctionality checkAnnotated deliverable
  • 9. AnalogyBuilding a houseDo whatever you want.
  • 10. http://flic.kr/p/b9XcTX
  • 11. AnalogyBuilding a houseDIMENSIONSNAVIGABILITYFUNCTIONALITYFLOWREAL WORLD INFORMATION
  • 12. http://flic.kr/p/8vunZ2
  • 13. Same ideaBuilding a web siteDo whatever you want.
  • 14. Same ideaBuilding a web siteHIERARCHYNAVIGABILITYFUNCTIONALITYLABELINGREAL WORLD CONTENT
  • 15. Benefits of WireframingEFFICIENCYFOCUSSPARKTHOUGHTFULTEAM HELPERCONTENT
  • 16. Example: Quaero Redesign
  • 17. Redesign GoalsGenerate more leadsSimplify complex messagingAppear more like an agencyBe memorable
  • 18. Tools to create wireframesSOFTWARE WEB APPS Mockingbird Balsamiq LumzyOmniGraffle Microsoft Visio Axure
  • 19. My Setup + Konigi Stencil Set OmniGraffle
  • 20. Thanks! @marcelmoreau