Automated Assets
an asset generation tool for Automattic
I'm interested in software that takes over the repetitive parts of design. At Automattic I built a command line tool that generates brand collateral, such as display ads, from the company's visual language and brand guidelines.
The problem
A campaign needs the same idea in many sizes, with copy tuned to different audiences. Resizing, re-cropping and exporting each version by hand takes designers hours. The tool exists so a designer's time goes to reviewing and choosing the best work instead of cutting banner ads.
How it works
The brand's patterns, such as the circle used to spotlight the diversity of WordPress.com's customers, are written down as rules in code. For each asset the tool:
- takes the asset's dimensions and copy as input
- finds the position of the face in a portrait, so the crop and layout work around it
- composes and renders the result at high resolution
- downsamples to 1x and 2x for retina displays
Face detection was the slowest step, so it runs as a separate script that batch-processes portraits ahead of time. The tool can be scripted in Python or run from the command line. The source is on GitHub.
What I learned
A tool like this only works once the brand language is settled enough to write down. Most of the work is deciding what is a rule and what is a judgment call, and leaving the second to people. I treated the efficiency gain as a hypothesis, not a result: I didn't measure it.
Read about the project on automattic.design.
The project was covered by Communication Arts in a column about artificial intelligence in the design field.
I gave a talk about the project as a part of John Maeda's 2019 Design In Technology at the St. Etienne Design Biannale (~44:00):