Updated 2 November 2026. First published in 2024.
A banner has about two seconds to earn a second look. In that time, it has to show who you are, what you're offering and what to do next.
This guide covers the essentials, from banner sizes and placement to visual hierarchy, animation, colour and file sizes. It also covers the current specs for Google Ads and social ads, and what changes when you design banners for German-speaking audiences.
Essentials of web banner design
A web banner works like a silent salesperson. Choosing the right size, placing it well and keeping a clear visual hierarchy aren't just design choices. They decide whether anyone notices the banner at all.
Whether you're designing a display ad, a social media ad or the hero banner on a landing page, these are the building blocks.
Choosing the right banner size
The right banner size is much like choosing the right outfit. It must suit the occasion and the environment.
Your choice depends on your campaign goals and the devices your audience uses. These are the sizes Google Ads accepts for uploaded display ads, grouped by shape.
| Shape | Sizes (pixels) | Where it works best |
|---|---|---|
| Rectangle and square | 300 x 250 (medium rectangle), 336 x 280, 250 x 250, 200 x 200 | Within or beside articles, on desktop and mobile |
| Leaderboard and billboard | 728 x 90 (leaderboard), 970 x 90, 970 x 250 (billboard), 468 x 60 | Across the top of a page on desktop |
| Skyscraper | 160 x 600 (wide skyscraper), 300 x 600, 120 x 600, 300 x 1050 | Sidebars on desktop |
| Mobile | 320 x 50 (mobile leaderboard), 320 x 100, 300 x 50 | Top or bottom of the screen on phones |
| Nordic regional | 980 x 120 and 250 x 360 (Sweden), 930 x 180 (Denmark), 580 x 400 (Norway) | Publishers in those countries |
If you only have time for a few, start with the 300 x 250 medium rectangle, the 728 x 90 leaderboard, the 160 x 600 wide skyscraper, the 320 x 50 mobile leaderboard and the 970 x 250 billboard. Between them, they cover most placements.
Google's responsive display ads take a different approach. You upload images, logos and headlines, and Google assembles the ad to fit each space. They save time. However, you give up some control over how the finished ad looks.
Remember, it's not about filling the space. It's about fitting your message into the viewer's experience.
Social ad sizes
Most banner-style advertising now runs on social media, where the shapes are different. Feeds favour square and portrait images, while Stories and Reels are full-screen and vertical.
| Placement | Recommended size (pixels) | Shape |
|---|---|---|
| Facebook and Instagram feed | 1080 x 1080 or 1080 x 1350 | Square (1:1) or portrait (4:5) |
| Stories and Reels | 1440 x 2560 | Vertical (9:16) |
| LinkedIn feed | 1200 x 1200 or 1200 x 628 | Square (1:1) or landscape (1.91:1) |
| LinkedIn mobile only | 720 x 900 | Portrait (4:5) |
In Stories and Reels, the app's own buttons cover the top and bottom of the screen. Keep your headline, logo and call to action in the centre, well away from the edges.
If you run Facebook, Instagram and LinkedIn ads together, design the square version first. It's the one size that works on every platform, and you can adapt it to portrait and vertical from there.
Strategic banner placement
If banner size is the outfit, then placement is the runway. You want your banner where people are already looking, near the top of the page or beside the content they came to read, rather than tucked away where they scroll past it.
Don't just set it and forget it, though. Regularly testing banner positions and content shows you which combinations bring the most engagement and conversions. It's about finding the spot where your banner commands attention and inspires action.
Maintaining visual hierarchy
Visual hierarchy is the compass that guides the viewer's eye across your banner. It makes sure the most important elements, such as your offer, your call to action and your logo, don't get lost.
A well-structured hierarchy can also tell your brand's story, communicating its identity and values through the design itself.
You create it with
contrasting colours
variations in size
mindful typography
spacing
A typographic hierarchy helps too. It clearly separates the headline from supporting text, so the viewer knows what to read first.
A quick test is to look at your banner in black and white. Without colour to help, the headline should still stand out first, the supporting line second and the call to action third. If it doesn't, the hierarchy needs work before the colours go back in.
Enhancing banner appeal
Once you've nailed the essentials, it's time to make your banners stand out. That means simplifying the content and imagery, adding a clear call to action and framing the design.
Together, these turn a banner from digital signage into a message people actually notice and act on.
Simplifying content and imagery
In banner design, less is often more. Effective banners keep to the essential information and use simple imagery that people can take in at a glance.
If you can't describe your banner's job in one sentence, it's trying to do too much. Pick one message, one offer and one action.
Using your own images and brand assets helps. They tell your brand's story far better than stock photos, and they make your banners recognisably yours.
A special offer or promotion should take centre stage. Placed prominently within a simple design, it catches attention and makes the main message obvious.
Incorporating buttons and calls to action
Calls to action (CTAs) and buttons are the stars of your banner. They tell viewers what to do next, which improves engagement and conversion rates.
The CTA button usually sits where the eye moves naturally after the offer and logo. Use a contrasting colour so it stands out, and keep the wording short, such as "Shop now", "Book a demo" or "Get the guide".
Make sure the button's promise matches the page it leads to. If the banner says "Get 20% off", the landing page should show that offer straight away. A mismatch loses the click you've just paid for.
On your own website, a CTA in the hero banner guides visitors towards taking action straight away, which can noticeably lift conversion rates.
Creating a defined frame
A banner without a frame is like a painting without a canvas. A defined frame focuses the viewer's attention and separates your banner from the content around it.
You create it through careful alignment, contrast and a clear border or background. It's about creating a stage for your content, so the viewer's eyes go to the right places.
Leave a safe margin inside the frame too. Platforms crop and resize banners, so keep your headline, logo and button away from the edges, where they're most likely to be cut off.
Utilising animation and colour
Animation and colour are powerful tools for creating captivating visuals. However, like all powerful tools, they must be used wisely. Too much animation overwhelms viewers, while the wrong colours create a visual cacophony.
Incorporating animation wisely
Animation is the pixie dust of banner design. It turns a static image into a short story. However, like all magic, it works best in small amounts. Choose effects that fit your brand's personality, such as
sliding
fading
bouncing
swinging
Animate each element separately and keep them in sync, so the movement feels cohesive. Make sure the final frame works on its own, with your offer and call to action visible, since that's what most people will see.
Keep animations short. Google Ads requires animated banners to stop after 30 seconds, including any loops, and animated GIFs must run slower than five frames per second.
Selecting appropriate colours
Colours are the emotional undertones of your banner. They set the mood and can influence how people feel about your offer, so it's worth understanding colour psychology and the cultural meaning of the colours you choose.
Use colour strategically to reinforce your message and your brand identity. Vibrant colours, a consistent brand palette and subtle gradients all help a banner stand out. Seasonal campaigns can lean on seasonal colours, such as warm hues in summer and cooler tones in winter.
Not everyone sees colours the same way, so make sure your banners are accessible. The WCAG accessibility guidelines recommend a contrast ratio of at least 4.5:1 between text and its background, or 3:1 for large text. That matters even more on a small, busy banner.
Ensuring consistency and quality
Quality and consistency are the twin pillars of effective banner design. They shape how people see your brand and how they interact with your ads.
That means attention to detail, from a unified brand image to choosing the right file formats and keeping file sizes small.
Presenting a unified brand image
Brand consistency builds a strong reputation, sets you apart from competitors and earns trust. In banner design, that means a consistent colour palette, consistent fonts and your logo in the same place every time.
Inconsistent banners create a fragmented experience that confuses people and weakens your brand. Keep your banners consistent with your landing pages and the rest of your marketing.
The easiest way is to build a banner system, not one-off designs. Create one master layout with fixed places for the headline, offer, call to action and logo. Then make variations for different sizes, offers and seasons from that master. Every banner looks like it belongs to the same brand, and updates take minutes, not days.
Choosing the right file formats
Just as a painter chooses the right canvas, you need the right file format for each banner. It decides how well your banner displays across platforms and how sharp it looks.
| Format | Best for | Google Ads limit |
|---|---|---|
| JPG | Photo-led banners with a single strong image | 150 KB |
| PNG | Logos, sharp text and transparent backgrounds | 150 KB |
| GIF | Simple animation with a few frames | 150 KB, under 5 frames per second |
| HTML5 | Complex, interactive or smoothly animated ads | 600 KB, as a ZIP file |
If your banner is mostly text, PNG usually keeps the words sharper than JPG after a platform compresses it.
Keeping file sizes small
Every second counts online. Large banners slow pages down, frustrate visitors and can stop your ad from loading before people scroll past.
Google Ads sets the limit for uploaded image banners at 150 KB, so treat that as your target. Social platforms allow larger files, such as up to 5 MB on LinkedIn, although smaller files still load faster on mobile.
Reducing file size doesn't mean compromising on quality. It means optimising your images and choosing the right file format, with fewer images and less text. It's about a smooth, fast experience wherever your viewers are.
Designing banners for German and DACH audiences
If you advertise in Germany, Austria or Switzerland, the banner that works in English may not survive translation.
German text usually runs longer than English, and short phrases grow the most. IBM's guidelines, cited by the W3C, estimate that text of up to 10 characters can expand by 200% to 300% when translated from English into European languages. That's exactly the length of most banner headlines and buttons.
Short English text grows the most in translation
Translated length as a share of the English original, by length of the English text
Source: IBM guidelines, cited by the W3C. Banner headlines and buttons usually sit in the first two groups.
German compound nouns cause a second problem. A phrase like "input processing features" becomes the single word "Eingabeverarbeitungsfunktionen", which can't wrap onto two lines in a narrow banner.
German, Austrian and Swiss publishers also sell their own banner formats, often under German names. If you book directly with a news site or portal, these are the sizes you'll be asked for.
| Format | Size (pixels) | What it is |
|---|---|---|
| SuperbannerGermany, Austria | 728 x 90 | The German name for the leaderboard |
| BillboardGermany, Austria | 800 x 250 or 970 x 250 | A large banner across the top of the page |
| Content AdGermany | 300 x 250 | The German name for the medium rectangle |
| Halfpage Ad or SitebarGermany, Austria, Switzerland | 300 x 600 | A tall ad beside the content, which can grow wider on large screens |
| WallpaperGermany | 728 x 90 plus a 120 to 160 x 600 skyscraper | A superbanner and skyscraper joined by a background colour, framing the top and side of the page |
| FireplaceGermany | A top banner plus two 200 x 850 side panels | Frames the page on three sides, like a fireplace around the content |
| WideboardSwitzerland | 994 x 250, or 320 x 160 on mobile | The Swiss equivalent of the billboard |
| MaxiboardSwitzerland | 994 x 118 | A slimmer top banner |
Sources: specifications from German marketer Weischer.Online, Swiss publisher Somedia and Austrian comparison portal durchblicker.
File limits vary just as much. One Austrian portal accepts banners of up to 40 KB, while a German marketer allows 500 KB. Always ask the publisher for its current specs before you design.
When designing for DACH audiences
design the German version first, or leave at least a third of extra space for text
keep button text to one or two words, such as "Jetzt kaufen" or "Mehr erfahren"
check that your fonts support ä, ö, ü and ß
decide whether to address people formally (Sie) or informally (du), and stay consistent across every banner and landing page
have a native speaker check the final copy, not just a translation tool
We've written German content on advertising campaigns, landing pages and interactive ads for a design company based in Munich, and these details come up every time.
Check your banners before they go live
Three quick checks catch most problems before you spend money on a campaign.
The two-second test. Shrink the banner to the size it will appear on a phone. If you can't read the headline and spot the button in two seconds, simplify it.
The crop test. Trim the edges. If the logo, headline or call to action disappears, move them further in.
The compression test. Upload a test version to the platform and look at it there. Compression can blur text and logos that looked crisp on your screen.
Partnering with Blu Mint for banner design
Now that you know how to design captivating banners, it's time to put it into practice. You don't have to do it alone.
Our designers create banners and social ads as part of complete campaigns, so the design, the copy and the targeting work together. We design social ads for clients such as JALG and Gwubi, alongside the websites and landing pages the ads lead to.
Whether you need display ads, social media ads or banners for PPC campaigns, we can help.
-
The most widely used display sizes are the 300 x 250 medium rectangle, the 728 x 90 leaderboard, the 160 x 600 wide skyscraper, the 320 x 50 mobile leaderboard and the 970 x 250 billboard. For social ads, use 1080 x 1080 for feeds and a vertical 9:16 format for Stories and Reels.
-
Google Ads limits uploaded image banners to 150 KB and HTML5 banners to 600 KB. Social platforms allow larger files, such as 5 MB on LinkedIn. However, smaller files load faster, so aim for the lowest size that still looks sharp.
-
To use animation effectively in your banner design, keep the animations brief and in line with your brand's personality to add a dynamic element to your banners.
-
Leave plenty of room for longer text, since short English phrases can double or triple in length in German. Keep buttons to one or two words, check your fonts handle umlauts and ß, and have a native speaker review the final copy before launch.
-
Simple, one-off banners are easy to make in-house with a good template and clear brand guidelines. A designer pays off when you run campaigns across several platforms and sizes, need banners in more than one language or want a consistent banner system your team can reuse.