A hand is drawing wireframes in a tablet.

How to Wireframe in 3 Steps

Brainstorm potential solutions with wireframing!

BY CANDY CHEN

The wireframe is the first step in mapping out your project. Don’t skip this step as you’ll soon notice that you’ll come back to this step! Check out how to wireframe in 3 steps:

Step 1: Create your content map

You need to figure out what content you’re adding to the product. You can’t design without knowing what’s in it.

Below is one content map example from my personal project, which is called “WeTrip”.

This is WeTrip's content map.

Step 2: Figure out the sitemap

After getting your content settled, you need to figure out where they will live in your product. I recommend creating a sitemap!

Paper prototyping.

After you decide on the content’s homes, you can mock them using Figma or another tool.

This is WeTrip's sitemap.

Step 3: Use boxes and lines

You should know what content you need to fit on a page. Finally, you can start wireframing!

I recommend designing one path out first. If not, you’ll have a zillion screens for a mock that might not work.

The is selected wireframe path based on WeTrip's sitemap.

For the wireframe, there is no need to consider whether it looks pretty or not. In fact, it’s better if it’s just gray so the users aren’t hung up on the visuals or tone of voice.

Use boxes and lines to indicate written content or images. As you can see, I used Lorem Ipsum and gray circles rather than add the actual content.

This is WeTrip's partial wireframe.

Bonus Step: Add visuals for the prototype

If your team has the basic wireframe necessities down, you’ll want to develop a prototype with more visual and interactional experiences.

Consider adding more colors and free graphic resources to enhance the experience.

This is WeTrip's wireframe bonus step.

Keep in mind that design is a continuous back and forth process. Even during the wireframe stage, you will experience the back and forth for your content and/or interactional design. Communication is always the key to get feedback from your team and your potential users.

A picture to show the design process.

You may also check how to be a UI/UX designer with zero experience and getting inspiration from your daily life for more design ideas. Good luck with your design project!