Expert summary: 8 practical tips to greatly improve UI design efficiency!

When designing, do you struggle with various possibilities, such as whether to make text bigger or smaller, increase (or decrease) the white space around elements, or whether to make the color darker or lighter? In this article, I will share some tips on how to solve these common problems and make your designs more consistent and user-friendly.

This article is about the limits and rules to follow throughout the design process. There are countless ways to combine elements in an interface, so it's important to set some rules and boundaries, otherwise the design workflow may be difficult to move forward smoothly. You may be constantly struggling with all the possibilities, trying to choose the best one among many "correct" options. By setting (and following) some basic rules, the design can be more unified.

This article is prepared for junior designers. You don’t need a lot of experience to quickly master these skills.

The Importance of Consistency in Interface Design

Let’s start from the beginning. You want your design to look good, trustworthy, and to avoid clutter at all costs. To achieve this, it’s important to have a complete systemic mindset.

Developers also expect designers to use systematic thinking. They like well-organized designs, which makes their work easier.

Design system for given size

It doesn’t matter if you’re resizing text, images, or white space, as long as you decide on the size of each element. I bet you’ve picked a size for an element, changed it five minutes later, and then changed it again not long after that, and maybe changed it countless times before settling on it.

Which size is best? It’s probably one of the sizes you’ve tried, but this is an endless time-wasting trap that should be avoided!

First choose the basic unit: 8 pixel grid

To make the whole design look cleaner, it’s best to set the base units first and then determine all the sizes. The exact number you choose should be up to you, but usually, the best option is to stick to some proven rules. One of these rules is to resize and move elements in multiples of 8 pixels. This rule will make decision making more efficient.

px and dp: The word "dp" is also used in interface design and prototyping. "dp" is the abbreviation of "density-independent pixel". "This unit is based on a 160 dpi screen. 1 dp is equal to 1 pixel on a 160 dpi screen, equal to 2 pixels on a 320 dpi screen, and so on. The mathematical conversion formula is 'px = dp * (dpi/160)'.

Note: If you are working with smaller elements or objects, you may also want to use 4-pixel increments instead of 8-pixel increments—occasionally make further adjustments as needed.

But why 8 pixels?

Here are a few reasons why 8 is often seen as a “magic number”:

• 8 pixels is a sufficient minimum "increment".
• 8 is a good number because it is divisible by 4 and 2.
• If you use 8, you can easily resize any element without half pixels, such as 8 / 2 = 4, 4 / 2 = 2, and 2 / 2 = 1. On the other hand, if you start with 10, you will get 5 pixels, then 2.5 pixels, and then 1.25 pixels. When designing interfaces, avoid half pixels whenever possible. By using full pixels, the elements in your design will align to exact pixel boundaries, and ultimately look clearer.
• Multiples of 8 (8, 16, 24, 32, 40, 48, 56, 64, 72, 80, etc.) are intertwined with binary values ​​(1, 2, 4, 8, 16, 32, 64, 128, 256, 512, etc.).

Finally, the numbers are also easy to remember.

What are the advantages of using an 8-pixel grid?

• As a designer, decision time is extremely valuable. This will make you faster and more efficient.
• If you work with development, this can create a system that helps the team be more efficient. If development needs to make some quick changes, he can adjust the value to 8 pixel increments. This ensures consistency and regularity.

When people visit the website you designed, they will feel comfortable, which enhances trust and user experience (Caiyun Note: A sense of order can make users gain trust and feel comfortable).

Use a grid to lay out all elements

1. Horizontal Grid

I’m sure you’ve used grids when designing websites. Using grids helps you place all the elements accurately on the interface.

The grid forms the skeleton of the interface and determines where elements can be placed. Templating defines clear boundaries so that the design is more consistent. With a grid system, it is easier to decide where to place elements. As you gain more experience, you will become more comfortable with adjusting the interface.

But how do you create this grid? We'll discuss the details below. Basically, the number and size of columns can be random, depending on your needs. The more detailed the design, the more columns the grid will need. If you're still unsure, you should ask for help from an experienced colleague.

2. Vertical Grid

Similar to horizontal grids, it’s important to keep vertical distances consistent in your design; just like rows in a spreadsheet, they can help keep text evenly spaced.

How big should these lines be? Again, it depends on your needs. However, I recommend using 8 pixels or multiples of 8 (such as 16) to redefine the boundaries where elements or text should be aligned.

Choose the Right Font Size

If you look closely at some well-designed typefaces, you’ll notice a consistency in the font sizes. And there’s a reason for that.

Note: Keep in mind that you only need two, maybe three font sizes in your design. However, choosing the right fonts and making them work together is beyond the scope of this tutorial.

