ad-creative-design

Ad Creative Design

Design high-converting ad banners and display creatives. Covers all standard IAB sizes, platform requirements, CTA optimization, and A/B testing frameworks. Output as production-ready HTML/CSS with optional animation.

---

Step 1: Load Design Context

1. Read .agents/design-context.md for brand colors, fonts, style
2. If missing, ask user to run design-context skill or use defaults
3. Ad creatives must be strictly on-brand -- ads are often the first brand touchpoint

---

Gemini 3.1 Flash Image Preview

For AI image generation, see the image-generation skill for the full Gemini pipeline. Below are domain-specific prompt patterns for this skill.

Example Prompts

• Display Ad: "Create a display ad ([size]). [product/service] visual on [background]. Headline '[text]' in [style]. CTA button '[action]' in [color]. Clean, conversion-focused layout."
• Social Ad: "Create a Meta feed ad (1080x1080). [product] photo centered on [background color]. Short headline '[value prop]' above. CTA '[action]' button at bottom in [brand color]. Minimal text, bold imagery."
• Retargeting Banner: "Create a 728x90 leaderboard ad. Logo left, '[offer headline]' center in [font-weight] [font-family], CTA '[action]' right in [accent color] pill button. [brand color] background. Urgency-driven."

---

Step 2: Identify Ad Format and Size

Standard IAB Ad Sizes

Name	Dimensions	Type	Performance
Medium Rectangle	300 x 250	Display	Highest inventory
Large Rectangle	336 x 280	Display	High performance
Leaderboard	728 x 90	Display	Top of page
Mobile Leaderboard	320 x 50	Mobile	Mobile standard
Large Mobile	320 x 100	Mobile	Better engagement
Wide Skyscraper	160 x 600	Display	Sidebar
Half Page	300 x 600	Display	High impact
Billboard	970 x 250	Display	Premium placement
Large Leaderboard	970 x 90	Display	Wide format
Square	250 x 250	Display	Compact

Social Ad Sizes

Platform	Format	Dimensions
Meta (Feed)	Single Image	1080 x 1080 or 1200 x 628
Meta (Story)	Full Screen	1080 x 1920
Google Display	Responsive	Multiple (provide assets)
LinkedIn	Sponsored Content	1200 x 627
Twitter/X	Promoted	1200 x 675

---

Step 3: Ad Content Hierarchy

Every ad must follow this strict content hierarchy. Limited space means ruthless prioritization.

The AIDA Framework for Ads

1. Attention -- Visual hook (image, color, animation)
2. Interest -- Value proposition (what is it, why care)
3. Desire -- Benefit statement (what they get)
4. Action -- CTA button (what to do next)

Content Priority by Size

Large Formats (300x600, 970x250, 300x250)

1. Logo (small, top-left or top-center)
2. Hero image or visual
3. Headline (primary value prop, 5-8 words max)
4. Supporting text (1 line, optional)
5. CTA button

Medium Formats (728x90, 320x100)

1. Logo (left side, compact)
2. Headline (3-5 words)
3. CTA button (right side)
-- No room for supporting text or large visuals

Small Formats (320x50, 160x600 narrow area)

1. Logo or brand name (text only)
2. Headline (2-4 words)
3. CTA (text link or small button)

---

Step 4: CTA Button Design

The CTA is the most important element. It must be unmissable.

CTA Button Styles

Use one of three patterns: solid (high-contrast fill + shadow), outline (transparent bg + border), or pill (rounded + arrow icon). Key properties:

• padding: 10-12px 24-28px, font-weight: 700, text-transform: uppercase
• Add hover: translateY(-1px) + increased shadow or background swap
• Pill variant: border-radius: 50px with ::after arrow content

CTA Copy Best Practices

Weak	Strong	Why
Submit	Get Started	Action-oriented
Click Here	Shop the Sale	Specific benefit
Learn More	See How It Works	Curiosity-driven
Buy Now	Claim Your 20% Off	Value-driven
Sign Up	Start Free Trial	Low commitment
Download	Get Your Free Guide	Ownership language

CTA Placement Rules

• 300x250: Bottom-center or bottom-right
• 728x90: Right side, vertically centered
• 160x600: Bottom-center
• 320x50: Right side
• Always leave at least 8px padding around the CTA
• CTA should occupy 15-25% of the total ad width

---

Step 5: Value Proposition Framework

Headline Formulas

1. Benefit-first: "Save 3 Hours Every Week"
2. Problem-solution: "Tired of [Problem]? Try [Product]"
3. Social proof: "Join 50,000+ [Users] Who..."
4. Urgency: "Last Day: 40% Off Everything"
5. Curiosity: "The [Tool] Top Companies Use for [Result]"
6. Numbers: "3x Faster [Task] Starting Today"

