Wireframing!

Useful tools and information architecture!

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) !

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!

Example!

Image from http://jlrinteractive.com !

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!

When ʻnotʼ to use!

•  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!

(Be  sneaky  instead)  

Tools!Professional Applications:!•  Visio (PC only)!•  OmniGraffle (Mac only)!•  InDesign!

Pen and paper!!

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!

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!