Design and Workflow Blog

Modular design technique: creative collage layouts

How Funimation uses collage-based visuals to promote their wide range of shows and products.

Examples of email modules that feature a collage of multiple products.

Modular sections of various collage layouts that Funimation uses for their emails.

Funimation is a production company, content distributor, and streaming service specializing in anime animation. They use their emails to promote their shows and related merchandise.

Because their library is so extensive, their emails can include a large amount of promotions. For these cases their template was designed with a variety of creative modular sections that list multiple items in a collage layout.

Columns and grids

Here are some of the techniques that they utilize:

  • 2-column and 3-column image-only grids, grouped with a title and call-to-action
  • 2-column and 3-column grids of images, each with a call-to-action
  • A 1:3 ratio column with an image on either the left or right side and a title, text, and call-to-action on the other side
  • 2-column content sections each with an image, title, text, and call-to-action
  • A photo collage of images of varying sizes

Mobile in mind

The column-based approach allows for mobile responsiveness. Image-only items scale down for mobile and maintain their grid format. While items with additional content wrap from two columns into a single column.

The images themselves are kept consistent in style and format throughout. They also include alt-tags with the name of the products shown.

Funimation used Blocks Edit to produce their emails based on their modular template. When you uploaded images in the visual editor, they’re formatted automatically following template presets to save you and your team time.

Photo of Ovi Demetrian Jr Ovi Demetrian Jr