Grid Systems & Layout

Grids are important to type of visual design. They help create harmony between elements and promote consistency. Designing with a grid is not only a good idea, but it is a must. The grid should always be the baseline for any design approach.

Typically it’s best to break grids up into three sizes: small, medium, and large. These three size create a dynamic system that changes based on the width of the design.

Small: A grid at this size should be a six column grid. This size grid is typically reserved for business cards, mobile devices, and other small visuals. It is important to keep gutters between grids the same at 1p3 (this of course scaled to the grid). This ensures a consistent look between long bodies of text.

Medium: Requires a twelve column grid. The use-case for such a grid is typically reserved for letterheads, desktop, and other documents viewed at medium range.

Large: Reserved for twenty-four columns. This type of document is viewed from a far and or extends quite a length. A large sized grid may also be used in the case of a large amount of graphic assets in order to be more visually organized.

While consistency is important, experimentation is always encouraged. Sometimes a straightforward layout is not always the answer. Sometimes a nonlinear use of the grid is necessary to entice a spark of interest. Within the branding for UTÖKA, there are ways to play with typography, the grid, and graphic elements that create a visual that is more than just communication.

The samples above show the grid in use and how typography/graphic elements adapt to different sized grids. Creating a sense of flow and direction throughout the layout is important. 

Dynamic layouts should invoke communication but also give a sense of what the meaning behind the text is. Nonlinear does not mean random, nonlinear is there to give interest and weight to the elements without the necessity of changing type-weight, colors, etc. 

Linear layouts are primarily for long format type bodies of text. Newsletters, books, etc are great for linear design. It’s important to make these layouts interesting with the usage of multi-columns and other block-like conventions.