When text is limited to 20% of an image, how should you design banner ads for optimal performance?

1. Prioritize strong, visual-first imagery

• Define the key visual: Before adding any text, clearly define the key visual—the central element that drives emotion and brand recognition. A strong key visual should carry symbolic meanings unique to the brand. At a glance, it allows audiences to instantly recognize the brand. More importantly, the key visual must “speak for itself,” emotionally resonating with viewers to create a lasting impression. At this stage, select a highly distinctive product or service image that communicates the core message immediately. The image should become the primary visual anchor, ensuring that keeping text within the 20% limit feels natural rather than forced, while still delivering strong impact. This serves as the foundation for building a wireframe or layout draft, clearly defining the placement of imagery, logo, and text zones to ensure overall visual harmony.

• Wireframe design: Start with low-fidelity hand sketches to quickly explore multiple layout options. Once a direction is finalized, move to high-fidelity digital versions to refine colors, typography, sizing, and spacing. This approach saves time, reduces errors, and optimizes banner design before producing the final version.

Additionally, to ensure visual comfort and readability, designers should apply layout principles such as the F-pattern or Z-pattern to understand natural eye-scanning behavior, emphasizing key visuals or messages in highly visible areas.

>>> Learn more about F-pattern and Z-pattern layouts here.

2. Focus on a concise key message

A banner’s message consists of two main elements: visuals and on-image text.

For imagery, special attention should be paid to the focal point. This is the area that attracts attention first, helping to build emotional connection and guide viewer focus. The focal point should be closely tied to the core message or main product, placed in a “golden” position within the layout, with strong contrast or standout prominence compared to surrounding elements. A well-defined focal point not only stops viewers from scrolling past, but also leads them to explore the rest of the design.

For on-image text, it should be structured into three parts:

• Tagline (core slogan): A short, powerful statement that clearly communicates the brand or product’s key value or differentiation. This is the most memorable line and should appear first. The most effective taglines directly address a real customer pain point.

• Subtitle / Description: Supports the tagline by clarifying the main idea or emphasizing the core benefit. Keep it to one concise sentence and avoid lengthy explanations.

• Promotion text: Text designed to trigger immediate action, such as “30% Off,” “Free Shipping,” or “Today Only.” This content should be placed near the CTA to maximize conversion impact.

In addition, avoid overloading banners with excessive information. Detailed product explanations can be placed in captions or on the landing page instead. Designers can also leverage icons, micro-infographics, and brand colors to replace long blocks of text.

3. Use eye-catching typography

Typography is not only about conveying information—it is a design element that evokes emotion and reinforces brand identity. Typeface selection should align with brand style to ensure both readability and visual impact. Specifically:

• Typeface: Prioritize clean, modern, easy-to-read typefaces, and avoid using too many different typefaces within a single banner.

• Font choice: Select fonts that remain clear and legible across different environments and screen sizes.

• Contrast: Leverage color contrast effectively (e.g., light background with bold text, or dark background with light text).

• Layout: Position text within the image’s focal point, aligned with the key visual to create optimal visual impact. Suggested placements include the top-left corner or the center when text is minimal.

• Hierarchy: Establish a clear text hierarchy (headline, subtitle, tagline) so viewers grasp the main idea first, followed by supporting details.

It is also important to distinguish between Typography, Typeface, and Font. Typography refers to the art of arranging and presenting text to convey emotion and aesthetics. Typeface is the “font family”—a collection of styles sharing the same design (e.g., Helvetica). A font is a specific variation within that family, including weight and size (e.g., Helvetica Bold 14pt or Helvetica Italic 14pt). Understanding these differences helps ensure consistent, professional text design choices.

4. Leverage white space effectively

This technique helps create a clean layout and highlight key content. Key considerations include:

• Maintain balanced breathing space: White space prevents visual clutter, making banner ads feel cleaner and easier to process.

• Reduce unnecessary text: Fewer words help stay within the 20% text guideline while reducing cognitive load.

• Highlight the product: White space allows the product to stand out as the centerpiece, improving memorability.

• Enhance CTA visibility: A less crowded surrounding area makes CTA buttons more prominent and encourages action.

  

5. Keep CTA concise

• Prioritize short CTAs: Use concise phrases such as “Shop Now,” “Explore,” or “Learn More” to save space while remaining clear.

• Place CTA within a standout button: Instead of scattering text across the image, group the CTA into a button with contrasting color to draw attention.

• Create a clear action cue: CTA buttons help focus user attention and increase click-through rate (CTR) by clearly defining the intended action.

• In some cases, CTAs may not appear as buttons but can be subtly integrated into slogans or key text.

Suggested formula: Hero image (70–80%) + main text (10–15%) + CTA button (5–10%) → compliant, balanced, and compelling.

Case study: Điện Máy Xanh’s “green mascot” key visual strategy

A simple formula: “Identity” + “Uniqueness” + “Memorability” = Impact

This unconventional approach sparked constant discussion, spread rapidly across communities, and evolved into viral trends. Specifically:

• Layout: The “green mascot” dominates the layout as the key visual, immediately capturing attention. Logos and messaging are placed centrally or near the bottom to avoid being overshadowed. The layout is simple, memorable, and distraction-free.

• Color palette: Neon green paired with bright yellow creates high contrast and a distinct visual identity that stands out from competitors. While not conventionally “beautiful,” it is highly effective for brand recall. This bold combination, along with the mascot, has become a powerful brand symbol—instantly recognizable in any context.

• Text ratio: Text typically occupies less than 20% of the image area. Instead of lengthy explanations, the dancing mascot and repetitive jingle reinforce the slogan “Bạn muốn mua… đến Điện Máy Xanh.” Short, repetitive wording ensures instant recall without requiring effort to read.

• CTA (Call to Action): Embedded directly within the slogan—“đến Điện Máy Xanh”. It functions simultaneously as a message and a clear action prompt, without the need for additional buttons or text.

Overall, this strategy intentionally broke traditional advertising aesthetics, allowing the brand to stand out in a visually homogeneous market. When a key visual becomes the “red thread” connecting long-term marketing efforts, brands can more easily establish top-of-mind positioning in consumers’ minds.

If you are looking for an advertising solution that optimizes both brand visibility and performance, don’t hesitate to create an account and experience campaign setup on SmartAds here.