How To Develop An Eye For Design - Stories

Google Material Design

When I started off in design, I sucked.

I was obsessed with copying pieces of the trending Dribbble shots, but oblivious to how all the pieces worked together. If you could see the harsh drop shadows and unnecessary flourish I added to things, you would gasp in horror.

Though I was no product design prodigy, I figured out how to quickly hack together the skills I needed. And now I want to share one of those lessons with you. Whether or not you’re a designer, this exercise will help sharpen your product sense and improve your eye for design.

Don’t just use apps, study them

You develop your design eye by thinking as if you were the designer of a product. Open an app you use often and resist the urge to start scrolling through content. Instead, I want you to actively focus on the screen in front of you. Here are some things to keep in mind:

Hierarchy
How does the design guide your focus? What information is highlighted? How does color and text treatment signal the importance of certain elements?

Content
What specific wording was chosen for this experience? What content is visible and more interestingly, what content isn’t? How is spacing used to frame the content?

Intent
Why would someone open this app? What problem does it solve? How could the design help to solve that problem even better?

Audience
Who are the people using this product? How might their use cases be different from yours? How does the design serve these use cases?

Breaking down the app

In the GIFs below, I’ve deconstructed apps to make it easier to focus on each component. You may observe details you didn’t recognize before, as you try to anticipate what component will be next within the animation. As you watch each component build upon the next, be curious about everything you see and think through the choices that had to be made for this product.

Airbnb deconstructed

Some observations to get you started:

The placeholder text in the search bar could have just said “Search here” but instead they mention a specific city. Though I have no intention of going to London, seeing the possibility of it is exciting.
I wonder how many iterations they tried with Dates and Guests only being visible at a later point in the flow. I’m sure many designs have gone through explorations where the Dates aren’t presented until you select a location. This makes me curious about how people search and when they introduce filters to their searches.

Twitter deconstructed

Observations:

Notice how the number of Retweets and Likes is bold
The time stamp includes not just the date, but also the specific time. Why might that be the case? Also, notice where the timestamp is shortened elsewhere in the app (e.g. “5h” on Feed view or “4/14/18” on Profile view). Think through the different intentions of those views.
There’s a composer in view to add another tweet and the language is specific. It’s not just “Add a Tweet”, it’s “Add another Tweet”.

Spotify deconstructed

Observations:

Notice how Spotify keeps the playing song in view
The content they’ve chosen to display for this New Releases view includes new playlists and new albums/singles.
The playlist New Music Friday has a follower count, while the playlist Release Radar does not. Let’s dig into this constraint — because release radar is specific to the user, this would not have followers. Someone had to map out all of the content use cases and decide on the appropriate subheaders to pair with them.

Know the rules, so you can break em

Next time you’re sitting in a Lyft or waiting on a friend, open up an app and think through the reasons why the designers chose to design it that way. By routinely analyzing other apps, you’ll develop your product thinking and get better at designing apps yourself.

I want to hear from you! Feel free to reach out and let me know your thoughts. I’m here to help ☺️ And if you want more thoughts on this topic, visit Hack Design and check out my lesson on Closing the Creative Gap.

Inspired by insights above? Please feel free to connect with us on our @Twitter.

This article is written by Kathleen Warner on UX Collective: How to develop an eye for Design.