When designing, do you struggle with various possibilities, such as making the text larger or smaller, or increasing (or decreasing) the white space around the element, should the color be darker or lighter? In this article, I will share some tips on how to solve these common problems and how to make the design more consistent and user-friendly.
The main content of this article is about the restrictions and rules to be followed throughout the design process. There are countless ways to combine elements in the interface, so you need to set some rules and boundaries, otherwise the design workflow may be difficult to proceed smoothly. You may be constantly entangled in all possibilities, trying to choose the best one among many “right” options. By setting (and following) some basic rules, the resulting 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.
△ Systematic thinking is very important
Let us start from the beginning. You want your design to look good and trustworthy, and you need to avoid confusion at all costs. In order to achieve this, it is very important to have a complete systematic thinking.
Development also expects designers to make good use of systemic thinking. They like clear design, so that their work will be easier.
It does not matter whether you adjust the size of the text, the size of the picture, or the adjustment of the blank space, as long as you need to determine the size of each element. I bet you must have encountered this situation: you once selected a size for an element, and changed it after five minutes, but it was changed again not long after, and maybe it was changed many times before it was determined.
Which size is most suitable? It may be a certain size you tried, but in fact, this endless time-wasting trap should be avoided!
First select the basic unit: 8 pixel grid
In order to make the whole design look more concise, it is best to set the base unit before determining all the dimensions. The exact choice should be up to you, but in general, the best choice is to stick to some proven rules. One of the rules is to resize and move elements in multiples of 8 pixels. This rule will make decisions more efficient.
px and dp: The word “dp” is also used in interface design and prototyping. “Dp” is an 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, 2 pixels on a 320 dpi screen, and so on. The mathematical conversion formula is’ px = dp * ( dpi / 160) ‘.
Note: If you are using smaller elements or objects, you can also use 4 pixel increments instead of 8 pixel increments-occasionally you can make further adjustments as needed.
But why is it 8 pixels?
Here are a few reasons why 8 often looks like 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 adjust the size of any element without half-pixels, such as 8/2 = 4, 4/2 = 2 and 2/2 = 1. On the other hand, if you start at 10, you will get 5 pixels, then 2.5 pixels, then 1.25 pixels. When designing the interface, avoid half the pixels as much as possible. By using full pixels, the elements in the design will be aligned to precise pixel boundaries and will eventually look sharper.
- Multiples of 8 (8, 16, 24, 32, 40, 48, 56, 64, 72, 80, etc.) and binary values (1, 2, 4, 8, 16, 32, 64, 128, 256, 512, etc.) Intertwined. (Caiyun Note: Very friendly to the program)
- Finally, these numbers are easy to remember.
What are the advantages of using an 8-pixel grid?
- As a designer, decision-making time is very valuable. This will make you faster and more efficient.
- If connected with development, this can create a system to help the team improve efficiency. If the development requires some quick modification, he can adjust the value to 8 pixel increments. This ensures consistency and regularity.
- When people visit the website you designed, they will feel very comfortable, enhance the sense of trust and user experience (color cloud note: a sense of order can make users feel trusted and comfortable).
△ Effective method of using 8px grid
△ The result of using 8px grid
Horizontal grid
I believe that you have already used a grid when designing a website. Using a grid can help you accurately place all elements on the interface.
The grid forms the skeleton of the interface and determines where the elements can be placed. Templates define clear boundaries so that the design will be more consistent. With a grid system, it is easier to decide where to put the elements. When the experience is more and more rich, the adjustment interface will be more handy.
But how to create this grid? We will discuss specific issues below. Basically, the number and size of columns may be random, depending on your needs. The more detailed the design, the more columns the grid needs. If you are still unsure, you should seek help from experienced colleagues.