The Lub d layout system is inspired by South East Asian Street signage. The layout system has been created to ensure we’re making maximal use of space in all layouts, while creating a bold and impactful look for our brand.
The new Lub d brand has a flexible layout system, that can adapt to the needs of different formats and creative executions. There are three different layout styles which we use within our brand.
There are two different variations of the burst shape; a rounded version and a rectangle version. These two shapes are interchangeable, and should never be used at the same time.
A shape mask is when the background and the graphic shape combine to create a layout content area.
The shape container is when typography and content sit inside a graphic shape.
The stacked shape layout is our primary layout and should be used as much as possible. This layout is best for large typographic headlines that are used alongside shapes, illustration or photography.
For portrait executions, we place typography above our graphic shapes.
Set the margins of your document with a centred vertical column
Content areas dictate the hierarchy of elements. Where typography uses approx. 60% of the layout’s visual space
Set the typography to the margins of layout. Adjust content areas 2 + 3 to accomodate The size of the typography or shape
Apply colouring and ensure the centre alignment of all visual elements
The finished layout. typography only
The finished layout. typography and illustration
For landscape executions, the stacked layout system separates illustration or photography from text and shape which ensures the best use of the space.
Set margins to application format. Divide format using a four column grid
When placing in our visual elements, we allow photography to extend to edges of our format
Logo. URL and CTA;s may sit centred with the other elements or align to the side of margin.
The finished layout
When adding illustration it is best to use the same background colour across the whole format.
The shape mask layout should be used do draw attention to photography. This treatment allows us to own our photographic content by including our distinct brand shapes.
The one sided shape mask can be used vertically and horizontally. Primarily it is used to create space for text when using photography.
Set the margins of your document with a centred vertical column
Place shape mask over your background and content area
The shape mask over laps photography. Typographic content and Logo / CTA sit contained inside the shape mask
Final layout with photography. This layout may also be applied horizontally.
Illustration should sit inside the shape mask. Typography can be place on the background content layer. We never use photography and illustration together
The two sided shape mask can be used vertically and horizontally. It is for large format & very wide applications, as a divide between different images.
Divide format into an even number column grid. This will vary depending on the format length
Place the shape masks over your background and content area. Scale to height of the format.
Final layout, in this instance it is possible to replace photography with illustration if required
The shape container allows photography, typography and illustration to be overlaid. This creates a frame around the content.
Set the margins tp your format size
Scale the shape to touch the margins on all sides
Use the shape to contain your content
If overlaying type always centre the typography
Illustration can be used in the shape container also
The shape mask is primarily for heroing photography. It allows us to own photographic content using our distinct Lub d graphic shapes.
Shape container can be used to singularly hero Typography.
Scale the shape to touch the margins on all sides
Create a second margin inside the shape. This should fit neatly centred inside our graphic shape
Place your content centred inside the Content area
Scale the typography to be big and bold creating the final layout
Sticker illustration may be used to accentuate the design.
The shape container can cleanly organise content over photo’s. Best used for event communications.
Set the margins of your document depending on it’s format.
Scale the shape container to bottom and sides of the margins
Place your photographic content and centred Headline
Create a 4 column grid that fits neatly inside the shape container
Left align all content to your 4 column grid
This layout style is only suitable for photography
Here are some things you should never do with our layouts
To ensure consistency and brand integrity, please adhere to our Brand Guidelines. For more comprehensive information and resources, visit our main website at lubd.com.
