A quick and dirty overview of wireframing, its use in website design and relationship with information architecture. Big plug for Balsamiq Mockups

1. Wireframing!
Useful tools and information
architecture!

2. Wireframing!
“A website wireframe is a basic
visual guide used in interface
design to suggest the structure of a
website and relationships between
its pages.”!
(Wikipedia) !

3. Wireframe Benefits!
• Demonstrates a site concept quickly, allowing
stakeholders to react to content placement and
rendering!
• Allows for usability testing early in the project
lifecycle!
• Teamwork and project communication:!
• Can provide guidance to visual designers with
respect to information priorities!
• Can facilitate collaboration between design team
and information architects!

4. Example!
Image from http://jlrinteractive.com !

5. When to use!
• Complex projects, with lots of interaction
or information classification!
• Early in the design (before preparing
comps, or passing to a developer)!
• If the UI is not understood during project
discovery!

6. When ʻnotʼ to use! (Be
sneaky
instead)
• If the stakeholders/review panel are
expecting full graphical mockups!
• If the ʻclientʼ is not willing to be
educated in IA/wireframes!
• Users are not involved in the site
design process!
• Smaller, simple projects!

7. Tools!
Professional Applications:!
• Visio (PC only)!
• OmniGraffle (Mac only)!
• InDesign!
Pen and paper!!

8. Simple Choice!
• Balsamiq Mockups – can export to HTML via
Napkee. AIR application, and online version soon.!
• Looks like a sketch – so isnʼt mistaken for
graphical mockup!
• Quick & easy!

9. Other Resources!
• Wireframes Magazine wireframes.linowski.ca!
• Yahoo! Design Pattern Library
developer.yahoo.com/ypatterns!
• Smashing Magazine
www.smashingmagazine.com/2009/09/01/35-excellent-
wireframing-resources!
• Boxes and Arrows (IA focus) boxesandarrows.com!