If you have a basic understanding of HTML and CSS and want to create great-looking user interfaces in the browser, look no further! In this article, you'll boost your UI design skills by learning about the following seven fundamentals:
- white space
- visual hierarchy
This article builds on a free Scrimba course created by the brilliant Gary Simon, also known as DesignCourse. The course offers a set of interactive tutorials that you can take at your own pace and even redo to really embed your learning.
So if this article leaves you with wanting more, be sure to check out the course. Now let's jump into it!
The first design fundamental we'll look at is White Space, also known as negative space. As the name suggests, it is the space between elements on the page.
Elements which are squashed up on a page with no white space not only look unattractive but are also difficult to navigate and tricky to read.
We can adjust white space in various ways including padding, margin and line-height. Check out the before and after image below to see what a difference effective white space can make.
Next up is Alignment. This is the process of ensuring that every element is positioned correctly in relation to other elements, for example by ensuring that columns are aligned down the page.
As you can see from the following images, the first page with elements in numerous different columns (weak alignment) is far less attractive and readable than the second, which has strong alignment
It's important to also consider Contrast when building a page or application. Contrast is the difference between colors which appear next to each other on the page.
As you can see from this example, pages with poor contrast are difficult to read and the elements do not stand out.
Pages with good contrast, like the one below, not only look much better but are more user-friendly and accessible.
To help you get your contrast just right, the WCAG (Web Content Accessibility Guidelines) suggest a minimum (AA) contrast ratio of at least 4.5:1, or 3:1 for large text, or an enhanced (AAA) contrast ratio of 7:1 or 4.5:1 for large text. There are a range of plugins or websites to check this.
Scale is also an essential part of the UI, so consider the size of every element carefully. For example, elements should be big enough in relation to the page (so no large gaps). Also, elements with higher importance, such as headlines, should be larger than those of less significance.
Take a look at the before and after images below, and notice how much better the page looks when it is scaled correctly.
Typography also has a big impact on the UI. There are many ways to adjust this, including font choices, font size, alignment, letter spacing, line height, font styles, color and contrast.
As a general rule, use no more than 2 font families on a single page and ensure the different aspects work together in order to establish the order of importance. This is known as visual hierarchy, which we'll cover in more detail below.
If you follow these tips, your page will look as good as this:
And not confusing and unreadable, like this:
The UI design fundamental which first shapes a user's experience is color. Color psychology means that each color elicits a meaning to certain people - for example, red can signify danger, while white can evoke cleanliness and serenity.
Be careful with color, though. Meanings vary across cultures, so always do your research and consider your target audience when selecting colors.
It's also important to remember that too many colors can create a bad UI and colors you choose to use should complement each other. As a rule of thumb, you can't go wrong with using lighter or darker variations of the same hue next to each other. Just look at how much easier on the eye the second image below is compared to the first!
The final item on our Design Fundamentals list is Visual Hierarchy. Some elements of a UI are more important than others. Visual hierarchy allows us to establish this importance.
This can be done with position, contrast, color, scale, style or a combination of the above, as shown in the second image below, which has a much better visual hierarchy than the first.
In this article we have covered the seven main design fundaments: white space, color, contrast, scale, alignment, typography and visual hierarchy. They are all equally important to the UI - if one of these elements is lacking, the entire user experience will suffer. So make sure you consider them all when creating your UI designs.
The UI Design Fundamentals course
If you'd like to drill down into these subjects more, please check out the free UI Design Fundamentals course at Scrimba. In it, you'll learn about the fundamentals in much greater detail.
Good luck, and happy coding :)