Copy Constraints by Size

Size	Headline Max	Body Max	CTA Max
300x250	8 words	12 words	3 words
728x90	5 words	0 (no room)	2 words
160x600	6 words	10 words	2 words
300x600	8 words	15 words	3 words
320x50	4 words	0	2 words

---

Step 6: Layout Templates by Size

Layout Patterns by Size

• 300x250: Flex column. Logo top (12px padding), visual area (flex:1), content bottom (16px padding, centered). Headline 18px/700.
• 728x90: Flex row, align-items: center, 20px gap. Logo left (28px height), headline (flex:1, 20px/700), CTA right.
• 160x600: Flex column, centered text. Logo top, visual middle (flex:1), headline 16px/700, body 12px, CTA at bottom (margin-top: auto).
• 320x50: Flex row on brand-color bg. Text (flex:1, 13px/700 white), CTA right (white bg, brand-color text, 6px 14px padding).

All sizes: position: relative; overflow: hidden; border: 1px solid #E5E7EB;

---

Step 7: A/B Testing Variation Framework

Always generate at least 2 variations when possible. Test these dimensions:

Variation Axes

Axis	Variation A	Variation B
Headline	Benefit-focused	Urgency-focused
CTA Color	Brand primary	High-contrast accent
CTA Copy	"Get Started"	"Try Free"
Layout	Image top, text bottom	Text left, image right
Background	Light/white	Dark/brand color
Visual	Product screenshot	Abstract/lifestyle

Generating Variations

When creating an ad, produce:

• Version A: The primary design
• Version B: Same content, one variable changed (CTA color, headline, or layout)

Label each variation clearly in the output:

<!-- VARIATION A: Benefit headline, primary CTA -->
<div class="ad variation-a">...</div>

<!-- VARIATION B: Urgency headline, accent CTA -->
<div class="ad variation-b">...</div>

---

Step 8: Platform-Specific Requirements

Google Display Network

• File size: max 150KB (HTML5), images under 150KB each
• Animation: max 30 seconds, max 3 loops
• Must include a visible border (1px solid #ccc if background is white)
• Click area must cover the entire ad
• No auto-playing audio

Meta (Facebook/Instagram) Ads

• Text on image: keep under 20% of the image area (not enforced but affects delivery)
• Primary text: 125 characters
• Headline: 40 characters
• Square (1:1) and vertical (4:5) perform best on mobile
• Video thumbnails follow same rules

LinkedIn Ads

• Professional tone -- avoid clickbait
• Statistics and data-driven headlines perform well
• Blue tones blend with platform; use contrasting colors
• Company logo must be visible

Programmatic Display

• Must degrade gracefully (backup static image)
• All assets loaded from relative paths or data URIs
• Click tag implementation required

<!-- Standard click tag -->
<script>
var clickTag = "https://example.com";
</script>
<a href="javascript:void(window.open(clickTag))" style="position:absolute;inset:0;z-index:999;">
</a>

---

Step 9: HTML5 Animation for Ads

Animation Patterns

Staggered entry: Use fadeSlideIn (opacity 0->1, translateY 10px->0) with 0.2s staggered delays for logo, visual, headline, CTA. Add a subtle ctaPulse (scale 1->1.03) after entry completes.

Multi-frame rotation: Position frames absolutely, use a shared @keyframes frame with opacity in/out, stagger by total-duration / num-frames. Max 3 frames over 10-15s.

Animation Guidelines

• Total animation: 15-30 seconds max, max 3 loops
• End on a static frame with CTA visible
• No more than 3 frames/scenes
• Avoid fast flashing (accessibility)
• Final frame must show: headline + CTA + logo

---

Step 10: Ad Border and Container

Every display ad needs a clear boundary:

• border: 1px solid #E5E7EB; border-radius: 0; overflow: hidden; position: relative;
• Full-bleed click area: position: absolute; inset: 0; z-index: 100; cursor: pointer;

---

Quality Checklist

• Dimensions exactly match the target ad size
• Clear visual hierarchy: Visual > Headline > CTA
• CTA is prominent and clearly clickable
• Copy is concise and within character limits
• Brand colors and fonts from design-context
• 1px border present (required for display ads)
• File size is reasonable (aim for under 150KB total)
• Animation (if any) ends on a static frame with visible CTA
• At least 2 variations provided for A/B testing
• No text below 10px font size
• Sufficient contrast ratios for accessibility