Visual Elements In UI Design: 5 Tips On How To Use Them

What makes a website beautiful? We rarely stop and analyze why. Do beautiful designs follow the ultimate design rules? The answer: Yes, but you have to know how to spot the recurring visual UI elements they consist of!

In this post you will learn about:

• The five main visual elements
• How to recognize them (with examples)
• Five tips on how to use them in practice

What are visual elements in UI?

Visual elements (elements of art, even) form the fundamental building blocks of any type of visual communication such as line, shape, color, texture, and pattern. Just like words in a language, they have a limited meaning alone, but you can tell countless stories as soon as you start combining them.

Studying good visual systems resembles learning a new language. In order to understand them, you need to examine them piece by piece until you find their most basic elements. This is how designers at our UX company work within their projects. Let’s look at each of them and some examples!

Line: The visual guidance

Unlike in mathematics, lines in design can have width and depth as well. Actually, this visual element makes up the most versatile of them all, since it can suggest many other shapes, patterns and textures.

We can use lines to guide our eyes towards something or divide things from each other. It can even suggest totally abstract ideas such as time (long or short) or rhythm (straight or wavy).

In this example, horizontal lines separate the main parts of the article from each other but also create rhythm when scrolling down the page. (source: misplaced.design)

Shapes: The illusion of space

Shapes consist of one or more lines but they stand out of their environment due to their defined boundaries. They can step out of the two-dimensional world to create the illusion of space and depth.

The current era of minimalism makes sticking to 2D more common. However, every time you put a drop shadow on a CTA button, you create this illusion!

Geometric and organic shapes offer a different way of grouping. Geometry means order and predictability, great in UX. On the other hand, organic forms appear more natural and human to our eyes.

I love how a subtle change can make simple shapes like a rectangle interesting. In the example above, the angle of the images differ from that of the red rectangles around them. In turn, this creates an interesting tension between the two.

The placement and size differences between the three objects make the composition dynamic and help create a hierarchy.

Colors: The main triggers of emotion

Of course, this element cannot exist on its own, either. Colors need a platform to exist. Keep in mind that different colors trigger not necessarily positive or negative, just different kinds of emotions.

Think of neutrals (black, white, grays), warm colors (reds) which stimulate more, and cool colors (blues) which sooner calm us down. To make things more complicated, colors don’t just mean things on their own. They also interact with each other.

How you combine colors can enhance your website’s message. The monochromatic, analogous, complementary and triadic comprise the four basic color schemes. I advise you to use Canva's Color Wheel to help you choose the right color combinations.

Monochromatic colors

A monochromatic scheme uses one main color with all of its shades from white to black. People often use it on minimalistic websites which emphasize the content itself. E-commerce fashion brands usually provide good examples.

Analogous colors

Analogous colors lie next to each other on the color wheel. In the example below, Forest uses different shades of greens and blues to create a harmonious look. We often find this scheme in nature (think of an actual forest), which explains its visual appeal.

Complementary colors

Complementary colors lie opposite each other on the color wheel. These pairs make each other stronger – one looks more vivid next to its pair. Here, the yellow CTA button looks extremely bright compared to the dark purple background. The bold white paragraphs help make this contrast even more striking. Love it or hate it, these color combos scream for attention.

Triadic colors

Triadic schemes use three main colors which perfectly balance each other. They form an equilateral triangle on the color wheel. A safe choice for websites with a large audience, it gives a calm, harmonious look without surprises. Slack uses this scheme with its purple-yellow-green palette. Everything balances here and the elements don’t overpower each other.

Textures: Mimicking the real world

Since design website locks us into 2D space, we can only mimic real-life textures. Visual texture gives the illusion of texture on a two-dimensional surface. We can only perceive it with our eyes, not our hands.

We can employ pictures as powerful tools for displaying textures. In this example, the rough grey teapot and tea leaves set an interesting contrast to the delicate white cup in the foreground. The strong symmetry of the picture guides our eye to the middle, where our perfect cup of green tea awaits us.

UI patterns: The power of repetition

Repeating a motif (or texture) on a surface creates a pattern. They can look natural or man-made, organic or geometric, repeating or random.

Intercom uses bright and colorful patterns on top of each other to create a playful and friendly tone of voice. These patterns have a handmade feel, just like if someone had started to doodle with crayons. However, notice that the page’s main color remains white, making sure that the content remains the main focus.

I hope these examples help you become more mindful of visual elements when you stumble upon a cool website!

5 tips on using UI elements

1. Stick to the brand guidelines and the tone of voice

Different industries determine how you can use visuals. We base our judgment of a site’s credibility on a few seconds of scanning the home page. Would you trust a law firm which used crazy textures and pink illustrations on their website?

You would have concerns. Of course, you can innovate, but you have to position your brand the same category as your competitors. Visuals should always respect the company’s industry and its values.

2. Always think in systems

Visual consistency holds the key since it helps your users navigate through your site and remember your brand. It also indicates quality. If you have actually taken the time to consider the small details on your website, it means you probably offer a well-designed product as well. Consistency also means that in the face of endless combinations of visual elements, you should choose them selectively.

If you use an outlined icon set, stick with it. Use two or three main colors and their shades. And no, a new landing page doesn’t necessarily provide a good reason to introduce a third. These things may look trifling, but they add up.

3. Make sure that content comes first

Visuals help communicate the brand message better. Don’t use them just to pretty up your site (even though it comes as a cool benefit, one that will make sure that visitors will stay on your site to actually read your content). While you can tell something in writing, an illustration can show it, especially a complex idea.

Visuals can give a deeper understanding of your product, express a feeling of your brand’s personality and help communicate your tone of voice. But users still need to find what they are looking for. Give people value with your content. Written content and visuals both have their place, but one cannot function well without the other.

4. Respect negative space

We call the area between the elements of a design negative or white space. Don’t let the word “white” trick you; make it any color your heart desires. But keep one thing in mind: White space does not mean wasted space. People are always hurrying and want to find things as fast as possible.

Cram every bit of info about your product into one page and nothing will stand out. Guide the visitor's eye to the most important information you want them to understand and eliminate any disturbing factors. Negative space can help you here: It allows tired eyes to rest a bit while the brain processes the new information.

5. Experiment

Visual elements can prove very versatile, and visualizing something can have multiple good solutions. Don’t shy away from trying out more than one solution, just make sure to test which one performs better. It could wind up a small thing like a landing page, or also how you position your brand. Customize, experiment with visuals until you find the ones that work best for your company's image.

Slack gives us a very recent example. Their new logo shocked the design community all around the world. I don’t want to debate the issue, but just mention that Slack got a new website design as well. They replaced the very illustrative, fun and, well, young one. The new one uses many more pictures of actual people and workplaces and concentrates on case studies and bigger businesses.

But plenty of things stayed the same: colors, the friendly tone of voice, the simple navigation system, the focus on people working together. Slack is experimenting with growing up. :)

I hope this little post helped you understand visual elements better. If you have a great example for any of the topics mentioned, feel free to comment on it below! I would love to see your favorites as well!

Want to know more about UX and UI?

Need help with a well-defined, UX-related problem, with business implications? Let us run a design sprint for you!

We also have additional reading for you, an actual hardcover Product Design book as well! And we ship it worldwide!