Define the email components
After getting our heads around the different emails each brand sends, we set to work identifying the individual components used to build those emails.
At this point, Julia and I were digging into the details. What did we like? What did we want to get rid of? What seemed to be working and what wasn’t? It’s a little bit like de-junking your home and deciding how you want to redecorate
Simplification was definitely part of the process. We knew our design team wanted to create clean emails without an overabundance of visuals, and we already had our existing brand style guides as a reference.
3. Research new ideas
Once we had a list of the components (or building blocks) for our email design system, we took it all to Sr. Graphic Designer Francois and started discussing how we all wanted these email modules to look and function.
This step included some design research. We looked at email designs from other brands to get ideas for how we wanted to adapt and refresh our own campaigns.
One of Francois’ inspirations came from. It’s a collaboration tool our team uses to pass design prototypes along to developers. In fact, Invision has some great We could tell they were using one in their email marketing efforts.
“Their emails are really clean, have good structure, and don’t include Mozambique Business Email List many unnecessary visual elements. You can see that they have a modularity in their library.”
~ Francois Sahli, Sr. Graphic Designer
When our trio found design ideas we liked, we also looked at the code to find out more about how developers built them.
4. Define email design system rules
Systems have rules that need to be followed. And, while I’m all for bending the rules of a brand style guide when it makes sense, those guidelines totally helped define our email design system.
Because Francois had already established style guidelines for our brands’ web designs, he could jump right into designing our email components. However, there were some specific challenges to consider, such as the
Since some email clients don’t render web fonts, email developers use font stacks. It’s a list of fonts in the font-family CSS declaration, which indicates which fonts you prefer. If your preferred font isn’t supported, it moves to the next best choice.
“You have to be careful with font stacks. Your fallback fonts UAE Cell Number should not only have a similar look, but a similar height and width to all its characters as well. Otherwise, a font that’s too wide could break the layout.”
~ Francois Sahli, Sr. Graphic Designer
The preferred fonts went into a document Francois created as a guide for email development. It also provides a lot of other helpful information:
