web design logo

jeffrey's picture

I am from a cartoon background, no typography skills compared to what I have seen just browsing this forum. I have become a decent web site developer and am trying to create my logo. I want to do simple, clean websites. So I wanted a simple logo. But how simple is too simple? That is my problem. So far the one I came up with is just straight helvetica neue bold. In an attempt to not be too dull, I came up with the not so unique idea of reversing the last letter and giving it a different color. Not the most brilliant idea, but now I sort of like it. Any suggestions are greatly appreciated.

logo1.gif3.41 KB
hrant's picture

Franklin is one of the most readable sans fonts ever made. But (because of that, eh, Eben?) it doesn't work in a logo, at least not for me. For one thing, the "g" is taking up too much attention (and its ear is breaking up the compactness that removing the dot of the "i" enabled). I'm glad you dumped the chopped "d" idea though.

If for some reason you do decide to keep this direction, I would point out (nobody else noticed?!) that the stroke contrast of the "y" is way off: the short arm is too thin; and the long arm/descender is probably too thick (although it's hard to tell from that low-res rendering).


Peter G.'s picture

> I could put up some links to a few sites if that is okay here.

You could always post the links on your website (so as not to get off topic here).

jeffrey's picture

Here are the links on my site. Not much there, as I've done few sites on my own.

edit: links.htm (I put it on the wrong domain.)

I shall continue to pursue a good logo design! I heard mention of the word "industrial," I wouldn't mind my logo looking a bit industrial or "post modern" but I'm not sure what everyone's ideas of what these are is the same.

ken's picture

Link doesn't appear to work for me. Jeffrey, have you considered keeping "design" in your sans serif treatment and adding a y in as a hand drawn red letter. Sort of a copy edit feel. This would make it read as "design-ee" and add a touch of irony in being a correction.

(I haven't read all the posts to see if someone had suggested this cause yeesh this thread is long)

jeffrey's picture

I had the link on the wrong domain, I think it's working now. The handwritten "y" is a cute idea, I will try that. Here is my latest attempt. I made a simple little "d" graphic.


jeffrey's picture

Next day, even I don't care for the "d" graphic. I wasn't happy with the "g" either, so here is one with a "g" that I actually like.


strata's picture

out of all your reversed y options I like number 13... this is because the unusual d balances out the reversed y.
Have you tried just a green y the right way round? I know it's possibly a boring approach but when I tried a couple options it does work quite nicely.. I used adobe myriad pro for one and then tried using a serif font for the y on another (myriad pro & Adobe Caslon Pro italic) for a different approach to emphasising the y.


out of these 3 my favourite is the italic y.

jeffrey's picture

>Have you tried just a green y the right way round?

I did, but I think that makes it more design-why that design-ee.

I tried a different approach today. It's more ordinary, but I am having a hard time finding a font I like that isn't "over-used."


jeffrey's picture

Staying in a similar direction as the last logo, a big "D" icon. I like this because I've always wanted to use that font for something.


ebensorkin's picture

> Franklin is one of the most readable sans fonts ever made. But (because of that, eh, Eben?) it doesn’t work in a logo, at least not for me.

Hrant, Microsoft uses Franklin of course... I think it isn't so much that it can't be used it's that you have to use it skillfully. The biggest danger in my view is that you look early 90's in a hurry ( it seems like it has a popular face in logo design then ) and you start to look like a Microsoft-alike. It depends on treatment of course. Avoiding italic helps. Also, when you use a font for a work mark you sometimes have to change letterforms ( Microsoft did! ), and sometime you just reject a font because it has a bad design (for your purposes) in one or more of it's letters.

So I don't know if your suggestion about franklin works for me so far ... I think it's too much of a blanket statement.

Jeffery, I think that 16 really could work...

The only probllem I saw was that with the y reversed the bowl of the y seems too tight. I wonder if it might be fixxed by a bigger or wider bowl - if for instance you built a y from a u shape & reversed it. I'll show you what I mean f you like...

> I am having a hard time finding a font I like that isn’t “over-used.”

It's not the font's fault. Any font has potential. In a well used font you have to use it better to make it seem great. A fancy new font is just a lovelly shortcut where the font designer has done the work, that is until that font becomes too popular.

Version 17 seems like a great logo for a stuffed toy! Like a beanie baby. See what I mean?

18 seems pretty well outside your stated intent! Are you going for something different now?

jeffrey's picture

>Version 17 seems like a great logo for a stuffed toy! Like a beanie baby. See what I mean?

No, I'm not seeing it. Is the "D" too plush?

18 seems pretty well outside your stated intent! Are you going for something different now?

Well, I pretty much ran out of ideas when I came up with that one. I really want a simple text logo that doesn't take up much space. But I just can't seem to find a font that has the right feel. I've played around in Illustrator trying to make letters, but I have no clue what I'm doing there.

ebensorkin's picture

> No, I’m not seeing it. Is the “D” too plush

Maybe it's just my own associations. It feels very friendly & warm & welcoming despite the fact that it is blocky etc. Maybe the fatness of the D too. To me it felt 'toy'.

> But I just can’t seem to find a font that has the right feel.

Two ideas: Maybe re-state your objective to yourself. eg - what is the 'right feel'?

Sometimes if you work on something too long it's easy to loose sight of where you want to go - Also you could take a 2-3 day holiday from it. You may see things differently with fresh eyes.

It's probably good that you started taking some additional directions. Even if you throw them away.

You could also use a pencil... Sounds obvious - but it does make for a different thought process than the computer.

Again, I think 16 is pretty close to something you could use too.

jeffrey's picture

Thanks Eben. Here is 16 with a different "y" and "g". I left the y normal, flipping it makes a distracting thing between it and the "g".

Also, I did 19b just as wishful thinking that I could get away with it.


ebensorkin's picture

I like these

- the 19b makes me think of big NYC clothing shops for some reason. The close set letters seem very 70's. It's well done, but the associations I get seem weird for your purpose.

- I was playing with 19a bcause it seems to be so close to a finnished work - I tried several things. The one liked best was

a. split the letters in half down the middle using the base of the e as a guide.
b. Split each letter down the middle from top to bottonm using the cut tail of the g & y as guides.
c. both

If you do both then each part can have a slighly different color maybe. Subtle, I would say- 20% different maybe. Then you would be suggesting assembalege & systems. You are a sytems guy no?

Anyway, 19a seems quite close.

BTW - I agree with you about the flip. I tried that too to see what you meant.

jeffrey's picture

I will try the splitting, that does sound like a good idea.

The 19b was a play/rip on the logo for a design magazine.

Chris Rugen's picture

19a is the best so far. I was waiting for you to get rid of that flipped 'y'. It was driving me nuts. It seemed like one step more than necessary and was a bit confusing. The lc 'y' looks off rather than backwards because it's so nearly symmetrical, so it confused my eye, which kept looking for other weird characters where there were none.

The 'd' seems a hair too far from the 'e', as well.

hrant's picture

About 19a:
- I'd make the terminals of "e" and "s" flat.
- The bottom-rights of the descender curves on "g" and "y" seem a bit too thick, but it could be a low-res effect.


jeffrey's picture

Here is another version. PDF this time so all the flaws are easy to see! :)

I flattened the terminals and made the desender curves thin. I also did a two-tone version.

So no one liked the big fat letters?


hrant's picture

Lookin' good.
- The arches of "n" and "y" should match.
- I'd make the stems of "i" and "d" a hair thinner.
- I think a taller "d" would be really class.


hrant's picture

Two more things:
- Match up the bottom terminals of "e" and "s".
- The "y" looks a little wide (probably because the tops of letters have more apparent importance). But that might actually be better...


jeffrey's picture

I think I used the "d" to make both the "g" and "y". I redid the y using the "n" and thinned the "d" and "i" and evened out the "e" and "s" terminals in this one. Oh, and made the "d" a little taller!


ebensorkin's picture

Now your cookin' with gas!

Try the suggestions above & see if you like 'em. But I think you have a solid & valid solution here. The real question is - are you happy with it?

Give yourself some time to answer that.

jeffrey's picture

I'm liking it. I've plopped it onto a blank web page mock-up at a small size, and it looks really nice there. :)

