Got Wireframes?

I gave a presentation at a developer conference on creating wireframes to help with developing websites and web apps. Here’s a summary of my presentation:

A wireframe is a visual representation of a website or web app design

• They are relatively cheap to create
• Wireframes are ideal for experimenting with layout, flow and getting feedback
• It is less expensive to make changes to wireframes than code
• Today’s interactive wireframes accelerate the process — interactive shows the flow between screens, even for single page apps
• There is a difference between low fidelity and high fidelity wireframes — the first is easier to create/edit, the latter is easier for evaluators — both are useful
• There are many great tools available today for wireframing — both online and desktop tools
• Criteria for choosing: desired level of fidelity, interaction support, collaboration support, device layout support, number of built-in tools
• Many desktop tools lack interaction and collaboration support — InvisionApp allows wireframe creators to add those features

Some ideas I believe help in creating wireframes:

• It helps to do discovery first — who are your users, what do you want them to accomplish on your website or web app? and what would be the flow to accomplish that?
• Create master elements for things like headers, footers, sidebars, navigation, background — you only need to do them once and you can resuse them
• Create a library of components that you will use often — there are many free ones online
• Learn to use all of the built-in tools in your wireframing app to create the more common website and web app elements — like navigation, breadcrumbs, buttons, search boxes and more
• Group elements whenever possible — it makes them easy to move, easy to copy/paste — you can also ungroup them when you need to edit an individual element
• Use layers if the app supports it — use arrange items (bring to front, send to back) to simulate layers when your app doesn’t support it
• Tables can be useful to create all kinds of screen items — more than just tabular data
• Experiment with various layouts to find one that works best — do one for each use case
• Get feedback and update
• Make sure your designers — if you use them — have design leverage all of your wireframing work, so the design continues to follow function

In the presentation, I provided links to many of the wireframing vendors and online tools available to help create wireframes. You can download a PDF of the presentation here.