Grids
The educational project about grids which Obys uses every day with unusual storytelling — rebuilt by Emiro.
4 types of grids
4 types of grids
F
Others
04
Rectangular
03
Van De Graaf
02
Columns
01
Others
04
Rectangular
03
Van De Graaf
02
Columns
01
Intro /
Grids /
Books
Emiro ©2026
Grids
Grid:
Crazy Mode:
Intro /
Grids /
Books
Obys Agency ©2021
Grids
Grid:
Crazy Mode:
Scroll down¬
The New Movement Obys Agency — 2020
(01)
Grid
12 Columns
Margins
30 px
Gutters
20 px
Paddings System
Used
CP.fItFL.uF Obys Agency — 2020
(02)
Grid
8 Columns
Margins
60 px
Gutters
30 px
Horizontal Grid
Used
B—M—A Obys Agency — 2020
(03)
Grid
10 Columns
Margins
80 px
Gutters
20 px
Paddings System
Used
Scroll down¬
Intro /
Grids /
Books
Obys Agency ©2021
Grids
Grid:
Crazy Mode:
Intro /
Grids /
Books
Obys Agency ©2021
Grids
Grid:
Crazy Mode:
Intro /
Grids /
Books
Obys Agency ©2021
Grids
Grid:
Crazy Mode:
/ Emiro
don't be afraid
to break
the rules
(if it's worth that)
GRIDS Obys Agency — 2021
Don't be afraid
to break
the rules
(if it's worth that)
GRIDS Obys Agency — 2021
columns
01
This type of grid is used most of all at Obys agency. We try to combine this one with the paddings system or
to use it with the typographic grid based on the line height.
(About grid)
Grid
1920 x 1080
Advices and notes
(Step 1)
Set Margins
From left and right side of the screen
(Step 2)
Set Gutters
Space between the columns
(Notes)
(1)You can use a grid without gutters and margins too. (2)You can split the columns, thus making the grid more detailed. For example, make 16 column grid from 8. (3)This grid can be adapted to different screens easily.
Grid
1920 x 1080
Grid
1920 x 1080
(Notes)
(1)Use a horizontal grid based on line height. (2)Determine the size of the text style (usually 14-16px), adjust the appropriate line height. It will be your base for the horizontal grid. (3)Choose the font size for other typography fitting on it.
L
van de graaf
02
Van de Graaf Canon based grid or Golden Canon grid. This grid is based on the proportions of the carrier it is applied to. It is good for unusual designs.
(About grid)
Grid
1920 x 1080
Advices and notes
(Step 1)
Diagonals
Start from the main diagonals
(Step 2)
Main lines
Draw lines at the intersection of the diagonals
(Notes)
(1)Draw lines at the intersections until you get 40-100 margins from the edges of the screen. (2)Don't use all grid lines, select some power lines and use them. (3)This grid is very easy to adapt to other screens.
Grid
1920 x 1080
(Notes)
(1)Sometimes the grid itself can give you a design decision. (2)Select the power lines on which the blocks are based, they are your grid. (3)Start scaling the design only after selecting the power lines.
D
TenTwelve Obys Agency — 2019
(01)
Grid
Golden Canon
Margins
80 px
Power Lines
8
Paddings System
Used
Aeance Obys Agency — 2019
(02)
Grid
Golden Canon
Margins
80 px
Power Lines
6
Paddings System
Used
