THE GUIDE TO

AL MEDIA
CI

SO

ED
ITION
DITION

SO
E
CI
AL MEDIA

Reproduction of this resource is prohibited without

permission. All rights reserved. Lindsay Marsh.
DIGITAL DESIGN
SHOULD BE
DIFFERENT.
There are print projects that you can touch and
feel and see, that uses inks, metals, paper or
cloth materials and then there is digital design.

Anything displayed using pixels on a screen can

be considered a digital design piece. We may not
be able to touch digital design projects now, but
more and more they are feeling more real and a
part of our physical world.

As digital devices slowly replace things that were

once only analog, more designers need to not
only know how to create digital pieces, but to
understand how best to connect with their audi-
ences in real authentic ways.
THE GUIDE TO
DIGITAL DESIGN
A LINDSAY MARSH RESOURCE
MORE
Digital Design should be an extension of the Humans assign value to “things”. Can something that
human experience on screen. exists only with zeros and ones be considered a
“thing”? I think we have discovered through digital
Developments in software have given us the art sales (especially crypto art) that we absolutely
ability to allow digital media to become more see digital items as things of value.
HUMANS ASSIGN VALUE TO genuine and allows us to express ourselves with
more precision. How then can we create digital projects worth
“THINGS”. CAN SOMETHING sharing, remembering and are considered valuable?

THAT EXISTS ONLY WITH Many years ago creating a website was simply
picking among a limited array of design options.
We can try to be unique and different, but even those
projects can fall short if they do not provide an
ZEROS AND ONES You had five or six font choices, limited boxed
layouts and only static photos to display. Now,
authentic connection point with the viewer.

BE CONSIDERED A “THING”? you can add movement as you scroll, with some Throughout this guide we are going to try to answer a
design elements peaking out of the corner and few of these questions. We will study solid examples
some that come toward you in surprise. You have of design for digital and also get really practical about
an almost unlimited selection of font choices and sizes, best practices and different types of digital
gradients, colors and more video integration. design projects with a focus on social media design.
 SOCIAL MOBILE DESKTOP VIDEO
MEDIA EXPERIENCES EXPERIENCES EXPERIENCES
Highly competitive, design for Viewed on their screens, With larger spaces, desktop Allows for a hands-off viewing
COMPETITIVE

S M A L L S PA C E S

E X P E R I M E N TAT I O N

HANDS OFF
social media needs to be at design for mobile needs to experiences tend to be multi-sen- experience that can explain
least one of two things to be focus mostly on practical sory and involve music, motion complex concepts and details
seen: design aspects, like readabili- and video. With readability less without the user needing to
ty and ease of use. of an issue more expressive interact.
Bold or typography can be used.
Emotionally Compelling
Examples: Examples:
Mobile Ads Examples:
Examples: Desktop Websites YouTube and Vimeo
Apps Digital Streaming Apps (Netflix)
Facebook Linked-In Desktop Apps
Mobile Websites Video Stories and
Instagram SnapChat Digital Menus and Displays
TikTok Twitter Social Media Video Posts
DIGITAL DESIGN

PERIPHERAL AUGMENTED 3-D DISPLAY

DEVICES REALITY EXPERIENCES
“Hey Alexia, turn the volume up.” Still emerging, augmented reality or AR Some think of a Star Wars-like hologram display,
TA S K D R I V E N

IMMERSIVE
INTERACTIVE

These task-oriented devices need is becoming easier and easier to create while others may think of a 3-D digital display at a
to understand and deliver quick due to apps like Adobe Aero. A simple concert performance. These new and very
results or a frustrated user will layered Photoshop file can become an expensive displays require tons of costly hardware
result. interactive experience that still feels new and have known to cause headaches in some, but
and exciting. The only downside is it they put on quite the show.
Examples: takes effort on behalf of the user to
Digital Remotes initiate and it has not been universally
Examples:
adopted yet.
Alexa 3-D Glasses
Digital Way-finding Maps magnetic3d or physical displays
Examples:
Digital Menus projectors
Adobe Aero
Phone Apps that use the camera
AR Glasses
 Company Profile
Sponsored
A headline that supports the visuals below so you can keep your visual simple and clean.

THEY WERE SIMPLE

You have less than one second to catch

HEADLINE
the attention of a viewer scrolling
through a social feed. Most ads that
converted well had one simple focal
point or idea. Leave the details to the CALL TO ACTION
post description and put what is most
important in the headline and ad visuals.

SOCIAL
WEBSITE.COM

THEY WERE RELATABLE

Ad Title Goes Here Learn more
Subheading goes here

Hate your job? Just had a baby? Have you ever

seen a ad that mentioned an experience you are
currently going through? Ads can target very

MEDIA
specific demographics using data and use that to
their advantage to evoke a response.

THEY GAVE YOU A TIME LIMIT

One tactic advertisers use to spur sales is
What looks “the best” does not always drive engage- to place a time limit on the ad. In some
ment or clicks. That was something that was hard to cases that might be a specific offer
digest while I created social media campaigns for my disappearing forever in “X” time-frame (or
clients over the last 10 years. Their goal was to sell “X” in this case to the right) a countdown to
product or tickets to “X” event and I wanted to make a an event. FOMO (Fear of Missing Out) is
design look great to convert as many views to sales as something marketers use often.
possible.

Come to find out, the ads that converted the best were
not always the prettiest or looked the “coolest” with
THEY WORK AS A PART OF A BIGGER WHOLE
Sometimes ads work well in a series by using re-targeting. They
trendy colors and styles but they had the following present different ad sets depending on if you interacted with a prior ad
characteristics: or not. This allows them to change their response to try to close a sale.
This allows for more story-driven creatives.
COME TO FIND OUT, THE ADS THAT CONVERTED Company Profile Company Profile Company Profile

“THE BEST” WERE NOT ALWAYS THE PRETTIEST

Sponsored Sponsored Sponsored

OR LOOKED THE “COOLEST”... SALE

 ON MOST SOCIAL PLATFORMS YOU
HAVE TWO MAIN CONTENT TYPES:
PAID AND ORGANIC CONTENT.

PAID CONTENT
Most paid content has strict guidelines. For example, Face- Paid content almost always needs a call to
book has found that ads that have less than 20% of the action or a sales pitch. This is because you
visual ad space dedicated to text perform better. This need to generate sales to be able to pay for
means that ads need to be approved by Facebook and more ads and hopefully turn a profit for you or
Instagram, before they are allowed to run. your client toward the end.

As a designer you need to know these changing rules and Ads are shown to your desired audience and,
updates so you can continue to have a smooth ad roll out and depending on the keywords chosen, it costs a
reduce delays for you or your clients. specific amount for one thousand impressions.
This is called CPM or Cost per Thousand
Impressions. This is just how many people are
shown the ad.
Do I have to learn how
To measure the success of a campaign you
to use ad platforms? can look more closely at CTR or
Click-through Rate. The more click-through
you get, the more effective your ad was at
If you are a graphic designer doing digital ad work for a
gaining the users interest.
client you most likely will not have to run the campaign
yourself, but it is good to know the results of how the
This allows you to test multiple campaigns and
different ad visuals are performing. You can ask for this
visuals to see which ones convert best or had
data from the client or from the clients ad manager if they
the highest CTR. This will help you know
outsourced this to an agency. This will allow you to work
what direction to go visually for your
with the client to continue to tweak the best performing
campaign.
visuals and ad copy.
Rarely will you nail the creative the first month Notice the similar color used for the logo and the girl’s
You could team up with an ad manager and provide of an ad campaign. It can take many months to
IDEA the visuals to them or you can learn how ad platforms
like Facebook Ads Manager works so you can
figure out what is connecting best with your
target audience and also who the best target
jacket? The jacket color was most likely a different color but
was changed to maximize the impact of the headline and
the highlighted word “intuitive”, an important keyword to
provide both services to your client, if interested. audience is. differentiate this product.
THE ANATOMY OF A STRONG PAID AD
AD COPY AND VISUALS
PHOTOS THAT SUPPORT EACH OTHER
DRAW US IN A great well written ad copy can
explain in more detail the offer
or product. This allows the
Humans connect with people visual to support the ad copy,
and tend to follow the gaze of reducing the need to load up
one’s eyes. Notice the direct your visual with too much text.
stare in the main photo. He is
also leaning into the headline
on the right, tempting you to
extend your eyes that way.
There is also a supportive photo ONE SIMPLE
up top which allows us to
understand that he is a storytell-
HEADLINE
er and speaker, as that is not
obvious in the main photo. This ad features a high contrast
black text on white background.
It highlights the word FREE to
GOOD USE OF break up the small simple
headline.
BRAND ELEMENTS A much smaller text box below
explains the finer details but
Notice the subtlety of the logo does not complete with the
here on the top? The company main headline.
name is always attached to an
ad, so there is not always the
need for a large logo on the
visual, too. In this case, they CONSISTENT COLORS
feature a logo mark up top
and the full logo type down
below allowing the brand to be The softer red used here for the
seen throughout the entire word FREE and for the company
visual without being obtrusive. logo is close to the red of the chair
in the main photo. This allows the
TWO As a designer you should know the final ad copy
photo and ad to feel like they are
connected.
DIFFERENT before creating a visual for a paid ad or post.
Notice how the headline used in the visual is
WAYS different than the one used here in the ad title?
It allows viewers to digest it with two different
phrasings.
 ILLUSTRATION
