How Wireframes Can Save Your Life

Wireframes.

For some designers, they are as essential as oxygen; for others, they’re something to look forward to – you know, when there’s more time; and then there are those who’ve never even heard of ‘em.  Well, if you fall into the either of the last two groups, take a nice, long, deep breath. … Felt good right? Yeah, wireframes are kind of like that. Simply put, wireframes are:

• An extremely basic representation of a website’s interface and the components that comprise it
• Usually in black and white, or otherwise monochromatic, to preserve visual simplicity
• As plain or complex as you need them to be to get the point across
• An excellent talking point for clients as you segue into design mocks

If you haven’t adopted wireframes into your process yet – don’t worry, you’re definitely not alone.  A great many designers out there (myself included, until very recently) have not yet discovered the extreme utility of such a simple technique.

The Design Process

In a typical design process, wireframes would come right after, or sometimes in place of, the sketching phase.  While many pencil and paper purists claim a good sketch is the only place to start, going straight to the diagramming software might be the most efficient use of your time – especially if your following relatively standard UI design patterns.

For example, if your laying out the interface for a feature rich application, the controls and information displayed will naturally tend to break down into a basic grid, with clusters of related information. And that might be your wireframe, you could stop there!

Simplifying the design elements can help to put the entire user process into perspective, allowing you to capture a clear overview of how a user will move through and interact with the website.  At this point, you may find it helpful to whip up some wireframes of similar or competitive websites, allowing you to compare design patterns and analyze the strengths and weaknesses of both layouts.

Not only does this level of simplicity make it easier for developers to understand how users should interact within the system, but it gives your client a clear outline of their site that can quickly and easily be revised in an iterative manner as you receive feedback or as new features require. Wireframes can also make it easier for your clients to get an idea of how the final design will look and allow them to provide feedback ahead of time, saving you loads of work making minor adjustments or revamping for major changes.

The Benefits

• Streamline your process
• Improve client relationships
• Promote designer-developer interaction
• Increase overall usability

Everyone can understand wireframes.  With very little explanation needed, you can kick off an invaluable dialog about how certain features should work, where the user would think to go next, how much content can safely fit on the page, etc.  Sometimes clients, developers, and even fellow designers don’t operate within quite the same vocabulary that you do, wireframes avoid linguistic confusion and instead, simply express the concept in the most palpable fashion – visually.

Wireframes, as part of the initial discovery phase of a project, can get your clients involved from the very inception.  As a two way communication tool, wireframes can facilitate a better understanding between you and your clients.  When they participate in the development and feel connected to development of the project, it is much easier to build trust in your work and keep the lines of communication open.

The scalability of wireframes is also ideal for client presentations (more on that later) because you can quickly (and easily) make simple changes to the UI.  This can be crucial when working with a client to optimize for usability. Being able to sit down with a client and actively modify a wireframe while they submit feedback, can be immensely helpful for both you and your clients.  And if you’re presenting a printed version (remember paper?) of the wireframes, those big gray boxes are just perfect for making revision notes, aren’t they?

Tools of the Trade

Wireframes often start as a simple sketch but can quickly transfer to a digital medium.  Fortunately, there is a vast array of software options designed specifically for diagramming and wireframing.  Or, if you prefer to stick with the software you already know, Adobe Illustrator might be your tool of choice.  While some of the software options out there may feature an abundance of pre-packaged components, like HTML form elements, graphs, etc., for most designs the simplicity and flexibility available in Adobe Illustrator is more than enough to create wireframes quickly and easily.

Here are just a handful of resources to help expand your understanding of wireframing and how it can help your design and communication process

Website Wireframes on Wikipedia

Using wireframes to streamline your development process

Tips for a better wireframe

Building a website wireframe in Illustrator

Do you use wireframing as part of your communication and design process?

Here’s what some denizens of the twitterverse had to say:

@lisakathryn We could not build sites without wireframes. They reduce confusion w/ client & developers! My fav part of the process!

@mikecterrara I love the wireframe stage in design sessions..forces me to open my time capsule and grab a pen

@dscoleman Wireframe heaven with Omnigraffle + Konigi addons. I’ll always draw first but these tools are great help.

@deryck_neuseed For wireframing I use a 8.5 x 11 notepad, I always draw before touch Photoshop.

Does your creative firm offer wireframing as part of their process?  Will you ask them to in the future?