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?

A designer’s greatest challenge isn’t necessarily in coming up with a good design, but in coming up with a good design that is different. When the client is expecting multiple design mock ups finding the balance between a design that is innovative and unique while also maintaining a high level of usability can feel like an uphill struggle. You really like how your first design came together and the temptation can be to borrow from and lean on those same strengths in your second mock.  This quickly turns the uphill struggle into a long fall down a slippery slope, and the next thing you know your two designs bear an uncanny similarity that is impossible to miss.  Ever find yourself in this situation?

Know your client

Try to get a solid grasp of your clients branding strategy and message (whether the client is able to give it to you or not) before you get too far into the design process.  Some clients invest more in defining their brand than others, but some research on your part of their market and competition can help you to grasp what they’re all about and what their expectations will be.  Once you’ve done your research, you can begin planning out your design strategy: for example, design one could focus on one aspect of their branding, while design two will focus on another, etc.  While planning out your strategy, ask yourself the following questions: can any part of their message be communicated through imagery?  Are there important pieces of information that need to be highlighted in the design?  Has the client made any specific design requests or suggested any similar websites that they’d like to draw inspiration from?

Start fresh

When working on multiple mocks for the same client, start with a new file each time.  Beginning a design by deconstructing a previous mock may seem like a good idea, but you’ll likely be leaning on the crutches of your previous design, which doesn’t usually allow for a unique vision.  You should always try to start fresh without any preconceptions.  Sure, you may want to reuse a couple of the original design elements (text from the primary navigation, for example) but make it a point to start with a fresh canvas whenever possible.

Get inspired

Sites like Smashing Magazine and Pattern Tap can be a valuable asset during the design process since they’re are constantly compiling galleries of the latest design trends and showcasing unique and creative designs.  The highly innovative nature of the designs means that most of the sites they showcase generally tend to be blogs and designer portfolios, but just because the site your working on is for a lawn mowing service doesn’t mean that they aren’t relevant!  Observe how they manipulate the ’standard’ layout idea and how that manipulation affects the site’s usability, how they use color and typography, how they arrange the page elements in the spacial plane, etc.  Bringing in an idea from an unrelated site and adapting it to fit within the needs of a completely different project can, if nothing else, give you a fresh insight that could lead to a break through in the design.

Take a break!

When you get to the point that you feel like you’re in a rut, your shoulders are starting to hunch, and you get that twitch in your eye, and it’s already long past time for a coffee (or tea!) break,  roll your head back and stare at the ceiling, touch your toes, take a quick walk outside, or do whatever it takes to get the blood flowing again.  This is one of the most common pieces of advice you can find on getting past a creative block, and for good reason!

Try a different tool

Some designers swear by their pen and paper rough drafts. For others, the idea of starting anywhere other than Photoshop is completely out of the question.  However, if you find yourself staring at the same Photoshop document for an extended period of time with the same vacant expression on your face, it might be time to change mediums.  Concordantly, if your sheet of paper just isn’t doing it for you, try hopping into Photoshop or Illustrator.  The change of setting and tools can free you from thinking within the confines of your usual tool set and give you fresh ideas on a new approach to the design.

What do you do when you find yourself in a rut?