HTML Emailer
HTML Emailer
Desktop & Mobile
For our final project in visual communication and design, we were tasked with designing a responsive HTML emailer for “Wancher Auditorium” (a fake event space) with featured event cards and a calendar of events. We were tasked with creating mock-ups for both desktop and mobile clients using both Figma and Photoshop.
Desktop Version:
Reflection:
Responsive & Digital Design -
I designed the email to adapt smoothly across desktop and mobile screen sizes, ensuring that text and images are readable and visually balanced.
Reflow of layout
The layout naturally reflows for different devices by stacking columns and resizing elements, maintaining clarity without resizing text or images.Digital conventions
I used clear CTAs (Call-to-actions), concise date arrangement, and scannable sections to align with user expectations.
Typesetting -
Intentional font hierarchy, consistent styles, and clean alignment help guide the reader’s eye while keeping the email legible and visually cohesive.
Functional typesetting & visually compelling images
I was very specific about the content I kept “above the fold”—combining bold type and striking imagery to grab attention, much like our book cover assignment.CRAP choices (Cards & Calendar)
I used contrast, repetition, alignment, and proximity to clearly separate events and organize content into digestible, clickable cards and a clean calendar layout.
Clean Design -
The overall design emphasizes clarity and minimalism: plenty of white space, limited color palette, and straightforward layout keep it clean and easy to follow.
Spacing and Alignment
Consistent padding and alignment across text blocks and images give the email a structured, polished feel and help the reader move smoothly through the content. Additionally, consistent gutters through the cards and calendar help create clear structure throughout the design.
Pacing & Design -
By alternating between bold visuals, lighter and darker text sections, and multiple rich transitions, I built in pacing that keeps the viewer engaged across multiple sections of content.
Variance
Each section uses slight visual variation: different background colors, image treatments, or typographic emphasis to keep the layout dynamic without becoming chaotic.
Email Marketing -
I designed with email best practices in mind: clear CTAs, limited scroll depth, and a focus on visual storytelling to drive clicks and maintain consistency.
Mobile Version: