👋🏽 We wrote a book! Order Wireframing for Everyone today →

Balsamiq

Toggle navigation

Use Wireframes to Develop Your Designer’s Eye

5 min. read

Even if you don’t call yourself a designer, there are some easy tips and techniques to help you see a digital product and its usability like a designer.

Balsamiq Wireframes gives you the ability to create interface designs, yet you might be reluctant to call yourself a designer. Let’s help you challenge that idea. I’ll walk you through a few ways to practice seeing through a designer’s eye and how this skill can level up your wireframes and designs.

When I ask non-designer folks what they like about the design of a product, they usually have a hard time communicating anything specific about the user interface (UI). This is the same for explaining why they don’t like something. It's hard to articulate why good is good and bad is bad when it comes to the visual design. Subtleties in the design affects how we use it. Understanding that is a skill. One that every product manager, entrepreneur, or developer can and should develop.

“I see just fine! Why bother?”

UI designers are attuned to the effects clutter or inconsistency have on a digital product. The effect on the user experience is cumulative and adds up quickly. On a positive note, the more of us who can recognize it, the less bad UI will be pushed out to production.

Seeing like a designer lets you quickly understand areas where typical users could get tripped up and how it can be fixed to be a better version of itself. Having trouble finding your way back to the search results page? Well, so will a lot of other folks. Uncovering these problems before customers start coming to you with questions would be a huge win.

It also helps you start to use designer vocabulary to articulate the feelings you have about why some things might feel off, or why you like something. An entrepreneur or product owner who can describe issues in a way a designer can understand will allow the problem to be better defined and then resolved.

Seeing like a designer also helps you see how the product is put together and how patterns are reused across many pages or screens. This can be immensely helpful when managing the building or writing the code for any product.


“Alright. I’m intrigued. How can I learn this?”

Using a few simple prompts to take your analysis further

When I teach UI design, the first assignment for my students is to select one product they like and explain why. They’ll often write about why Venmo makes splitting the bill easy — or why TikTok is addicting (it’s the endless scrolling of content). A real answer from this assignment was, “I like it because it is simple, interactive, and customizable to my tastes.”

Despite the fact that they are taking a User Interface design class, they often write about what they like in terms of the services the product offers, or simply that it is easy to use.

These are very broad and subjective answers. I want them to dig deeper. What do you notice about the colors used? How do imagery and typography work together? What is the most prominent thing on the page? What makes it prominent? How do the elements on the screen work together to achieve this? I want my students to not only see the details in the UI, but communicate those details in well-defined terms.

I realize this isn't something many people are used to doing, so I created a follow-up assignment. I send them this short guide to help sharpen their observation skills.

After being asked a few simple questions about the UI, the answers get far more detailed.

Here are real examples of their answers after reading the guide:

  • “I like that they use just a singular sans-serif font giving it a uniform look.”
  • “I like that they use color to differentiate whether the product is active or not. Grey for inactive, Orange for active. It's a quick visual reference of the current status: Orange = On, Grey = Off.”
  • “I also like the visual hierarchy of the app. The current status is in a large font and centered for more quick glance awareness.“

What a difference. The language used is much more clear and specific. With practice this only increases.

Analyzing the layers of an interface

After we talk about their submissions and comment on them, I make sure to take time to point out specific layers of the interface. First, I show how content is placed on the screen using text, images, and colors, to set a hierarchy for the user to follow. And how aligning and grouping elements allows users to scan content quickly. These concepts were the focus of my webinar A Hands-On Introduction to UI Design with Wireframes. When these details are pointed out and explained, they can be seen everywhere.

Spotify mobile app wireframe that shows 3 different layers: most important content, controls, and content details.

If you're still having trouble, or just want to see this stuff in action, you're in luck, we have a whole series with designer Paul Boag where he reviews user-submitted sites. It is mostly through the lens of User Experience (UX) design, but Paul explains the effect the interface has on the UX through various examples. The episode where he reviews our site is fun.

Copying to learn

The next way is to start copying. I've written about this a lot, but I’ll say it again, copying is a great way to really understand the details that go into UI design. Manually recreating anything allows you to really understand how it's constructed.

I like this exercise so much that I’ve created a guide and template file to download, so give it a try!

The steps are simple:

  • Take screenshots of your favorite product.
  • Bring them into Balsamiq and recreate them.

Practicing this over and over will strengthen your eye for detail.

A wireframe of Spotify’s desktop app. Copying allowed me to notice the subtle differences in text colors.

If you aren’t ready to dive in and start copying, or just want to see some end results, check out the templates in the UI Library. We recently added a ton of new templates from sites or apps you might recognize; Spotify, the New York Times mobile app, Twitter, and more.

Seeing a wireframed version of an app you may use every day demonstrates the power of stripping away everything but the structure of the design. You can see how all of the elements on the page work together and how patterns are used throughout the experience. We’ve done the copying work for you, all you have to do is download them and pick them apart. Try to spot the details in the designs that make them stand out.

A wireframed version of the New York Times app, available in our Template library.


Now is the time to start practicing

Developing your designer’s eye has many important benefits. When you use digital products throughout the day you'll begin to recognize designs that are well-crafted and ones that are simply not. And you'll notice how each affects the usability of the product. Your wireframing will improve greatly because you’ll have an eye for the details that really matter and the recipients of your wireframes will understand them better.

If you enjoyed this topic, we’ll dive deeper into training yourself to see like a designer in our upcoming book, Wireframing, published by A Book Apart. If you’re interested in following along as we work to complete it, sign up for book updates!


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

Get the Inside Scoop!

Want to get exclusive early updates on our
Products, Wireframing Academy, and our Company?

Subscribe to our monthly newsletter and be part of our Inner Circle!

See what people think of our past issues!

Dazz Knowles
"Of all the e-mail newsletters I get, @balsamiq is the one I always read, they're brilliant!" - Dazz Knowles
M. Pesente
"It's always a big pleasure receiving such an inspiring newsletter. Love the Balsamiq culture!" - M. Pesente
Jérémie André
"Another great newsletter from @balsamiq!! 😁" - Jérémie André
Looking for more ways to get closer to Balsamiq? Join our Research program or Slack community!