The latest news from Balsamiq:
Tips and resources to understand what UI designers see when they look at digital products.

Trouble viewing?
View it online.

Do you often need to act as a designer… but you’re not one? Read on!

How to develop your designer’s eye 👀

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. Welcome to the club, fellow designer. 🙂

When I ask my non-designer friends 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. It's 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 see things like clutter, confusion, or inconsistency. 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 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.

It also 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.

Seeing like a designer 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 solved.

A screenshot of Venmo with comments from designers and non-designers

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

Use 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.

When I review my students' submissions, I point out how they can layer the content onto 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 last webinar. When these details are pointed out and explained, they can be seen everywhere.

Breaking a design into layers of content shows how the hierarchy is set

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 for you, our inner circle, to 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 our Wireframes To Go 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. Find them all in the Templates category on Wireframes to Go.

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 on Wireframestogo.com

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!

Happy customer of the month

I first paid for @balsamiq mockups June 2009 (still have the receipt!) and today is the first time I read the docs entirely. There's an awful lot there that I missed for the past 13 years... — Michael Bamford

Product news

We’re working on several exciting features, but we won’t do a release in August because many of our employees are taking some well-deserved time off. See you in September! 🙂

Wireframing Academy news

As mentioned above, August is typically when many of us take our longer vacations and this year was no exception.

But we do want to let you know about an event coming up very soon. Billy will be speaking at the DesignOps Summit on September 9th at 10:30am PT. His session will be called Pro-level UI Tips for Beginners. Learn more about his session and register here.

UX/UI links for August

Popular UI Navigational Models — by Luísa Quinn
UX Myth - Flow Is Bad Because It's Too Long — by Patryk Nawrocki
Handling Cross-Team Feedback Loops on Design Work — by Nicole Nardelli
Design Debt Is Often a Hidden Killer of Consistency. Here's How to Resolve It. — by Kai Wong
Measuring User Trust — by Sarah Gomillion

Company news

We have a new employee! His name is Jonathan Race (he goes by JR), and he’s our new business manager. He’s based in San Diego, CA, USA. Welcome JR!

We will also start recruiting for a Head of Marketing very soon, so stay tuned!

Could you spare 3 minutes for us? Please, complete this short survey to help us make Balsamiq better.
Sponsorships and raffles: notable events we sponsored this month are Design Matters, SmashingConf Meets, Paris Web, and more!
Notable recipients of our Free Software Program:
- VillageReach is a non-profit organization dedicated to increasing access to healthcare and vaccines within the most vulnerable and remote communities on earth.
- Mercy Corps helps communities forge new paths to prosperity in the face of disaster, poverty, and the impacts of climate change.
- Indus Hospital is a paperless hospital providing health care services free of cost to people who cannot afford them in Pakistan.

That's it for this month!

I hope you liked this newsletter. 🙂 Would you like to read more about how to improve your designer eye? Let us know by replying to this email!

See you next month, with more behind-the-scenes news from your friends at Balsamiq!

Billy for the Balsamiq Team

Most new customers find Balsamiq via recommendation...

If you know someone who might enjoy this newsletter, we would be most grateful for the introduction. Could you please forward this email to them?

If this newsletter was forwarded to you, please subscribe!

View in Browser | Update Your Preferences | Unsubscribe

search results page less bad UI

Balsamiq resources to help you see like a designer

How to develop your designer’s eye 👀

“I see just fine! Why bother?”

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

Use a few simple prompts to take your analysis further

Copying to learn

Now is the time to start practicing

Happy customer of the month

Product news

Wireframing Academy news

UX/UI links for August

Company news

That's it for this month!

Most new customers find Balsamiq via recommendation...

Key phrases

Older messages

Balsamiq’s Spotlight on “Solopreneur” Andy Brice

Should Product Managers Wireframe? Here's Balsamiq's take on it

Balsamiq interviews about the No-code world

How Balsamiq Outsources Content Projects

How Balsamiq Does Product Roadmaps

You Might Also Like

Cascade, HTMX, Sponge Furniture, Meaning of Color, Flipbook

9 Trends From Milan We Can’t Stop Thinking About

Subframe, Attributes vs Properties, Front End Handbook, aspect-ratio, GenAI

Ritmo, Climate Change, Icons & Typefaces, Click Wheel JS, CarPlay

Why Jake Arnold Doesn’t Text Clients

The secret ingredient to media success

#453: Design Systems

👨‍🏫 Striking Educational Website Designs + 🏆 Challenge Updates

Code Connect, JS Naked Day, Shape of AI, Product Design, CSS Grid Level 3

Accessibility Weekly #393: When Security and Accessibility Clash