• How To Make Your Not-so-great Visual Design Better
  • The Nuggets translation Project
  • Translator: Liz
  • Proofread: Gran, Jiegao Zhu

Photo by William Iven Photo by William Iven

How can you improve your visual design?

This question bothers many people. I have coached and guided many students in the direction of product design, such as serving as a tutor in San Francisco Academy of Art, as a product review in AIGA Portfolio Day, and as a tutor for interns on Facebook.

There is a bridge between student perceptions and professional product designers, which is made up of awe, passion, curiosity, and questions.

“Where am I going after I graduate?”

“What are design-related jobs?”

“What kind of job am I suited for?”

“What if I can’t find a job?”

“What if there’s no job opening?”

“What can I do to get a job?”

Recently, we hosted a self-review on Facebook that included Jon Lee, a student from Cornell University. There was something about him that I admired in the few interactions we had. That’s his self-perception. He knows where he needs to improve in visual design. He owes his clear self-perception to the feedback he gets from potential employers and, like many students about to enter the workplace, is curious about what skills are needed to be a designer. He wanted to know how he could do better.

Being a product design veteran requires a wide range of skills, and having Visual Chops is important, especially on Facebook. What excited me was that Jon was curious about this, and if he were with me now, I would ask Jon a question that I had asked a lot of my classmates, and offer him a solution that I hoped would help him outside of the project.

Here’s an overview of Jon’s design work. From here on he really set foot on the path of visual design.



Jon Lee’s concept for Applied Nearspace.

At Facebook, we often divide visual design into craftsmanship and execution. In order to assess the quality of Jon’s work and motivate him to design better, I need to ask him questions and research him before I evaluate his work, because it gives me a better understanding of other people’s design intentions.

What is your hierarchy?

  • Have you changed your design style? I see two styles (capitalization of headings), at least three size types, two colors, and two center and left aligned types.
  • What’s the header style? What is the style of the button? What about the body copy style? What about metadata?

What style do you use?

  • The buttons have fonts in two sizes, two button heights, two shells, three colors, and I see buttons with ICONS.

  • There are two different list styles. One is clearly about real-time discovery patterns (photos and business names, categories and stars), and the other looks like a wireframe (recently released).

  • What is the difference between lists and buttons? On the profile page, cards, buttons, and lists are styled with the same white background and gray outline. Should they be designed differently?

How is this design style better than existing or published styles?

  • If options can be toggled, will they be toggled automatically? Is it necessary to cancel and apply?
  • Is clicking back the same as clicking Cancel? Can I change the upper right corner to an X?
  • I see there’s a reset button but it doesn’t filter anything. Is it necessary to add this button in this case? Can the Apply button replace the reset button?
  • From a user experience perspective, do you need this bottom navigation bar?
  • Are the controls parallel in the same vertical direction? Are they all necessary?

What are your specifications for margin and padding?

  • I see lots of fine margins from nearby pages and data pages; Filtered pages have more pronounced margins.
  • Navigation at the vertical point of a nearby page is almost at the edge of the screen.
  • Why not use a grid layout?

Does your icon express what you want it to mean?

  • I saw an icon for “seats” with pictures of single seats, three seats, and six seats clustered together. Is this the count of one seat or the approximate value of some seats? Or a series of seats? Is there a better way to design this meaning? Is this the meaning of “group purchase” discount? Is there another way to design it?
  • Why is there no obvious sign of two opposite meanings? If it’s not important, why are you showing it as unimportant? Shouldn’t the preliminary results include all the available options?
  • “Pie” here means “Pie”? Or dessert? Or is it all food? What does a drink mean? Do you assume that every restaurant can serve drinks? Is there a better group?

Are your design choices consistent?

  • I see some filter button options with slightly different styles when using the drop-down filter feature.
  • Some buttons only have ICONS, and some buttons only have text.
  • One button has an Angle, while the others don’t. [Fixed] The wifi icon has a thick line But the socket has very thin wires. Some are pixelated, some are not. Some are black, and some are gray.

  • Most cards and buttons have the same style: angular radii, contours, fill colors, etc. Are theytooConsistent?

Are all the elements on the screen necessary?

  • There is a split line above the search area, and a split line below each of the options.
  • I used green in one place
  • Navigation uses ICONS and text. Do they need to exist together?

How did you choose your color scheme?

  • Your color scheme is simple and warm, except for a bright green button. What design principles do you have and where do you apply them?

Are your spelling, grammar and punctuation correct? Is your content logical?

  • The Navigation bar at the bottom of the “Nearby” and “Profile” pages is common, but what the hell is this “Add”? What to add?
  • The word Availability is misspelled.
  • Is there any need for this “Availability”?
  • How are page “views” calculated? Your page is titled “filter,” but your head shows “Distance,” and the page filters out available seats, Wifi, outlets, and food/drink. But can you explain to your friends what this page can do? Are these pages well structured? Are they named correctly?

Is this design portable?

  • If you had designed this desktop for Android, would you have made the same design decision on any other platform? Do you make different design decisions on different platforms?

How can you improve your visual design?

Answering these questions is just the beginning of a successful design. To be a good designer — to be a great “visual” designer — is to be unique. This means that you are thinking and answering every question as a designer, rather than when it is already too late.

The next step is to answer these questions “specifically” and make sure your design intentions are based on solid design principles, research, and attention to detail. Of course, questions like style and preference can be tricky. Because not every designer has this kind of awareness or well-founded idea. This is natural, because the first thing you can do on the road to improving your design is accept that your work isn’t perfect yet.

Ira Glass has a great point about this:

No one makes fun of newbies – and if anyone does, I hope they don’t make fun of me – because we’re both creative… We do it because we have good taste. It’s kind of like a bottleneck, you know, the first couple of years you were creating stuff, and now you think it’s not that great? Isn’t it? They’re not great. They really are average. But you’re trying to do well, and you’re confident that you can do well, even though your work isn’t that good. But your taste — the equipment you use to create — is also your work’s modifier, the wisp of disappointment that passes through you when you see what you’ve created, you know?

If you have taste, it can tell you how much you need to improve and how you can improve your visual design.

Look at the world of design and form your own opinion about what’s good and what’s not. Reinforce basic design principles in your insights.

Read more about the construction of design systems such as Material Design and Human Interface Guidelines.

Try more

Browse websites, download apps, and Dribbble for great designs. Don’t copy someone else’s work, but ask why it’s good. Then try to figure out the answer.

It’s still hands-on practice

Show your work to people who have design insights — old driver designers who have good skills — and get their feedback on your work. Then think about the design intentions behind your work. Then go find the answer.

Constantly reflect on yourself like we just mentioned.

Now I can give Jon some feedback, such as your “design styles are all over the place” and “your green buttons are very obtrusive”. I also pointed out solutions like “left-align buttons in all filter categories,” “reduce the radius of the corner of the button,” “Choose a bright tone for your brand color,” and “polish and polish” if “you” want to make your work better.

Feedback and guidance from others on your work can work just as well; The fastest way to improve is usually through practice, not just understanding norms. Practice makes progress. The ability to try and execute again and again is the beginner’s first step into the role of designer. Once the role of designer is settled in your mind, it leads you step by step.