We were approached by Natasha Jen from Pentagram to build a custom design tool for an identity they created for Galaxy, a digital asset and blockchain company. The identity included a generative approach to creating different avatars built on top of the identity's logo which is a helmet drawn with simple geometric shapes. By stacking smaller shapes on top of larger shapes in key spots, an infinite amount of variations can be generated.
The ask was to build a custom, web-based design tool to randomly generate these avatars. With the designs and initial variations provided, we were responsible for systematizing these early concepts into a design system that could be generated algorithmically. The task was therefore twofold: Creating a custom generative tool while at same time streamlining the generative approach to achieve a very specific aesthetic.
To Systemize a Visual Identity
We approached the project by building incremental prototypes in code which helped us understand the problem set and define a strategy for generating the helmets in an algorithmic fashion. The first versions of the design tool generated essentially unconstrained outputs, and we then focused on toning down the outputs and moving them in the direction of the initial designs.
Since the beginning of these explorations, we used our Open Source framework Mechanic to build this design tool, not only because the final deliverable was a custom design tool, but because it enables us to create a sandboxed environment where we can prototype fast and quickly try different approaches.
Making a Design Tool
Through our explorations and reviews with the Pentagram team, we got to know the generative identity, and this resulted in us reproducing a proper step by step generation algorithm that also takes randomization into account.
Because of these nuanced details we discovered in the initial phase, our first approach to building the design tool was to provide many options to the user. The tool could generate independent designs at each side of the helmet, mirror designs on both sides, swap specific shapes by clicking on them, and adjust specific details for certain patterns, like changing the number of spikes in the crown pattern. In order to develop these features, we worked to release new versions of Mechanic that allow users to build more advanced custom tools.
The final design tool is a simple and straight-forward experience where much of the magic is hidden below the surface. Wrapped up in a Galaxy-branded interface, it's a manifestation of the idea that custom design tools can streamline complex design workflows that would otherwise take a long time to do by hand.