Wireframing Best Practices

Regardless of which type of wireframe you build, consider these guiding principles.

1. Start Broad and Experiment

The beauty of wireframes is the minimal risk, so you’re free to experiment with untested ideas. Don’t get married to a single idea before testing out a variety. Experimenting can even drum up ways to improve your favorite idea.

Try the “Crazy 8 exercise”:

  1. Fold a piece of paper into 8 sections and then give yourself 20 minutes to create a different variation for the same screen in each section.
  2. Mix and mash the best ideas from these 8, and then carry over 4 of them into your digital wireframing tool. This guarantees you come up with some workable new ideas and validate the ones you already like.

2. Structure, Not Detail

Don’t worry about visual details. Your wireframes elements only need to be lined squares or boxes with Xs.

Photo credit: "Wireframe". Baldiri. Creative Commons.

Minimize colors (or stay in grayscale completely), otherwise you will encourage unnecessary feedback from users and clients.

3. Focus on Navigation

One of the main goals of wireframes is to optimize navigation.

Consider the best ways a user can go from point A to point B and design wireframes accordingly.

This means adding extra navigation elements where needed, and also removing redundant ones. You should also start adding special interface elements, such as pullouts and expandable sections, or at least note where they’ll be added in the future.

4. Everything Has a Code Cost

Every piece of a wireframe will eventually need to be coded.

Keep in mind the greater project restraints, such as time and budget, to keep your design grounded in reality. Often, this means subtracting as much as you can.

The wireframe is not a canvas for creative greatness. Your goal is to create a “minimum viable design” as quickly as you can to test with user later.

5. Avoid Lorem Ipsum

While placeholder visuals work fine for wireframes, text is a little different.

For graphics, you can section off exact dimensions, but it’s harder to predict text size unless you have a rough copy. Designing around lorem ipsum may lead to redesigning later to account for extra lines in titles and body content. Using actual text lets you realistically manage expectations.

Consider the following situation:

Lorem ipsum
Lorem ipsum wireframe

You don’t need perfect final copy. Even a rough draft gives you a better idea of what you’re working with. If you test an interactive wireframe with Lorem Ipsum copy, you’ll only confuse users and gather misguiding feedback.

If you simply don’t have time to write a rough draft, you could even copy and paste some copy from a competitor site to keep you in the right ballpark. Add in rough copy as it’s created, then test the interactive wireframe with the real copy.

6. Set the Context for Stakeholders

One drawback to wireframes is that the visual simplicity makes it hard to impress stakeholders. When presenting, you have to make an extra effort to set the context. Here are 3 ways to improve wireframe presentations:

Get the full 114-page Guide to Wireframing

Don’t worry, we’ll keep your email safe.