5 min read - May 12 2026
|
Below you will find six UI/UX design tips for using visual hierarchy. When users encounter a page you design, you want them to view the most important elements first. You therefore need to guide their eye to those elements on the page. For example, the main title of the page or an important button (a call-to-action). So how do you ensure that users see what you want them to see? Use visual hierarchy.
🇳🇱 Lees dit artikel in het Nederlands: UI/UX design tips: visuele hiërarchie What is visual hierarchy?Before we get started with six UI/UX design tips, I will show an example that immediately clarifies what visual hierarchy is. Read the sentences in the following image aloud:
Chances are you read the black text first. Then the two white text snippets below it, and finally the white text at the very top. Most people read the text in that order. Apparently, some text snippets are just a little more important than others. But why is that? You probably have an idea. There are various design factors at play here....
🔎 Visual hierarchy is the principle of arranging and designing elements to show their order of importance. Below you'll find six UI/UX design tips for using those factors. The design tips are all aimed at creating a visual hierarchy on your page, whether it is a website, a web application, or a mobile app. You can apply this to any page.
UI/UX design tip #1: sizeThe dimensions of your text or the size of a button partly determine how quickly users read or see them. Below you see an example of two identical sentences in the same font. You probably read the text on the right sooner than the text on the left. Why? Because that text is the largest. Not only the height of the letters, but also the thickness of the letters is different. As a result, that text has a larger surface area, and your eye is drawn to it.
UI/UX design tip #2: colorBy choosing striking colors, some elements on your page stand out more than others. In the example below, you can see that YouTube uses red as an accent color. Although the images on the page are very different in color, your eye is drawn to the large red sphere with the icon on it, causing you to also read the title "Movies" to the right of it. Size therefore plays a role here (the large sphere), but also the color that stands out against the rest of the user interface. Incidentally, you probably also quickly notice the red arch on the image of "Smile 2," which also stands out very strongly, followed by the logo in the top-left corner.
UI/UX design tip #3: contrastIn addition to size and color, you can also use contrast. Contrast is the difference between the background and foreground color of an element or text. Below, for example, you see a white button on a black background and a white button on a green background. The contrast ratio of white and green is 3.17:1, and the contrast ratio of white and black is 21:1. The latter is the highest possible contrast. By using higher contrast, the button on the left appears to stand out much more from the page than the white button on the right, on the green background.
UI/UX design tip #4: whitespaceThe fourth design factor I want to share as a UI/UX design tip is the use of whitespace. In the example below, you see the homepage of a website that makes good use of this. The first thing you (probably) read is "Stay curious." This is not only due to the font size, color, or the contrast of the foreground and background. It is also because a significant amount of empty space, also known as 'whitespace' (or in this case, yellowspace), has been provided around it. As a result, your eye is truly guided to the object standing in the middle of that space: the page's H1 title. Incidentally, many people also quickly notice the M's on the right, as well as the black 'Start reading' button, the 'Get started' button in the top right, and the logo in the top left corner.
UI/UX design tip #5: movement (animation)Users viewing your page will also be attracted by things that move. You could think big: a carousel that automatically 'slides' to the next image, or a video in the background of your header. But perhaps it is better to apply this in a subtle way: through a menu that expands or collapses to grab your attention, a light-up button in the navigation, or an icon with a small movement (for example, a small alarm bell that 'rings'). In the YouTube example below, there is movement in the icon, the flame (check it out yourself on YouTube).
UI/UX design tip #6: typographyFinally, I will give you the UI design tip regarding the use of typography. You can also capture your user's attention by using special and unusual fonts. Think of a very sleek font, a bold font, or a romantic font like the example below.
Please note: unusual fonts can be difficult to read, and this has a detrimental effect on the user experience (UX). You do not want to discourage your users; you want to help and support them in using your website, web application, or mobile app. So, think carefully about your choice of fonts. 
ConclusionWhen users view your design, you want them to look at the most important elements first. You must therefore guide their eye to those elements you want to put in the spotlight. After all, you want the user to achieve their goal and for the information they are looking for or the action that needs to be performed to be found quickly. You can ensure this by creating a visual hierarchy on your page. Use the six design factors of Size, Color, Contrast, White Space, Motion (animation), and Typography for this purpose.
|
|
|
How do you create visual hierarchy as a UX/UI designer?Visual hierarchy is a way to make the most important elements on a page stand out. I explain it using examples and give you the six factors that play a role when you design yourself: size, color, contrast, white space, motion, and typography.
Do you want to learn more about UX/UI design and UX research, or are you interested in training courses? Then subscribe to the UX Coach newsletter. |
