Balsamiq

Toggle navigation

Ten Principles of Effective Wireframes

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


Principle 1: Demonstrate an understanding of the problem

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.


Principle 2: Focus on user needs

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.


Principle 3: Thoroughly explore solutions

Principle 3: Thoroughly explore solutions

Push beyond the first few obvious ideas. Don’t be afraid to go down unknown paths.


Principle 4: Don’t show more detail than necessary

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.


Principle 5: Functional, not fanciful

Principle 5: Functional, not fanciful

Remember to bring your ideas back to reality at some point. Design for usefulness, consistency, and implementability.


Principle 6: Follow UI design patterns

Principle 6: Follow UI design patterns

Learn when and how to use standard user interface controls and elements. Take inspiration from similar solutions.


Principle 7: Invite discussion

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.


Principle 8: Incorporate ideas from others

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.


Principle 9: Are easy to understand

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.


Principle 10: Validate the solution with users and team members

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.


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.


By Billy Carlson
Got questions or feedback? Email billy@balsamiq.com.