10 dos and don’ts of wireframing

Wireframing is your first chance to turn those web design ideas you’ve been thinking about into a living breathing blueprint — it’s where things start getting real. At first, the simplistic nature of these designs may prompt you to jump straight in and start sketching your visions. But while wireframing doesn’t have to be complicated, a well-thought-out design provides the foundation to which your team can build something truly special.  

It’s an essential part of design planning and interaction design, so you’ll want to get to grips with how to create a winning wireframe. But what does it take to transform abstract ideas into something that will propel your project to the next stage of the development lifecycle?

In this article, we’ll be exploring the dos and don’ts of wireframing — providing you with practical tips on how to create a good wireframe for your website, and what pitfalls to avoid. But before we dive in, let’s answer a few commonly asked questions about this important part of the information architecture (IA). 

When does wireframing take place?

Occurring early in the project lifecycle, and often at the beginning of the design phase, wireframing creates a perfect foundation on which to draw new ideas and test design layouts. A simple sketch can go a long way in understanding what your site will look like, even if it doesn’t include graphical elements, fonts, colors, and text.

What are the benefits of a good wireframe?

As wireframes don’t use high-fidelity components, they are quick and easy to assemble. Furthermore, the flexible nature of wireframes allows you to test assumptions and gain validation from stakeholders and peers to proceed to the next production phase.

What tools do you need to create a wireframe?

You can create a wireframe at a basic level using nothing more than pen and paper — or even Post-It notes. While this simple method can get you started quickly, you might need something more substantial to evolve your designs. Additionally, if you plan to present your wireframes to a client or stakeholder, you may want to produce something more professional. 

Many design tools can help you create a wireframe. Sketch, which is exclusively made for Apple computers, has long been a choice for designers. However, other popular tools such as Figma are available for both Mac and Windows. It’s worth researching what tool best suits your needs, such as pricing, features, and scope.

Now that you’ve got an idea of some of the questions relating to wireframing, let’s look at the dos and don’ts. What are the benefits of creating a good wireframe and the consequences of poor design?

1. Do research user requirements  

Creating a winning wireframe is a combination of research and instinct. You will need to gather both qualitative and quantitative data from users and then use your skills as a designer to decide how to detail the user interface.

2. Don’t try and cut corners

Although creating wireframes for every part of your application may seem tedious, it’s not a good idea to skip what might seem like obvious design choices. For example, one page of your website may look very similar to another page. However, it’s easy to overlook certain user interactions that may become apparent later.

3. Do keep things simple

Wireframes, by nature, should be kept simplistic. But it’s easy to get carried away with too much detail. Remember: the key benefits of wireframing are speed and simplicity, so it’s important to save detailed design elements for later development life cycle stages. How much detail you include often comes down to whether you’re creating a low fidelity (Lo-Fi) or high fidelity (Hi-Fi) wireframe.

• Lo-Fi wireframes are very simple and can be easily achieved with pen and paper. They’re usually for showing navigation, layout, and how page elements flow.
• Hi-Fi wireframes add further details not included in the Lo-Fi design and detail the visual hierarchy of the page, interaction elements, and more.

4. Don’t jump straight to software

In today’s digital world, using pen and paper to create a design for an application may feel unnecessary. However, it’s less time-consuming to sketch your ideas on paper first in most cases. When you’re happy, you can move to a digital tool where you can create a more professional wireframe to present to stakeholders.

5. Do experiment with ideas 

 With wireframing likely to be the first real process in your project, it provides the perfect opportunity for you to experiment with as many ideas as possible. Consequently, you’ll better understand the advantages and disadvantages of each design, allowing you to find the best solution for your project.

6. Don’t treat each screen separately

If you focus on each screen as an individual entity, you’ll lose sight of the overall user journey. Instead, think about what you want your user to experience. Consideration should be given to the most important areas of the screen, how users engage with the elements, and what they expect to see next.

7. Do aim for uniformity

Being consistent with your user interface elements such as buttons, tabs and labels mean you and your stakeholders will be able to follow your wireframes more easily. To help achieve this, you can create reusable symbols and styles — which saves time by speeding up the process.

8. Don’t use colors 

It may be tempting to add color to your wireframe, especially if you want to impress stakeholders with your design ideas. But rarely is this a good idea. The addition of color only takes away from the primary purpose of a wireframe — to demonstrate the app’s functionality and layout content. If you decide to use color, use it with the intent to highlight specific objects.

9. Do get feedback

There is no harm in asking for some constructive feedback about your wireframe designs. You could, for example, ask colleagues, other UX professionals, or gain a different perspective from the online UX community. As wireframing is based on agile methodology, you can continue going back and building on your designs without the fear of failure.

10. Don’t rely on lorem ipsum

It might be a go-to for designers, but dummy text such as lorem ipsum should be replaced as quickly as possible for wireframes. Real content will not only indicate how well it compliments your layout, but stakeholders will appreciate the extra effort, which will result in more valuable feedback.

Design a wireframe you’ll be proud of

Creating a wireframe isn’t difficult, but designing a good wireframe that will visualize your intended structure to stakeholders requires some planning and knowledge. You may have to go back to your designs a few times to hit the mark, but in the end, the investment you’ve made will result in a wireframe you’ll be proud to show off. 

If you want to discover more about the planning step of website creation, check out our Guru Guide on the basics of site architecture.