Updated

Layouts

A simple grid system and easy to use elements makes it easy to create layouts that keep consistency and a coherence across all platforms.

Grid system

The guidelines are based on a 14 column horisontal grid system with the two outer columns acting as outer margins. This provides us with a 12 column grid system where images, graphics and text should be placed within.

Lilbit Brand Elements34

Logo placement in a 14 column grid system. The two outer columns act as an outer margin. The logos fill 12, 6 or 4 columns, placed towards the bottom right corner.

Lilbit Brand Elements35

Graphic shape and logo placement in a 14 column grid system. The two outer columns act as an outer margin. The shape fill 12, 6 or 4 columns. The shape can be placed anywhere on the grid system, but should be positioned towards a corner of the format.

Within the grid system we can place elements such as images and text. Images can be placed inside the graphic shaped frames, or fill the whole format with logos and text placed on top of it. Images can sit with a clear outer margin or bleed out of the format.

Lilbit Brand Elements36

Images in graphic frames sit within the outer margin.

Lilbit Brand Elements37

Images bleed out of the format, still keeping the corner shapes from the image framing. Images can be used full bleed with text boxes in graphic shapes on top of it.

Lilbit Brand Elements38

Text should be placed on a clear background, not overlapping the imagery.

Formats

The grid system can be applied to any format. When the format is narrow and long we can use a grid of 20 columns to avoid large outer margins.

Lilbit Brand Elements39
Lilbit Brand Elements40

Examples

Examples of layouts that use the grid system explained above.

Lilbit Brand Elements 2224
Lilbit Brand Elements 22210
Lilbit Brand Elements 222
Lilbit Brand Elements 2226
Lilbit Brand Elements 22215
Lilbit Brand Elements 2228