Digital Ad Design That Converts: Meta, TikTok and Google Ads | Free Graphic Design Course: From Beginner to Advanced

What you'll learn

Design ads in Meta, TikTok and Google formats while respecting safe zones.
Apply a hierarchy that stops the scroll and leads to action.
Prepare A/B test variants that change just one thing.
Read results (CTR, conversion rate, cost per result) to decide which design wins.
Use public ad libraries to research the competition.

📥 Practice this lesson

Enter impressions, clicks, purchases and spend for two variants: the ad metrics calculator returns CTR, conversion rate and cost per purchase side by side.

design-calculators-and-checklists.xlsx · More Calculators tab, Ad Metrics section

On social media, an ad competes with friends' photos, viral videos and hundreds of other ads. It has less than two seconds to make someone stop swiping. Designing ads is different from designing a poster: ads are measured with numbers, produced in many variants and replaced every few weeks. That's why ad creative is one of the services most requested from freelance designers and marketing teams. This lesson builds on social media design (lesson 7) with the logic of paid advertising; for the campaign side, see our lesson on Facebook, Instagram and TikTok ads.

1 variableper A/B test: change three things at once and you won't know which one worked

35%of a Reel's bottom area can be covered by the caption and buttons

CPAcost per result decides; CTR only tells you whether the ad grabs attention

Sizes and safe zones

Placement	Aspect ratio	Recommended size
Instagram and Facebook feed	4:5 (or 1:1)	1080 × 1350 px (or 1080 × 1080)
Stories, Reels and TikTok	9:16	1080 × 1920 px
Google Display (responsive display ads)	1.91:1 and 1:1	1200 × 628 and 1200 × 1200 px, plus a 1:1 logo

In full-screen vertical formats, the app's interface (account name, buttons, caption, call-to-action button) covers the top and bottom. As a 2026 reference, on a 1080 × 1920 canvas:

Placement	Top	Bottom	Sides
Instagram and Facebook Stories	≈ 14% (about 250–270 px)	≈ 20% (about 340–380 px)	A sensible margin
Instagram and Facebook Reels	≈ 14% (about 250–270 px)	Up to 35% (about 670 px)	≈ 6% per side (about 65 px)
TikTok	About 240 px	About 650 px, or more with a long caption	Button column on the right

Meta's figures come from its ad guidelines; TikTok doesn't publish measurements in text but offers downloadable templates, so measure them in the current template. If one video will run in Stories, Reels and TikTok, design for the strictest margins. A price hidden behind the "Shop now" button is a mistake you pay for with ad budget.

Design once, adapt many times

Start with 9:16 or 4:5, the most demanding formats, with key elements in a central zone. Then adapting to 1:1 or 1.91:1 is a matter of rearranging, not redesigning. With components or templates in Figma or Canva (lesson 11), generating 10 variants takes minutes.

The anatomy of an ad that works

Stop the thumbThe hookAn unexpected image, a close-up of the product in use, a face looking at the camera, a big number or a question the audience is already asking. In video, it happens in the first second.
What's in it for meOne messageA clear benefit ("Roasted this week, at your door tomorrow"). Two messages get in each other's way.
What it isA visible productPeople should understand what you're selling without reading.
Who's saying itEarly brandingA small logo or recognizable colors from the start, so even people who don't click remember who it was.
What to doCall to actionWhat to do and, if there is one, a reason to do it now ("Free shipping through Sunday").

Hook 1The steaming mug in the foreground, in warm light: that's what stops the thumb.
One message 2A clear benefit, readable on a phone.
Visible product 3You know what's being sold without reading a word.
Early branding 4A small logo and recognizable colors from the first glance.
Call to action 5What to do and why now: free shipping through Sunday.

The five elements of the anatomy in a feed ad. To adapt it to 9:16, everything numbered must land inside the safe zone.

Little text, lots of contrast

Platforms recommend keeping text on the image to a minimum: the main message and, at most, an offer. The rest goes in the ad copy.
Large, legible text on a phone: if it can't be read on a 6-inch screen, it doesn't exist.
Contrast with the surroundings: an ad that perfectly mimics the feed can go unnoticed, and one that looks too "ad-like" gets skipped. What works looks native but stands out through color or composition.

1. In a 1080 × 1920 Stories ad, where should you NOT place the price?

In the central zone.
Next to the product.
In the bottom 340 to 400 px, where the platform's text and button appear.

The interface covers the bottom and top. Key elements must sit in the central safe zone.

Variants and A/B tests

Nobody knows in advance which ad will perform best. Marketing teams test variants and let the data decide. For a test to teach you something, change only one variable at a time:

Variable	Variant A	Variant B
Image	Coffee bag on a plain background	Steaming mug on a table in morning light
Message	"Roasted this week"	"From a Colombian farm to your cup"
Format	Static image	6-second video

If you change the image, the copy and the color at once and B wins, you won't know why. Build variants from the same base file and name them clearly (for example, sprout_feed_4x5_mug_v2.jpg) so the campaign team doesn't mix them up.

Reading the results

Metric	What it says about the design
CTR (clicks ÷ impressions)	Whether the ad stops people and sparks interest
Conversion rate (purchases ÷ clicks)	Whether the ad's promise matches what people find after clicking
Cost per result (spend ÷ purchases)	The metric that decides: what each sale costs
Frequency	How many times each person saw the ad; if it climbs and CTR falls, you've hit creative fatigue

