How to Design a Banner: A Complete Guide for Web and Print

I've designed banners for Kodo's website, launch events, and social media campaigns. What I learned: a good banner is like a billboard—it needs to communicate instantly, even from a distance.

Banners come in all shapes and sizes, from tiny web headers to massive event displays. But the principles are the same: grab attention, communicate clearly, and drive action. Here's how to design one that works.

Know Your Dimensions First

Before you design anything, know where the banner will be displayed. A website header (728x90) is completely different from a Facebook cover photo (1200x630) or an event banner (48" x 36").

I always start by setting the exact dimensions in Kodo. This prevents me from designing something that looks great but doesn't fit the space. Standard web banner sizes are 728x90 (leaderboard), 300x250 (medium rectangle), and 970x250 (billboard). For social media, each platform has its own requirements.

The "3-Second" Message

People see banners for about 3 seconds before scrolling past. Your message needs to be crystal clear in that time. One headline, one call-to-action, that's it.

I use the "rule of three": one main message, one supporting element, one call-to-action. Anything more and the banner becomes cluttered. When I designed Kodo's launch banner, I focused on one thing: "AI-Powered Design Tool." Everything else supported that message.

Typography: Big and Bold

Banner text needs to be readable at a glance. I use a minimum of 24pt font for web banners and much larger for print. The headline should be impossible to miss.

Also, limit yourself to 2-3 words for the headline. "Free Trial" works. "Try Our Amazing Free Trial Today" doesn't. Short, punchy, memorable. That's the goal.

Color: High Contrast Always

Banners compete for attention. High contrast between text and background is non-negotiable. Dark text on light background or light text on dark background—never medium on medium.

I also use bright, saturated colors for important elements like the call-to-action button. A bright red "Buy Now" stands out more than a muted gray. But don't overdo it—one bright accent color is enough.

Images: One Strong Visual

One great image is better than five mediocre ones. If you're using a photo, make sure it's high resolution and relevant. A blurry or pixelated image makes your entire banner look unprofessional.

Also, make sure images don't compete with the text. If an image is too busy, it makes the text hard to read. Use images to support your message, not distract from it. Sometimes, a simple gradient background works better than a complex photo.

The Call-to-Action: Make It Obvious

Every banner needs a clear call-to-action. "Learn More," "Shop Now," "Sign Up"—make it obvious what you want people to do. I use a contrasting button color and bold text for the CTA.

The CTA should be large enough to click easily (especially on mobile) and positioned where people naturally look—usually bottom-right or center. Don't make people hunt for it.

Web vs. Print: Different Rules

Web banners need to load fast and work on small screens. Keep file sizes small (under 200KB for web) and test on mobile devices. Print banners need high resolution (300 DPI minimum) and can be more detailed.

I design web banners with mobile-first in mind. If it doesn't look good on a phone, it's not good enough. For print, I always request a proof before mass printing. Colors look different on screen vs. paper.

Animation: Use Sparingly

Animated banners can grab attention, but they can also be annoying. If you're going to animate, keep it subtle. A gentle fade-in or a slow slide works. Rapid flashing or constant movement is distracting.

Also, remember that not all platforms support animation. Always have a static version ready. And for print banners, obviously no animation—but you can use visual flow to guide the eye.

Final Thoughts: Test Everything

Before you publish or print, test your banner. Can you read it from 10 feet away? Does it work on mobile? Is the message clear? Show it to someone who doesn't know what it's for and see if they understand it.

A good banner is a tool. It should grab attention, communicate clearly, and drive action. If it does all three, you've succeeded.