You have it all set up: a good name for your site, you registered the domain name and hosting, and now you’re looking at the blank canvas where your logo or logotype should be. This step can be even more intimidating than choosing the name because it stares at you and all your visitors every time the site loads. Also, the logo is used in a variety of sizes and places, from a phone’s touch screen to… hopefully huge posters at your future cookbook launch!
In this article I will share some of the experiences and advice from more than 9 years working with the My New Roots logo – including tips on how to make a versatile dynamic logo.
Making a logo
A good way of starting work on your logo (symbol, like Apple’s apple) or logotype (the name written in a recognizable way) is to take inspiration from the actual name and purpose of your site. In the very early days of My New Roots the name was actually written in a green, very minimal font in the top of the page (unfortunately I don’t have a screenshot of it). Green, because vegetables. That was pretty much it. Later, we updated the general design of the blog to use a thin sans serif font for the blog post titles so Sarah gave it a new spin, wanting a friendlier font for the logo and also a more “designed” logo than just the words My New Roots written in green letters. This is how it was developed:
First Sarah found a font that looked somewhat like what she wanted. Remember, you can stop at this step and just adjust color, letter spacing and font weight and you are good to go (it worked for google until very recently!). If you want to go a bit further you can place the words in a certain way as seen in step two. Simply placing two words on top of each other and adjust the size and spacing to get a “block effect” can be a remarkably strong visual element. Finally, using Adobe Illustrator you can tweak the shapes of the letters or create a symbol for your blog. Sarah used the Times font as inspiration to make her slightly quirky letters and add a little leaf on the letter “t”. Finally, she added the circle background to give it a stamp-like character, which turned out visually stronger than just the letters on white background. The circle also makes it work in negative on dark backgrounds (white circle, transparent letters).
What is a dynamic logo?
The My New Roots logo is fairly simple but still becomes too detailed when it is scaled down to mini-size. So making a logo for online use means making a logo that is not only simple but also one that can transform into something else! A dynamic logo (or identity) doesn’t always look the same but changes the graphic elements depending on the application. The little favicon that the browser displays in the tab is a perfect example. This is probably one of the smallest versions of your logo that you will ever use but also one of the most important, as people are trying to find the tab with your site among the 43 other tabs they have opened. In our case we keep the circle and the M and it doesn’t take much energy from the reader to recognize the tab as the home of My New Roots. If you don’t have a favicon your site could be lost in a sea of beautiful little tab icons, and that would be a shame.
The very short, step-by-step guide
To sum it all up, if you’re just starting our or simply want to improve how your site looks you can definitely do it without being a master designer:
- Start with your site name: write in different fonts and play with italic, bold, line spacing, letter spacing and colors. This is best done in Illustrator because it allows you to scale indefinitely but it can be also done in Photoshop if that is your tool of choice. Just remember to make the letters really big in Photoshop and then scale down from there.
- Next step is to play with lines, circles and other basic shapes to complement the letters. If you are intimidated by all the digital tools, no worries: print out a page with your site name in the font you like and start doodling on it with a pencil. Easy and cheap.
- If you made your graphic element yourself in Illustrator, great. If you drew it on paper, take a photo of it and send it to a designer – they can convert it into a digital version (vector) at a small cost, since you already drew it.
- Finally, if you’re happy with how everything looks, begin thinking about the dynamic aspects: how can you make a tiny version that is still recognizable? Can you isolate a part that can live on its own? Like Nike has a swoosh, My New Roots has an “M” in a circle… what element can you use?
- Start using your awesome logo!
Feel free to ask questions in the comments – happy logo crafting!
Mikkel / My New Roots