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: