Booklet

author

UX Giotto

Design

How to design a grid system?

design

Design

|

How to design a grid system?

LET'S START WITH COLUMNS

The best number of columns for a perfect grid system is: 12

Because it's divided by 2, 3, 4 and 6 and so it's more flexible!

SETUP YOUR ARTBOARD

With this setup you will be able to design for two main resolutions at once: 1440px and 1280px.

Artboard width - 1440px

Grid width - 1240px

SET COLUMNS WIDTH AND GUTTER

In Gridulator.com insert the grid width and the number of columns:

Choose the result that mostly fits your design needs

I selected 85px of columns width and 20px of gutter because every object will be dibidible by 5.

INSERT THE VALUES IN YOUR ARTBOARD SETTINGS

Inside sketch click "View" and than "Layout settings". Remember to click "Center" once you inserted all the values.

LET'S ADD THE BASELINE

Rows to provide typography hierarchy and vertical rhythm

Font line-height must be a multiple of the baseline

ADD THE BASELINE VALUE

There are several theories that explain what the optimal baseline measurement should be.

I suggest you to use the 8-point grid because it's the most scalable or the 5px baseline grid because it's easier to divide by 5.

YOUR FINAL RESULT!

Grid is not a cage, it should not limit your creativity.

Take care ofresponsiveness.

Tablet = 768px

Smartphone = 320px

Thanks for reading!

Feel free to save, comment and share.

More booklets by UX Giotto

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