Wireframes, tips to take advantage of them
One of the most useful design deliverables are wireframes. Let's review they are, what they are not, and other tips to take advantage of them
A Wireframe is a design deliverable that usually is done between sketches and mockups, but can be used anytime in the iterative process of creating a digital product to validate or communicate interaction and / or information architecture.
1. The correct usage
Use wireframes to propose, validate and communicate interactions and information architecture.
Wireframes are great to quickly design an interaction, for example, the checkout process in an online store, the wireframe may show all the screens to complete the process, and very important: all the elements or controls involved in those screens. Wireframes should also cover all the states of those screens.
Wireframes can be used also to validate and communicate information architecture, at screen level. A wireframe should reflect the hierarchy between elements, using position and size, and optionally a color shade. A wireframe should consider all elements that a screen must have. As a communication deliverable, wireframes are the starting point for a design mockup.
2. The correct fidelity
First, let's see what a Wireframe is not. A wireframe is not a sketch. Sketches have their own objectives and characteristics, normally done with pencil and paper, they are drawn quickly and they can be easily trashed, perfect to draft new ideas. Design mockups, on the other hand, are hi fidelity design representations on how the final product would look, great to validate the UI and, of course, to hand off to the developing team.
Even if there is software that can make wireframes look like sketches, or you have all the tools to make design mockups, it is a good idea that wireframes look like.... wireframes:
Use just one color, normally grey or blue and its shades, use different shades to represent hierarchy of elements, avoid any other color, If you use them, the Wireframe may be confused with a mockup and other people may give opinions on the colors, when is not time for that.
Use a very common, standard font. Again, the idea is not to validate or communicate any UI aspect, using a font like Arial or Helvetica helps the stakeholders concentrate on other important aspects.
3. The correct content
Avoid using dummy text (Lorem ipsum). As a validation tool, a wireframe is a great opportunity to know how real content can be organized in an interface. You may, for example, consider one line dummy titles and find that the real content have two or three lines in average. If you don't have access to real content, you can use fake content of the same type, for example names, cities or news headlines.
In the case of images, use placeholders or black and white images, this way the wireframe will be consistent and images are not going to be a foucus point, unless their hierarchy dictates it.
4. Tools
Almost any design or content tool can be useful for creating a Wireframe. Even tools not made for that like Powerpoint, or traditional design tools like Adobe Illustrator. But if you are serious about wireframing, it is best to use a specialized digital design tools like Adobe XD, Sketch or Figma. These tools have features to make wireframing even easier, like reusable components. I you need ready to use components for your wireframes, I have created a Wireframe Kit for Figma! download it for free.
Conclusion
Wireframes are a great validation and communication deliverable. Using tools like Figma, Sketch or Adobe XD, a wireframe can be easily transformed in a low fidelity clickeable prototype, excelent for user testing.
Know more about wireframing in this Toptal page