<aside> ⚡ Graphic design by definition is visual communication. As a designer (in general), it’s up to you to ensure clarity in the message while holding the viewers’ attention within the consistency of the brand you’re working with.

“Good design is obvious. Great design is transparent.” – Joe Sparano

Email design is a very specific digital piece that plays one of the leading roles of e-commerce. It’s important to make sure emails catch the eye, engage your viewer, and deliver the copy in a way that is easy to read and exciting to look at.

Feel free to save this page so you can always come back to this rundown whenever you get stuck or have any questions!

</aside>

🎨 STEP 1: GATHER BRAND ASSETS

✔️ Visual Identity Assets

1. Logo (+all variations)
2. Color Codes
3. Fonts

✔️ Brand Guidelines

READ THROUGH THIS. It’s easy to look like an idiot if you deliver something they specifically say something NOT to do.

Some brand guidelines are air-tight, and some are loose. Both can be good or bad, but the challenge is to push the boundaries within reason, to stay fresh, but be sure it’s consistent with the brand’s look & feel.

✔️ Photo / Assets Library

Sometimes it’s easy to pull images from their site or social media, but if they have a photo library that they have nicely organized, be sure to use that to save yourself time in the long run.

🙌 STEP 2: IDENTIFY DOS AND DON’TS

Keep a list of the essential points to consider and those you'll need to avoid to guide your email creation.

✅ Dos

What specific elements would the client like to see more of?

Sample dos:

• Rounded buttons
• Image masks
• Playful illustrations

❎ Donts

Are there any elements the client wants to avoid or minimize?

Sample don’ts:

• Handrawn illustrations
• Stock-y-looking images
• Oversaturated images

📢 Callouts

What are the key considerations when designing the email?

Sample callouts:

• Highlight discount codes
• Stick to shades of blue for all promotional sections

👀 STEP 3: FIND INSPIRATION

9 times out of 10, just starting from a blank canvas is a recipe for a boring design if you’re going off of nothing. Take a quick 5 minutes, and find something exciting. It’s okay to pull techniques and layout styles from other successful designs.

1. Once you have everything you need and a good understanding of what the client is looking for, start by visualizing what the email will look like in design format.

   1. How many sections will it have? Is there a discount that needs to pop out in the design? Do you have copy that you could turn into a cool GIF/typography? These will help you find the creative spark for when inspiration hunting.

2. Dive into the vast world of email design inspiration websites like Really Good Emails or Milled to get your creative juices flowing. (Think of it like feasting at an all-you-can-eat buffet of inspiration!)

3. Find an email (or even a section in an email) you like? Copy it straight into your Figma file (create a page dedicated for inspos) for quick reference later.

4. Continue adding inspirations until you're completely satisfied!

   <aside> 🔥 Stay Inspired. Stay Fresh. It’s tempting to just want to jump into your design. But it’s a slippery slope to making all your campaigns look the same which will lead to poor performance or losing fundamentals as you try to tweak something that’s used over and over.

   </aside>

Email Resources

🔗 Milled

🔗 Really Good Emails

🔗 Pinterest

🔗 Dribble

🔗 Behance

🔗 Email Love

🔗 Just Good Copy (for copy)

📏 STEP 4: SET UP EVERYTHING IN FIGMA

1. Figma pages
   • Get organized! Create separate pages for Brand Assets, Campaigns, Flows, Inspirations, and more. This system will help you find and navigate stuff quickly.
2. Email Frame
   • Ideally, emails are designed 1000px wide, with varying lengths. Just remember the longer an email is, the higher chance of losing focus.
3. Guides
   • This will help in keeping things aligned and clean - be sure to utilize text is straight and kept within intended reading areas. Don’t be afraid to get off the XY axis to craft a more dynamic composition to be unexpected and pull attention.

🎨 STEP 5: DESIGN THE EMAIL

<aside> 💡 Remember design fundamentals and best practices for email design:

Hierarchy

• Seeing and reading things in chunks are essential to understand the information in order.

Contrast

• Within the brand’s assets, be sure to always be using high contrast to account for quick legibility.

Alignment

• For copy: In most cases for mobile, center-aligned text is a safe way to go for clean short paragraphs. Anytime there is heavy copy or a letter from the owner/CEO, left-aligned is the way to go.
• For graphics/elements: Make sure text is centered within CTAs, images are correctly aligned as intended.

Scale & Spacing

• Majority of emails are read on mobile. So it’s important to be sure text is at the right scale for the appropriate level (and audience). A general range is 35pt–45pt font for body copy.
• It’s better to be safe than sorry, and in email design, it’s a good rule of thumb to be generous with spacing. You’re more likely to make things too tight than ever make things too spaced out. This will help with legibility and an overall clean layout.

Call to Action (CTA)

• In emails, “above the fold” refers to the content that you can see on your screen without having to scroll down.
• To ensure a short and effective hook, subheader, and the CTA, make sure this all fits above the fold if that is the intention of the email. </aside>

5.1: DOWNLOAD FONTS