I'll try out the split color idea on this version too. I'll probably play around with a few different colors too, but I actually like the current color. Now I'm wondering which part of the forum I go to for the "what font goes good with this for business cards" question.

Anyway, thanks everyone so far! It may not be the best logo in the world, but I really like it and it's much better than I could have done without the help.

jeffrey's picture

Trying to put together a business card with this logo. I know the kerning on the info isn't there yet, but I was hoping to get some comments on the type because I used a different weight but edited some of the characters to match the logo.

Also, any opinions on the colors? The info type is 8pt, and I was wondering if that would print a clean black with all that orange. I've gone as small as 7 points before, but not with so much ink on the card. Both colors are PMS so it will be solid ink.


Chris Rugen's picture

I'd watch out with the smaller point sizes just because you're playing some tricks with the characters and the descenders are so short. I can't really judge it on screen, but that's my gut reaction. Also, I want to see the logo a bit larger, it feels a tad small in that orange field. However, it might just be that I want to see all of that custom type work more clearly.

; )

ebensorkin's picture

Ink/printing issues: Depending on who you print it with mt guess is this design will probably be okay in print. You are going to get some ink fill into the white and you might want to compensate for that in the white shape, but you also might want to do a short run & *see* where it happens & then run a new set with the compensation afterwards. Also, it might be fine. This is where the printer's skill, the paper & your design all meet. It's complex.

