In today's interview on DesignRush, we talked with Leon Barnard, the Education Team Lead at Balsamiq, a company known for its standard low-fidelity wireframing tool.
Interview highlights include:
- Overcoming key challenges in the wireframing stage
- Tips for developing wireframing skills and understanding UX principles
- AI's role in transforming wireframing processes
Who is Leon Barnard?
Leon leads the Education team at Balsamiq. After 10 years of UX practice in a variety of industries, Leon joined Balsamiq to help teach wireframing and design, both inside and outside the company. He is the author of Wireframing for Everyone, and he also writes and talks about remote work, web development, and UX career paths.
DesignRush: Can you tell us how you define wireframing and why it’s an important process in the design phase of a product?
Leon: Wireframing, at its core, is user interface sketching.
The reason why you should wireframe is the same reason why you'd want to sketch out a physical project before building it or a painting before mixing and applying paint.
Creating a user interface is not just following instructions, as you don't necessarily know where you're going when you start or what the right solution is.
It's much better to sketch out some ideas first to complete that picture in your head before you dive into pixel-perfect design or code, where the cost of making changes is much higher.
Balsamiq emphasizes low-fidelity wireframing to help users flesh out concepts before diving into high-fidelity designs. Can you share the philosophy behind this and its importance in the design process?
Low-fidelity and high-fidelity design require separate states of mind.
If you’ve heard of the double-diamond process, then you know that there are divergent and convergent phases in design:
- Low-fidelity design is perfect for the divergent and early convergent phases of design
- High-fidelity design is terrible for these phases because it's too time-intensive. It's a separate mindset when you are refining and perfecting
We feel that it's better to have separate tools for these processes so that you don't try doing both at once.
Could you describe the challenges design teams frequently face in the wireframing stage and how they can overcome them?
Wireframing is a fundamentally different stage in the design process from high-fidelity UI design and prototyping.
It is very hard for both designers and non-designers to keep them separate, especially when using tools that allow you to go from zero to a full-fledged UI prototype.
When wireframing, it's very important to avoid thinking too much about the implementation details and visual experience. Think high level, when you start, like you would for a napkin or whiteboard sketch.
Focus on the flow between screens and on ways to elegantly solve the users' problems.
The details, which matter, of course, can come later. But if you get the fundamental experience wrong, then no amount of finesse and sizzle can make it a good product.
Based on your experience in training designers, what are your key tips for users looking to develop their wireframing skills and understand UX principles?
We help both designers and non-designers in product management, engineering, marketing and analytics to learn wireframing and UX skills.
Here are three key important messages we regularly share:
- Focus on the user. Create a clear picture in your mind of who they are and what success means to them
- Don't jump into UI design too quickly. Start with a flow chart, site map, or sticky notes. Think flow before creating the interface
- Push yourself to create as many ideas and design variations as possible. Don't go forward with your first idea without exploring other concepts, no matter how silly or impractical they are at first
Can you tell us how Balsamiq supports and enhances collaboration between teams and departments, specifically during the wireframing process?
Balsamiq Wireframes supports lots of ways of sharing and collaborating to fit whatever tools or workflow you might have.
Wireframes in Balsamiq can be exported or embedded in almost any web or desktop tool, or you can invite collaborators to view or edit in real-time in the Cloud. The goal is not just to share wireframes at the end, but while they’re actively being worked on.
The reason is that the best way to encourage collaboration is to bring people into a discussion while a design is in process. If you show a team member something that is "done" you will probably get plain, binary feedback, such as "looks good" or "I don't like [a specific part of it]"
But if you bring them a wireframe, or, better yet, multiple variations in wireframe form, that will encourage a conversation about what could be, what's not working, what's missing, etc.
That conversation is the real goal of wireframing. Use wireframes as a tool to bring out the knowledge and insights of those around you, rather than an artifact that you hand off.
How can low-fidelity wireframes help teams balance a rich feature set with a user-friendly design?
The best way to get to the right design is to start with many designs.
Adding features is a very real design challenge, but it doesn't have to create a worse user experience. The most obvious idea, such as adding another button or tab, is not necessarily the best idea.
The quick and rough nature of wireframes allows you to easily sketch out 5-10 variations on a single idea the amount of time it would take to prototype one.
Once you see a bunch of possibilities in front of you, you'll start to see an intelligent solution emerge. Plus, you’ll have something you can show to collaborators and stakeholders.
How do you see the role of wireframing tools evolving with the continual advancements in generative AI that remove repetitive tasks in the design process?
The one trait that AI doesn't seem to have developed well, yet (fortunately for humans), is discernment.
It's great at giving you lots of ideas, which is where I think it can benefit the wireframing process, but it's not going to be good (for a while at least) at telling you which one is best or which direction to go next.
I love the idea of writing a prompt something along the lines of "wireframe 10 different navigation variations for a list of items that contain four top-level items and between one and seven children each."
It’ll likely produce several mediocre ideas but also some good ones that you might not have thought of on your own.
AI has the power to be a big help at the very beginning of the process, but you'll still need to refine and iterate AI-generated wireframes manually. That requires more creativity and knowledge.
This is why we spend so much time building free educational materials.
What advice would you offer to individuals or teams looking to streamline their early-stage design processes?
Be smart about your effort. These tips will help reduce wasted energy:
- Don't spend time designing the details right away. Start with the overall structure and flow
- Don’t reinvent the wheel when it comes to UI patterns. Look for how other products or tools have solved similar problems and take inspiration from them
- Don’t get too far into a design without asking for feedback. Even though it can be hard to show something you’re not confident about, if you’ve made incorrect assumptions or missed something bigger, it’s better to find out sooner rather than later
If you enjoyed reading this, check out more of our interviews with industry experts!
