Think you’re not a designer? Think again! Design doesn’t require innate talent or a fancy degree—in fact, there’s a method to the design madness. This presentation breaks down the design process, exploring the use of white space, content hierarchy, color, images, and more. Marketers of any skill level can learn basic design principles, using these foundations as a framework to create effective communications and demand more clicks and conversions from their email program.

1. @meladorri @litmusapp
Email Designfor the
Non-Designer

2. everyone
designs

3. “Everyone designs who devises
courses of action aimed at changing
existing situations into preferred ones.”
@meladorri @litmusapp
—Herbert Simon (1969)
The Sciences of the Artificial. Cambridge: MIT Press.

4. Have you ever made
something that was…
@meladorri @litmusapp
<< open
<< click
<< conversion
Read?
Interacted with?
Used?

5. Design is not art.
Design is:
• a plan
• a strategy
• a process
discover +
define
research +
brainstorm
create
test +
assess
improve +
evolve
@meladorri @litmusapp

6. Good design is…
Innovative
Useful
Understandable
Unobtrusive
Honest
Long-Lasting
Thorough
Aesthetic
@meladorri @litmusapp
1. Helps to achieve your goals
1. Shows respect for your
audience
A well-designed email serves
tw o purposes:
1
2
1. What do you want them to do?
Problems design can help
solve:
1. Who is your audience? And how
will you target them?
1
2

7. STRATEGY
@meladorri @litmusapp
Who is your audience?

8. TACTICS
@meladorri @litmusapp
What do you want them to do?

9. design
tips

10. Alignment

12. Alignment
Creates order and organization.
The scaffolding for your email.

13. Left Alignment
Is natural to read since it
mirrors the way we read.
It’s easy for the eye to follow.

14. Center Alignment
Is harder to follow from
line to line.
Use sparingly.

15. Right Alignment
Is also harder to read
for Western languages.
Use sparingly.

16. No alignment Alignment

17. Email services such as Yahoo!
don’t support alignment
strategies equally.
RUN A QUICK TEST
Preview your emails before every
send to ensure they look great in
every inbox.

18. Proximity

19. These are related
@meladorri @litmusapp

20. Are these?
@meladorri @litmusapp

21. Proximity
@meladorri @litmusapp
Creates relationships and groups
between elements. Makes things
easier for the reader.

22. @meladorri @litmusapp
Note the
relationships
here can be
easily
defined.

23. @meladorri @litmusapp
Identify areas
of proximity
improvement.

24. Proximity + alignment
@meladorri @litmusapp

25. Negative
(or ‘White’) Space

27. @meladorri @litmusapp
Increases readability, usability,
and clarity.
White Space

28. White space
can be any
color.
It’s just
breathing
room.

29. Surround
something with
white space to
make it stand
out.

30. Cheap: less white space Luxury: more white space
h"p://alistapart.com/ar0cle/whitespace
Use white
space to set
the tone.
Same content
(copy and image)…

31. Use white space to
improve legibility
+ comprehension

32. “…good use of white space between
paragraphs and in the left and right
margins increases comprehension
by almost 20%...”
@meladorri @litmusapp
h"p://www.smashingmagazine.com/2009/09/24/10-‐useful-‐usability-‐findings-‐and-‐guidelines/

33. • Around graphics and images
• To create a margin or “gutter”
• As line spacing in blocks of
copy
• Between columns
• On buttons
Use white space…

34. @meladorri @litmusapp
The rule
of thumb
40–60 pixels between elements

35. White space in all the wrong
places can reduce clarity and
readability.
PREVIEW YOUR EMAILS
Preview tests allow you to see and
fix any quirks before sending.

36. Hierarchy

38. Hierarchy
@meladorri @litmusapp
Has to do with the order,
number and scale of the
elements in your message

39. ORDER:
Put the important stuff first
@meladorri @litmusapp

40. Multiple Categories Single Category
‘design’
‘marketing’
‘hot offthe press’
+30% clicks

41. @meladorri @litmusapp
NUMBER:
Don’t provide too many choices.

42. 21% CTOR 40% CTOR
Many CTAs Single CTA

43. @meladorri @litmusapp
SCALE:
Use scaling to increase
readability

44. Use actionable insights to send smarter emails
Knowing your audience is key to building emails that look great
and drive performance. With the addition of Email Analytics to
your account, you have access to rich audience insights that will
help you optimize, target and track trends in your campaigns.
Optimize conversion rates
Act-On saw a 130% increase in clicks and 93% increase in sales-
ready leads by optimizing emails for their growing mobile
audience.
@meladorri @litmusapp

45. Use actionable insights to send smarter emails
Knowing your audience is key to building emails that look great
and drive performance. With the addition of Email Analytics to
your account, you have access to rich audience insights that will
help you optimize, target and track trends in your campaigns.
@meladorri @litmusapp
Optimize conversion rates
Act-On saw a 130% increase in clicks and 93% increase in sales-ready leads by optimizing
emails for their growing mobile audience.

46. Create Hierarchy
@meladorri @litmusapp
By using size, color, alignment,
contrast, and position

47. I LIKE
z
BIG BUTTONS
@meladorri @litmusapp
…AND I CANNOT LIE

