The right way to attract attention
Gaining a customers' attention is the highest priority for any communication regardless of channel or objective. Can the email be read, understood, and actioned within 11.82 seconds? According to Litmus, this is the average time consumers take to read an email.
Ensuring our content grabs attention, supports one or multiple objectives, and drives action with a well-placed CTA makes the best use of the 11.82 seconds we have to work with.
Within the email guidelines, there are multiple differently designed modules that when stacked together in the right way will gracefully pull your eye down the page.
There are many different styles of content layout which help achieve this objective; thereby creating harmony throughout the email regardless of how many content elements are in play.
Inverted pyramid
This is the simplest method of laying out content, which directs the reader to a specific CTA. This is normally achieved by leading with an attention grabbing image and/or headline, then supporting copy, and finally, a large CTA.
Classic z-shape
Classic z-shapes, or zig-zag layouts, are a great way to break up repetitive content to make it look as visually appealing, and balanced, as possible. They also encourage the reader to scan horizontally across the page and digest more content.
Graphical journey elements
By using simple tricks like numbering content, we can guide the reader down the page and dictate where we want their eye to go next. This could also be achieved by using elements like arrows or dotted lines to connect content.
Basic email design system module.
Module with image inserted and badge removed.
We can create images of any shape to be used in this module.
We can change the look of a module with different sized imagery and copy lengths.
We have control over how and where to use color within the modules.
An example of a fixed layout module from the old email design system.
The new modules are individual and separate, so they can create multiple layouts.
We can create a layout very similar to the old fixed module using our new modules.
We can rearrange these same modules and change the colors to create a new layout.
The modules of the toolkit are designed to be used together to create layouts.
It’s possible to create a different layout by combining the module with a different one.
A step-by-step style layout created by repeating and stacking the module.
It’s possible to create more integrated layouts by playing with colors and imagery.
You can see in the example how impactful the darker hero color and bolder image choice is, especially next to the more neutral coloring of a more standard email. However, to maximize this impact when it’s used, it’s important not to overuse this disruptive style.
You can see in the example how impactful the darker hero color and bolder image choice is, especially next to the more neutral coloring of a more standard email. However, to maximize this impact when it’s used, it’s important not to overuse this disruptive style.
