NotesAPIAbout

Generative Logo Design

When we first set out to design a logo for Components AI, we naturally gravitated towards generative concepts. The idea of a static mark didn’t seem to make sense as a brand concept. As people interact with the design tools, Components AI as a product is constantly altered. The logo is an opportunity to play with and reflect that concept in our visual language.

There are impressive examples of dynamic and generative branding projects. As this is just the beginning of our project - something too impressive and complex wouldn’t feel authentic to us. Our instincts were to start with a simple form that could become more complex and technical over time as the project matures and grows. Eventually, the logo design could be informed or driven by data we’ve collected.

Our first chats and sketches were centered around dots of random colors on a grid. Even when constraining the colors to a harmonious scale, it was quickly apparent that it wasn't working. Often, the visual contrast between logos was jarring enough to be slightly distracting.

Initial sketches on paper were of a 4x4 grid as we’re partial to powers of 2. In practice, it wan’t as aesthetically pleasing as 9 dots. 16 dots was too dense. We compromised on the purity of input values for visual aesthetics.

After initial sketches and an evening of light exploration we a bit of informed direction:

  • Enough variance to be different but recognizable
  • Neutral - Not intrusive visually to the canvas
  • Modest / simple form with a lot of room to evolve and grow over time

Randomly varying the opacity of each dot on a defined scale was more lackluster than anticipated. The subtle changes in opacity weren’t very perceptible, especially in the corner of the eye. The composition of the form as a whole didn’t feel balanced. Even with light constraints, allowing for the full range of opacity values didn’t seem to work. We shifted to toggling between two values, one dark, one light. We wrote a few different sets of weights that apply to each dot - that are randomly selected before logo generation.

Eventually we landed on something that generated the visual states below

Examples of Logo v1.0.0

Since we launched in July it’s served us well. At this stage of the product, logo design is not high on the priority list. While it’s been a short period of time since our launch, some of our technology has evolved past a few milestones. Behind the scenes we’re starting to wire independent systems together. In a manner, dots are beginning to connect.

While building the Delaunay triangulation pattern generator, I became interested in the forms generated when there was a small count of coordinates. Using Delaunay to connect a small series of dots, seemed like a small and appropriate evolution in both concept and execution.

To visually assess various iterations, the natural first step was to build an interface that could control a generative logo component similar to the other components we have available. The process could be boiled down to this four step process

  1. Define the parameters you want to manipulate and see variants of
  2. Define lists or sets of input ranges for each input
  3. Expose these controls to the GUI
  4. Experiment - adjust in code if necessary

Often times you want to expand or constrain the inputs into a parameter. For our purposes here we have a few things to generate that we might want to control:

  • Size of the SVG
  • How many points (coordinates)
  • Border width of outer border (convex hull)
  • Stroke (thickness) of the lines connecting dots (which if could be 0 simulating no line at all)
  • Border width of the points (coordinates)
  • Colors, of course
  • Since the d3-delaunay library renders to svg, there are a number of svg options that could be wired up to controls. For this experiment we tossed in some dash array controls for fun.

After the initial grunt work of defining and wiring up the controls - our patience was rewarded with an endless array of options at the click of a mouse.

The starting out point proved to have a lot of visual contrast.

Examples of Logo v1.0.0

We knew we wanted our logo to be a bit more neutral, so we constrained it to something close to black and white. A few things are quickly noticed. First our lower bounds for points count was resulting in triangles - which likely aren’t similar enough to some of the other marks to be recognized as part of the same visual identity.

Examples of Logo

One of the first issues we found when previewing these as the site logo, was that the variance in shape made the transition between logo updates quite jarring. In addition, we didn’t find most of the forms to be aesthetically pleasing.

Examples of Logo Examples of Logo

Constraining the width of the border to 1 or 2 pixels and removing the stroke around points created some visual consistency but still not feeling close to what we want.

The variance in form here was too much. While not noticeable on a static grid, viewing the logo update inline was continuing to be a subpar experience. To create some consistency in the overall shape and form, we set the initial coordinates of a square, and then generated additional points inside of this boundary resulting in the below forms.

The lower boundary we had set for point count was resulting in some triangles rendering. But some aesthetically pleasing forms have emerged. Things that jumped out where having a balance or slight contrast between the outside border and the line weight.

With more than 10 points, the density and detail got lost at smaller sizes. Almost has stained glass vibes.

We cranked up the outer border width and removed lines altogether, just leaving dots for each point. Many of the generated forms felt unintentional - but were also aesthetically pleasing in some cases. Reducing the border and adding the lines back in gave a drastically different look.

As promised for fun, we explored manipulating the lines with dash array. Varying the line-width to extremes on both end lead to some pleasing output that could be explored more in-depth later. They almost resemble paper folding instructions.

Increasing line width and moving dash array sliders around resulted in some bold marks.

This resulted in a more minimalist direction. Again some of the errant lines lead to the marks feeling a bit unintentional.

A lot of the above explorations, were not within the bounds of our imaginations when we first conceived our logo concept. Even at the point of defining parameters and input values, much of the output is far removed from the original sketches and visual concepts we set out to explore. Some of these iterations helped us define in more particular terms, what we didn’t want or like.

Settling on a range of points between 5-7 with an outer border width of 4 and a line width of 1 - we start to generate the forms you see below. These immediately felt 'right.'

After looking at thousands of options, this output felt balanced and inline with what we wanted. It’s got enough variance to feel alive and dynamic. It’s only 1 degree removed from a random grid of dots. While simple, we feel it’s a step forward aesthetically and a bit more recognizable as a mark. If you'd like to play around with the generator we used to design our current logo - check it out here.

If you are interested in reading more about generative branding, below are some more complex explorations and executions:

https://www.slideshare.net/grandigrandi/bologna-city-branding-how-to-create-a-generative-logo

https://www.grapheine.com/en/actulogo-en/generative-visual-identity-for-bordeaux-metropole

https://sandrarendgen.wordpress.com/2013/05/03/generative-logos/

https://dataveyes.com/#!/en/case-studies/identite-generative

https://scss.tcd.ie/publications/theses/diss/2013/TCD-SCSS-DISSERTATION-2013-048.pdf

https://www.patrik-huebner.com/portfolio-item/generative-logo-synthesizer/

http://www.mertl-research.at/design/generative_logo/