Feb 16 2010

Episode 56: Wireframing

Play

Help clear your vision by using Wireframing.

Geek Tool

Webapps

  • 04:58 - JumpChart - Collaborative site map and content preparation
  • 05:26 - Hot Gloo – The Online Wireframe Application

Topic

  • 07:37 – Wireframing
    • What is it?
      • A basic visual representation in interface design focusing on physical information layout
    • Why?
      • Allow for design variations while maintaining consistency
      • Develop global and secondary navigation areas
      • Ability to “try out” lots of layout choices without spending a tremendous amount of time developing the artwork for each one.
      • Provide areas for consistent utilities like search, notices
      • Frequently aid in exposing new features
      • Help flush out questions that nobody has thought about yet
      • Keeps a paper trail of design decisions
      • Getting clients to think about their site on a page level will help avoid changes later on.
      • If you skip this step clients will often focus on design rather than functionality and usability
      • Can be used again for creating your next design for that same site while keeping the physical layout consistent for your users
    • How?
    • Wire framing is most commonly done with paper
    • Start with a sitemap, then create wire frames for each of the major pages
    • Software
      • Visio
      • InDesign
      • Photoshop
      • OmniGraffle
      • Protoshare – Used by: Sony, BMG, SAP, 3M, Salesforce