Jasmine Christensen

“How do I get better at visual design?”

This question comes up a lot. I coach and mentor a lot of students on product design by tutoring for the Academy of Art in San Francisco, reviewing for AIGA’s portfolio reviews, hosting interns at Facebook and so on.

There’s a bridge from a student’s perspective to a professional’s perspective. For most, it’s guaranteed to be a blend of fear and excitement and curiosity, peppered with a lot of questions.

“What’s going to happen when I get out?”

“What kind of design jobs are out there?”

“What might I be a good fit for?”

“What if I don’t get a job?”

“WHAT IF THERE ARE NO JOBS?”

“What can I do now to prepare?”

We recently hosted a critique at Facebook with a student from Cornell, Jon Lee. There’s something that I really liked about Jon in our brief interaction: he’s self-aware. He already knows that he’s got room to improve in terms of visual design. He knows this because he’s gotten feedback on this from potential employers, and he — like many other students on the brink of their careers — is curious how his skills will prepare him for a design role. He wants to know how he can get better.

Being a solid product designer requires a broad skillset, and having visual chops is a big part of this role, particularly at Facebook. I’m excited that Jon is curious about these skills, and if I were able to pull him aside now, I’d ask Jon the same questions that I ask other students and give him a framework that hopefully will serve beyond this project.

Here’s a quick look at the designs Jon shared. At this point, he was just beginning to look at visual design.

We often refer to visual design as craft and execution at Facebook. In order to evaluate the current state of Jon’s work and encourage him towards well-crafted design, I need to ask questions. Inquiry should come before judgement, because it broadens the understanding of someone’s intentionality.

What is your type hierarchy?

• Have you audited your type styles? I see two casings (Title Case and UPPERCASE), at least three different type sizes, two colors of type, centered and left aligned type.
• What styles belong with headers? Which ones for buttons? Which ones for body copy? For metadata?

What patterns are you using?

• I see text buttons of two sizes, two button heights, two casings, and three colors, and I also see buttons with icons.

• I see two different list styles. One more clearly relates to existing discovery patterns (photo with business name, categories, and star rating) and one that looks like a wireframe (Recent Posts).
• What is the difference between buttons and lists? On the Profile page, cards, buttons and lists are using the same white background with grey outline pattern. Should they be different?

How does this compare to existing or established patterns?

• If the selections are toggles, could they automatically toggle on? Are Cancel and Apply necessary?
• Is Back the same as Cancel? Would an X in the top right corner suffice?
• I see there’s a Reset button without any filters applied. Is it necessary in this state? Could Apply replace Reset?
• Should the bottom nav stay put in this part of the experience?
• Do products in the same vertical have parallel patterns? Are any of these useful?

What are your margins and padding rules?

• I see minimal margins on the Nearby and Profile screens; Filter has much more generous margins.
• The “y” in Nearby in the bottom nav nearly touches the edge of the screen.
• What is your grid?

Are your icons clear?

• I see a single seat icon and clusters of 3 and of 6. Is that a count of seats or an approximation or a range? Would there be a better way to represent this? Is this the equivalent of “good for groups”? Is there another way to show this?
• Why is there no iconic equivalent to the opposite of outlet? If something is not important, why would you have to indicate that lack of importance; wouldn’t initial results include all available options?
• Does pie mean pie? Or desserts? Or food? Does the cup mean drinks? Could you assume that every food place serves drinks as well? Are there better groupings here?

How consistent are your design choices?

• I see distance using a dropdown while other filtering choices are buttons.
• Some buttons contain icons and other contain text.
• One icon uses perspective, while the others don’t. The wifi icon has the thickest lines; the outlet the thinnest. Some are pixelated; some are not. Some are black; some are grey.

• Most of the cards and buttons are using the same pattern: corner radius, outline, color fill, type. Are they too consistent?

Does everything on the screen need to be there?

• I see a divider above the search field and dividers under each Availability choice.
• I see one use of the color green.
• I see both icons and text in the nav. Are both necessary?

How would you define your color palette?

• The palette is pretty muted. It’s warm in tone, excepting a brighter green button. Do you have rules around what to use where?

Is your spelling, grammar, and punctuation correct? Have you considered content strategy?

• I’m familiar with Nearby and Profile in the bottom nav; what does Add mean? Add what?
• “Availability” is misspelled.
• Is the word Availability necessary?
• How does the flow of the page “read” (be it through words or visuals)? Your page title is Filter, and your section headers are Distance, Seating Availability, Wifi Availability, Outlet Availability, and Food/Beverage Availability. How would you describe what you can do on this page to a friend? Are these constructed in the right hierarchy? Are they named correctly?

How would this translate to another platform?

• If you designed this for an Android device or for desktop, would you make the same above decisions? What design decisions would you make differently?

How do I get better at visual design?

Having answers to these posed questions is an excellent place to start. Being a good designer—being a good visual designer — requires intentionality. That means that you’re thinking through these questions and answering them as you’re making design decisions, not only when someone asks you the question after the fact.

The next thing to work on as you answer these questions with intentionality, is to ensure that intentionality is based on solid design principles and research and attention to detail, and yes, sometimes things like style and preference. This can be tricky, because not every designer has these sensibilities or well-founded opinions yet. And that’s okay, because the path to improving this begins by understanding that your work isn’t quite there yet.

Ira Glass has fantastic perspective on this:

“Nobody tells people who are beginners — and I really wish somebody had told this to me — is that all of us who do creative work … we get into it because we have good taste. But it’s like there’s a gap, that for the first couple years that you’re making stuff, what you’re making isn’t so good, OK? It’s not that great. It’s really not that great. It’s trying to be good, it has ambition to be good, but it’s not quite that good. But your taste — the thing that got you into the game — your taste is still killer, and your taste is good enough that you can tell that what you’re making is kind of a disappointment to you, you know what I mean?”

If you have taste, and that taste tells you that you have room for improvement, you can improve your visual design. How?

You observe design in the world and form opinions on what’s good and what’s not good. You solidify your opinions on foundational design principles.

You look at established design systems like material design and Human Interface Guidelines.

You practice.

You browse websites and apps and Dribbble for excellent design work, and you don’t copy them, but you ask yourself why is this working? You search for answers.

And you practice.

You show your work to people who have the sensibilities—the visual design skills—already, and you listen to the questions they have about your work. (In Jon’s case, this is exactly what he did in our Facebook Design critique.) You think about your intentionality behind them, and you find your answers.

And you ask yourself questions like the ones we just went through.

Now, I could have given Jon reactions, things like “your styles are all over the place” or “that green button feels out of place.” I could have also prescribed solutions like “left align all your filter categories and buttons” or “make the corner radius of your buttons smaller” or “choose a brighter brand color.” But if Jon wants to get better, if you want to get better, it takes more than polishing a single project.

Feedback and mentorship can be very similar; the best development usually comes from asking questions and guiding rather than being prescriptive.
Improvement takes practice. The proven ability to execute again and again is what gets students that first design role, and once that first role is landed it’s the self-awareness and the progress that point towards a trajectory of growth.

‍