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.
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.
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.
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.
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.
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 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.
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.
Download a free sample from my book, Design Fundamentals.
taking into account that you aren’t a logo designer must say your new logotype is really nice. Actually it was first thing I noticed when I came back to your new site, fits very well in your new design. Well done.
Thanks Albert. I’m glad you like it and appreciate the compliment. I’m still not sure it’s anything special in a logo, but I do think it’s better than the last one and does fit well with the site.
Thanks again.
Good article. What I really like about you is how passionate you are about being simple. About doing more with less. I am Apple user, and I can tell ya that simplicity is always the best design philosophy. I avoid distraction to the audience. And I really like about what you share in your blog. I am not profesional artist, but I do really love icon/logo design. Currently perfecting my skill in Photoshop and Illustrator.
Thanks Aizat. I tried to keep things simple. Hopefully I managed to do that. There’s more I’d like to include in the design and I’ll have to see if I can figure how I can do that and keep things from getting too complex.
Interesting read. I like how your final logo is very simple, yet still manages to convey the specific concepts that you set out to express.
Thanks Josh. I tried. I still wonder what someone who really does logos well would have come up with, but I did my best and I think it turned out ok. I’m glad it’s getting across some of what I wanted it to.
I too like your new logo; the 3×3 grid design is genius in its simplicity. I would, however, add more variation between the words “vanseo” and “design.” In the same way you picked distinct but complementary colors for each word, I’d go one step further and pick a slightly different font or typeset for one of the words. It looks too same-y otherwise.
Thanks Alex. Yeah I hear you about more variation between vanseo and design. My original thought was to use 2 different fonts, but I never could find a combination I liked.
I played around with a few things, but in the end left it as just the color. I’ll have to give it another try and see what I can come up with.