Useful tools and information
“A website wireframe is a basic
visual guide used in interface
design to suggest the structure of a
website and relationships between
• Demonstrates a site concept quickly, allowing
stakeholders to react to content placement and
• Allows for usability testing early in the project
• Teamwork and project communication:!
• Can provide guidance to visual designers with
respect to information priorities!
• Can facilitate collaboration between design team
and information architects!
Image from http://jlrinteractive.com !
When to use!
• Complex projects, with lots of interaction
or information classiﬁcation!
• Early in the design (before preparing
comps, or passing to a developer)!
• If the UI is not understood during project
When ʻnotʼ to use! (Be
• 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
• Smaller, simple projects!
• Visio (PC only)!
• OmniGrafﬂe (Mac only)!
Pen and paper!!
• Balsamiq Mockups – can export to HTML via
Napkee. AIR application, and online version soon.!
• Looks like a sketch – so isnʼt mistaken for
• Quick & easy!