Error message

Deprecated function: strpos(): Non-string needles will be interpreted as strings in the future. Use an explicit chr() call to preserve the current behavior in _google_tag_status_check() (line 321 of /var/www/vhosts/vps68332.ovh.net/marioaraque.com/sites/all/modules/google_tag/google_tag.module).

Do's and dont's of wireframing

Do's and dont's wireframing

Wireframing if one of the first steps in your design process. It is the time when your ideas start to take shape.
This article will show different tips to help you creating better wireframes for your web and mobile experiences.

What is a Wireframe
A wireframe is a basic skeleton of your project. It does not use real user interface elements, instead, it uses placeholders. Wireframes tend to validate information architecture and general user flows.

wireframe

Why is it important?
Wireframing is a critical step in the process of designing a product/website because it helps to determine how it is supposed to look and function. Wireframing ensures that everyone involved in the project remains on the same page with regards to a product’s structure and features. Wireframes can also serve as product documentation - a guide for ux designers who are building the project.

Best practices

Research

If you research before start creating wireframes, you will need what users need and what they want.
I recommend to think in 2 goals: Business goals and user goals. Both are essential to your product success.
Researching will help you set clear expectations of what you want to achieve.

Keep it simple

Wireframes shouldn't slow you down. One of the main advantages of wireframing are simplicity. You can change quickly if you receive feedback from others. You should be able to show more options without delay.
Keeping wireframes as simple as possible will help you to focus your ideas.

Do it collaboratively

The best part of wireframing is that you can create it collaboratively. Brainstorming is one of the most useful methods to increase the potential of the wireframes.
Showing wireframes with the team members and receive feedback is the best way to improve the quality of the deliverables.

Create easy to follow wireframes

Remember: Wireframing is about communication. Probably you should share your wireframes with other team members or stakeholders, so you need to tell a story and communicate your ideas clearly. If you only can understand the wireframe, probably you made a mistake.
Here is a list of tips you can follow to test your wireframes:

  • Pilot testing: Try to show your wireframes to a person who is not involved in your project. You should do it without exception. Is the fastest way to get feedback.
  • Add annotation in your wireframes to show key elements and explanation. You should not add lot of text, it is about provide description and context of your work.

Bad practices

Show all of your application parts

You should show the wireframes of all the sections of your app. If you say "The booking page is the same as your competitor", you will lose context, because your wireframe is missing important parts of your potential users. Nothing in your project can be ignored.

Do not start with digital tools

Sketch your ideas first, try and fail, and then move to your favourite digital tool. People tend to start using Axure or Balsamiq, but thinking without a paper is very different if you can erase and start again drawing.

Do not try to create good looking wireframes

Don’t focus too much on how your wireframes look. Remember that a wireframe is a tool which helps you understand information architecture of pages not visual or interaction design. When you focus too much on the later, you might have too polished wireframes but absolutely not solution-oriented. Visual and interaction design should be left to later stages of the product design process.

Do not use colors

Wireframes in grayscale prevents distractions by the color. The primary purpose of a wireframe is to lay out content and to describe the project's functionality. Adding in multiple colors can cause distractions. My recommendation to avoid using color in your wireframe. You only can use colors when you need to highlight some element of your interface.