Start by defining some key font sizes that you'll use throughout your project. (For example, it would be silly to use 30, 31, and 32 pixels. Instead, combine these three very similar sizes into one.)

Standard font sizes have two benefits:

• The design will be more consistent and more elegant.
• It will speed up the design process and make you more efficient.

Font size

When defining the font size, make sure not to increase the size in the same increments. When enlarging the text, it should be non-linear. This means that the larger the text you create, the larger the increments should be.

Imagine you have a text with a font size of 12 pixels and you want to make it bigger, so you try it at 14 pixels and you are happy with it. But then imagine you have a large headline (40 pixels) and you want to make it even bigger. Can you increase the size from 40 pixels to 42 pixels? Of course not. Visually, the text needs a bigger change. The designer may need to increase it by 24 pixels, resulting in a larger 64 pixel headline.

In short, this means that the larger the text, the larger the increment you need to use. This very simple principle applies not only to text, but also to the size of buttons, whitespace, and all other elements. (Note: The size difference between two elements must be obvious. If it is too close, it will give people the feeling that something is wrong.)

It is usually based on a geometric progression. Here is a very useful chart showing font scale:

However, for typography, a proven approach is to use a set of empirically proven font sizes. The scale is 12, 14, 16, 18, 20, 24, 30, 36, 48, 60, and 72 pixels.

Line Height

Once all the font sizes are defined, it’s time to pay attention to the line height. For the line height, use 4 pixel increments again. For example, for a 16 pixel text, we set the line height to 24 pixels. If you want the text to breathe more, increase the line height by 4 pixels to 28.

Define the colors in your project

There are so many combinations of colors that if you don't define the shades of colors in advance, you will waste too much time. You can't limit yourself to clear colors like black, white, blue, etc. For each color, other shades are needed, and it is important to set them in advance so that the colors can be organized throughout the design project. Prepare 5 to 10 shades for each color, I like to define 9 shades for each color.

Let's take a closer look at the shades of color.

Why are there 9 shades of each color?

The first advantage is color naming. Whether you use design software or CSS code, you will benefit from this technique. Each shade will be assigned a number, such as 100, 200, 300, 400, 500, 600, 700, 800 and 900. (Why hundreds? It comes from the definition of self-weight in CSS, article link: https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight).

Secondly, 9 is a convenient number for defining colors. The best way to prepare these hues is to prepare a row of 9 squares and fill the squares with colors. The middle one is the base color, then, define the lightest hue (on the far left) and the darkest hue (on the far right). The next step is to set the colors in between the hues.

Prepare elements for different sizes, types, and states

When designing, it's common to use countless icons, buttons, and other components. Again, it's best to prepare a few sizes in advance and limit the options to as few as possible. During the design process, don't add additional sizes or try to adjust the size of components to fit needs. Instead, use only those that have already been defined, and the entire design will be more consistent and clean.

Let's take buttons as an example. To start, you need to define their hierarchy. To do this, create a button with a primary action, a button with a secondary action, or another button with a secondary action. For each button, specify its state (activated, inactive) and color variant. In short, try to reduce the number of elements to the most important ones.

Define properties of other elements

UI designers often use drop shadows in their designs. However, drop shadows can sometimes be a struggle for inexperienced designers. When making a drop shadow, you must set its distance along the x and y axes, as well as the blur radius, color, and transparency. Drop shadows can take a lot of time to adjust, which is why it’s important to prepare them before diving into the design. Prepare your drop shadow components ahead of time (using the same method as colors), and then apply them throughout the design process.

Also, take care to finalize all other properties of the elements used, such as corner radius, transparency, and color gradients.

White Space

It is important to adjust the whitespace appropriately. Whether you adjust the element from the outside (margin) or from the inside (padding), you should again rely on the magic number 8 and increase the offset by 8 pixels (4 pixels for small elements). As with font size, the larger the spacing, the larger the increment must be (again, it is best to define these increments in advance).

Summarize

To make the design clear and consistent, define some boundaries and clear flows throughout the process.

When designing each element, keep the following in mind:

• See if you already use it in your design. If so, reuse it.
• Follow the horizontal and vertical rhythm and resize the elements using the steps defined at the beginning.
• Avoiding complex decisions and endless pixel wars requires having a system in place.
• Don't create the same element twice. If there is order in the design, your work will be better and more efficient, the design will be able to iterate faster, and the connection with development will be smoother. Development will set up variables in advance based on the design style you make, so define them clearly. In the end, you will get a clean design, and development will be able to write better and more sustainable code. Everyone will be happy with this process.