Game of life

One of the things I love about digital design is the unpredictability of its outcomes. Creating flexible visual systems that adhere to a simple set of rules is really key when designing for digital media. This is because very often only a limited amount of content is available when designing the product and it’s also impossible to fully predict how a website will evolve over time or on which device it will be consumed. One loses the fine control over text flow and to some extent flexibility over layout that one has whilst designing for print, but you gain a living and breathing entity that the client and users bring to life in all sorts of unexpected ways.

An example of a simple set of rules that creates unpredictable, lifelike behavior is Conway’s Game of Life, an infinite two-dimensional grid of square cells, each of which is in one of two possible states, alive or dead. Every cell interacts with its eight neighbours following four simple rules. In most cases, it is impossible to look at a starting position (or pattern) and see what will happen in the future. The only way to find out is to follow the rules of the game.


An example ‘game’ from Conway’s Game of Life

The idea that design can be responsive to information that the designer has no control over has recently been introduced into the world of branding in the form of the generative logo.

Visit Nordkyn logo

The Nordkyn peninsula accommodates two municipalities in the county of Finnmark, Norway, Neue were given the task to unite and promote them as one tourist destination. In a place where nature rules, the result is a generative logo that changes along with wind direction and temperature.

Structure of the changing icon. Notice the “Calm” state at bottom left

Colors cover a range of temperature from -25°C (-13°F) to 25°C (77°F)

Sample iterations of the logo

Animation showing the logo changing direction and colors

When used offline the date, wind direction and temperature are appended to the logo.

My own generative logo

At heart I’m an unabashed geek so generative logos, which are created on-the-fly from dynamic data, particularly appeal to me. A few years ago I started taking down some basic notes on each project I’d completed, placing all of the findings in a Google Spreadsheet which now has 200+ projects in. To make the task of creating a logo from this large amount of data easier I’ve concentrated on one column within the spreadsheet, the industry sector the project was carried out for.



The live Google Spreadsheet


I then created a simple set of instructions to visualise this information in bubble chart form using a visual programming tool called Impure. The ‘D’ and my name are fed into the Impure Space as static images overlaying the chart.

Impure Space used to built the logo (click and drag to explore)


Because I update the Google spreadsheet after each project’s completion the logo’s icon, shown below, is an embodiment of all of my previous work, a sum total of my career. Further details about the logo’s creation to be found here.

A big thank you to WEDF for inviting me to talk!

This personal project was the chance for me to handle all the aspects of a digital project, including the strategy, branding, design, mobile / web development, marketing, advertising, copy writing and photography. So far I’ve been lucky enough to have contributions from some world class photographers including Martin Parr.

You can keep up-to-date with the project on Twitter or Facebook.

The logo I created for myself is generated on-the-fly using data from projects I’ve worked on over the previous 11 years.

The logo’s genesis

Tackling ones own branding is the toughest job you can have as a designer. Often there’s no time restriction or any of the boundaries normally associated with a design process, this leaves you without the traction that limitations afford you. Without the feedback that you pick up when designing a client’s identity you also have to exert zen-like powers of self-analysis and the belief that you’re following the right path.

My personal preference has always been for minimalistic branding for my own material, letting the portfolio itself do the heavy lifting when it comes to promotion. This is still largely my outlook today but there has been an increasing number places where simply having my name spelt out in the appropriate font and hex value simply wasn’t going to cut it.

Being a freelancer means you never quite know how much downtime you have till the next job comes along and all thoughts of business development are quelled. So my two priorities, the portfolio website and CV, were created first with minimalistic branding before I could guarantee the time to take on the logo. Ideally one starts with the identity and works out, but being a pragmatist I had to work with the time available.

Having lacked focus when designing my own logo in past I set myself six guiding principles:

- Use the font DIN in Medium, Bold or Heavy weights.
– Use the red #A00D00.
– Create an icon which can be detached from the lettering to be used on its own.
– It should be flexible and adaptable.
– It should be distinctive but not domineering.
– It should be meaningful to what I’ve done in the past and wish to create in the future.

