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.html
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#newsletter
Instagram: https://www.instagram.com/tompiggottdesign/
Facebook: https://www.facebook.com/tompiggottdesign/
Dribbble: https://dribbble.com/tompiggott/
LinkedIn: https://linkedin.com/in/tompiggottdesign/

Music: “Still Standing” by Anno Domini Beats

Duration: 00:39:17

source

Adobe Dimension Adobe Dimension Animation Adobe dimension Tutorial