Grid system
13 FOM films Grid System
Layouts can feature one or more subdivisions, both horizontally and vertically. The division is straight, rectangular and bled to the edge; it can be either symmetrical or clearly asymmetrical. Both the number of the spaces and their size relative to each other is flexible.
In order to develop a grid for any given space, Start with adding a 100px frame to all sides, or 5% of total length to each side.
Ex. 4096 x 2160 space, add 204px to each side.
Framing
Divide the space within the frame into 7 rows and columns, each division must be 20px in width, or 20% of the frame width.
Ex. 4096 x 2160 space, add 204px to each side,
→ dividers size: 204x20% = 40px
Division
A number of 7 rows will be created, that will also help guide manage the space.
Valid space (Rows)
A number of 7 rows will be created, that will also help guide manage the space.
Valid space (Rows)
A number of 7 columns will be created, that will help guide manage the space.
Valid space (Columns)
Full grid represents the valid space to maintain all content/communication elements.
Full grid
This rule depends on the balance of the imperfect ratios: 3:4 | 2:5 A major division of the space can be applied using these ratios, for both general and specific spaces/containers.
The Golden Rule
Primary logo + special graphics framing combo.
+ works the same with Full logo version.
Logo Positioning Map
Primary logo
Same positioning rules go with different ratios in correlation with the space dedicated scales, usage, functionalities and visually.
Logo Positioning Map
Application of grid system to imagery is crucial to maintain consistency and allegiance with the brand DNA.
Generally, the “Seven Rule” can be applied to images under three situations, Full space 1:1, Partial (dominant) Ex: 5:7 and Partial (subsidiary) Ex: 1:7.
Imagery + grid
With our FOM films, it is always about frames, framing is a key factor when it comes to imagery usage.
Feel free to experience with the space as you please, bold frames? go BOLD.
Full Space Image
The second main element in all our visuals is the text, we use text dynamically, to convey feelings and to make statements, to speak love & war poetry.
Text + grid
