Design A Custom Email Template – Part 2

In part 2 of the "Design a Custom Email Newsletter Template" series, I begin taking my sources of inspiration and finally put ideas down to the canvas. This rather slow and sort of painful process 😂 documents my decisions revolving around content, user experience, and general look and feel for the email template.

To add to that effect I'm having to keep the restrictions of email in mind (here's a good one to follow). Zurb's Foundation for Emails gets us so far from the development perspective but there are still limitations I have to consider regarding layout, typography, and general look and feel.

Jump right in

This video was my attempt to think "live". You may find it a bit boring but this is the real world for how I come up with a solution to a design problem so I didn't cut out much. I find too many people who document their work process omit the parts that give way to the real-world scenarios designers and developers are often faced with. Obviously, having real content and imagery would have been better to use but at this stage of the game, I am more in the wireframe mindset.

The wireframe I round out the video gives me a general blueprint to follow going forward. Nothing is set in stone so look for some of this initial design to change in the next part of the series.

Closing Thoughts

The next video will encompass the use of more realistic content as well as pay more attention to branding elements. Color, typography and better hierarchy are all addresses.

Notes

If you're stumbling upon this series wondering why I'm showing you this I invite you to check out my article on Web Designer Depot about Foundation for Emails. There you will see the development portion of this series in written form. Unfortunately, I cannot duplicate that content here so I won't be screencasting that portion. However, I do have plans to integrate this custom email template design with Mailchimp. Mailchimp overs a slew of helpers to allow your templates to make use of their email editor. You can read more about that here.

Watch the complete series

• Part 1
• Part 2: You Are Here
• Part 3