Google Ads on p5js
System Design
August 2025
An attempt of automizing creating responsive ad design.
Building the system:
I first started by identifying the elements commonly used in Google ad design.
I found a reference on Pinterest that I chose because it felt more legible, even at smaller scales.
Here are the parameters:
h1 – Primary headline
h2 – Subheadline
Logo – Brand mark
Main Image – Product or visual focus
Background – Solid, gradient, or image
Background Shapes – Decorative elements
Button – Clickable element
Button Text – CTA like "Shop Now"
Discount Badge (optional) – e.g. "-40%", "New"
Secondary Image (optional) – e.g. extra product or lifestyle image
Footer Text – Legal disclaimers, contact info, etc.