You made it to the footer 👋
To get new article update & cool design tingz I find, subscribe by taking 4 seconds to type down your email:
When you think of visual design, you might think of the pretty UIs on Dribbble.
Stop.
Visual design is not just about product prettiness. That’s only one side of the picture.
Visual design is aesthetic and strategic design (Interaction Design Foundation).
Notice the word “strategic”?
Now before I address that, I want to clarify:
Making the interface look nice with visual design is still very important.
A user’s first impressions typically form in 50 milliseconds.
So if you can’t grab their attention upfront, they leave.
But the word “strategic” implies that visual design isn’t adding pixels to the screen to make it only look “pretty.”
It means adding pixels to
Draw the user’s attention to the important aspects of the product or screen.
Designers with great visual design skills place elements carefully to create interfaces that optimize UX and drive conversion.
One way to test if you’re intentional with your design is to imagine someone asking you “why this”.
I experienced this the hard way in my first design internship.
Back then, my only exposure to visual design was Daily UI Challenges.
So, when I was designing wireframes, all I thought about was:
How do I make this page look pretty?
instead of:
How do I make this page fit the company’s brand and draw their attention to the most important elements to complete the page’s goal?
So, I got smashed in every design review.
It was like those Mandarin quizzes with red marks all over but on my design files.
Yikes.
But I learned this the hard way:
Visual design needs to be intentional and draw the user’s attention to the most important aspects.
Now, you might be wondering:
Wait Guo, then how can I create thoughtful and aesthetic visuals?
Well, let’s go over the basics.
For visual design, we’ll go over the key elements and principles to get you started.
According to Interaction Design Foundation, there are 7 main elements of visual design:
Are you kidding me? A line?!
Yes, a line. I want to go over all the basics, so be patient here.
Lines are strokes connecting two points. We can use them to create shapes. And when we repeat lines, we can form patterns that create textures.
Use these to create divisions, textures, and shapes.
Shapes are self-contained areas, usually formed by lines.
We tend to identify objects by their basic shapes and only focus on the details on closer inspection. Thus, shapes are crucial for quick and effective communication.
Negative space is an empty area around a (positive) space. When we design positive shapes, we’re also designing negative shapes. It helps bring balance to a composition.
Volume applies to 3D visuals.
Though we rarely use volume in visual design, the understanding volume will come in handy for XR (VR/AR) designs.
Value describes light and dark.
A design with a high contrast of values creates a sense of clarity. And a design with similar values creates subtlety.
Color is an element of light. And color theory is a branch of design focused on the usage of different colors in a design.
Use this to set the theme/tone of the design and attract attention to important elements.
The texture is the surface quality. As a designer, you can work with two types of textures:
Most visual designers will work with implied textures since screens aren’t able to produce tactile textures.
Now, according to Nielson Norman Group, a world-renowned UX consultancy, there are 5 principles of visual design in UX:
The principle of scale refers to using relative size to signal importance and rank in composition.
When scale is used properly, the most important elements are bigger than the less important ones.
The reason behind this is simple:
When something is big, it’s more likely to be noticed.
And generally, a visually pleasing design uses no more than 3 different sizes.
The principle of visual hierarchy refers to guiding the eye on the page so that it attends to different design elements in the order of their importance.
This can be implemented through variations in scale, value, color, spacing, and more.
If you’re having a hard time figuring out where to look on a page, the page’s layout is likely missing a clear visual hierarchy.
To create a clear visual hierarchy, use 2-3 typeface sizes to show what pieces of content are most important. Or use bright colors for important items.
The principle of balance refers to a satisfying arrangement or proportion of design elements.
To establish balance, think of an imaginary axis as a reference point for how to organize your layout.
For example, balance can be:
Elements are symmetrically distributed relative to the central imaginary axis.
Use this to create a quiet, static, and calm composition.
Elements are asymmetrically distributed relative to the central axis.
Use this to add a sense of energy and movement.
Elements radiate out from a central, common point in a circular direction.
Use this to lead the eye to the center of the composition.
The principle of contrast refers to the juxtaposition of visually dissimilar elements to convey the fact that these elements are different.
Contrast provides the eye with a noticeable difference between two objects.
Normally, contrast is applied through color. And it’s good to use a color contrast checker to make sure that your content can be read by all target users.
Gestalt principles explain how humans simplify and organize complex images by arranging the parts into an organized system that creates a whole.
There are several Gestalt principles, including similarity, continuation, proximity, closure, and more.
Learn more about these principles on the Laws of UX.
What you’ve just read is a good start. But there’s so much more to it!
For instance, search up “Gestalt principle.” And you’ll find a ton of gestalt theories such as proximity, symmetry, and more!
Because the thing is: Once you understand these principles and apply them to your designs, they’ll soon become second nature.
You can do this in a few simple steps.
Why does the button take up the full width?
Why does this app use cards to display their items?
What is the goal of this page? And do the visual design elements lead the users to that goal?
Be skeptical. And trust me, you’ll learn a lot.
It’s one thing to read about the principles.
It’s another thing to actually apply them to your designs.
There will be lots of trial and error. But only by applying will you actually grow as a designer.
At first, I was planning to write the article - “10 Hard Skills for UX & UI Designers.”
But after doing some research, I realized:
That will be an insanely long article...
Thus, I decided to break up the skills into individual articles. And I will be publishing them in the future!
Thank you for being awesome and reading this far! :)
If you have any questions, feel free to reach out on LinkedIn, Twitter, or by email. Will love to set up a casual call and chat!