Creating a Responsive HTML Emailer

Learning Objectives:

• Form hierarchy using type contrast, grouping, fonts, and alignment
• Use and organize basic typesetting for readability and balance
• Use and understand web-safe fonts in an email
• Compile work from several programs into two different cohesive designs

After creating two book cover designs, where I considered and explored hierarchy, movement, and color, I used that knowledge to design a responsive HTML emailer for a fictional Wancher Auditorium and develop cross-software skills.

I was given the following sections and existing content to include in my design:

• Branded Header
• Top Promo Area
• Feature Area
• Calendar of Events
• Footer

Some instructions given were:

• Mockup how the design will look on a mobile and a desktop client
• Utilize a rich section transition
• Create two cards for featured shows
• Must use all text provided

I began by pulling inspiration from the logo, its colors, and a “ticket” for my main promo area. I played around looking for complementary colors on a couple different websites and created a palette of options for me to use.

I began to create the promo area with the palette I had. I wanted to blur a little bit the lines of physical and digital and so I created a ticket layout that’s still readable and organized. 

I cut out a photo of a dancer from a photo I had taken and used it to create visual interest in the photo. I emphasized “Dance Gala 2024” and “Modern Meets Classical” by increasing the font size and bringing the letters closer together. I chose the font because it felt like the type of font you would see on a receipt or a ticket. 

I also challenged traditional Western reading styles of left to right in “Modern Meets Classical” by de-emphasizing “Meets” and placing “Modern” right next to the end of “Dance Gala 2024” so that the reader naturally begins to read that and then down and to the left. The design guides you down to who it’s presented by and then to the dates and “Buy tickets now” button to the right.

As for the mobile design, I did not have the luxury of a horizontal layout, which is typically what tickets come in. So, instead, I had my call-to-action button and dates up top, and the titles and subtitles guide the viewer around the dancer’s body into the rich section transition.

For my rich section transition, I wanted something bold and refreshing. I chose the color from my palette and created a custom shape in Figma (the program that I used to create these emailers) that suggests movement.

I emphasized the word “Amazing” by using the same color that the logo uses and as a callback to the beginning of the email. I used a drop shadow so the design doesn’t feel flat.

For my cards, I used one of the same colors as I used in the promo for a background and created movement by rounding the edges unequally. I “ticketed off” the bottom section and re-used the custom shape for the button to buy tickets from. I color coded what the category was for each event and cascaded the text in order of importance.

I used the same custom shape and color for my headline “Calendar of events” and began to make my calendar events. I de-emphasized the dates, and specifically the day of the week, as I feel they were the least important. 

I grayed subtitles out, lowered font sizes, and created separation and grouping using the different types of web-safe fonts. I labeled each one with the custom shape and attributed it as music, Broadway, or dance accordingly. I also used that shape in the background with lowered opacity as a way of grouping the events together and creating visual variety.

Finally, for the footer, I re-used the same shape for visual interest and separated hours of operation, the physical address, and the unsubscribe link.

As a whole, I feel like I learned a lot more about the actual workflow people use in their professional lives. Having to use different apps and combine ideas into one design was a learning process. I also feel like I understand more how my work affects the people down the line. For example, I understand now that after I design something like this, it needs to be editable enough so that developers can actually make these buttons clickable and such. I feel very comfortable creating hierarchy with text and grouping, and I feel a lot more confident in my photoshop skills.