Email Advertising — Mockup
Mockups and Prototypes of Email Advertisements created to demonstrate Figma design and front-end development skills. Valve's Steam PC gaming platform was used as the conceptual client — a recognizable brand with a consistent design language, making it ideal for practicing advertising conventions.
Three complete email templates were designed and built — covering a general game advertisement, a game sale promotion, and a platform-wide sale event.
Email advertising requires balancing visual hierarchy, brand consistency, and conversion-focused layout within the constraints of HTML email rendering — which lacks support for many modern CSS features available in standard browsers.
- Email clients (Gmail, Outlook, Apple Mail) each render HTML differently — robust layouts must be tested across all.
- Attention spans are short in email; the hero section must communicate the value proposition immediately.
- Call-to-action placement and contrast are critical to click-through rate.
Final Deliverables
Three email templates were designed in Figma and hand-coded in HTML, using table-based layouts for maximum email client compatibility.
- Game Advertisement — hero image with title treatment, short feature list, prominent CTA button
- Game Sale — price comparison layout with discount badge, countdown urgency element
- Platform Sale — multi-item grid layout for showcasing sale catalog, category filters header
Live HTML code is available on GitHub.
HTML email development is a discipline of its own. The gap between what modern browsers support and what email clients render is significant — table-based layout, inline styles, and limited CSS are non-negotiable for cross-client consistency.
Designing and building the same artifact in both Figma and code reinforced the value of design-to-development handoff precision. What looks pixel-perfect in a design file may require layout adjustments when implementing in constrained HTML email environments.