Booklet

author

Yehor Haiduk

Design

How to use grid in UI design

design

Design

|

How to use grid in UI design

Modular Grid

The modular grid is characterized by the presence of both vertical guides and horizontal. A module is formed at the intersections. It is a rectangle with height and width that underlies the composition

How to use it

I recommend using 4x4 square modules. The screen size in pixels is multiple of four for most common devices, therefore it will be easier to develop interface design for them under this system

All composing systems must be repaired by this grid-line spacing, component sizes, indentation internal and external, icons, etc.

Margins in design

As a step, a 4x4px block was chosen, because for most common devices, the screen size in pixels is a multiple of eight, therefore it will be easier to develop interface designs for them with this size

It will be easier to scale the sizes and distances for a wide range of devices if all the numerical values will be even

Columns

I use standard a 12 column grid is used because its easier to break up into other sizes with 6, 4, 3 and 2 columns

Web

For desktops I use a grid 1152px = (72px * 12) + (24px * 11) + (12px + 12px)

Tablet

For tablets I use a grid 764=(102px'6)+(24px*5)+(16px+16px)

Mobile

For Mobile i use a grid - 320px=(136px*2)+(16px*1)+ (16px+16px)

Thank you for watching ! Share your thoughts in comments

More booklets by Yehor Haiduk

More Design booklets

Your recently viewed booklets

  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
See all booklets