How to Improve Your Visual Design Skills

Deliberately practice vs mindless repetition

Poyi Chen
Poyi Chen
Aug 1, 2019 · 4 min read

When talking to designers who are either transitioning into UX/Product design or trying to move up into a more senior design role, one of the questions I often get is how to get better at visual design skills. This is a big topic to unpack and there are many approaches. In this article, I like to call out a few focus areas for people who are looking to level up your visual design skills.

What visual design skill(s) are we referring to?

How do people work on their visual design skill?

To practice visual design with a purpose and have a systematic way to measure and monitor improvements, I recommend focussing on the following areas.

Mastering your tools

  1. Reference the shortcut cheat sheet/menu to identify what common tasks you are not leveraging the shortcuts for.
  2. Decide the actions you want to memorize the shortcuts for and practice. One tip is to put up a sticky note nearby for the shortcut you are trying to build muscle memories for
  3. Rinse and repeat until you covered all or most of your common workflows

Focus on alignment

Alignment comparison example

One of the key differentiators between quality and poor visual design is alignment, which can trigger the OCD in everyone. Mis-alignment may not hurt the usability but it doesn’t look as polished. To get into the habit of training your eyes to spot and correct alignment issues. Here are a few tips:

  • If elements are grouped together, always check to see if they should be aligned towards one direction and if they are perfectly aligned
  • Use the alignment feature (the funny looking sets of icons with boxes and lines through them) within your tool as much as possible (remember the shortcuts if available!)
  • When designing a full-page, look at how each section are aligned to one another and determine how it should visually flow

Space intentionally

  • Use a grid system like a 12-columns grid and/or the 8-point grid to help you space elements out on a page
  • Establish spacing hierarchy across your page. For instance, the spacing between elements within a card component should be smaller than the spacing between the cards on the page

Obsess over consistency

  • Are you applying the same spacing unit around the same elements?
  • Is everything aligned the same way? If it’s not, do you have a good reason for why it is different?
  • Do the same elements (e.g. link, text, buttons, etc..) in your design all share the same style properties (e.g. size, color, typography, etc..)? If not, does it need to be different?

Conclusion

The Startup

Get smarter at building your thing. Join The Startup’s +724K followers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store