The Ultimate Grid System for UI Systems

Author
written by Johannes Ippen. founder of Human Deluxe, @johannesippen

A great design system works on both mobile as well as desktop, both for retina and classic resolution sized screens.

The secret is to base the grid (which every element follows) on 8 pixels or units.

This allows for easy conversion between retina resolutions without having to deal with half pixels, but also works well with most screen sizes, which are also based on the number 8.

This is part of a series of 24 design secrets we want to share with you – one for every day before the holidays.

Author
written by Johannes Ippen. founder of Human Deluxe, @johannesippen