AS VISUAL AID
They say a photo is worth a thousand words. In
this case an illustration takes center stage and
helps to explain the problem the product is trying
to solve for you.

You can see a woman guiding the man out the

door (in this case your website).

This is a great example of how visuals help to

support your product’s unique selling point.

Also notice the highlighted word “why” in the

headline. Notice how the man’s shirt is also the
same color? Color ties those two ideas together.
Also notice the center alignment throughout the
visuals as it allows a viewer’s eyes to move down
the ad in an orderly fashion.

THE DRAW TOWARD WHEN BUSY IS OK

THE FOCAL POINT This is a great example of product
demonstration in a paid ad. It may
This ad features a blue background with this seem a bit busy but it demonstrates
white background bubble in the center. There is the product in action and shows
a huge temptation to read the content in the you how it is superior, all in one
white bubble first. The drop shadow pushes simple, static image.
this white bubble further into the forefront.
This is normally hard to do, but the
Notice how the headline gets straight to the side-by-side layout helps.
point? They spent a lot of time taking a complex
product offering and simplifying the headline to There is also a natural attraction
its most basic form. Any longer and the head- to the chat bubbles, as we
line would be less tempting and overwhelming naturally want to know what people
to read. are chatting about, so there are
some psychological factors at play.
Notice the small brand elements used? The
complementary orange color allows those small
background elements to fill the ad without
making it look busy.
 SOMETHING OLD
CREATING EXCLUSIVITY SOMETHING NEW
This ad uses scarcity to achieve a Remember the Elementor ad from just a few pages
FOMO (Fear Of Missing Out) effect for ago? Because I interacted with the ad I was re-target-
the viewer. This ad makes viewers feel ed with a different variation of the ad. I was also shown
like the product is exclusive and hard different color variations of the same exact ad layout.
to find, thus adding a sense of
urgency to explore and purchase the As I scrolled through my feed and noticed the same ad
product. over and over, I started to ignore it because I recog-
nized the color or photo. By serving me the same ad,
Apparel ads do this all the time with but with a color change my brain now sees it as a new
sold out pants, shirts or sweaters. ad and I stop for just a moment. You may also see the
They may use a headline like this: same ad but with a woman instead of a man.

“Last month, we sold out in 24 There is also user testing going on here with
hours and we are back in stock!”. serving multiple ads with a different color. They are
searching to find out if there is one color that receives
We ask ourselves, “if a product or more clicks than another and also pairing that with
service is that hot what on earth could demographic data. They may find more women click
be so great about it?” We now have a on pink while more men click on blue, or the data
good excuse to click on the shop now could say otherwise.
button and explore the landing page.
 KNOW THY

THE PROFESSIONAL TOUCH PROVIDING VALUE

All of the ads you see on Facebook, In the Wix ad on the lower right, it
Instagram, YouTube and others use drums up excitement for a free
account data to find an audience that resource on web design trends. Wix
has desired likes and interests. sells a website building platform and
mostly likely their target will be
Knowing who your audience will be those looking for create or develop a
when creating your visual is key to website this year.
finding out what colors, layout and
offer to use. What better way to connect to
your audience than by giving
In the upper right example for the brand them something they can use or
management company Frontify, it uses find valuable? This guide can
a simple safe professional layout. Most easily be turned into a paid ad and
people who are looking to purchase a marketed on social media. A lot of
brand management tool will be those in successful ad campaigns involve
mid-to-higher level positions at larger giving away free advice, e-books
companies. or access to videos in exchange
for an e-mail.
The design uses lots of clear
whitespace, a professional woman as The ad design focuses solely on the
the subject matter and a standard left web design trend giveaway. The
alignment with a small call to action design gives it a tangible, textured
button. This ad tries not to be bold or look with the guide wrapped in
different, because the target market plastic. This makes it feel real and
might resonate with a more clean authentic.
looking ad.
Organic content can break a lot more rules. It
is not bound by as many restrictions in terms of
content and visual. It can be more expressive of
your style and of the company you represent.

The goal with organic content is not to sell

something hard but to give users a peak into
your world. Being able to sell organically
happens in time, throughout many posts and
interactions with users.

YOUTUBE

THINK OF
THE LONG GAME
 ENGAGEMENT WINS
Create posts that ask questions or encourages
comments, responses and shares.

ORGANIC CONTENT
ALLOWS THE AUDIENCE
TO TAKE THE LEAD.
Instagram and other social media algorithms
are incorporating more and more user
engagement data in your ranking score. This
means likes and hearts do not cut it. You have
to have people interact and engage with your
content. This means most posts need to involve
them somehow. Sometimes this can be asking THE PRODUCT SHOWOFF
a question. A lot of times it will be your response
to comments. Organic posts are a great way to present your product in a
tantalizing way without a direct sales pitch. Other great ideas
Study the most successful Instagram are the “behind the scenes” shots of you or your client
accounts. All of them reply to almost every making or creating the product or service.
comment on every post with some sort of
comment.