The majority of the work I do is for digital, interactive projects where the design and functionality are so closely related they can be indistinguishable. The visual design is created to be flexible enough to accommodate often an unknowable amount of information, with the form of the site evolving as part of the life-cycle of the project. With this in mind I’ve never been comfortable with the idea of having an immutable logo mark created in Illustrator, cast in stone. Of course a well designed logo has a certain amount of flexibility, bending to the medium’s needs but more often than not it’s based around the same basic elements and wouldn’t reflective the responsiveness of interactive design.

I’ve been fascinated with the growth of flexible, dynamic and in particular generative logos in recent times. At heart I’m an unabashed geek so generative logos, which are created on-the-fly from dynamic data, particularly appeal to me. A great example of this is the Visit Nordkyn logo created by Neue.

The Nordkyn peninsula accommodates two municipalities in the county of Finmark, Norway, and we were given the task to unite and promote them as one tourist destination. In a place where nature rules, the result is a live logo that changes along with wind direction and temperature.

One of the driving forces for redesigning my site and branding was to demonstrate that I’m more than just a pretty pixel, I relish being part of the concept, design and execution of a project. So if the logo could attest to my ability to think conceptually and a willingness to get stuck into the technical guts of a project so much the better.

What all of this meant for the logo’s form itself wasn’t clear to me at the earlier stages of its development. The task of creating an attractive generative logo which would be dynamic and yet consistent, whilst being representative of my working process seemed like a whole mountain range to climb.

Happily whilst I was still experimenting with the logo, I’d just finished off the task of visualising all of the previous projects that I’d worked on using a bubble chart. The penny dropped. A dynamically created visual representation of all the work I’ve ever created (give or take) WAS my logo. So I simply removed the labels from the bubbles, chose an aspect of the projects that would have a satisfactory number of results, placed a capital D centre and my name set in DIN Black. Bingo!

The full logo

How the logo is created

A few years ago I started taking down some basic notes on each project I’d completed, placing all of the findings in a Google Spreadsheet which now has 170+ projects in. To make the task of creating a logo from this large amount of data easier I’ve concentrated on one column within the spreadsheet, the industry sector the project was carried out for. For example the Mr Bean site is within the Broadcasting sector. I then created a simple set of instructions to visualise this information in bubble chart form using a visual programming tool called Impure. The ‘D’ and my name are fed into the Impure Space as static images overlaying the chart. You can take a look at the Impure Space used to built the logo here.

In this manner the logo’s icon is an embodiment of all of my previous work, a sum total of my career. Because I update the Google spreadsheet after each project’s completion and the Impure code renders the bubbles chart somewhat randomly the logo is ever evolving and truly generative.

Final thoughts

The creation of the generative logo has been an interesting process for me. The dynamic nature of the logo means that I’ve had to give up a fair amount of control over the exact form the logo takes. The Impure code rebuilds the bubble graph slightly differently each time which means I can only shepherd the logo rather than shape it, which means sometimes the bubbles aren’t arranged in the most pleasing form in relation to the ‘D’. This fact almost stopped me using the logo but I came to realise its mild amorphic nature is part of what makes it successful.

Despite the logo not always being as pixel perfect as I’m used to I feel it’s been a success as it represents me as an experienced interactive designer far better than a fixed logo ever could. My hope is that the logo, with a brief explanation, points towards something that will always be present in my future work, the creative application of technology.

The number of places I can use the logo in it’s generative form are limited due do a number of factors so I’ve also created a ‘flat’ version to use elsewhere, my CV for example. Whenever I need to use a non-generative version of my logo I can quickly recreate a snapshot of the living logo from an Illustrator file to solidify one moment in it’s evolution. The generative logo is very much an on-going project rather than a finished product but I thought it would be useful to get it out there to see what people think… so let me know!