I agree with Chris that you might want to have the mark bigger to show it off & to avoid some of the ink fill issues.

I think the black would be okay.

Design issues:

Just my opinion but, I think that having done all the work you have to create a like word-mark logo you should avoid watering down it's impact by using similar effects in text. The mark willl be stronger if it stays unique.

I wonder about the orange. I just wonder why you picked it. Why this color specifically. What PMS is it? Will you use two inks or a 4 color process?

It seems like it went out of fashion of a certain kind with the dot com bust. Before orange a certain shade of green was in. Magenta has been in & is no doubt about to go out again. I have to admit I was a big big fan of the orange. But color fashion aside - Why orange?

Lastly, I wonder if you need to say what you do on the card. 'Web development'. It might feel more confident without that. After all, you would be giving the card in athe context of a conversation anyway, and if you want you can write a note on the back - a good think to do in my experience.

What do you think?

jeffrey's picture

Here is a PDF if you want to look at the type larger. I'm not a type guy, so I didn't really know what I was doing there. I enlarged the logo a bit in this one.


jeffrey's picture

I picked orange because I just like orange and it seems to stand out well. You might be right about the type, and the web development. Any suggestion on a font that would work well? In these two, I used an OCR font.

Here are two different versions with colors I liked. I'm not too hip with the trends, but I can see how orange would be trendy, it looks really good! These two colors are a little more mellow.


ebensorkin's picture

I like how well the card does in all the colors. The grey & brown appeal to me too. I don't want to suggest a color just because it's my fav or tell you not to use orange. I think that the best thing to do is ask yourself again what you want to card to 'say'. What role does the color have in that? I think that if you go with a more primary color it is more optomistic & less traditional business 'serious' in tone. If you plan on selling design as a major componsent of the services you render as opposed to back end programming database etc then moving in that direction seems right. If you want to emphasize back end seriousness over design service then greys, grey blues, blues etc might be the way to go.

If I was doing this I might try to have my cake & eat it too by using a very pale greyblue or grey green blue on super white paper. The logo would pop just fine but the effect would be more subtle & serious while retaining some design chic. The the contact info would be especially prominent indicating that pragmiatic 'utilty' was your emphasis. If you used a medium to dark blue color for the text you could use a screen of blue at 15% & then at progressive intervals over the main color to get variations of into cards too which might be fun...

The size of the mark also indicates something. If the mark is overly big it says 'look at me!' and may feel insecure. It could also feel bold & assertive. Making the mark smaller like you did could feel more confident because it doesn't need to shout.

I do like the sizes you have been using but you might try others too & try altrenate placements to see how they come off to you.

Lastly, I might suggest that for your text consider a lighter weight of the font you modified to get the logo & not in condensed. Lucas De Groots monspaced fonts might look good too. If you have a testers' copy of Vista you could try Consolas.

jeffrey's picture

I'm having a really tough time choosing a more neutral color that I like. I am focused more on design than backend, so that might be why? I do love that consolas font, so I used it. Anyway, I looked for a happy medium in color. One that was fresh but not too trendy or bright.