Example: variant A (the bag) got 12,000 impressions and 180 clicks: a 1.5% CTR. B (the mug) got 11,500 impressions and 253 clicks: a 2.2% CTR. The mug draws more interest. But don't stop at CTR: if A produced 9 purchases and B produced 10 on the same $400 budget, the cost per purchase was $44.44 and $40.00. B wins on both counts, and the decision is easy. Sometimes it isn't: an eye-catching ad can attract curious clicks from people who never buy.

2. An ad has the highest CTR but the worst cost per purchase. What could be happening?

It grabs attention but promises something different from what people find, or it attracts an audience that doesn't buy.
The design is perfect and you should spend more.
The platform has a bug.

The goal is sales, not just clicks. If conversion is low, check that the ad's message and the landing page match; our lesson on landing pages and CRO covers the other half.

What you can't promise

Platforms reject or restrict ads with misleading claims, before-and-after comparisons for health or beauty, images that imitate fake buttons, or sensitive content. And in the U.S., the Federal Trade Commission (FTC) requires ads to be truthful and not misleading, with claims backed by evidence and offer terms stated clearly. Check advertising policies before you design: one rejected ad can delay the whole campaign.

3. After three weeks, an ad's frequency hits 6 and its CTR has dropped by half. What do you do?

Raise the budget.
Refresh it with new variants: it's creative fatigue, because the audience has seen it too many times.
Leave it alone, since it worked at the start.

When the same people see the same ad over and over, they stop paying attention. That's why ads are produced in series and refreshed often.

Case study: two hooks for a sneaker brand

Urban sneaker brand (illustrative case)Brooklyn, New York · Reels campaign with $800 per variant

The brand's ad showed its sneakers on a white background, like a catalog shot. The designer built one variant that changed only the hook: the first seconds show the sneakers in use, walking down a Brooklyn street, with the same text, the same offer and the same button. Each variant got 40,000 impressions. A, the catalog version, earned 440 clicks (a 1.1% CTR) and 25 purchases; B, the in-use version, earned 720 clicks (a 1.8% CTR) and 38 purchases.

Cost per purchase · A (catalog)

$800 ÷ 25$32

Cost per purchase · B (in use)

$800 ÷ 38$21

B made each sale 34% cheaper ($21.05 vs. $32.00): the team scaled B and tested a new hook against it.

Because only the hook changed, the conclusion is clear: in this campaign, showing the product in use beat showing it like a catalog. The next test doesn't compare A and B again; it pits B against a new variant. That's how an ad series improves step by step, with data instead of opinions.

Tools for research and producing variants

Before designing, browse the Meta Ad Library and the TikTok Creative Center: both are public and show which ads are running in your industry. To produce variants, use components in Figma or templates in Canva (in Canva, one-click resizing to other formats is a paid feature). And for a clean test, use the A/B testing feature in the ads manager instead of eyeballing two campaigns.

4. A variant got 25,000 impressions and 400 clicks. What's its CTR?

0.16%
1.6%
16%

CTR = clicks ÷ impressions = 400 ÷ 25,000 = 0.016, or 1.6%. The other options move the decimal point one place.

Common ad design mistakes

Using the catalog photo as the ad.

Find a hook: the product in use, a face, a big number.

Covering the image with text listing every benefit.

One message on the image; the rest in the ad copy.

Changing image, copy and color at once in a test.

One variable per test, from the same base file.

Picking the winner by CTR.

Decide by cost per result, with enough data.

Running the same ad for months.

Watch frequency and CTR, and refresh before creative fatigue sets in.

Practice exercise: an ad series for Sprout

Design a 1080 × 1350 ad for the launch of Sprout's ground coffee: hook, message, product, brand and call to action.
Adapt it to 1080 × 1920, respecting the safe zones.
Create two variants that change only the main image.
Using these results, decide which variant to scale: A: 20,000 impressions, 260 clicks, 13 purchases; B: 20,000 impressions, 380 clicks, 11 purchases; $520 spent on each.

See solution for step 4

                A                       B
CTR             260 ÷ 20,000 = 1.3%     380 ÷ 20,000 = 1.9%
Conversion      13 ÷ 260 = 5.0%         11 ÷ 380 = 2.9%
Cost/purchase   $520 ÷ 13 = $40.00      $520 ÷ 11 = $47.27

B gets more clicks, but A sells more cheaply. I'd scale A and test a new variant that combines B's hook with A's message. With so few purchases, it's wise to let the test run a few more days before a final decision: 13 versus 11 purchases could be chance.

Summary

Design in 4:5 and 9:16 (and 1.91:1 for Google), with key elements in the safe zone; in Reels and TikTok, the covered bottom band is much bigger than in Stories.
Hook, one message, a visible product, early branding and a call to action.
Little text on the image, legible on a phone and contrasting with the feed.
Test variants that change one thing, and decide by cost per result, not just CTR.
Refresh creative before fatigue sets in, and follow platform policies and FTC rules.

Next lesson: Motion Graphics for Social Media: Animation Principles, Storyboards and Export Settings. In the course's final lesson, you'll bring your designs to life with the right export settings for each platform.