How to Create Wireframes
A wireframe is an excellent tool for making a better app or website. If you perform high-quality research and conceptualizing while making your wireframe, you lay the foundation for creating a high-quality final product. Use a repeatable, standardized process to ensure that each wireframe helps you achieve your organization’s objectives. This includes the following steps:
1. Answer Important Questions
Pose several vital questions to yourself about the project, and write out the answers. These may include:
- Who is your ideal customer for this?
- Are there several customer personas, and what are their attributes?
- What are your customers’ main needs and goals?
- How does this product meet those needs?
- What are the top actions users will go through with your product?
You may need to check with your team that you have asked the right questions and answered them well.
2. Brainstorm and Sketch Quickly
Create very simple wireframes of various ways to meet users’ needs and expectations from Step 1. Quickly make several different concepts without stopping to correct them. If you think an idea isn’t very good, just complete it anyway, but you can also abandon an idea if you can’t think of anything else to do with it.
This step aims to generate many rough concepts you can use as building blocks for later work. So, don’t try to make them perfect or great-looking.
3. Combine and Develop Ideas
If you generate simple wireframes quickly in Step 2, you’ll likely create new concepts you have never thought of. Look through all of them and highlight or circle the new elements that seem the most promising, elegant, novel, and good in other ways. Combine them into several new wireframes. You can collaborate with other team members during this process.
Fill in design elements in each wireframe that are still needed to make them functional and useful. Keep these wireframes simple (low-fidelity in other words)—shades of grey, two-dimensional, placeholders for text, etc.
4. Present Your Designs
Get your best designs ready to show to stakeholders, software engineers, and other members of your team. Include the questions and answers you started with, along with the goals and challenges you set out to work on. Add notes around the wireframe pointing out elements and briefly explaining what they are for and why they will meet users’ needs. Try to think ahead to what developers, managers, UI designers, and others will ask and need.
5. Work on Logistics
Talk to people like software engineers, UX researchers, and others to find out if it is feasible to create your design by the deadline and if it’s likely to meet the users’ needs. When possible, watch users try out a prototype of the design, and improve the final wireframe based on their feedback before sending it to the UI designers and developers to get it fully designed and implemented.
Once you understand how to create wireframes, practice the principles until they become second nature. Then, you’ll be able to quickly turn ideas into wireframes and even discover new ideas during the process.