One question I had about percentages is how it will affect the sharpness. This layout is one solid pantone color (320). The info text is 100%, the background is 50%. I just wonder if that 50% is going to make the edges of the white logo soft. I really like the color, it's not too loud or too neutral. I also scaled the logo back down a bit. I like it beter small, and like the "secure" feel.


ebensorkin's picture

That teal is outragous! What market are you in? Florida? Germany? Oh, Alabama! That is a southern sort of thing. Teal never went away near the ocean did it? It seems a little agressive to me but color impression is very emotional & subjective. What does everybody else think?

Color is up to you!

RE: 50%

50% will make the white fuzzy. I don't recommend it. It's the fuzzy percentage!

What I meant was one solid color - it could be anything but maybe something a bit less dark than 320 ( i looked at my book ) is what I would recommend. How about 642, or 649? That was closer to what I was suggesting - but it's just my suggestion, I live in alaska -

Just to clarify, what I meant by the % was this: when you gang the colors up on the card you could do one of them in just the base color & one in a percentage of the text color over the base for a 2nd color. 3025 maybe or 660. The text would be in the same color. Then the small text would be slightly fuzzy though. So maybe it's not a good idea.. It depends. 3 color would let you do it without getting fuzzy. 3 color is great but a bit spendy.

Chris Rugen's picture

For the color, do some research on art or photography that has a color palette that you like. I find when I start picking colors arbitrarily (not that you're doing that, necessarily), that connecting back with the real world and not a computer color picker/pantone book helps me clear up the fog.

I agree with eben that a more 'serious' muted color might work best for designer/business. Look at paint collections, such as Martha Stewart's. They're usually pretty well tapped into what's in now and avoid the crazier colors, because it's for paint.

ebensorkin's picture

Chris, is right - if you are picking from pantone colors via Illustrator, or even just on screen - DON'T.

It will only make you cry later.

Get a pantone book in your hands even if you have to borrow one. Look at what these colors are really going to be. Rarely is there much in common between the screen & the ink. It's scary!

If you know all this already then - never mind.

jeffrey's picture

I have a pantone color book. I apparently just have a bad taste in color. :)

I just can't help it. I like an eye-catching color.


ebensorkin's picture

No no, I didn't mean bad. Just brave! You have a pantone book. So you have seen what it means. If it fits you & you like it you should do it! The only other consideration is your market and if you are confident you can bring your choice off well with them. And again, if you are, go teal! What I said scary i didn't mean the teal just the way the color doesn't match from computer screen to print.

This new one is eye catching & conservative in one go.

Looking back over the cards which one would you be proudest to hand over to a potential client? If it's the orange think about going that route.

You know with consolas having such thick strokes I bet you could reverse the text ( make it white too ) and have a striking one color design. Or you could have just a thin strip at the bottom in white for the text... that might be cool.

I bet you could make that info text smaller and it would read just fine. What about an address? I think an address would look more serious.

One other thing - will the web site for designy relate to the card color wise or are they going to use different color schemes?

jeffrey's picture

>This new one is eye catching & conservative in one go.

That's what I was hoping. Not middle of the road, but a little of both. :)

I thought about the reversing of the small text, but was worried about that. Although I wouldn't mind cutting the cost a little.

I will probably put my address. I had been debating it. One question I have is about puncuation. I'll have the address on one line, is there a proper character to seperate the street address from the city, state zip? Below is how I had played around with the address.

About the actual site, with the white on red, I will either do it like that or reversed, red logo on white. Probably red on white, but I like the card better red than white.


ebensorkin's picture

I really like this all red card. It is really simple but strong. I like this deep red too. What pantone is it?

Totally trustable too.

Possible quibbles: I wonder if the 'designy' shouldn't be move a little higher - to me it fights with the text below a little. I would also still like to see the bottom text a bit smaller. With this design you could have both kinds of cards & just one color & a small bill to pay at the printers too.

I like what you did with the address. I bet you could use a comma & it would work too.

The other thing is you *could* put the contact info on the back & keep your centered designy on the front of the card.

Chris Rugen's picture

Red, the typographer's friend. Second only to black and white...

You're going in a better direction now. Seems like you're more comfortable with your color choice, too.

Syndicate content Syndicate content