Knowledge Base Articles > 12 Practical Tips for Creating Better Wireframes

12 Practical Tips for Creating Better Wireframes


Most product designers are familiar with the concept of wireframes — low fidelity representations of a user interface, mainly used to demonstrate product’s functionality. Wireframing is a necessary part of the design process. Acting like blueprints for web and mobile apps, they help you set a foundation for your product and discover early on what works and what doesn't.

Below you'll discover 12 ways to improve your wireframing skills. Illustrations for this article were created using Balsamiq, one of the most popular and classic wireframing tools.

1. Be Clear About Your Objective

What do you want to achieve using wireframes? It is a fundamental question that you have to answer before creating wireframes. Without a clearly-stated goal, your wireframes won’t bring too much value.

2. Sketch Your Ideas on Paper First

While it may seem like a good idea to jump right into your favorite design tool, sketching out your wireframes – with a pen and paper – can yield much better results. During the ideation phase, your goal is to bring up many ideas as possible and weigh the pros and cons of each concept. The more options you have, the better. Drawing on paper or whiteboard will allow you to explore multiple solutions and identify various opportunities. The focus should be to create as many versions as possible without deep-diving into any one of them too much.

3. Use a Properly-Sized Canvas

Selecting the right size of a canvas is one of the essential rules of wireframing. If you choose a different size from what you design for, you will end up in a layout that will require correction when you switch to medium or high-fidelity prototyping tool — wrong density of elements will lead to incorrect visual hierarchy, and as a result, the need to rethink the organization of elements.

If you design for iPhone X, use a canvas that has dimensions of an iPhone X

If you design for iPhone X, use a canvas that has dimensions of an iPhone X

4. Grid It Out

The elements placed on the layout have to be adjustable, interchangeable, and easily scalable. Using a grid is a perfect way to wireframe fast with a further smooth adaptation to the prototype. A grid system can help you lay out different elements.

Balsamiq provides a great collection of templates and symbols

Balsamiq provides a great collection of templates and symbols. You can find it in “More Controls…”

5. Strive for Consistency

Consistency is key. Ensure that the UI elements are consistent. The buttons, tabs and labels on each screen should have a consistent design. You can achieve consistency in design by creating reusable styles and symbols (a Symbol is a group of controls that represents a single piece of functionality).

Balsamiq supports the concept of Symbols

Symbols will help to speed up the process and help keep your design consistent. Balsamiq supports the concept of Symbols.

6. Think in Terms of Flow, Not Individual Screens

User experience is a journey that the user goes through when working with your product. The goal of product design is to make this journey as seamless as possible. It’s possible to achieve this goal only when you think in terms of user interactions, not individual screens.

Wireframes should always be questioned in terms of experience you want to create. When you design for flow, you always think about how a particular screen will work with other screens. You should ask questions like:

  • What is the most important on this screen?
  • How users are supposed to interact with it?
  • What do they expect to see next?

Connecting two screens using an arrow

Connecting two screens using an arrow

7. Aim to Have the Content Early in the Process

Lorem Ipsum is a dummy text used by designers when the original copy is not available. It’s always better to use real content instead of dummy placeholders. Why? There are two strong reasons for that:

  • When you use real content you see whether or not it fits your layout. If real content does not fit your layout, you will be forced to adapt your layout to your content.
  • Dummy content doesn’t generate valuable feedback during wireframe review sessions. It’s hard to get people’s opinion on something they don’t know. Relevant content encourages more thoughtful feedback.

If you don’t have content, write content that is similar to the one you will end up using in a working product — similar length and tone of voice.

Left: Mobile app with dummy content, Right: Mobile app with real content

The problem with Lorem Ipsum. Left: Mobile app with dummy content, Right: Mobile app with real content.

8. Use Color Intentionally

Color is a multipurpose tool. It can be used to create proper aesthetics, or it can be used to direct the user's eye to essential elements. When it comes to wireframing, many designers recommend to skip using color. That’s because wireframes created with color can be distracting.

But it doesn’t mean that using colors is prohibited in wireframes. If you plan to use color, use it sparingly and consistently. For instance, it’s possible to use a selected color to highlight important objects (i.e. interactive UI elements).

Using color to highlight interactive elements

Using color to highlight interactive element (Floating Action Button) on the first layout and Currently selected item on the second layout

9. Make It Functional, Not Pretty

Many designers are perfectionists, and for any perfectionist, it might be tempting to spend extra time on polishing details. But it’s better to avoid that temptation. When you spend extra time on visual aspects of your design, you forget about the purpose of wireframing — communicate and validate ideas. When you're too focused on perfecting details, you risk creating too polished but not solution-oriented wireframes.

Wireframing is about rapid ideation. Wireframing should be the fastest way to build something and validate it with other people.

But how to define the level of detail for a wireframe? It all depends on the stage of the design process. If you’re only at the early stages of the design process (ideation) and have to explore various concepts, you can create wireframes from boxes to provide a rough idea of the interface.

Creating wireframes from basic objects will allow you to create the right hierarchy of elements

Creating wireframes from basic objects will allow you to create the right hierarchy of elements

10. Don't Get Too Attached to Your Wires

Don’t get too emotionally attached to your ideas. Remember that the goal of wireframing is rapid ideation, and we must be willing to entertain change and pivot often. Emotional attachment to your ideas can limit your creativity and become an obstacle for a whole product team.

11. Add Annotations

At their core, wireframes are blueprints; they are the designer's and developer's guide to building the product. But not all blueprints are easy to read. Ideas don't speak for themselves. That’s why if you plan to show wireframes to other people, it’s always better to introduce brief annotations to screens. The purpose of the annotations is to create context and make it easier for other people to understand the meaning of your design.

Balsamiq has sticky notes that allow users to add comments

Balsamiq has sticky notes that allow users to add comments

12. Ask for Feedback

Never wire alone! Create a space for collaborative conversations about design solutions. Share your ideas with other people, get their opinions on your work. Get feedback early and often. It is especially important when you’re at the beginning of the design process and have to explore various cases.

But ensure your discussion remains focused on the experience you are creating and not the visual design solutions to come.

Conclusion

When done well, wireframes can clarify your thinking and set a clear direction for your design. Similar to any other design skills, wireframing can be learned and perfected over time.


Nick BabichBy Nick Babich
Got questions or feedback? Email learn@balsamiq.com.