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