48. Wine
Merlot
Cabernet
Chardonnay
Beer
Stout
Amber
Pale Ale
@meladorri @litmusapp
Wine
Merlot
Cabernet
Chardonnay
Beer
Stout
Amber
Pale Ale

49. Use a grid to articulate hierarchy
@meladorri @litmusapp

50. Use hierarchy to…
@meladorri @litmusapp
Influence user behavior
Guide subscribers to click
Set expectations
Enhance comprehension

51. Email clients don’t render styles
consistently.
PREVIEW NOW
Be sure your hierarchy styles are
functioning across inboxes.

52. Color

54. Build your brand, ensure legibility,
and enhance important elements.
Color choices

55. Source: http://wecreatebrands.com.au/brand-strategy-2/colour-meanings-in-graphic-design/
Consider the
emotional effects
of your color
choices.
Create synergy
through color
branding

56. Color
contrast
increases
readability.

57. Style your blue
links to increase
legibility and
brand synergy.
LEARN HOW

58. Von Restorff
Effect
An isolated item
“sticks out” and is
more likely to be
remembered.

59. Color Theory
ANALOGOUS
MONOCHROMATIC
COMPLEMENTARY
@meladorri @litmusapp

60. HEX VS RGB
HEX
RGB
Email Supported
Limited Support in Email
#FF6600
R(255), G(102), B(0)
@meladorri @litmusapp

61. @meladorri @litmusapp
Color blindness
effects 8% of
the male
population.
USE A COLOR BLIND FILTER

62. Images

64. Over 50%
of our brains are dedicated
to processing images.

65. Many inboxes
block images
by default.
Preview your campaigns
with images disabled
readability with and
without images.

66. Use styled ALT text to
communicate your
message when
images are disabled.
CHECK OUT OUR GUIDE

67. @meladorri @litmusapp
thenounproject.com
istockphoto.com
unsplash.com
stocksnap.io
Stock photo
sources:

68. 43% of Gmail users preview
emails with images off.
TEST WITH IMAGES OFF
In addition, various inboxes
automatically block images. Be
confident your emails look great
even with images off.

69. Fonts
(typography)

70. Font Guidelines
@meladorri @litmusapp
Don’t use too many. Use them
consistently.

71. Choosing Type

72. Serif
No extra stroke
features at the end
of characters.
Sans-serif
Stroke added to the
ends of characters.

73. Comic Sans
Papyrus
Brush Script@meladorri @litmusapp

74. Display
Decorative, adds accent visual interest. Usually needs to be
captured as an image.
Web-Safe
Type that’s supported online and most operating
systems.
Arial, Helvetica, Times New Roman, Courier, Palatino, Garamond,
Bookman, Verdana, Georgia, Comic Sans, Trebuchet, Arial Black,
Impact.

75. Turkey pig tongue jowl
meatloaf meatball, shankle
Bacon ipsum dolor amet
spare ribs turkey flank
boudin, pastrami turducken
rump cupim chuck jowl
alcatra ham hock doner.
Turkey pig tongue jowl
meatloaf meatball, shankle
Bacon ipsum dolor amet
spare ribs turkey flank
boudin, pastrami turducken
rump cupim chuck jowl
alcatra ham hock doner.
Line Height/Spacing
1.4–1.6
font size

76. Bacon ipsum dolor amet spare ribs turkey flank boudin, pastrami turducken rump cupim
chuck jowl alcatra ham hock doner. Turkey pig tongue jowl meatloaf meatball, shankle cow
chuck venison flank sausage picanha prosciutto.
Line Length
Bacon ipsum dolor amet spare ribs turkey flank
boudin, pastrami turducken rump cupim chuck
jowl alcatra ham hock doner. Turkey pig tongue
jowl meatloaf meatball, shankle cow chuck
venison flank sausage picanha prosciutto.
50-75
characters

77. There’s more to typography than
meets the eye.
GET THE DETAILS 
Learn how to make your typography
responsive.

78. Emphasis

80. Emphasize the
important stuff
@meladorri @litmusapp

81. When you emphasize
@meladorri @litmusapp
EVERYTHING,
you emphasize
nothing.

83. Repetition

85. Keep it consistent
Develop an email style guide and
use type, color, and structure the
same way consistently.

86. Use a style guide
@meladorri @litmusapp
Headlines: 22px+
Subheads: 18-20px
Body copy: 13px minimum
15-16px is better

87. From name
~25 characters
25% of the inbox
Subject line
~35 characters
25% of the inbox
Preview text
~85 characters
50% of the inbox
@meladorri @litmusapp

88. Now that you’ve mastered
the design basics…
CHECK OUT THE GUIDE
It’s time to learn how to get responsive!

89. Data driven
design

90. 70% read on mobile
15%read on mobile
Design based on your
audience

91. Data-driven design
Outlook-heavy audience Adjust design for preview pane, code for limited support
Image-blocking email clients Code with styled alt text and bgcolors to create interest
Large Blackberry environment Code using a fluid layout for legibility
Large number of retina devices Adjust photoshop file for retina sizing
Large Lotus notes audience Start looking for another job

92. Better data means better
design.
GET BETER DATA
Find out which platforms and email
clients your recipients are using.
Start measuring the success of your
responsive designs.