Logo Design Process - Part 1

In this series, I will go over the whole process of designing my visual identity. It's quite long so I've divided it into 5 parts:

• Part 1: Logo Design Process
• Part 2: Logo Design Process cont.
• Part 3: Colours, Submarks, and Patterns
• Part 4: Stationery Design
• Part 5: Stationery Design cont.

As a software developer who is passionate about creative coding/generative art, I thought it would be fun to design my logo in a code editor (using JavaScript) rather than a sketchbook or graphics editor.

I decided I wanted the general theme to be ones and zeros since everything I do in my line of work ultimately boils down to that but beyond that, I had no idea what I wanted in a logo and was making it up as I went along. It took longer than I thought it would to come up with something I was happy with, but it was worth it... I enjoyed every minute of it and am thrilled with the result!

Here's more or less how the logo evolved (left to right, top to bottom):

I started by converting my name to binary, and playing around with various shapes and formats to ‘visualise’ the bits in the hope that something will jump out at me… a pattern, maybe? Or perhaps an idea for a generative logo? Basically, something I could use to create the final design.

Here are some of the outputs:

The grey shapes represent the 0's, and the coloured shapes the 1's; except in the last one where the bottom ones are the 0's and the top ones the 1's. For reference, 'Zaineb' in binary is: 01011010 01100001 01101001 01101110 01100101 01100010

One thing I noticed after converting my name to binary was that the bit pattern for the character 'Z' is a palindrome (if you include the leading 0, at least), so I wondered if it would work as a logo:

For a minute, I actually considered using one of these as a logo and calling it a day (I liked the middle one in particular), but then decided to file it under "maybe" and try a different approach.

I happened to be working on another project at the time involving procedurally generated trees, and it gave me another idea: why not use a tree as a logo? I once looked up the meaning of my name, and one of the suggested meanings was 'flowering tree', so it is relevant (at least that's what I'm telling myself). Also, trees in computer science. Again, relevant... so a tree it is!

A generative tree, to be exact.

I decided to keep things simple and start with a basic binary fractal tree (where each branch splits into two further branches), and then go from there. To generate a unique tree on every run, I randomised the angles and lengths of the branches, as well as the depth of the tree:

This produced so many interesting trees, and no two are alike. I had a hard time deciding which ones to share here! I thought they were looking a bit bare, though, so just for fun, I added circles to symbolise leaves (or flowers?):

The leaves brought to mind the circles I used to represent the bits in my earlier sketches, so I decided to do the same here and have the leaves represent the bits... the only problem was that I needed a tree with a very specific number of leaves: 48 (6 characters, 8 bits per character). In a binary tree of depth d, the number of leaves = 2^d. Not exactly ideal as the tree would fall somewhere between these two (2⁵ and 2⁶):

A tree of depth 6 could work if I left some of the branches bare or removed them altogether but I wasn't sure about it:

I decided to set this one aside and try to come up with something else. There are plenty of ways to draw trees with 48 leaves, of course... the problem was finding one that was visually appealing. A tree that's basically a trunk with 48 branches sticking out of it isn’t going to look very good. The same goes for a tree with 2 branches that split into 24 branches each (or the other way around), but rather than randomly going through one tree after another to find one that worked, I thought I'd try using the prime factorisation of 48 to determine the branching factor at each level:

It doesn't have to be in the order shown above, of course... any of the following could've worked:

I only went with the first one since this tree is practically a binary tree all the way up to the 4^th level (2⁴ × 3)... so rather than start from scratch, I could easily work it into the code:

And here they are with the leaves (or flowers, I can't decide):

I then decided to vary the sizes of the leaves, with the larger circles representing the 1's, and the smaller ones the 0's (the binary representation reads left to right on the tree). I also varied (and randomised) the colours:

However, while I liked the tree, I didn't like it enough to want to use it as a logo so I decided to try a different branching pattern which I'll cover in Part 2 of this series.

• An introduction to trees in programming: the oxygen of efficient coding
• Javascript for Designers 101: The DOM (An Illustrated Guide)
• Learning Tree Data Structure
• Working with Trees
• Tree (data structure)

Thank you for reading!

Zaineb