Studying each of your posts can give you BE THE EXPERT

insight on which content people are engaging
with the most. Look at shares, saves and In this post by Chris Do, he
comments as the way to best rank the success provides a purely educational
of your posts. Likes and hearts are mostly to post and gives away his color
be ignored. Is there a post that has way more palette numbers for some of his
comments than anything you have done in the most popular posts. In this way
past? Why? you present yourself as an
industry expert, which opens
doors for other opportunities. It
also increases post shares and
thus your organic post ranking.

LIKES AND HEARTS DO NOT CUT IT. .

 OWN IT
SOCIAL ACCOUNTS HAVE BRANDING TOO
Develop a style guide for your client or yourself that can keep posts
consistent and on point. Ask yourself the following questions when
creating one:

How often should I (they) post? (Develop a content calendar or strategy.)

What type of posts do I post?
(educational, product shot, behind the scenes post, teaser etc.)
What style of photos do I use? How are they typically cropped?
What colors do I use and how often?
What size is my typical headline? Smaller text?
How do I incorporate a current brand asset manual to social
media?

Create several templates that incorporate the brands style so you can
quickly create a wide-range of posts. These templates include different
post types and layouts, so you can save time and energy.
,

@FUGSTRATOR
I follow a really talented designer,
Michael Fugoso @fugstrator. He has
such a unique, specific style. He
features incredibly layered illustrations
and uses an incredible array of texture
on top of those layered illustrations to
give everything a tactile look. He does
not post too much outside of his style
and stays dedicated to his illustra-
tion/vector art audience.
 STYLE USAGE
P O S T T Y P E S ( T E M P L AT E S )
Sometimes style usage guides can be multiple pages long, outlining in more
detail type and size choices, photo usage rules, color rules and lots of usage
examples. You can create templates like the ones below and have a library full
of layout choices so you can whip up a post in mere minutes (which is
sometimes needed in the fast past world of social media).

TYPOGRAPHY
55pt

HEADLINE
Marsh Marsh
Azo Sans Museum of
Modern Art
Museum of
Modern Art

32pt
Azo Sans
SUBHEADING
12pt Smaller body copy will be this size right here.
Helvetica Smaller body copy will be this size right here. HOW TO
CRITIQUE
NEON
Smaller body copy will be this size right here.
MODERN
ART FREE
ADMISSION
COLORS OPENS 4.24.22 For NYC residents

Discover the bright world of neon art

SWIPE
COOL WARM NEUTRALS

Vivid Yellow Light Gray

E D U C AT I O N A L EVENT PROMO
Vivid Green
Hex #662D91 Hex #662D91
Hex #662D91

T SPOTL
IS
Vivid Purple Vivid Orange Gray

IG
AR

HT ART
Hex #662D91 Hex #662D91 Hex #662D91

HT
IG
ST

I
L
SPOT

WHO DO
CALL TO ACTION YOU THINK
SHOULD WIN
THIS YEARS
FREE FREE CHALLENGE
HEADLINE ADMISSION ADMISSION

GOES TH
AT S P
E T SPOTL
RIGHT IS
AK
T

IG
T

SPAGIO CERSE
AR

EVENT
AR

HERE
S INTO

HT ART

SIGN-UP
HT
LD

YO
R

I ST
I

UR WO SPOTL

A R T P R E S E N TAT I O N ENGAGEMENT POST

 Facebook Story Post
1080 x 1920 pixels

This format is the tallest of

the three sizes. Facebook
stories and Instagram stories
use the same sizes and can
Facebook offers an overwhelm- easily be used on both
ing amount of paid ad size platforms without creating a
new size or file.
options. The good news is, once
you get comfortable designing in Facebook Portrait | 4:5 Ratio
these four main ad/post sizes you 1080 x 1350 pixels
will be able create ads and posts 1080 x 1350 pixels is a 4:5
for pretty much any situation. ratio and is a newer Facebook
post size. It has the best total
screen coverage of any size.

Square | 1:1 Ratio

THE SIZE WITH THE 1080 x 1080 pixels gives you

1080 x 1080 pixels

BIGGEST IMPACT much more screen real estate

than the standard older size
post. This is the most flexible
post size as this 1:1 ratio can

4:5 be used on carousel ads, posts

and more.

1:1 1200 x 628 pixels used to be the Standard | 1.91:1 Ratio (AKA Landscape)

1.91:1
only acceptable paid ad size for
1200 x 628 pixels
Facebook. In 2021 Facebook has
opened this up to the much larger
1:1 aspect ratio of 1080x1080.

Portrait Square For the right-hand column ads

