Wireframe Fidelity course lesson

Wireframing is most effective at the beginning of the design process, when the main goal is creating the product's structure. Think of wireframes as blueprints that you need to have before starting the building construction. Wireframes allow you to quickly plan and validate the functional value of a page or screen. Doing that before putting great effort into creating the design will save you time and money.

Wireframes exist along a spectrum, ranging from low to high levels of fidelity. Fidelity in design context refers to the level of details and functionality. Low-fidelity wireframes are very simple and can even be hand-drawn. On the other end of the spectrum are high-fidelity wireframes that almost look like the finished product.

Each kind of wireframe can be helpful to different software design and development teams. The type you use depends on the needs of a given project and your progress in the design process.

Exercise #1

Low-fidelity wireframes

Low-fidelity wireframes are quick — often even hand-drawn — sketches that can make your ideas more tangible. Their goal is to focus on the basic UI structure without diving into details, which is reflected in their look. Low-fidelity wireframes are usually black and white, and they show UI elements like boxes and lines without detailed annotations.

Think of low-fidelity wireframes as your rough draft — it's not the final product but rather a place to start. Their purpose is to help shape the product in the early stages of development and ensure usability before further design and development take place. Low-fidelity wireframes don't take much work, but they'll spare a lot of extra effort down the road.

Exercise #2

Medium-fidelity wireframes

Medium-fidelity wireframes are essentially more detailed low-fidelity wireframes. For example, they might have real copy instead of placeholder text, be in grayscale or even contain some colors instead of a monochrome palette to better convey visual hierarchy. The purpose of medium-fidelity wireframes is to help communicate to teams how aesthetic features can support essential functionality.

Exercise #3

High-fidelity wireframes

High-fidelity wireframes reveal how the product will look at project completion. This type of wireframe is created with digital tools and usually takes more effort to make. They typically incorporate the final color palette and possibly some images.

The look of high-fidelity wireframes is similar to prototypes, but don't be confused. Wireframes and prototypes are used at different stages of the design process for different purposes. Wireframes are static, and their purpose is to convey the structure of the page. Prototypes are interactive — their goal is to show UI elements' interactions, style, and positioning. Prototypes are great for validating usability and the overall value of solution design.

Exercise #4

Dummy content

Dummy content refers to placeholder text and images that share some characteristics of real content. Image placeholders — like the image with the mountain and the sun or the one with two diagonal lines — are commonly used in low and medium-fidelity wireframes, while there's some debate over text placeholders like Lorem ipsum.

On one hand, using Lorem ipsum speeds up the design process as the design can move forward with the basics while the content is created. On the other hand, filler text doesn't behave in the same way as real text. For example, it can be difficult to choose the best alignment, and there's no exact way to know how the final distribution of text will feel.

Exercise #5

Use actual copy early in the process

Balsamiq recommends^[1] using the actual copy that will appear in the final design early in the design process for two reasons. First, it lets you see how real content will fit the layout. Second, relevant wireframe text encourages more thoughtful feedback during wireframe review sessions. If the copy isn't ready yet, it's better to quickly draft text similar to length and tone of voice so people can give their opinions on what it conveys.

Exercise #6

Using low-fidelity wireframes

When should you use low-fidelity wireframes? This type of wireframe explains the basic functionality and includes simple explanations of the main steps, phases, requirements, and layout.

Using low-fidelity wireframes is a good idea if:

You're at the very beginning of the design process. Start with low-fidelity wireframes as your first draft and add more details in subsequent iterations.
You have a lot of wireframes to create. If you're working on a big project, it might make sense to start with low-fidelity wireframes for most pages and then add only to wireframes that need more clarity.
You need to complete a project quickly. The fewer details wireframes have, the faster they are to make.

Exercise #7

Using medium-fidelity wireframes

Using simple but detailed medium-fidelity wireframes is a good idea if:

You're putting together a wireframe map — a visual sitemap with wireframes for each page.^[2] In cases like this, low-fidelity wireframes aren't detailed enough to follow, especially if you want to gather user feedback.
It's the next step in a comprehensive design process. If your project has the time and budget, medium-fidelity wireframes are the next iteration after low-fidelity wireframes are established. Adding a bit more detail to your wireframes may help with fleshing out your design ideas.

Exercise #8

Using high-fidelity wireframes

Often, high-fidelity wireframes are the result of validation and a natural evolution of low- and medium-fidelity wireframes.

When should you use high-fidelity wireframes?

At the end of the design process, when you've already established how the design needs to look, and the functionality comes to the forefront of the design conversation.
When you need to test complex user interactions. More detail allows for more accurate judgment of the UI elements.
If you have the time and budget. High-fidelity wireframes consume a lot of design time and are more expensive to produce.
You're working with a partner you want to impress. High-fidelity wireframes give this third party a better visualization of the final product and speaks of your professionalism.
You're working on a personal project. When you are in charge of your own deadlines, you can decide how much time and effort you're willing to put in. High-fidelity wireframes are great for explaining your product's potential to investors.