New format
Email design: hierarchy and style
Email design isn’t “make it pretty” — it’s making clear in seconds: who is writing, why the email exists, and what to tap.
Below: common mistakes, structure, hierarchy, image work, and a unified series style. How it renders in mail clients is in the HTML layout piece.
Typical mistakes
The email “repels” but it’s unclear why; the designer’s intent doesn’t read; no series style; sender is invisible; chaotic block rhythm; tiny text; no clear CTA.
First cut noise and restore hierarchy — often no “magic” is needed.
Structure, hierarchy, images
Modular grid: branded header → offer/lead → proof → CTA → footer with unsubscribe. Put the important content early, before a long scroll.
Visual hierarchy: size, contrast, spacing. Group related elements (proximity), separate sections with air.
Images in one key: light, crop, captions. Don’t put all meaning only in the image — some clients won’t show it.
A quick visual checklist:
- recognizable sender/logo
- one main idea
- one main button
- enough text contrast
- style matches previous emails
Series style and final check
Lock tokens: colors, buttons, fonts, module spacing. Build new emails from the same blocks — faster, and the brand holds.
Before send: preheader, mobile view, alt, links, unsubscribe, match to offer copy.
FAQ
What email width should you use?
A common desktop-column guide is about 600px. On mobile one column and large buttons matter more than “squeeze three in.”
How many columns should an email have?
On mobile one is safer. Two — only with a responsive stack.
Why use a unified series style?
Brand recognition and trust. Every email “from another planet” lowers sender recognition.
Where should you put the main offer?
High in the email: preheader, first screen, CTA before a long scroll.
Is lots of decoration good in email?
No. Extra lines, filler photos, and tiny text hurt hierarchy.
Should you use brand fonts in email?
Yes with web fonts and a system fallback. Readability beats exotic type.
How is design different from email layout?
Design is composition and meaning. Layout is HTML/CSS so it doesn’t fall apart in Outlook.
Pretty email — but the offer and CTA still get lost?
We’ll fix hierarchy, series style, and above-the-fold offer so design helps CTR instead of fighting the inbox.
Discuss the task