Standard
this size format is still required.
1080 x 1350 1080 x 1080 1200 x 628 Those ads are the smaller
thumbnail sized ads along the right
side of a desktop feed.
For best results, use a
The square 4:5 ratio ad gets way more screen
real estate than the older standard size. If given This size is also used for the ads JPG or PNG file when exporting
a choice the square and portrait size format is you see in Facebook messenger
preferred over the standard size. and for the Facebook Audience
network. It is also the required ad
size if you decide to use a link in
your ad or launch an offer ad.
 Sponsored

STORY POSTS AND ADS

Stories can also be organic or paid ads. The
paid ads show for 5 seconds if it is a still image,
so you have to make it super simple and high News Feed
RIGHT COLUMN ADS
impact to drive a click through. 15 seconds if it This ad is only shown on the desktop
Contacts
is a video ad. versions of Facebook. They are less
in demand but are also much cheaper
than Facebook feed ads because of
this.
Safe Area 250 pixels

Stories need to
be clear of text
in the top 250
and bottom 250
Profile name and image pixel margin.
Photos and
backgrounds

APP
can see extend
Instagram Facebook Story Post beyond this
1080 x 1920 pixels area.

Call to action Learn more

(swipe up on Instagram)
Stories are a bigger
deal on mobile taking up
a large portion of the
app upon opening.

Safe Area 250 pixels

FEED AD AND POST PLACEMENTS Feed posts are not

Paid and Organic posts catch users as they framed like on the
scroll through their news feed. Paid ads desktop version and
have an extra title and subheader at the extend out to the edge
bottom as well as a call to action clickable of the screen. The taller
button. your post the more it will
Learn more
take up the vertical
Both organic and paid feed ads need to be Comments/likes screen space.
created to stand out in the news feed. This
can be through the use of bold color,
movement or imagery.
Carousel posts for Facebook show two square 1:1
ratio photos at a time, each with their own title and
POSTS GREAT FOR
Telling a story or narrative that requires
multiple photos (Brand Stories)

Before and Afters

call to action button.
Previewing multiple products, courses
or services in one ad

Showing customer reviews

Square | 1:1 Ratio

1080 x 1080 pixels

Product #1 80% off! Shop Now Product #2 80% off! Shop Now
 Nothing beats an active Face-
book group for growing a GROUP PROFILE IMAGES
following and making organic
sales. My private student only Each Facebook group gets a small
square 1:1 ratio profile image. It
Facebook group has grown to over
grabs it from the center point of your
30,000 members and has been a cover photo so make sure the middle
great place to let students know has something identifiable for your
about new courses and products. group. The layout looks great here
but it does not allow for a easily

BEST PRACTICES identifiable profile group photo.

A small group logo is fine but try not

to put a gigantic logo in the center.
Groups are used for interaction and
community and less for “selling” a
product. Use something that will
connect with group members.
Perhaps show the product or
service in action or being used by a
real person for example.
CONNECT WITH STYLE
Find ways to connect with
Notice how the Facebook your group demographic.
group cover photo and the If the group is fun and
Facebook event cover photo Facebook Event Cover Photo
casual then keep your
are different sizes. 1920 x 1005 pixels cover photo that way.

KEEP IT FRESH
You can use the group
cover photo to keep
group members up to
date on the latest
announcements

Facebook Group Cover Image

1640 x 856 pixels NO CLUTTER
Cluttered cover photos can
make it tough to know
which group you are on.
Simple and right to the
point can work for big
busier groups.
 LOGO SIMPLICATION
This is why I always encourage you to develop logos that can extend down in
size and still maintain a brand awareness. This is the time to use your
abbreviated logos or just a logo mark and not the full logo name (unless it is
short). Full company names can be really tough to read when scaled down.

COMPANY PROFILE
With paid ads and
organic posts users will Profile Image
see your name next to a 170 x 170 pixels
small circular profile
image although you
Authentically Prepared

upload it as a square 1:1

ratio image.
OK BETTER BEST

KEEP IT CLEAN PROFILE AND IMAGE UNIFIED

The left and right sides
that extend beyond the Business Page Cover Photo (DESKTOP) In this Facebook business page for
edge here are cropped Udemy.com, you can see how the
820 x 312 pixels or any 16:9 ratio
in mobile view. Keep brand elements of the red U are
vital text away from the
echoed in the profile image uniting
extreme ends of your
cover photo.
Business Page Cover Photo (MOBILE) the two stylistically.
640 x 360 pixels any 16:9 ratio
Desktop view below

TIP
in some ways the tiny little profile image can
be more visible and important than the larger
cover photo. This small icon is featured on
everything the page does.
 Instagram Story Post
1080 x 1920 pixels

INSTAGRAM
Instagram Portrait | 4:5 Ratio
1080 x 1350 pixels

