Visual Design for UX & UI Designers

paint brush and palette on a purple background

What is visual design?

dribbble page

When you think of visual design, you might think of the pretty UIs on Dribbble.


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.

past ui work
My early attempts of UI design... yikes :

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.


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.

Key concepts/tips

For visual design, we’ll go over the key elements and principles to get you started.

Elements of visual design

According to Interaction Design Foundation, there are 7 main elements of visual design:

1 - Line

a line
A line.
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.

2 - 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.

3 - Negative space/white space

negative shape

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.

4 - Volume


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.

5 - Value


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.

6 - Color


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.

7 - Texture


The texture is the surface quality. As a designer, you can work with two types of textures:

  1. Tactile (you can feel the texture)
  2. Implied (only see the texture)

Most visual designers will work with implied textures since screens aren’t able to produce tactile textures.

Principles of visual design

Now, according to Nielson Norman Group, a world-renowned UX consultancy, there are 5 principles of visual design in UX:

1 - Scale


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.

2 - Visual hierarchy

visual hierarchy

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.

3 - Balance


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. blog
Shameless use of my blog -> but notice how I try to left align my items & maintain symmetry for my articles



Elements are asymmetrically distributed relative to the central axis.

Use this to add a sense of energy and movement.

asymmetrical example
One of the coolest websites I've seen that uses asymmetrical layout



Elements radiate out from a central, common point in a circular direction.

Use this to lead the eye to the center of the composition.

4 - Contrast


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.

5 - Gestalt Principles

gestalt principle

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.

laws of ux

To get you started

Familiarize yourself with visual design principles

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.

Copy great products

You can do this in a few simple steps.

  1. Find an app or website you love to use
  2. If it’s an app, screenshot a screen you like or find it on Mobbin. If it’s a website, screenshot it!
  3. Put that into Figma
  4. Try to replicate the same screen and question the product’s visual design elements. For instance:

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.

Keep the principles in mind when designing

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!

Learn more

And that’s a wrap!

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!

Read Next