Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Design

Tony McKeown
PLUS
Tony McKeown
Courses Plus Student 14,300 Points

Logo help

I've been building a rails app and thought it was a good idea to finally nail down an identity for the website.

I recently went through the Logo sprint course and came up with this. It's still a bit rough as my illustrator skills are a bit lacking and the headphones need to be smoothed out a lot more.

The main problem that I'm having is the text at the bottom. I like how the text looks with the white around it but obviously on a plain background the white gets lost and it looks ordinary. That's why I put the black in for now. I think the black looks like too much but I don't know what to do to keep some sort of contrast. Can anyone offer some advise on what I could do to improve it?

I'm mainly looking for tips on the writing but any other opinions are appreciated as I really lack a sense of design. One other question - does it looks too youtube? Someone said thats the first thing they thought about when they saw the colours.

http://imageshack.us/a/img856/6028/51om.png

6 Answers

Bojana Dimitrova
Bojana Dimitrova
2,704 Points

Hey Tony - it's not bad pratice, lots of business are using logotype in some applications and just the icon in others. However, then you probably should focus on building the text version with the symbol incorporated in it - that'll be your primary version and from there you can extract the icon (again, think how twitter went with making the bird and the logotype separate yet recognizable elements). I'm attaching a quick sketch of what I mean here: image

For additional font options you could check dafont.com or google.com/fonts - there are quite a lot there that might work. My personal preference is towards clean sans-serif fonts these days (like Bebas and similar). You can try Coolvetica for example, or even Harabara (both on dafont).

For adding additional outline you can expand your white outline, turning it into an object, and then apply new outline to it. I think in Illustrator it was: select the object with stroke > go to Object / Expand. There you have options checked - fill and stroke, leave them as they are and click OK. That way your stroke is now a separate fill object - it's grouped with its previous fill, so you might want to ungroup them, and you can apply stroke to it independently.

I hope this helps :)

Bojana Dimitrova
Bojana Dimitrova
2,704 Points

Few things that I'd consider first, before worrying about the colours being YouTube-ish:

-check your scalability - it was covered in the logo course. Your text is too small in comparison to the symbol above it - when you zoom out, the text almost disappears;

-probably rethink the details on the disc/vinyl (more subtle would probably give off a diffrent vibe) and see if you really need to repeat the symbol twice in the logo;

On the font: I'd check out different typefaces but this is mainly due to personal preference. Definitely bump it up a size or two. If you really want to keep a white outline on the text, there are several things you can try besides the balck brackground:

  • make the outline thicker (see twitter T icon for reference) and add a subtle thin darker (grey) outline to your outline - that way it'll be visible as an object even on white backgrounds.

  • try creating a darker combined outline that encompasses both the symbol and the text;

  • have you tried positioning the text inside the symbol? The white outline will be necessary there and you'll achieve more compact look.

Tony McKeown
PLUS
Tony McKeown
Courses Plus Student 14,300 Points

Thanks for your feedback. I should probably have said in the opening post but I won't be using the text all the time. So most of the time it will be a case of using one or the other. E.g. the main logo part when only a small space is available (or the text only if a square block isn't really appropriate) and then the two together when space allows it. I'm not sure if that is considered bad practise as it might confuse my identity?

I haven't really tried placing the text inside the big disc but that was mainly because I thought it was too many letters to put inside of it due to scalability as you mentioned.

The disc is quite important to me in the text because the actual web address will be myoozik.fm. So I was trying to use something that represented the dot in the domain name but you're right it probably is too much to have it twice. I was originally going to use something like a ribbon microphone inside the earphones but I couldn't really sketch it right whilst keeping it simple.

I quite liked the font style but when I tried bumping up the outline too much it made the individual letters almost join together and become too difficult to read. I've already used a white stroke on the lettering. If I wanted to add an additional thin outline as you suggested, would I have to try and draw that myself or could I use something in illustrator to add that effect?

Do you have any suggestions on fonts? My knowledge of fonts is limited to just pressing up and down and cycling through them?

I hope that doesn't sound too defensive, I was just trying to explain my thoughts behind what I did. I really appreciate your feedback.

I am very new to logo design, since I am most in the programming side of things. Recently I took the Logo sprint course as you did, so take my comments carefully, since I am not an expert. My perception was that the logo did not resemble a disc, I found out is a disc due to Bojana's coment, can you make your logo more like a disc adding another concentric circle around the inner one?... seriously I looked like an alarm bell to me when I first saw, later in context while reading everything I found out about the disc and kind of undestood your concept. Maybe you should put a little small hand on top of the disc, you know to make it look like a turn table.

Typo do not seem scalable as the lady said, also the dot in the typo does not seem to fit, maybe you should just stick to the main logo with no text. If you really need the text forget about the disc being the "dot", it is difficult to read.

I like the headphones and the colors, I think you should keep those.

Tony McKeown
PLUS
Tony McKeown
Courses Plus Student 14,300 Points

Bojana Dimitrova I really appreciate the picture you created. I think the way you have incorporated the logo like that is much better than my solution. Design is something that I really struggle with as I'm not an artistic person.

I'm going to play around with the font some more and the fills in particular but it will probably end up looking very similar to the design you posted up there. I hope you would be okay with using it and giving appropriate credit when due.

Thanks for your input Ivan. The reason I did the disk that way was because it was a very bad attempt at spinning. At the moment, my drawing on a computer skills are terrible so I'm probably a bit guilty of trying to take shortcuts so everything is overly simplistic.

I thought it kind of looked like a face too although you probably would have only noticed what I was going for if I pointed that out.

I really need to spend some more time on the illustrator deep dive but it's just finding time to make the website and juggle the other bits and pieces at the moment.

It's times like this that I really appreciate the treehouse community.

Bojana Dimitrova
Bojana Dimitrova
2,704 Points

No problem - use it however you see fit, no attribution necessary - it's far from finished anyway, it's just a positioning suggestion.