Realising Five Pines Part 2: Logo Designs

Hello, and welcome back. If you haven’t already, check out the first post about the Early Website Designs for Five Pines. We’re picking up where that post left us: creating a logo.

Now that we had a colour scheme, we could work on a logo. The name “Five Pines” would be relatively simple to translate into imagery, and I consulted with the clients to see if they had any ideas or preferences. They didn’t mind abstract or realistic interpretations, but would like it if a pine tree would make an appearance. Due to the visual identity of the site design thus far I wanted to steer away from hyper-realism.

While not the best pen & paper artist, I came up with a few basic directions in a notebook.

Flawlessly drawn explorations of how to turn “Five Pines” into an effective logo.

Some of these initial sketches looked good, and I began turning them into icons in Figma. The first efforts were based on an idea proposed by the clients — five pine trees, all in a row.

An example of how “Five Pines” can be easily translated into imagery.

However, none of these stood out. The basic idea of the trees, didn’t look too bad, but the logos here weren’t what we were looking for. I looked at using the trees in different contexts.

Circular/Square logos lend themselves more to social media icons & similar situations, where you aren’t given much space to express your brand.

Still, though they looked good, nothing stood out. I decided to start picking apart the elements of the tree, as in the second page of the notebook, to see what abstract versions we could come up with.

How much of the tree actually needs to be there? Do we even need a trunk?

I’d decided I quite liked the idea of five leaves/branches.

As you can see, the idea had moved from five pine trees to a single pine tree, but with five branches/leaves. Again, this would be good in the context of things like social media profiles, where resolution/aspect ratio is limited.

From curvy to more solid triangles.

You can see the progression from the curved & thin pines to the more bold, arrow-shaped ones. You can also see some of my experimentation with different layouts. Some of these did catch my eye — specifically, this one.

Lookin’ good! Well, mostly.

This worked somewhat well. It represented the name, and was good enough to be used in most contexts.

The logo in different contexts, as well as experimentation with shadows.

However, after reflecting on the icon there was still something off about it. I spent some time going over the designs, and looking for ways it could be improved. It was pointed out to me that the current logo wasn’t super easily recognisable as a tree, and while there was an element of artistic license, it was important to make it a bite more clear.

I switched up the proportions and distances of some of the branches. Also looked at different corners for the bottom, final branch. We chose the third one.

After iterating through many subtle changes, we arrived at this more tree-like logo. The logo third from the right was chosen, as it brought to attention the overall shape of the tree.

With this done, a font had to be chosen. I showed the clients 10 possible fonts to choose from, and while they did like the original choice, it came second to Roboto Slab.

A range of fonts that I showed the clients. The second to the bottom on the right column is the one we had been using thus far (Patua One), and it came a close second to the first one (Roboto Slab)

The new font in action.

And with that, the new logo was finished. I recreated the example usages, and this time showcased them on (near) black and white.

Woah, use cases!

You can see the differences between the two use case sets here.

Spot the difference!

The updated one looks a lot better.

At this point, the next thing to do was another pass over the website. Join me in the next post for just that!