GREAT NEWS! INSTAGRAM + FACEBOOK Instagram Standard | 1:1 Ratio

1080 x 1080 pixels
Facebook owns Instagram which makes it easy to share ad sizes and
formats if you are on both platforms. You need to design for Insta-
gram a bit differently and we will talk about that throughout this
section, but at least you do not have to get used to all new post sizes!

The one exception to the rule is Instagram posts cannot go

longer than 1080 pixels in width, so the landscape post does have
a slight change in width as well (see to the right).

The profile image is also slightly larger but still maintains a 1:1 square Instagram Landscape | 1.91:1 Ratio
ratio and is also cropped to a circle. (AKA Landscape)
1080 x 608 pixels

Profile Image
320 x 320 pixels

For best results, use a

JPG or PNG file when exporting
 Instagram Story Highlights
1080 x 1920 pixels
Upload your highlight
image as a 1080 x 1920
Instagram pixel size. Instagram will
allow you to crop it down
Story Post T SPOTL
In the below example, you will see how
IS to a smaller circular highlights are added below your profile
1080 x 1920 pixels portion that will end up

IG
details. It is surprising how few

AR

HT ART
looking like this. accounts take full advantage of

HT
adding story highlights to their profiles.

IG
ST

I
L
SPOT

IF YOU ARE NOT

USING STORIES
YOU ARE MISSING Send Message

OUT ON BIG
ENGAGEMENT
OPPORTUNITIES.
Accounts that posted a series of 10 stories earned
twice as many median impressions as accounts
that didn’t post at.
This is based on research from a joint effort between Buffer and Delmondo,

Instagram stories are featured at the very top of

the mobile Instagram app and the order is updated
based on new Instagram stories posted. 7-10
stories maintained high engagement rates.

Brands are also using stories to sell more

products. Stories allows for narrative driven
content and it has been found that content that
was less polished and edited tended to perform
better than professionally edited content. This
means that being more natural and producing
more quick content was more productive.
 Beige and Brown Delicate Instagram Story Template from Canva.com
CONSISTENT
When a user browses through stories on Instagram they
quickly shift from one account to another once that prior
account runs out of stories. This means a user can
quickly assume one of your posts is part of another
account if it is not distinct or consistent enough with
your brand style or voice.

Pick one visual element that can be consistent in all stories.

This can be the type of typography you use or the typogra-
phy treatment. It can be a color palette or use of similar
textures like in the example above. It could be how you
crop photos or the animated gifs or stickers you use.

I can tell that the example to the right is associated with the
same account with a similar vertical type treatment, dark
gray background and occasional use of a circular text
design element. Black and White Spring Sale Instagram Story
Template from Canva.com
 QUICK & MESSY
HONEST OVER FAKE Stories are about communicating quick
impulse like messages to your followers.
Instagram stories are great for sharing a That could mean messages look less
recent post. @made.byjames is a brilliant polished and design takes a backseat to
logo designer who likes to be more raw and your brand voice. What you say is more
realistic with his posts. important than how it looks.

ASK THE USER

This story by a 3-D artist @deep_shape
asks the user to type in what they see when
looking at this shape. This is more effective
than simply posting work as you can invite
followers to participate in your projects,
ideas and receive valuable feedback.
 “CAROUSEL POSTS
SCORE THE HIGHEST
ENGAGEMENT

CAROUSELS RATE (1.94%)”

Research data from Creatopy (formerly Bannersnack)

A simple square post kept Instagram a photo sharing app until

recently they allowed for longer form content to take over with SEAMLESS CAROUSELS
the use of carousel posts. Carousel posts allows the user to
You can learn to create seamless carousels so that each post flows nicely into
“swipe left” and view up to 10 Instagram “slides”. another. Photos, arrows and design elements can tempt and lead one to continue to
swipe left and to learn more.
This allows designers to pack a ton of valuable information
into one single post. Shares and saves are more valuable than
likes when factoring in the ranking algorithm on Instagram. This INCLUDING ‘SWIPE LEFT’ IN THE CAPTION
means that carousels tend to be saved for later because of BRINGS THE AVERAGE ENGAGEMENT
increase in total information and value given.
RATE FROM 1.83% TO 2%
There is no wonder you are starting to see carousels dominate Research data from Creatopy (formerly Bannersnack)

your feed.
Reproduction of this resource is prohibited without permission. All rights reserved. Lindsay Marsh.
 TIPS
