Branding With Code

I stayed at an Airbnb in Melbourne for 3 months last summer. Come to think of it, both Airbnb and Melbourne city had very vibrant and dynamic identities.

Airbnb
Melbourne City

And they reminded me of a project that I did 2 years ago. I developed a dynamic and flexible identity system for Bespin Global, one of the fastest growing cloud management startups.

Credit: June

Bespin Global’s new identity system resists the traditional thinking of brand design. We rather welcomed the idea of modulation and progressiveness, giving a degree of flexibility into the identity. For example, a company’s services or apps could be identified through different types of logos like JetBrains or MIT Media Lab.

Anyone can download a vector pdf file from the web app. The downloaded logo can be used as it is or modified in any graphics software. An employee may access this web app and create her own identity to make a unique name card for example. A web designer could change the website logo once in a while using this.

Check out the real-life interactive example

How To Make

Deconstructing

This is an ideal set of generated identities that a brand designer June made. The first thing came to my mind was to deconstruct the cloud shape into basic elements like ellipses and (rounded) rectangles and their properties like position, radius, direction, color, and number. The next step was to find if there was an arithmetic pattern of the components, which I ended up creating a simplified formula. By having this, the number of logos that can be generated is infinite.

Prototyping

Now it was time to prototype and test. I started with my favorite prototyping tool, FramerJS. But I soon realized that it was hardly possible to make a vector export function, which was one of the core functionalities. So I moved to Processing that I used to make some interactive artworks on my website to generate a vector file. (Watch the video below.)

The prototype served well as a proof-of-concept. But I wanted a smooth transition between different clouds. The prototype also didn’t support high-resolution displays and had to be run on a computer, not a browser.

Developing

As stated above, the app should be open for everyone to easily access from anywhere. Running it on a browser seemed inevitable.

Thanks so much to PaperJS, I could make this app alive. It’s a Javascript library for vector graphics and interactions. The API was well documented with interesting examples. Most importantly, it supported the vector download function by default.

I just converted the script that I wrote in Java for Processing to Javascript. The logic remained the same. I just added a bit of code for transition animations.

Here’s a beta version that you can play with.

Wrapping Up

I hope this inspired you to think about some initiatives or to revisit traditional thinking about design practice. I was very impressed by how Airbnb was doing for their design system. No doubt they are paving a new way, but also inspiring others like me. It is always exciting to question the way it is and be ready to be failed in exchange for pioneering.

Thanks for reading.


Design Consultancy: Daylight Design
Brand Design: June Lee
Interaction Design & Development: David Lee

Thanks to Jihoon Suh and Michelle