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”.
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!
After you decide on the content’s homes, you can mock them using Figma or another tool.
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.
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.
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.
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.
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!