Blocks Edit Blog

Modular design technique: the 3 phases of template design

The design phases towards turning your email design into a design system: structure, branding, modules.

Modular design technique: the 3 phases of template design

The wireframe layout, the branded final design, and its modularized template components.

When designing a template to use for a series of emails, it helps to be aware of your separation of concerns. The design aspects that you can delineate between as a way towards developing consistency for your design.

Phase 1: Core structure

This is the overall layout. The header, footer, and body area that content goes within. Using columns as a guide for the placement of your elements is an important part of this. This is essentially the wireframe stage of your design process and will help towards keeping your design clean and easy to read.

Phase 2: Custom branding

The next phase is customizing the structure to match your brand. This includes colors, spacing of elements, design accents. And designing the header and footer with brand assets. It also helps to have some example content to work with at this point.

Phase 3: Module options

As you start to develop a library of design patterns based on repeatable content formats, you can start turning them into modular components. You can then look at adding variants for your components. Things like areas with alternate color schemes, different ways to combine elements, text alignment options, etc.

Separating structure from brand visuals and from design elements results in a more functional design as each phase becomes a focused goal towards better quality design. And a more organized design process.

With your design as a modular template system, you can go even further and use Blocks Edit to make it an interactive tool for your team to build and edit emails using a visual editor.

Photo of Ovi Demetrian Jr Ovi Demetrian Jr