Web Banners Product Design 2 — Questions and Answers
Question 1: Which visual hierarchy principle should guide the arrangement of elements in a product banner?
- Place all elements at equal visual weight
- Lead with the highest-priority element using size and contrast (Correct answer)
- Center every element regardless of importance
- Use identical fonts for all text elements
Correct answer: Lead with the highest-priority element using size and contrast
Visual hierarchy uses size, contrast, and placement to direct the viewer's eye to the most important element first.
Question 2: What is the recommended minimum font size for body text in a standard web banner to ensure legibility?
- 8px
- 10px
- 14px (Correct answer)
- 20px
Correct answer: 14px
14px is generally the minimum readable body text size on screen; smaller text strains readability especially on mobile.
Question 3: A product banner for a luxury watch uses negative space extensively. What is the primary design benefit?
- It reduces production costs
- It creates a sense of exclusivity and lets the product breathe (Correct answer)
- It allows more text to be added later
- It makes the banner load faster
Correct answer: It creates a sense of exclusivity and lets the product breathe
Generous negative space signals premium quality and keeps focus on the product without visual clutter.
Question 4: When designing a product banner for an A/B test, which single element change provides the cleanest data?
- Change the headline, CTA, and image simultaneously
- Change only the CTA button color (Correct answer)
- Redesign the entire layout
- Change the font family and headline together
Correct answer: Change only the CTA button color
Changing one variable at a time isolates the cause of any performance difference and yields actionable data.
Question 5: Which color contrast ratio does WCAG 2.1 AA require for normal text in a web banner?
- 2:1
- 3:1
- 4.5:1 (Correct answer)
- 7:1
Correct answer: 4.5:1
WCAG 2.1 AA mandates a minimum 4.5:1 contrast ratio for normal text to ensure accessibility.
Question 6: A designer is creating a banner showcasing a skincare product. Which photography approach best drives purchase intent?
- Abstract geometric patterns only
- Close-up lifestyle shot showing product in use on skin (Correct answer)
- Stock photo of a generic person smiling
- Product floating on a white background with no context
Correct answer: Close-up lifestyle shot showing product in use on skin
Lifestyle shots that show the product in realistic use build emotional connection and help shoppers visualize results.
Question 7: In responsive banner design, what does 'fluid typography' mean?
- Using only serif fonts
- Font sizes that scale proportionally with the viewport width (Correct answer)
- Animating text as it appears
- Using the same font size on all devices
Correct answer: Font sizes that scale proportionally with the viewport width
Fluid typography uses CSS clamp or viewport units so text size smoothly scales between minimum and maximum values across screen sizes.
Web Banners Product Design 2
Which visual hierarchy principle should guide the arrangement of elements in a product banner?