Thursday 18 October 2012

My Thought Process For Creating This Logo | Van SEO Design

My Thought Process For Creating This Logo | Van SEO Design


My Thought Process For Creating This Logo

Posted: 18 Oct 2012 05:30 AM PDT

A logo helps identify your brand. It isn’t your brand, but it’s a symbolic representation of it. A logo communicates. Whether direct or subtle, it says something about your company and what people can expect from you. What thoughts go into designing a logo, particularly for a freelance designer?

When I began this series about the redesign of this site, I meant to talk about the logo earlier. I wanted to share how and why it looks the way it does. Then I got distracted with other things. Better late than never I suppose.

Perhaps the most important thing to know is I’m not a logo designer. I needed a logo and didn’t like the previous one, but a logo designer I am not. Still I wanted to create the logo for the site instead of letting someone more capable do the work. Please keep that in mind while reading this post and any time you look at the logo.

'Basic Logos' written in a book

What I Wanted in a Logo

As with the rest of the design my goal was simplicity. I wanted a logo that could work with different colors or in grayscale. I wanted something that could work easily as a favicon. I wanted something that…well…something that I would be able to create, given logos aren’t exactly my thing.

At the same time I wanted something that could be varied at times. Something that I could play around with and create recognizable variations that could visually communicate additional information and ideas on specific posts and pages.

I also wanted something that ideally didn’t require a bitmapped image, or any image at all; something I could produce through code alone.

And perhaps most importantly I wanted something that clearly showed the company name and in some way shape or form communicated the idea design.

2 logos: circle theme and enso theme
Early ideas for a logo with a circle and an Ensō

Early Attempts at a Logo

Long before I started on the design for the site, I was playing around with ideas for logos. I have a variety sketches and image files to remind me of early attempts and while most aren’t what I’d call good, I thought why not share a few.

This logo above and to the left is pretty simple. You can’t get much simpler than a circle. It would have worked in any color and as a favicon, etc. I was never sure what the circle represented though. Was it the sun? The moon? A big dot?

I experimented with the location and spacing of the type. I kept trying to connect the “d” in design with the “n” in vanseo, but I never liked how things looked when I did.

The logo above evolved into the one to the right. You can see it’s mostly the same except the circle has been replaced with the zen symbol Ensō or my attempt at the symbol. Ensō represents the universe and the void. It symbolizes a moment when the mind is free to let the body create. I left it open as a display of imperfection and a connection to something greater. This was all during a time when I was considering a sort of Zen aesthetic.

Logo with an open circle
Logo with an open circle and type

This next logo was another variation of the circle theme. Like the Ensō the circle is open for the same reasons. It’s another simple logo, but again I wasn’t sure what it really communicated.

As you can see I didn’t get too far with this variation. There’s no color and I’m still using Helvetica as a typeface, which I sometimes start with before playing around with other options.

Some more complicated logos
Some complicated logos with inspiration from the Bauhaus and geometric constructions

What Happened to Simple?

When it was closer to the time when I started working on the design, I played around with a variety of different ideas. I explored a Bauhaus aesthetic briefly, before spending more time with the Renaissance concept I later settled on.

With the Bauhaus logos I was looking for a way to incorporate the 3 basic shapes (triangle, square, and circle) together with and without color. With the Renaissance logos I played with geometric shapes and a variety of fonts that I thought would suggest Italian typographers.

They were all too complicated and none particularly good. I never seriously considered using any of them. These were all created over a very short time where I wasn’t sure what to do. It was good to play around though, as it eventually led me back to what you see now.

Vanseo design logo: a 3 x 3 grid next to the company name
Logo blown up

Thoughts About This Logo

Making things more complex for a time reminded me to focus on simplicity. Everything I wanted suggested a logo composed of a simple icon next to the the company name in type. By this time I had settled on Palatino as the main type I would use in the design and so I decided to use it in the logo.

I played around with the size and position of the words and whether or not to style them in any way. In the end I just spelled out the name in lowercase and italics. It feels more renaissancy to me for some reason. I think it’s the italics.

The company name stayed on a single line, since I thought it would be easier to incorporate in a navigation bar and help keep the header smaller.

For the icon I wanted something representative of design. I didn’t know what that was or how to get across an abstract concept like design. I wanted to stay away from something literal like an artist brush and palette to suggest creativity. It was going to be something more abstract and subtle, but what I didn’t know.

If you remember my previous logo used a color wheel as an icon, which is a bit ironic since I don’t consider working with color a great skill yet. I always thought that logo was on the cheesy side and the image itself wasn’t particularly good or representative of me in any way. Something about it also seemed too obvious.

I started thinking about my particular skills as a designer. What not only suggests design, but gets across something of my strength as a designer. Then it hit me. I should use a grid. My strengths as a designer are in organization and layout and I spend so much time talking about foundational principles and type and grids. It made a lot of sense to me to use a grid.

  • It’s simple
  • It can be varied
  • It suggests design
  • It makes for a good favicon
  • It can be created without an image
  • It was something I could create

Of course, I still needed to create the thing.

Grid experimens for my logo
Experiments with different grids for the logo

Grid Experiments

I opened Photoshop and started playing. I created a single square shape, made some copies and experimented with different patterns to form grids. At first I tried a 4×4 grid, which I really liked. There were a lot of ways I could vary it by sometimes showing and sometimes not the different squares forming the grid.

However 4×4 seemed a little more complex than necessary and didn’t lend itself as well to a favicon. I switched to a 3×3 grid instead. There’s less ways to vary it, but it’s simpler. It’s a simplified golden section. It’s the rule of thirds. I happen to like the number 9, having been born on the 9th of the month.

It was easy to fit into a 16×16 favicon.

( 4px × 3 squares ) + ( 1px × 4 lines ) (inside and outside grid) = 16px

Once I did the math for the favicon I knew. A 3×3 grid of squares would be sitting to the left of my company name in type. I think it represents me as a designer and suggests design in general. It felt right. It’s what you’re getting when you hire me to design a site. I don’t expect people will see it and immediately think that, but I do think it’s what’s being communicated no matter how subtle it might be.

It’s currently an image, but it’s all easy enough to recreate through code alone and at some point I will recreate it that way. I also have some ideas for how to vary it for specific content, but I haven’t yet written that content so the variations wait for now.

Logo Design Workbook
Logo Design Workbook

Summary

Once again, I’m not a logo designer. I don’t offer to create them as a service and I make no claims that what I’ve done here is any good. Still I wanted to design the logo for this site and I wanted to design it based on rational reasons and I wanted to share my thought process.

In part because of my lack of graphics skills and in part to lean toward the minimal, I went with a simple icon next to type. It fit what I was after in a number of ways, including working well as a favicon and not being reliant on color.

For the type I stuck with Palatino, my chosen typeface for the site, though it could easily be changed to any other font I want. For the icon I went with a simple 3×3 grid to communicate order and organization. It allows for variation and can be easily reproduced in different mediums.

Next week I’ll wrap up this series with a look at the things I did well and things I didn’t do so well. I want to share what I like and don’t like about the design and where I think it succeeds and fails. Why not critique my own design the way I’ve done for others.

The post My Thought Process For Creating This Logo appeared first on Vanseo Design.