GRAB THEM REMIND THEM ENCOURAGE THEM
Use a big bold A lot of accounts put As mentioned in the previous page,
headline and use their account name engagement rates go up in carousels
contrast to highlight at the bottom of that use a swipe indicator on the
key words. Motivate every slide. You could visual or in your post captions.
them to swipe further. also put the main
subject line of your
carousel or reference
if it is part of a series.
DO NOT OVERWELM THEM
You should be able to read the content
on each slide in 10 seconds or less.
This example pushes it to the max. I am
able to provide a nice chunk of readable
content without giving the viewer fatigue.
CALL TO ACTION
Your last slide should always encour-
age an action by the viewer. You can
even dedicate your entire last slide to
prompt a follow or comment.
EFFECTIVE YOUTUBE
THUMBNAILS ARE ABOUT
TWO THINGS...

GETTING NOTICED YouTube Thumbnail Image

GREAT STORYTELLING 1280 x 720 pixels

YouTube thumbnails can make or break a video. In one image, you need to
be able to adequately communicate the video subject matter and contents RED BORDER = MARGIN
without being too busy. “Clickbait” is a term for a video thumbnail that has Try to keep vital text and headlines away from the red margin

fallen short of this goal and gives the viewer

an inaccurate portrayal of the actual video
EXPORT FILE AS A HIGH-QUALITY JPEG
contents. Rarely does the viewer of “click- File-> Export -> Export As -> JPEG
bait” become a subscriber.

Telling stories on thumbnails can include

putting together multiple images from
different sources. You can do this through
the use of typography, video stills,
headshots or photo manipulations.

The example to the right perfectly aces the

goal of thumbnail storytelling. The fake face
he is holding up explains the plot of the
video and the background image supports it
further. I know exactly what this video is THE GUIDE TO
about. DIGITAL DESIGN
A LINDSAY MARSH RESOURCE
 VIDEO STILLS OVER
CONTRAST IS KING HEADLINE BREAK UP ILLUSTRATIONS FACES WIN

70% 72%
Screenshots or video stills used as
thumbnails tend to generate more
clicks than those who do not feature a
direct photo from the video. In the

NOT THIS “Seventy percent of thumbnails among

example above they used the blurred
out revenue snapshot to give viewers
a “sneak peak” into the video content, “Seventy-two percent of the most
popular videos on YouTube in
Video thumbnails have to stand the most popular videos included a title teasing you along the way.
out among so many others. With or explanatory text describing what 2020 featured an image of a
Facebook, Instagram and other viewers could expect to see upon The below thumbnail features Daniel human, averaging 921,000 more
social media channels you are clicking.1” Schiffer holding his camera featured in views than those without a human
usually viewing just one piece of the video. Although the image on the face.1”
content at a time when you are The title you include on the thumbnail right side may not have been pulled
scrolling. can be a shortened abbreviated version directly from the video, it still alludes People connect with faces and
of the video title. Rarely do long full to the fact that it could have been. apparently YouTube thumbnails
The YouTube search results are video titles look good on such a echo this basic human instinct.
filled with over 30 thumbnails at small space. In the example above
any given time, forcing you to they use only 4 words in their title,
use super high contrast typogra- much shorter than the official video title.
phy (sometimes even using
strokes), photos and colors to
stand out.

Research from: Best SEO Companies

1

https://www.bestseocompanies.com/youtube-thumbnails/
THEMED CHANNELS
Just like with Instagram and other social channels make sure to
develop a standard look to your series of thumbnails. As you
release them, subscribers can instantly identify your video as a
new one if you have a particular style or look.

In this case my three thumbnails above are part of a series on

branding. They feature the same typeface, color and alignment,
with a photo on the right.

THE POWER OF ONE IMAGE

You do not always
have to use multiple
photos to tell a story.
If you have the right
resources staging a
photo shoot could
THREE PHOTOS AS ONE
be the best way to
gather great photos If you do use multiple
for your thumbnails, photos make sure they
like in the example all look like they are
to the left. taken together, even if
they are sourced from
Most popular different places. This can
YouTubers have a easily be done in a photo
library full of editing program,
headshots and matching the lighting,
action shots to use shadows and colors.
when building out
their thumbnails.
 Carousel post: Carousel post:
800 x 800 800 x 800

Single in-stream post: 1200 x 675 16:9 ratio

Profile Photo 1:1 Header Image 3:1

400 x 400 pixels 1500 x 500 pixels

IT’S ALL ABOUT THE LINKS

Not long ago twitter was a word only place, allowing you to only post
140 characters of text, no images allowed. Fast forward to today and it
looks like it might be another Instagram, with photos on almost every
tweet.

I think what makes twitter a bit different is it’s focus on link posts.
Instead of focusing so much on the images of the post, most businesses
use twitter to link to other websites, articles, blogs and videos.
 Linked-In Story
1080 x 1920 pixels

The good news with

Linked-In stories is it is the
same size as Instagram and
Facebook stories. Making it
easy to share across
platforms.

Sponsored Content Images

1200 x 627 pixels

Logo Image Header Image 4:1

