About Size on Mobile UI Design
Every time I tell about design, specifically about interface design, I always get a questions about how to determine the distance in making a UI design to make it look clean. And I often say “Usually I just guessed whether it looked clean or not”. But thats not the answer, so I tried to make a list of size measurements on the User Interface elements that I use frequently.
Specify distances in a multiples of numbers
To help you determine the distance, you can do this by calculating multiples of numbers. For example: select the base number, then you specify the base number is 4. Then for all distances use 4px, 8px, 16px, etc. See the example below to determine distance, using multiples.
If 16px is too far, then use 8px. If 8px is too close, you can consider changing the base number. Consistency in distance will help developers to organize their layouts.
Icon Size
Icon can be divided into two parts. First, the icon that aims to be clicked and the icon that is not to be clicked, but only to clarify some information. Here is an example:
In the app design, for a minimum clickable icon the size is 24px. Why? because it is a minimal size so that the thumb is comfortable when clicking on it.
For websites, the size of the icon that can be clicked may be smaller than app, because on the website, user uses mouse. But usually, I also use a 24px size for the icon that can be clicked on the website. And for the 24px number itself is the width of the entire icon with the click area. Here’s the explanation:
So we can say, that 24x is the width of the canvas. For the icon itself you can really fill the entire canvas or smaller. Using the canvas icon, the export icon will still have a precision size of 24px.
Then, for the icon whose main purpose is not to be clicked, but only to clarify some information, the size can be smaller than the icon that can be clicked.
Why? because this icon’s function to clarify information next to it. As long as the icon is clear, there is no problem. for this size, I usually use 16px. For the distance of the icon with the text, you can use the multiple distance earlier.
Text Size
Choice of the text size is basically to choose a size that is comfortable to read and make the hierarchy clear. You can try all text sizes until you find the right size. Make sure all the text is comfortable to read and also the hierarchy is clear.
If you feel there is a new font size on the screen that you created, just add it to your component. But, avoid too many font sizes, before you can try with the existing font size. If it feels not right, a new size may be added. Congratulations, you have found guidelines for text on the project you are working on.
Distance between letters and lines in the text
You can try to observe the writing on this medium. Each letter is almost nothing attached, each letter has enough distance with the letters in front of or behind it. And also has enough distance with rows above or below it. To create a beautiful design and comfortable design, when designing a text, try to keep each letter from sticking. And also each line is not too close.
I often use margin of 0.5 vertically between letters. And for the distance between rows using formulas (font size + 10px).
