How to design & code HTML emails (Part 1 - Designing in Adobe XD)

Thank you so much for checking out my tutorial! Please subscribe for more design tutorials - I’ll be covering Animation with After Effects, HTML email design with XD, HTML email code with Sublime Text, Web Design with Adobe XD, Sketch & Figma as well as Web Development with Webflow..

In this video we walk through the design of my own HTML email newsletter, including creating a style guide to keep our future emails consistent and we prepare our images for the next stage - coding the email.

Timestamps:

0:53 - Style guide
12:07 - Table structure
13:00 - Designing the email
32:30 - Export the design for approval
33:20 - Exporting image assets

Links discussed in video:

Adobe XD: https://www.adobe.com/uk/products/xd....
Subscribe to my newsletter: https://www.tompiggott.co.uk/newsletter
Image Optim: https://imageoptim.com/mac
Tiny PNG: https://tinypng.com/

Follow me:

Website: https://www.tompiggott.co.uk/
Newsletter: https://www.tompiggott.co.uk/contact#...
Instagram:   / tompiggottdesign  
Facebook:   / tompiggottdesign  
Dribbble: https://dribbble.com/tompiggott/
LinkedIn:   / tompiggottdesign  

Music: “Still Standing” by Anno Domini Beats