The first thing a child draws looks like a circle. People spontaneously arrange themselves in a circle when they need to observe something close up, and this led to the origin of the arena, the circus, and the stock exchange trading posts.
Bruno Munari, “La Scoperta del Cerchio (The Discovery of the Circle)” 1964
At Automattic Design, we’re exploring the use of software to augment and automate mechanical design processes. One of our current experiments is a tool that automates the creation of brand collateral according to our visual language and brand guidelines.
One element of the WordPress.com brand identity relies on the most basic of visual elements — a circle — to spotlight the diversity of these customers and highlight the variety of what they do using WordPress.com.
Working with a small team to extend this identity into a computational system, our goal with this experiment was to write software that could generate assets with a wide range of visual variety while adhering to our brand language.
Here’s an example of what the tool can generate today:
The people using WordPress.com are a diverse bunch: writers, medical professionals, photographers, cafe owners, and any kind of small business owner you can imagine. Given the variety in the kinds of customers using WordPress.com, our messaging can differ widely from audience to audience. Writing software that automates mechanical tasks like image formatting and resizing also creates an opportunity to scale tailored messaging — without designers spending hours on changing copy, resizing, and exporting.
Process
A tool like this is possible when the brand language has been established to some degree. Once established, generating assets is a matter of codifying those patterns into software that can draw and render variations on that system. The software automates the following:
- Accepts input for asset dimensions and copy
- Identifies the position of a face in a portrait*
- Composes and renders the output at a high resolution
- Downsamples to 1x and 2x (for retina displays)
*Since this is the most computationally intensive task at the moment, this process abstracted into a separate script that can be run to batch process portrait images. The source code can be found here.
Currently asset generation can be scripted in python, or used via a command line tool:
If this kind of programming and design is up your alley, drop us a line — we’re hiring!
What’s Next
Our hypothesis (and other’s hypothesis, too) is that investing in software to produce design outputs will create immediate and long term value.
Hypotheses are great. Hypotheses plus data are better. And hypotheses plus data plus iteration is best.
from Automattic Design Principles for 2019
The value of a computational design system is not to replace designers, but to augment the workflow such that a designer’s time is spent reviewing and selecting the best creative, rather than pushing pixels across a screen and cutting banner ads. Moreover, the immediate value lies in increasing design efficiency and speed — giving designers more time to focus on refining the system, solving creative problems, and improving the overall brand + product experience.
Over the long term, software-based production tools enable the best design to scale; we can enforce the kinds of visual details and consideration that separate good design from great across brand and product, and activate those designs with our own insights and empathy to be more inclusive and impactful to a diverse customer base.
Thanks for following along!
Automattic Design 