Web Banners Product Design 3 — Questions and Answers
Question 1: What is the purpose of a 'safe zone' in web banner design?
- An area reserved for legal disclaimers only
- A margin inside the banner where critical content is kept to avoid cropping (Correct answer)
- The region outside the banner frame
- A color-free zone to reduce file size
Correct answer: A margin inside the banner where critical content is kept to avoid cropping
Safe zones ensure key content like the logo and CTA are never accidentally clipped when the banner is scaled or placed in different contexts.
Question 2: Which of the following best describes 'visual tension' used intentionally in product banner design?
- Overly busy layouts that confuse the viewer
- Strategic imbalance or contrast that creates energy and draws the eye (Correct answer)
- Perfectly symmetrical layouts with no variation
- Using only warm colors throughout
Correct answer: Strategic imbalance or contrast that creates energy and draws the eye
Intentional visual tension through asymmetry or contrast creates dynamic energy that captures attention and guides the viewer toward key elements.
Question 3: A banner must communicate a product price reduction. Which design approach is most effective?
- List the original price in large text without the new price
- Strike through the original price and display the new price prominently in a contrasting color (Correct answer)
- Only show a percentage discount without prices
- Place pricing information in small print at the bottom
Correct answer: Strike through the original price and display the new price prominently in a contrasting color
The strikethrough technique visually anchors the deal, making the savings immediately apparent through direct price comparison.
Question 4: When selecting a typeface for a web banner headline, which pairing approach is most widely recommended?
- Use three or more contrasting typefaces for variety
- Pair a decorative display font with a decorative script
- Pair a strong display font with a clean, neutral secondary font (Correct answer)
- Use identical fonts for headline and body text
Correct answer: Pair a strong display font with a clean, neutral secondary font
Contrasting a bold display font with a neutral secondary font creates hierarchy while maintaining readability and visual coherence.
Question 5: What does 'above-the-fold' mean in the context of banner placement on a webpage?
- Content only visible on mobile devices
- The visible portion of a webpage without scrolling (Correct answer)
- The footer section of a webpage
- Animated content that plays automatically
Correct answer: The visible portion of a webpage without scrolling
Above-the-fold refers to the viewable area of a webpage on initial load before the user scrolls, which is prime real estate for banner ads.
Question 6: A product banner uses a dark overlay on a background image before placing white text. Why?
- To create a nighttime effect for the product story
- To ensure sufficient contrast between text and a complex background image (Correct answer)
- To reduce the file size of the image
- To comply with copyright by obscuring the photo
Correct answer: To ensure sufficient contrast between text and a complex background image
A semi-transparent dark overlay increases text contrast against busy or light background images, making copy legible regardless of the underlying photo.
Question 7: Which principle explains why placing the product image on the left and the CTA on the right works well in LTR markets?
- The Gestalt law of proximity
- Natural left-to-right reading flow guides the eye from product to action (Correct answer)
- The rule of thirds requires this layout
- Right-side CTAs load faster in browsers
Correct answer: Natural left-to-right reading flow guides the eye from product to action
In left-to-right reading cultures, the eye naturally moves from left to right, so showing the product first and the CTA second follows the viewer's natural journey.
Web Banners Product Design 3
What is the purpose of a 'safe zone' in web banner design?