5 Most Common Wireframing Mistakes (And How to Avoid Them)

A client comes up to you with a web project, you sit with them and determine the outcomes you're looking for. After you finish you need to organize your ideas and explain your vision back to your client in a simple, understandable way. This is where wireframes come into play.

But what is a wireframe?

A wireframe is a visual representation or a mockup of an interface using only simple shapes. They're void of any design elements such as colors, fonts or images and they're used to communicate ideas and represent the layout of a website in the early stages of a project

That being said, wireframing is an area that's often either neglected or poorly executed by many designers.

So today let's take a look at some of the most common wireframing mistakes and how to avoid them.

Mistake 1: Overcomplicating the Design

Although your wireframe is a representation of a future website, always remember that it is a product designed for a very different target audience. Your wireframe is designed to communicate ideas to clients, bosses, developers and other stakeholders. Too many details and graphical elements on a page might confuse users, so keep those to a minimum. If the only person who understands your wireframe is another designer/developer then something has gone wrong.

Use this as a rule of thumb: whenever you finish sketching and ask people without any design/development backgrounds – the office manager, a friend, your barista – whether they understand the basic function of the page .

Mistake 2: Prioritizing Style Over Functionality

Unfortunately, this is one of the most ignored facts by web designers who let their personal taste get in the way. Designers who add elements such as logos, colors and complex typography to wireframes are a case in point. When you add graphical elements to a wireframe you confuse its function with a graphic mockup. This makes it harder to define the visual clarity of the wireframe thus it'll lose its purpose which is communicating ideas.

A wireframe should always represent the function and content flow of a website, not how good it looks. Therefore there's no actual point in including graphical details in them.

Mistake 3: Taking shortcuts

When you sketch a wireframe you might come across moments where you'll say "The sign-up page is not important lets not do it" or "The navigation is simple, I'll skip it", doing so will put your whole sketch to danger since you'll eventually destroy the flow of pages in the website when viewing the final document to the stakeholders.

You need to move that pen and sketch every single detail even if it's a simple line, so in the end you get a fully functional wireframe that you can show to your client and explain the function of each page and how it relates to others. Most projects end up at around 10 to 15 different wireframes in order to accommodate the different page types so keep that in mind.

Mistake 4: Not Getting Proper Feedback

Before starting to wireframe, someone has to be in charge of the project (Generally, in small companies / startups it's the founder). They'll be the ones with the idea and vision of the project thus they know the end goal or product and give you proper feedback accordingly.

In small projects and single clients, it's generally the designer who's in charge, so he has to understand the end goal and vision of the product and discuss it thoroughly with the client.

Continue reading %5 Most Common Wireframing Mistakes (And How to Avoid Them)%

by Saad Al-Sabbagh via SitePoint