At the wireframing phase of the design process, our ideas are young and unpolished. Wireframes, whether created on scraps of paper, a whiteboard, or in a software program, serve to establish relationships between elements in a project such as: navigation, imagery, and calls to action. But if we think of wireframing as a tool, it’s ultimate purpose is to create an ideal space for collaborative conversations about design solutions, while supporting iterations and driving rapid ideation.

So how do you know if your wireframes are effectively driving the design conversation? The best way to tell if wireframes are hitting the mark is to take a step back and ask this question: When I share my wireframes, are the conversations about the execution OR about the experience I’m creating?

If your creative brainstorms and discussions are getting stuck on “how your wireframes look”, you may be missing the mark. And usually, it boils down to one or more of these three problems:

  1. Your wireframes are executed poorly. See 10 best practices below for help.
  2. You failed to set clear expectations with the client about how you are using wireframes as a tool to drive the conversation about design solutions.
  3. Your wireframes are too polished and not solution-oriented.

10 Best Practices to Free Your Wireframes

Wireframing is about rapid ideation. And to do this right you need to explore multiple directions and opportunities quickly in a transparent environment to concentrate on ideas and solutions without hidden agendas. Don’t get trapped in your wireframes! Use these 10 best practices to free your wireframes from mediocrity and get on with designing amazing experiences.

1. Don’t use color. If you do, use it intentionally.

Wireframing Best Practice 1

Color is powerful! As such, it can be distracting. If you must use color, use it sparingly and consistently and choose a color not in the clients’ pallette to ensure your discussion remains focused on the experience you are creating and not the visual design solutions to come.

2. Consistency is key.

Wireframing Best Practice 2

Your wireframes are meant to facilitate, not distract. One of the best ways to do this is to be consistent with things like typography, spacing, and delivery.

3. Use actual content.

Wireframing Best Practice 3

If you don’t have content, write it. Writing is a design skill, it will only help you understand the client and story better. Be sure to check out the 7 writing tips we just published!


4. Never wire alone.

Wireframing Best Practice 4

All we’re talking about here is sharing your ideas. When we release ideas, their potential for greatness doubles. Often times, you’re not the expert, so get over your ego and be great together.

5. Communicate functionalities and interactions statically. 

Wireframing Best Practice 5

Wireframing and prototyping are amazing tools, but they serve very different purposes. Prototyping is more time intensive than wireframing. Key functionalities or interactions can be easily communicated statically. Ask the client what they need. If user testing is an important part of the project, prototyping may get you far. The key is to know when you’ve crossed over to prototyping and be deliberate about it.

6. Set clear expectations. 

Wireframing Best Practice 6

Talk with the client about how you are using wireframing as a tool. If a client’s expectations are not met, it doesn’t matter how brilliant your work is, they will not hear you. The best way to proactively avoid failed expectations is to communicate them clearly, early, and often.

7. Avoid unnecessary barriers to success.

Wireframing Best Practice 7

If you’re using a program like Axure, don’t let the program be a barrier to setting your ideas free. Take the time to learn the basics or choose a more natural medium like sketching or whiteboarding.

8. Practice non-attachment.

Wireframing Best Practice 8

Don’t get too attached to your wires, they’re not glamorous portfolio pieces. With rapid ideation, we must be willing to entertain change and pivot often.

9. Be selective and keep it simple.

Wireframing Best Practice 9

When we have lots of new ideas, it’s easy to try and make them all work together or confuse elements of one idea with another. Give each idea their own platform.

10. Control the conversation.

Wireframing Best Practice 10

A beautiful conversation doesn’t happen by itself or even with the most profoundly perfect wires. Support your wireframes by controlling the conversation. If things get off track, bring it back around. Don’t be afraid to interrupt politely and ask meaningful open-ended questions.

The Right Tool for the Job

Objective-Based Design

Wireframes are often used during the strategy phase of DT’s Objective-Based Design process.

Brainstorming and rapidly on whiteboards allows us to explore multiple solutions and identify new opportunities. Those ideas are then more easily prioritized once we identify the potential impact (and effort) of each idea. A good wireframe allows us to easily queue up experiments to implement and iterate upon as part of our design subscription.

Good designers spend time determining the right tools to solve design problems. Use of a great tool at the wrong time can be detrimental to a project. Like other UX practices, wireframing exists in a non-linear plane. Think of it as tool in your tool belt, grab it when you need it; use it in combination and in no particular order. Trust your design intuition and be fearless with your ideas.

If you’re looking for additional information, check out this Hands-On Guide to Wireframing from our friends at UXPin.

UX Workshop