Blog

Wireframing Techniques for a Peaceful Development Process

Posted by in UX Design, Web Development

image of hand drawn wireframes

What exactly are wireframes? More or less you can think of them as the blueprints behind an interactive project.

I’ve seen cases where the wireframing is extensive and cases where wireframes have not been used at all. So, how important is it to make wireframes? Well, I have found over and over again that well thought out wireframing can truly make or break the outcome of a project.

screenshot of wireframe in Balsamiq
Wireframe image via Balsamiq http://www.balsamiq.com/

As technology progresses, it seems almost out of the question not to do some sort of wireframing and the tools and processes for creating them are incredibly wide and varied.  Before we get into discussing some options for creating wireframes, we need to first discuss who wireframes are for and what their purpose is.

First, let’s take a look at the key players who could benefit from wireframes:

  • Developers — helps the developer understand functionality which assists he or she in creating a solid strategy for programming. Also can help give a more accurate picture of a project’s complexity so the developer can better predict the time it will take to complete tasks
  • Designers — helps the designer get a clear picture of where things need to be placed in a user interface
  • User Experience Designers — helps show paths between content and reveals the overall flow for users
  • Clients — gives clients a picture of what to expect from the final product

From an agency internal perspective, wireframing helps developers, designers, and user experience designers catch any issues which may arise before a project goes into development. This can save valuable time and cut out many errors before they even happen. A project without wireframes can be likened to trying to build a house without a blueprint—you might not realize until post-construction that the client actually wanted the kitchen windows facing the east.

This brings me to who I believe can benefit more than anyone else from wireframing: The client. The business stakeholders. The ones paying the bills.

Explaining to the client how your awesome, perfect, amazing product is going to work, look, and feel can be quite a challenge, especially when it comes to interactive projects. We want the client to look at our wireframes and see our team’s vision as a whole. We want them to really see it. We don’t want any surprises, we want them to clearly see the kitchen is in the west wing. The problem now is deciding how much detail we really need to show before they “get” it.

Let’s look at some of the options out there for creating wireframes.

1. Hand-drawn sketches

photo of wireframes sketched out on paper

There’s a lot to be said about hand-drawn sketches. They’re quick. They’re easy. They’re informal. They get a quick idea across without wasting too much time.

Pros:

  • Saves time
  • Can make multiple options fast
  • Idea stays “rough” so the client keeps an open-mind

Cons:

  • Scale is skewed
  • Does not show any interactivity
  • Does not accurately show user flow
  • Unrefined
  • The client might have too open of a mind about expectations

Hand-drawn wireframes can be good for an informal meeting but a lot of valuable information is missing. There is no clear picture of interactivity, flow, or sizing. Although, if a project is incredibly simple (think web site circa 1995), then this might be all you need.

2. Real prototype wireframing

Real prototype wireframing is high-fidelity wireframing. Some simple programming may be involved. This type of wireframing is especially ideal if the project can be built on top of the initial prototype wireframe. There are many options for doing this type of wireframing: hand-coding, template modification, or using content management system theme builders.

My personal favorite is using Drupal Gardens’ theme builder. Drupal Gardens has a quick and easy theme builder which is perfect for placing dummy content. You can quickly switch between 3/2/1 column layouts and drop content into different areas. This can be a great tool for showing interactivity without doing too much work.

screenshot of wireframesandbox interface
Screenshot of Drupal Gardens theme builder after approx 3 min of set-up time.

Pros:

  • Solid representation of interactivity
  • Can be built upon
  • Leaves no questions about user flow
  • Great representation of sizing and placement
  • Kills 2 birds with 1 stone: initial programming + wireframes

Cons:

  • May be time consuming
  • May be difficult to modify
  • Programming knowledge necessary

This method is great if you can continue to build on top of the wireframe. It is also great for web sites with typical features (blog, news section, about page, etc). It will, however, be too much work for digital projects with high complexity. Clients can get a pretty solid idea of where things are headed using this method, since there’s an actual prototype to interact with.

3. Using a wireframing application

Using a wireframing application can be extremely useful for high complexity projects. Many applications have special built in features for adding annotations which can be useful to keep notes which are relevant to developers, designers, user experience designers, and/or clients.

There are many options depending on how you like to work. You could use a web application like MockFlow, or HotGloo. Or you could use a desktop application such as OmniGraffle, Balsamiq, or Protoshare,. Or if you have an iPad available you can use an iPad application such as iMockups.

Each application is designed with different features so it would be worthwhile to do a little research and figure out which one is best for you. I personally like iMockups for iPad because I find that drag and drop is the next best thing to the ease of hand-sketching. I also like being able to give a walkthrough of a site via touchscreen on the iPad. This app (and many of the ones mentioned above), also allow for linking within wireframe pages so you get the feel of real interactivity without the programming.

screenshot of wireframe in Balsamiq showing title text options
iMockups application screenshot

Pros:

  • Professional looking
  • Catered to making the wireframing process easy
  • Great for annotation
  • Easy to modify
  • Gives a precise representation of scale

Cons:

  • May be a learning curve for understanding how to work with the app
  • May cost $ for a decent wireframing application
  • Very time consuming to place everything and annotate

In conclusion, if given the budget I would always opt for heavy wireframing via a proper wireframing application. It can truly cut down on future project headaches which is priceless, and gives the client, developer, designer, and user experience designer peace-of-mind about expectations. The only question you’ll have to answer now is which process and wireframing tool is right for you?

Mightybytes is a Chicago-based digital agency and Certified B Corporation. Connect with us on Twitter or get in touch via our contact form.