The Results

Consistent and Mobile-Friendly

By using these rules it’s not a big deal to build consistent UI dimensions which are touch-friendly, responsive-friendly and works on any screen sizes. From watch to TV.

Works on all Displays

It even works on displays which has odd resolution values or are not divisible by 4 or 8. Same counts for column grids like Bootstrap with odd widths.

Like Lego Bricks

When all margins, bounding boxes and spaces follow the rules, the UI will act like Lego bricks. For the visual design as well as for the code if the Devs keep the Atomic Design always in mind.

Touch Targets

Apple recommend 44x44dp, Google 48x48dp as the minimum touch target. Both of them works, but after a few years designing apps for iOS and Android, I can say that 48x48dp is the more compatible and consistent way.

No benefits at the beginning

You might notice no real benefits when you just have started your design. When the project becomes more and more complex and you have to deal with many different Atoms and Molecules there will be a point where you recognize that it works a lot better than before while you used 10px, 30px and 50px margins.

Feel free to drop me a line if you have any questions or want to share further experience related to this technique.

Thanks for reading :)