400 x 400 pixels 1584 x 396 pixels

Linked-in is overlooked by a lot of young freelancers because they

normally associate it with finding full-time jobs. It provides a place to make
connections with business owners and gives you a chance to connect with them
personally through messages.

It also helps if you fill out your profile completely and make as many
connections and client testimonials as possible. Finding the right person to
message can require a little bit of research.

CONNECTIONS You need to locate those who make decisions on hiring design work. Some titles
to look out for are marketing coordinators, creative director, art directors, social
media managers and even local small business owners.
 Linked-In is the “Facebook for Professionals”. It is meant to
make connections to others in your industry so you can
expand your network, make sales, find jobs or change careers.

44% of Linked-In users take home more than $75,000 per

PROFESIONAL
year, which is above the national median in the US. This is
based on Pew Research on Social Media in 2018.

Whether you are designing graphics for a client or crafting your

own Linked-In profile the following are best practices for
creating Linked-In post content.

BE DETAILED AND NERDY

DESIGN FOR THE PROFESSIONAL TARGET
Notice the use of industry specific terms in the first line of copy
at the top of this ad? The BX here means brand experience.
If you are creating an ad for a client on Linked-In you are Because the audience is more narrow and specific on Linked-In we
creating it for a professional target market. The headline, are able to develop ads that are talking directly to those in specific
copy and the design needs to be crafted with a company roles at companies.
decision maker in mind.
There is also repetition with the triangles in the purple portion of the
Are you targeting a marketing director? Manager? Those in ad and in the downloadable resource that reinforce the brand look.
high-level sales? Posts that offer free knowledge do better organically on Linked-In than
on Facebook, where they tend to get lost.
 If you plan to do organic

INDUSTRY PRO
posts and decide to
message others for
potential job proprieties,
then your profile better be
ready.

Develop your one-line

elevator pitch
Take your biggest dreams and
accomplishments and merge them into a
concise short sentence.

Fill out your services on

your profile
Let potential clients know exactly what
services you offer.

Take professional
headshots
A pro headshot makes a huge difference in
making a great first impression. This is
worth every investment.

Make as many valuable

connections as possible
A high connection number looks
impressive. It means you took the time to
network with others.
 DISPLAY
250 x 250 pixels 300 x 250 pixels

728 x 90 pixels

A dying format?
It is true that money spent on display ads is
declining compared to spending for special media
ads. As a designer you should still be ready to
tackle a display ad when needed.
468 x 60 pixels
Display ads are those boxy ads you see on news
websites and blogs. Most of the time they are
static, but some can be GIFs and include motion
elements.

Large Skyscraper and square/smaller rectangle

320 x 50 pixels ads appear on the right or left column of a desktop
website. Leaderboard ads tend to appear more in
mobile apps or websites but can also appear at the
very top of a website or blog.
SCALING DOWN Display ads are most effective when used
In the three leaderboard ads directly above, notice how when you across multiple websites your target market
reduce the size you have to sacrifice some design elements for the might frequent. This means, like with most ads we
sake of others? The company identifier or logo is important as well as have been studying, there needs to be consistency
what the ad is promoting or selling. Any other details may need to with color, typography and a very clear visible
be removed because of the smaller size.
300 x 600 pixels appearance of a brand or logo.
 www.CNN.com
There are standard common sizes like you saw on the
previous page but depending on which website your
DISRUPTIVE POP UP HEADER ADS display ad will show that size can vary widely. The header
display ad above spans the entire website and allows the
designer to feature large product heavy photos.

www.pandora.com

STREAMING POP UP ADS

Have you ever been listening to Pandora and an
ad pops up? These pop up ads can be various
sizes depending on the steaming platform the ad
is for.

They can be a bit disruptive. It is best to compli-

ment the audio or video that is playing and keep
the visuals simple and to the point.

The call to action will be your main local point

(shop now, buy now, 20% off, coming soon etc.).
THE GUIDE TO
DIGITAL DESIGN
A LINDSAY MARSH RESOURCE

OVERWHELMED!!!! IT IS VERY EASY TO READ THIS

DOCUMENT AND FEEL A LITTLE
OVERWHELMED ABOUT CREATING ALL
OF THESE DIFFERENT AD CAMPAIGNS,
FIND A WAY TO CREATE CONTENT ORGANIC POSTS IN DIFFERENT SIZES.

THAT CONVERTS, CONNECTS AND There is a good chance you will work with a few platforms and
master the sizes on those without needing to know how to master

EMPOWERS VIEWERS TO TAKE design for the entire social media network. In some cases, these
sizes can completely change in a matter of months.

NEXT STEPS. The great thing about knowing the basics of graphic design theory
and foundations is no matter what size or platform you need to
design for, you will find a way to create content that converts,
connects and empowers viewers to take next steps.