Blocks Edit Blog

Modular design technique: using standard layouts

What do these emails have in common? They all use the same essential layout, each with completely different branded designs.

Modular design technique: using standard layouts

Different branded emails, with different messaging, using a commonly used reading format. (via reallygoodemails.com)

A logo at the top, with an intro feature image and text, and a call-to-action. Then two-column sections with an image on the left and text on the right, or vice versa. But each design takes its own approach, following brand guidelines, and giving each email a unique feel, appropriate to the messaging.

Creativity in constraints

What sets each design apart is the nuances in their use of colors, spacing, and design elements, with customized photos and graphics. And the sum is greater than its parts.

The fact that they use a similar layout shows their use of good design structure and proven techniques for getting their message across. It’s a tried and true formula.

Modularity as a side effect

The design is modular as well, as stackable sections and reusable components. With the goal of making design that follows content, its consistency and flow also work as building blocks for extending to additional emails.

And when it comes to coding the design, it saves on time and effort of building. You can start out with a skeleton template of the structure already in place. Then adjust column widths, spacing, and placement and alignment of content elements. This format also adjusts well for mobile.

Using a common layout for content does not make the email boring, it makes it easy to read. Email is about communication and clarity is always more important than aesthetics when it comes to good design. These examples of emails show how creative you can be!

With a modular design, you can use Blocks Edit to allow your team to visually build emails and put together content without having to code each email.

Photo of Ovi Demetrian Jr Ovi Demetrian Jr