Balsamiq resources to help you see like a designer

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 

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!

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!
Tweet
Website
Email Balsamiq
View in Browser  |  Update Your Preferences  |  Unsubscribe

Key phrases

Older messages

Balsamiq’s Spotlight on “Solopreneur” Andy Brice

Tuesday, July 26, 2022

An introduction with Andy Brice, an inspiring solopreneur. The latest news from Balsamiq: An interview with Andy Brice, an inspiring solopreneur. Trouble viewing? View it online. What do you call a

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

Wednesday, June 29, 2022

When is it appropriate for PMs (but also founders, developers, marketers) to create wireframes? The latest news from Balsamiq: When is it appropriate for PMs (but also founders, developers, marketers)

Balsamiq interviews about the No-code world

Friday, May 27, 2022

We learn about No-code by talking to two important players in the space. The latest news from Balsamiq: We learn about No-code by talking to two important players in the space. Trouble viewing? View it

How Balsamiq Outsources Content Projects

Friday, April 29, 2022

Outsourcing projects: what's been working for us and some suggestions for you. The latest news from Balsamiq: Outsourcing projects: what's been working for us and some suggestions for you.

How Balsamiq Does Product Roadmaps

Monday, March 28, 2022

A behind-the-scenes look at how the process of roadmapping has evolved at Balsamiq over the years. The latest news from Balsamiq: A behind-the-scenes look at how the process of roadmapping has evolved

AI and Design, Grid Areas, FigStats, ChatGPT, Payments UX

Tuesday, February 7, 2023

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar February 7 2023 Combining AI and Design: A Step-by-Step Guide

Game On! 23 Glorious Game Rooms From the AD Archive

Monday, February 6, 2023

Plus, The Future Perfect spotlights contemporary Korean design & more news View in your browser | Update your preferences Architectural Digest AD PRO Logo moon jars on a shelf THE FUTURE PERFECT

🏡 Flawless Smart Home Mobile Apps + 🏆 Challenge Updates

Monday, February 6, 2023

Your UpLabs Design Fix Is Here 🙌 First and foremost, we want to congratulate RH Agency, the winner of our latest 📑 Asana Redesign Challenge! Congrats! Secondly, the end of January has brought us an

Accessibility Weekly #330: Modern Health, Frameworks, Performance, and Harm

Monday, February 6, 2023

Sponsored by Automattic. They're hiring. February 6, 2023 • Issue #330 View this issue online or browse the full issue archive. Featured: Modern Health, frameworks, performance, and harm “A person

Latest stories

Monday, February 6, 2023

Submit Story Techcopes – The best free online SEO tools you will ever need Unlock the Full Potential of Your Youtube Channel with These Must-Have Free Online SEO Tools and more Find used fonts on any

Netflix Users, color-mix(), Poline, WhatsApp, TresJS

Monday, February 6, 2023

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar February 6 2023 The users Netflix forgot about uxdesign.cc

Pondering the future of web interactions

Sunday, February 5, 2023

Issue 129: If the internet was designed today, what would it feel like? ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

Latest stories

Sunday, February 5, 2023

Submit Story ColorMagic – Generate ideal color palettes with the power of AI ColorMagic is a color palette generator with GPT-3 AI. Just enter a color mood or image in text to generate a ready-to-use

Latest stories

Saturday, February 4, 2023

Submit Story UX Podcasts For Designers Podcasts are a fantastic opportunity to get up close with the people who know their craft. In this post, we compiled podcasts that are bound to provide valuable

Color Toilets and Sinks—Fixtures of Midcentury, Kitschy Interiors—Are Chic Now

Friday, February 3, 2023

Plus, a "Westworld" house goes on the market + more real estate news View in your browser | Update your preferences Architectural Digest AD PRO Logo A WESTWORLD HOUSE GOES ON THE MARKET,