As inbound marketers, we're all content creators in a visual world. In order to succeed and grow, we must learn to tell our story both visually and verbally. Here are my 5 tips for becoming a better marketer-designer. They are based on my 2 years experience doing inbound marketing and design at HubSpot.

1. ARTS & CRAFTS
5 Tips for Becoming a Better Marketer-Designer
Ben Ratner

2. AGENDA
1 Understand Your Goals
2 Create a Visual Hierarchy
3 Show, Don’t Tell
4 Solve for the Skim
5 Avoid Outdated Trends

3. BEN RATNER
@benjratner
CRM Growth Marketer,
Freelance Web Designer,
Breakdancer, and Chocolate
Milk Connoisseur.

4. 1 Understand Your Goals

5. WHAT IS DESIGN?

6. DESIGN ISN’T ART.

7. IT’S NOT ABOUT MAKING
THINGS PRETTIER.

8. IT’S ABOUT MAKING
THINGS PERFORM
BETTER.

9. WHAT IS “GOOD” DESIGN?

10. THE “GOODNESS” OF DESIGN DEPENDS ON
HOW EFFECTIVELY IT ACHIEVES ITS GOALS
Here’s what I mean by goals:
• Emails  Drive clicks
• Landing Pages  Drive form submissions
• CTAs  Drive Clicks
• Infographics  Drive engagement and recall
• Blog  Drive CTA clicks and subscription
• Website  Drive engagement and exploration

11. MEASURING DESIGN REQUIRES AN
UNDERSTANDING OF YOUR GOALS
So ask yourself this…
• What metric am I measuring performance off of?
• What is the action that is most important for people here
to take?
• How does this particular page / email / piece of content
fit in to my overall marketing funnel?

12. A FAMILIAR FRAMEWORK
Understand your goals
Tie your goals to measurable metrics
Set performance targets
Hit those targets!!

15. BE MY
FRIEND
Or get to know me first
BEN’S EVIL TIP

16. 2 Create a Visual Hierarchy

17. “Perfection is achieved, not
when there is nothing more to
add, but when there is nothing
left to take away.”
-- Antoine de Saint-Exupery

18. CREATE A VISUAL HIERARCHY
1. Categorize the elements by importance
2. Emphasize the essential elements
3. Remove or de-emphasize the non-essential elements
4. Arrange the remaining elements effectively

19. 1. CATEGORIZE THE ELEMENTS BY
IMPORTANCE
First off, what do I mean by “the elements”?
• All of the individual pieces that make up a piece of content or
webpage
• Ex: The headline, the body copy, benefit bullet points, the CTA or
form, the featured image, testimonials, social share icons,
screenshots, video
How to Categorize Elements by Importance
• What is essential in order to provide context for conversion?
• What is important for influencing conversion, but not essential?
• What has no real business being there in the first place?

20. A CHEAT SHEET
ESSENTIAL NON-ESSENTIAL
OFFER EMAIL Name of offer
Brief description of offer
Link / CTA to offer
Email signature
Additional information
Social share buttons
Featured image
Company logo
OFFER LANDING
PAGE
Name of offer
Brief description of offer
Form to download
Benefit bullet points
Testimonials
Website navigation
Website footer
Video
Screenshots
Social share buttons
“How it Works”
Additional information

21. 2. EMPHASIZE THE ESSENTIAL ELEMENTS
It’s time to add emphasis to the elements that are essential for
conversion. Here are some common ways to do that:
• Make them big
• Make them bold
• Make them ALL CAPS
• Make them Colorful
Or just give them
space!

23. 3. REMOVE OR DE-EMPHASIZE THE NON-
ESSENTIAL ELEMENTS
For all of the elements that aren’t absolutely necessary to get to the
point of conversion, you can do 1 of 2 things:
1. Get rid of them entirely
2. Demote them, or move them below the point of conversion
Be smart about how you use these elements, or they’ll get in your way!

25. 4. ARRANGE THE ELEMENTS EFFECTIVELY
The way elements are emphasized also depends on the way they’re
arranged. To optimize for conversion, you should arrange the elements
based on the principles of human interaction.
The most common is the “Z” or “F” principle – let’s explore that.

27. WHAT
WHY HOW

28. WHAT
WHY HOW
1
2 3

29. 3 Show, Don’t Tell

30. USERS ONLY READ ABOUT
20% OF TEXT ON THE
AVERAGE PAGE.
(Source)

31. PEOPLE REMEMBER…
(Source)

32. HOW CAN YOU SHOW YOUR
MESSAGE INSTEAD OF
TELLING IT?

33. WAYS TO SHOW, NOT TELL
• Software company or app? Use screenshots
• Physical product? Show it in use
• Service company or agency? Show your best work
• Promoting content? Depict the offer visually
• Have video? Use it!

34. SCREENSHOTS

35. PRODUCT IN USE

36. PHYSICAL
DEPICTION

