iYi

Design, development, business, and more.

The importance of wireframing

When 45royale first started, there’s no question we had a few bad habits. You see, way back in the day when we would get a new project, discuss the requirements with our client, maybe sketch out a few quick ideas, and then jump right into full color Photoshop comps. Our reasoning for that approach was that it was unlikely that we would hit a design home run right out of the gate, so we wanted to start the process as soon as possible to allow time for revisions. After a while we came to realize that we were spending way too much time on revisions and the revisions that we were making were far more complex. Not only did we have to adjust layout, but all of the corresponding graphic treatments as well. This was frustrating for us, worrisome for the paying client, and disastrous for the project schedule. However, it didn’t take us long to realize that we needed a new approach. We decided to account for more time in our schedules to do gray box wireframes and added it to our process. The end result was that while we added another step to our design process, we actually saved time in the long run because we were addressing problems early and not waiting to resolve problems during full color phase. After implementing this new method, we certainly noticed an improvement in our projects. Let’s take a closer look at why wireframing is the right choice for you and your clients.

Wireframing plays an important role in Information Architecture

Certain requirements and concepts can seem like great ideas during initial project calls, but things can quickly fall apart when you start laying them out on paper. Since wireframes take considerably less time to generate than full color comps, you can spend time early on using them to map out all of the pages for a particular site. Even at this early stage you can get a sense of the user experience and therefore spot potential usability problems with your design. Plus, the issues that you uncover could drastically change your approach to the project as a whole. It’s much easier to make adjustments early than it is to have an “oh shit” moment when it’s crunch time.

Helping the client to focus

To put it simply, using gray box models eliminates the distraction of an element’s visual treatment. When reviewing a page layout for the first time in color, it’s very easy for the client’s opinion of the page to be influenced by the graphical design. If you happen to select an overall green color scheme for the page and your client happens to hate the color green, then they’re likely to have a strong emotional response to the color that will make it harder for them to focus on the “bones” of the page. Their feedback may be, “You need to completely start over” when in actuality, the layout works fine and the color was the only thing throwing them off. A stripped down wireframe will let you get important feedback on sizing, layout and placement without your client getting hung up on the presentation.

Wireframes teach you about your client

By sticking to gray box models and removing the visual distractions, you can begin to get a true sense of your client by listening to their feedback. Their responses and your interaction with them will give you a better sense of what to expect during future phases of the project. Initially when you’re laying out a rough structure for a page, the client could comment on the size of a particular button, for example. As you’re working through the process of wireframing you may notice that the client is consistently commenting about the large size of that button and other elements that you’re putting into the page. You can then begin to watch for feedback patterns and learn, “Hey, this client doesn’t like large bulky things and prefers smaller, more low profile elements”. Having that knowledge could save you A TON of time on revisions when you get to the full color comp because you already know their preferences going in.

Also, and maybe more importantly, wireframing can give you insight into how the client communicates. Do they give you more constructive feedback on a comp over the phone or do they do a more thorough job once they’ve had some time to think and type up an official response? By knowing how your client communicates, regardless of whether they are aware of it themselves, you can apply that knowledge to future aspects of your project which will increase your speed and give you a better chance at success.

Wireframes can save you time

If you’re operating on a tight timeline, it may seem like a waste to do a gray box version of a page before moving to a full color comp. You might think, “I don’t have a ton of hours to work with here, so I better just jump right into in”. We made that same mistake in the beginning, but almost no matter what you do, your client is going to have revisions. Doing a wireframe first allows you to spot potential problems early and make adjustments to the layout in the gray box stage vs. making changes in full color where there can be many detailed elements. As a result, we’ve incorporated a gray box wireframe as the initial stage of our full color comp process. We use the wireframe to layout the actual dimensions of the page, so that once the client approves the final wireframe, it’s really just a matter of skinning the page with a graphical treatment. If the wireframing process is productive, then you won’t receive a bunch of requests for revisions to the layout and you and your client can focus strictly on refining the visual treatments.

Other resources

Whether you use actual sketches or build gray box models in Photoshop or Illustrator, the important thing is that you’re taking the time to plan things out at the beginning. Even if you’re not a graphic designer, there is software available that can help you produce a wireframe that you can review with your client and then pass off to other team members on the project. Most of the time we stick to gray box wireframes in Photoshop, however we’ve used these applications below at one point or another with success:

  • OmnfiGraffle
    Is a Microsoft Visio-like program for the Mac that has some great wireframe stencils built into it. It has a ton of features, but it could be overkill if you just want to do a basic wireframe.
  • Lovely Charts

    If you’re just toying with the idea of wireframing for the first time, I’d definitely recommend giving Lovely Charts a try. The interface is pretty straightforward and the best part about it is, it’s FREE!

  • Balsamiq

    If you’re looking for a quick way to communicate a concept to a client, I’d recommend using Balsamiq. They have a free demo that you can try that still allows you to save out the final product. The basic elements are all covered and the hand-drawn look helps your client to focus on the structure without getting hung up on the visual treatments.

What do you think?

Every situation and every project is different, but taking the time to do the legwork up front will almost certainly pay dividends down the road. Your client will appreciate your attention to detail and they’ll definitely appreciate the money that saves them since you’ll have less full color revisions.

We’d love to hear your thoughts about the importance of wireframing. Please feel free to share any techniques you use with clients or if you have a particular wireframing method of choice, let us know in the comments!

There are no comments
Leave your comment below
* Required

Let’s talk about your project.

After we get some information from you, we’ll set up a time to discuss your project in further detail. You should expect to hear from us in a few days.

Do you have a project budget?

You can leave this blank if you don’t know.
$

How did you hear about us?

Dribbble, Twitter, or Google perhaps?
* required

Thanks , you’re all set!

We appreciate you thinking about us for your project, we’ll be in touch soon.If you need anything in the meantime, hit us up on Twitter.

Go back to the home page

Hi, it’s nice to meet you.

Please drop us a note below and we’ll get back to you soon.

* required

We got your message, !

Thanks for taking the time to reach out, we’ll be in touch with you shortly.If you need anything in the meantime, hit us up on Twitter.

Go back to the home page

Having an issue with your Tumblr theme?

You can search our knowledge base below, or send us a message. Either way, we’ll help you get your problem resolved quickly.

Rather just send us a message?

* required

We got your message, !

We’re sorry you’re having problems, but we’ll be in touch with you soon.If you need anything in the meantime, hit us up on Twitter.

Go back to the home page