Ten principles of effective wireframes
6 min. readGuiding principles to help designers wireframe better and encourage the entire team to participate in the design process.
Ever wonder how the companies you admire create great products? It's not the tools they use and it’s not just their incredible UI designers or developers. It's the process and culture they’ve cultivated around design.
Effective wireframes do much more than just show a picture of a user interface, they also facilitate discussion, promote alignment, and supply instructions for developers.
We created these 10 principles for teams that want help defining their own process for wireframing and designing successful products. They encourage the entire team to participate and serve to remind designers that wireframes aren't complete without participation from others.
10 Principles of effective UI wireframes
- Demonstrate an understanding of the problem
- Focus on user needs
- Thoroughly explore solutions
- Don’t show more detail than necessary
- Functional, not fanciful
- Follow UI design patterns
- Invite discussion
- Incorporate ideas from others
- Are easy to understand
- Validate the solution with users and team members
PDF format
JPG format
Principle 1: Demonstrate an understanding of the problem
Articulate the exact problem you’re trying to solve and who it impacts. Show the current workflow and what’s wrong with it.
Helps designers set the context for their solution.
Don't start designing until you're sure you know who you're designing for, what they care about, and how the existing system works.
Helps teams see how the current system is not working.
Get buy-in by surfacing customer pain points and their impact on business metrics.
Principle 2: Focus on user needs
Ensure that what you design addresses a problem real users face and care about. People want solutions, not products.
Helps designers make sure they're solving a real problem.
Remember to keep the users and their goals at hand. Write them as a note on your wireframe or in a notebook. Focusing on the user keeps you focused on solving the right problem.
Helps teams empathize with users.
When presenting work to stakeholders or clients, use your focus on user needs to build a shared understanding of the problems they encounter and how the design helps alleviate them.
Principle 3: Thoroughly explore solutions
Push beyond the first few obvious ideas. Don’t be afraid to go down unknown paths.
Helps designers discover novel solutions.
Wireframes are great for divergent exploration. Go broad. Real creative exploration requires leaps. Venture into the unknown even if it's not feasible. Expand the possibilities and you’ll find yourself incorporating some of those novel ideas into your product.
Helps teams see the value in design.
Show the team how exploration and divergent thinking takes separate ideas and creates something entirely new from the best pieces of each.
Principle 4: Don’t show more detail than necessary
It’s natural to focus on small details when designing. Don’t get hung up on things that can be decided later.
Helps designers stay focused only on what needs to be designed or fixed.
Be deliberate about details. Too much will blur the focus on what really matters, too little will not properly communicate the intent of the design.
Invites teams to give feedback throughout the process.
Leave areas in your design undesigned, intentionally, to solicit input from others, or to even call out that not enough information is available to know what should be there.
Principle 5: Functional, not fanciful
Remember to bring your ideas back to reality at some point. Design for usefulness, consistency, and implementability.
Helps designers focus on structure, user flow, and possible solutions.
Stay in low fidelity as long as you can until you know you have the right structure and user flows in place. Once you do, you can move forward in confidence.
Helps teams remember that the problem is the focus, not the UI.
Wireframes are a great artifact to show the various ways you guide the user through a task or help them accomplish a goal. Leaving out details and interactions will allow them to see your solution more clearly.
Principle 6: Follow UI design patterns
Learn when and how to use standard user interface controls and elements. Take inspiration from similar solutions.
Helps designers create feasible and familiar solutions.
There are established conventions in interface design. Combined with design systems and libraries, they create the visual language of your product. Leverage these patterns within your wireframes to mock up new features or products and you’ll be able to jump right into code.
Helps teams understand why patterns exist and how users benefit from them.
Design may seem mysterious to people outside your team. Educating them on why you are doing what you're doing will help them understand its importance.
Principle 7: Invite discussion
Don’t be afraid to keep your designs unfinished, especially where you’re uncertain. This makes it easier for others to give input and build on your ideas.
Helps designers get feedback and buy-in.
Share unfinished work. When presenting, use language like, “it could be…” or “a possible solution may be…” Wireframes are perfect for this. You cannot easily review a half designed high-fidelity prototype and appropriately comment, because it feels too real to ignore the unfinished parts.
Helps teams make sure everyone's voice is heard.
Wireframes are always in-process. Intentionally leaving places not finished opens them up for input, inviting comments and critique.
Principle 8: Incorporate ideas from others
When you get feedback, update your design accordingly. Integrate subject matter experts' knowledge of the problem, users, or technology.
Helps designers generate better concepts and solutions.
The ease and speed with which anyone can create a wireframe leaves no reason why you’d create only one concept. Or that only a designer can do it. Open up the wireframing of ideas to the whole group. You’ll get more enthusiasm for the process and folks will know they had a part in the solution.
Helps teams feel included in the design process.
Design is a team sport. Listening and feeding off each other’s ideas will result in more thought-through solutions to the user’s problem.
Principle 9: Are easy to understand
Take the extra step to make them readable by others. Use notes and arrows to highlight areas of the design that aren’t obvious to viewers.
Helps designers make designs comprehensible.
Use wireframes to turn the problem or solution into something visual that everyone can refer to, discuss, and build on.
Inspires teams to communicate clearly outside of their silos.
The goal of any good artifact is a shared understanding of either the problem or a possible solution. Encourage the team to make ideas visual and to share them around for feedback.
Principle 10: Validate the solution with users and team members
Talk to stakeholders and make sure the final proposal solves the stated problem and can be built. Better to catch a mistake here than once coding starts.
Gives designers confidence that their design addresses the problem.
Use wireframes to show real users your concepts to ensure that your solution does what you intend before investing in the building and shipping of the product.
Encourages teams to involve real users before taking the next step.
Remember, it's the user you're working for. Set up processes that allow feedback from actual users to reach the people responsible for making the product.
Conclusion
These principles demonstrate the breadth and depth of how wireframes can be used in the software process. Feel free to use them as a checklist for your next project to verify that you've taken the right steps and involved the right people before you move on to code.
Webinar: UI design with wireframes
Watch the recording of our webinar about hands-on UI design with wireframes.
By Billy CarlsonGot questions or feedback? Email support@balsamiq.com.
