Podcast: Play in new window | Download

Help clear your vision by using Wireframing.

Geek Tool

• 01:16 – Thera-Band Exercise Balls – SDS Anti-Burst Exercise Balls
  • Isokinetics Blaster Air Pump

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