When we design an application, we make some choices that impact the overall user experience. Even if we have ready to use designs from a graphic designer, it is also our choice, as developers, if the application will be esthetic or not.
It all comes to numbers. Today I wanted to highlight one particular issue that many software developers do, that can impact the user experience. It is about space between and the size of objects.
Let’s look on an example:
What you can see above is a grid. Margins between boxes are 10 pixels wide. Also, the second and third rows are 10fr. Do you think it looks nice? Not so much right?
Now, let's look at what happens when we change the spacing to 8 pixels and sizes second and third row and column to 8fr:
Scroll a little bit, and see what is the difference. The first grid is clunky, angular. The second gives some relief when you look at it. It feels more natural. It is more kind to your eyes.
How to apply this to a UI design?
We as software developers sometimes have to choose about margins, paddings, sizes of elements, etc. And it impacts user experience!
Every developer I know has a rule what margins and paddings to choose. And some of use multiplications of 10px and 5px. It causes the UI to be angular and sharp in a bad way.
The way to improve the UI experience with a minor change is to stop using 10 and 5-pixel rules. Replace it with 8px and 4px. That’s it! It is a difference of 2 and 1 pixel. But the impact is great!
Let us compare 8 gap and 10 gap versions side by side:
Not only 8 gap version is nicer, but also you can maintain good granularity when multiplying higher, as you can see it.
So, to sum it up. If you want to make your applications nice looking, replace 10 pixels with 8, and 5 pixels with 4!