Layout

Below are some examples of the different types of layouts we can create for Simply brand communications.

Each layout is underpinned by a margin and grid. The S of the logo size determines exactly how big our margins are. Depending on the format, the logo can appear at two different sizes to ensure it maintains a confident yet legible presence on the application.

Once we have our margin sizes we can create a 4x8 modular grid for both vertical and horizontal layouts. This gives us a guide to where we should place our typographic and image elements for each layout.

Our photographic and illustration layouts are set on the same principles: we have clear headline and subcopy areas that create a frame for the content.

Our photographic and illustration layouts are set on the same principles: we have clear headline and subcopy areas that create a frame for the image content.

Our graphic layouts are underpinned by using our spark elements across the page. Our headlines are set in the middle of the page to create maximum impact, creating a feeling of immersion within our journey graphic.

Our graphic layouts are characterised by our spark elements. Our headlines are set in the middle of the page to create maximum impact, creating an immersive feeling within our journey graphic.

To create a graphic segment of our journey graphic, we need to take up to 4 spark elements and combine them as per the visual below. Then, scale this up across the desired layout and shift it to pair up with the title accordingly.

For more detail refer to the ‘Sparks’ section of the guidelines.

The story layouts are a combination of typographic storytelling and using our graphic shapes as full stop mechanisms. These layouts create a new rule where we left align our headline typeface and lock it to the top left of our margins to create type-led visual. Our logo and sub-headline frame the bottom of the page.

The story layouts are a combination of typographic storytelling and using our graphic shapes as full stop mechanisms. These layouts create a new rule where we left align our headline typeface and lock it to the top left of our margins to create type-led visual. Our logo and sub-headline frame the bottom of the page.

Here is an example of how an emailer can be approached. We can have any primary color way as a background as this gives us the flexibility and hierarchy we need across all our different eCRM messages. Our sparks elements help to give our visuals additional depth and show moments within our journey trail. Ensure typography is highly legible and follows typography color rules.

*Add Copy Here*

*Add Copy Here*

*Add Copy Here*

Here is an example of how we create layouts when reading right to left. Our headlines remain center aligned and appear in one of our international alternative fonts stated in the typography section. Our sub-header text swaps alignment to the native reader’s direction.