How to make a banner: sizes, composition, text

Step 1

Define one goal

People see a banner in passing, so it must carry one idea, not the company's whole pitch. Before you start, write down three things in one sentence each:

• •who it's for;
• •what you're offering: a product, an event, a discount, a sign-up;
• •which action you expect: click, sign up, show up.

💡 If the client wants to fit everything in, suggest a series of banners, each with one idea. They read better, and you can compare versions.

Step 2

Take sizes from the official specs

Sizes depend on the platform, and it's better to take them from the help center than from old articles. Examples as of November 2026:

• •Google Ads, uploaded image ads (Demand Gen): 300×250, 336×280, 728×90, 970×90, 160×600, 300×600 and 320×50 pixels; JPG, PNG or static GIF up to 150 KB;
• •Google Ads, responsive display ads: images of 1200×628 (landscape), 1200×1200 (square) and 900×1600 (vertical), up to 5,120 KB;
• •Instagram post: 1080 pixels wide, aspect ratio between 1.91:1 and 3:4;
• •Instagram Stories (ads): 9:16, 1440×2560 pixels recommended.

💡 Start with the hardest format: the narrow 728×90 or 320×50. If your idea fits there, it will be easier to place in the larger formats.

Step 3

Build the composition

Nielsen Norman Group explains that visual hierarchy guides the eye from the most to the least important element, and it's created with size, contrast and grouping. For a banner, that usually means three levels:

• •the main thing: a product image or key phrase, the largest and most contrasting element;
• •the explanation: one short line that clarifies the offer;
• •the action: a button or call to action, noticeable but not stronger than the main thing;
• •the logo: smaller and closer to the edge; people should remember the offer, not just the mark.

💡 NN/g advises using no more than three sizes: small, medium and large. On a banner, that's often a rule rather than advice.

Step 4

Cut the copy and check contrast

On a banner, text competes with everything around it, so every word has to earn its place. Keep a headline and, if needed, a short subheading; remove extra qualifiers and asterisks. Then check readability:

• •text-to-background contrast: under WCAG (level AA), at least 4.5:1 for regular text and 3:1 for large text;
• •text over a photo goes on a calm area or a solid backing;
• •in Stories, Meta advises keeping text and logos out of roughly 14% at the top, 35% at the bottom and 6% on each side so interface elements don't cover them;
• •one typeface, two at most, that covers every character in your copy (Cyrillic, if it's in Ukrainian).

Step 5

Make variations and get feedback

The first version is almost never the best. Make three different takes on the same goal: with a product photo, with large type and with an illustration. Then shrink each to thumbnail size and keep what still reads.

• •show the versions to people who haven't seen the brief and ask them to name the offer within a second;
• •check the banner on a phone, not just on a big monitor;
• •ad platforms let you run several versions and compare results;
• •post the versions in the community: fresh eyes quickly show where the main idea gets lost.

💡 Keep every version together with the brief. A banner series with your reasoning is a ready-made small portfolio case.