Save valuable time with this simple wireframe process

You don’t go designing the interior of your house before carefully planning out the foundation of the building, right? A lot of designers still tend to skip this step to get to visually designing as quickly as possible. Which we can understand as most clients will only start taking designs seriously once it looks aesthetically pleasing. However, most UX designers will surely agree that wireframing a digital product before putting effort into making it look like a final version is a no-brainer. That’s because most UX designers know rapid sketching and wireframing in grayscale saves tremendous amounts of time in the long run.

Two fidelities

At Yummygum we’ve split our wireframing process into two separate fidelity stages; low-fidelity sketching and high-fidelity wireframing. When we talk about fidelity you can think of it defined as a degree of exactness in design. See it as a spectrum. Particular projects might call for a slightly different fidelity position on that spectrum.

1. Low-fidelity sketching

It’s usually best to start out with a couple of low fidelity sketches to discuss general ideas with your team. This allows you to quickly work out some additional ideas on the spot. It might even lead you to combine some of the presented concepts before moving on to the actual wireframe. Also, research and experience have shown activating your creative brain works best in the low-fidelity stage. It opens the creative flood gate of your brain through fast iteration before moving on to the high-fidelity stage. 

It’s usually best to start out with a couple of low fidelity sketches to discuss general ideas with your team. This allows you to quickly work out some additional ideas on the spot. It might even lead you to combine some of the presented concepts before moving on to the actual wireframe.

Sometimes sketches aren't sufficient to properly communicate the concept/idea. In this case I’d recommend picking a different spot on the fidelity-spectrum mentioned earlier. You could quickly mix and reuse concepts from other projects or your favorite design system right within Figma. Or you could spend just a little more time in Procreate to add more detail to your sketch instead.

In a low-fidelity sketch rapid iteration is key. That’s why it’s important to avoid getting caught up in details and instead only focus on higher level decision making. 

But what defines this higher level decision making? Let’s look at the dos and don'ts that come into play for this specific fidelity stage.

Do's

• Show placement of components

• Show relative size of components relative to other components

• Show titles of sections

• Show the type of component

• Represent the sitemap

Don’ts

• Focus on alignment

• Use color

• Write actual copy

• Sketch icons

2. High-fidelity wireframing

High-fidelity wireframes are used to communicate ideas to the visual design team and to cross the bridge between all stakeholders’ ideas. It’s important to strike a balance between providing an “as blank as possible canvas” on one hand while making sure the functionality of the UI is as clear as can be on the other. For this fidelity stage you can take into account the following points;

Do's

• Pay attention to font size and weight

• Show icons when unlabeled

• Show visual hierarchy in buttons

• Write initial copy

• Describe what your placed visualizations should be (illustration, image etc.)

• Use a layout grid
  

Don’ts

• Define font family

• Use color that doesn’t have a designated function (limit yourself to red, green and orange)

• Perfectionalize copy

• Use actual imagery

• Use border radius

Prototyping

In general we’d always advise to perform usability testing using near-final designs. That is because sometimes users can find it difficult to look past the monochrome look of a gray wireframe. However, that doesn’t mean communicating designs to stakeholders can't be achieved using a low-fidelity sketch or wireframe. As inevitable conceptual meetings beforehand will enable stakeholders to assess wireframes on a concept-level. We recommend Marvel’s prototyping functionality as you can simply upload your images and connect them with clickable “hotspots”.

Other tools to consider:

• Invision

• Figma

• Framer

• Protopie
  

We suggest taking your time to validate user interactions this way. Even testing with people in your organization will reveal some interesting insights.

Design systems

Design systems are great tools for creating wireframes in general. At Yummygum we’ve set up our own boilerplate design system named Chicle. In Chicle we have a vast amount of often-recurring components we can easily drag and drop onto our wireframes as an easy starting point. By doing this we avoid over-thinking and recreating elements that essentially bring across a broad idea of a UX pattern independent of the project they are used in. By using a boilerplate design system you force yourself to keep wireframing simple. It lets you sweat less about the small stuff, even when you’re in the high-fidelity wireframing stage.

In conclusion

Investing time in creating and validating wireframes and sketches early on in the process will save you time (and money) in the long run. The alternative is to possibly have to drastically change course after putting in valuable visual design or even development resources. Besides that it helps you and every stakeholder involved to stay focused on the utilitarian part of the designs without getting lost in discussions about details. We recommend working through progressive enhancement in this sense. In other words; design from a baseline of features and enhance throughout the design stage.

Are you convinced of the importance of wireframing, and more specifically considering the right amount of fidelity per project (phase)? Or is this something you’ve already implemented in your workflow? Let us know what you think.

We have a team of UX Designers on board that live for creating meaningful and validated digital designs. Shoot us a message if there is anything we can do to help you or your business create usable designs.