37. BEN’S TOOLKIT
• For screenshots  Skitch, by Evernote
• For live action screenshots  Placeit.net
• For 3D ebook covers  PSDcovers.com

38. 4 Solve for the Skim

39. YOU HAVE 8 SECONDS TO
GET YOUR MESSAGE
ACROSS.
Because guess what…

40. HUMANS HAVE A SHORTER ATTENTION SPAN
THAN THE AVERAGE GOLDFISH
8Seconds
9Seconds
(Source)

41. PEOPLE ARE GOING TO SKIM
THROUGH YOUR CONTENT.
(Unless you’re marketing to Goldfish)

42. SO YOU’LL NEED TO SOLVE FOR THE SKIM
Here are some ways to do so:
• Get the message across with your emphasized
elements
• Create clearly defined sections
• Say enough to hook, but not enough to bore

43. GET THE MESSAGE ACROSS WITH
EMPHASIZED ELEMENTS
• Most of the people who open your emails will only read
1 or 2 sentences before making a decision – how do
you influence them?
• Use a combination of your subject line, headline,
header image, and CTA to get the full message across.
Namely:
– Why you’re emailing them (purpose)
– What you’d like them to do about it (call-to-action)

44. LET’S COMPARE…
70% visual, 30% written
Even in emails!

45. CREATE CLEARLY DEFINED SECTIONS
• Got a lot of content? Or have multiple points of
conversion? Break it up.
• Why break it into sections?
– To add breathing room
– To guide the user experience
– To allow for harmony between different points of conversion

46. A GREAT
EXAMPLE
Notice how the pieces of
content in this email are
broken into clearly defined
sections.
When skimming this
message, it’s easy to see
where one section ends
and the next begins, as
well as what the CTA for
each section is.

47. SAY ENOUGH TO HOOK, BUT NOT ENOUGH TO
BORE
• Say too little and you won’t provide enough context. Say
too much and you’ll lose your readers along the way.
• Knowing how much to say depends on your audience
and what you’re promoting.
• Rule of thumb: Entice people. Curiosity drives clicks.
• And remember, you’ve only got 8 seconds!

48. Yay, Sarah!
Let’s hear it for
Sarah, the master of
all things HUG! She
did a great job…
• Telling the full
story through the
header and CTA
• Breaking things
into sections
• Striking a balance
between saying
too much and too
little
And she isn’t a
designer!

49. 5 Avoid Outdated Trends

50. WARNING
What you’re about to see is really, really bad design. If you scare
easily or suffer from any sort of heart condition, please look away.

51. 1. AWFUL CORPORATE STOCK PHOTOGRAPHY

52. KID: But mommy I want a ham
sandwich like the other kids.
MOM: Stop whining and eat your
bucket of fruit.

53. Suzanne immediately
regretted getting her
daughter MMA lessons.
But by then it was too late.

54. Recipe:
1. Boil Noodles
2. Put ketchup on boiled
noodles
3. Ruin childhood.

55. UNSPLASH.CO
M

56. OR HUBSPOT
FREE STOCK
PHOTOS

57. 2. CHEESY IMAGES (OR CLIP ART)

58. THENOUNPROJECT.C
OM

59. 3. EXCRUCIATING TYPOGRAPHY
Comic Sans
Papyrus
Times / Arial
Curlz

60. GOOGLE
FONTS

61. Want people to believe what
you say? Use Baskerville!
(Source)
PRO TIP

62. 4. IMAGE SLIDERS

63. WAIT…WHY NOT IMAGE SLIDERS?
• They make the user lose control of their interaction with
the site
• They create banner blindness and are often ignored
• They simply do not work (and I’ll prove it)

64. Only 1% of total visitors click through from the carousel, and majority of
these visitors (84%) interacted with only the first slide of the carousel.
(Source)
CTR
% of Clicks by Slide Position

65. JUST GET YOUR GROOVE ON!

66. TO SUMMARIZE
• Don’t use terrible stock photography
• Don’t use cheesy images / clip art
• Don’t use excruciating typography
• If you can…avoid using carousels

67. Recap

68. 1. UNDERSTAND YOUR GOALS
Understand your goals
Tie your goals to measurable metrics
Set performance targets
Hit those targets

69. 2. CREATE A VISUAL HIERARCHY
Rank the elements by importance
Emphasize the essential elements
Remove or de-emphasize the non-essential elements
Arrange the remaining elements effectively

70. 3. SHOW, DON’T TELL
Software company or app? Use screenshots
Physical product? Show it in use
Services company or agency? Show your best work
Promoting content? Depict the offer visually
Have video? Use it!

71. 4. SOLVE FOR THE SKIM
Get the message across using your emphasized
elements
Create clearly defined sections
Say enough to hook, but not enough to bore

72. 5. AVOID TERRIBLE DESIGN
Don’t use horrible stock photography
Don’t use cheesy images and clip art
Don’t use excruciating typography
Try not to use image sliders

73. QUESTIONS?

74. THANK YOU