How to Improve Your Visual Design Skills
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?
When people refer to visual design (at least in my conversations), the context is generally around designing the look and feel of the user interface. I think the term visual design encompasses various disciplines such as typography, color theory, layout, etc… While it would be interesting to get into each of these disciplines, I am only going to focus on the principles that help to achieve balance, contrast, and hierarchy in this article because I think a more deliberate practice around these areas will yield a significant improvement especially when you just started out as a designer.
How do people work on their visual design skill?
Many people got inspired by the idea of doing Daily UI challenge as a way to improve their visual skills. Some people read books, blogs, and then practice what they learned in their day to day works or side projects. I think practice is an effective method for improvement, however, practicing without targeted goals or success measurement can be ineffective.
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
This is about the efficiency of your visual design process. For your tool of choice, you should aim to master shortcuts or workflow patterns that can produce your desired visual results in the most efficient manner. Each design tool has a different shortcut or workflow so your strategy to improve should be something like:
- Reference the shortcut cheat sheet/menu to identify what common tasks you are not leveraging the shortcuts for.
- 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
- Rinse and repeat until you covered all or most of your common workflows
Focus on alignment
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
White space helps to create breathing room and visual emphasis in the design. Just like alignment, the lack of spacing around elements can make the overall design feel cluttered. There isn’t an absolute rule around how spaces should be used. Here are a few ideas on how to ensure you apply the appropriate spacing in your design works:
- 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
You can have appropriate alignment and spacing in your design but it can all fall apart if you don’t apply them consistently due to the lack of cohesion. To tie everything together, to have consistency in your design is to establish usage patterns. As you work on your design polish, you should consider the following:
- 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?
While it is good to take the time to practice visual design with side projects and exercises like Daily UI, you can make larger strides in a shorter amount of time if you direct your practice on the fundamental areas of visual design such as alignment, spacing, and consistency.