Web Design Business Logo


I had a flash of inspiration last night and quickly sketched a new logo for my web design company “DesignBits”. I am relatively new to logo and type design though, so I am not entirely sure how to take this design to the next step. I used to work in Photoshop a lot, but people keep telling me that Illustrator is actually better for designing logos and type. What would you suggest?

The most important thing is the actual typeface though. I need a font that resembles the one I sketched on paper. Has anybody ever seen such a font anywhere?

Any help is much appreciated...

Web Design Hamburg

‹ Steinbach Logos Revisited Logo Critique for a Carpenter's Brand ›

You have to create your logo in any vector based program and not in Photoshop. You do need size versatility.

But for your scratch I would suggest you draw your own logo without any font, because you’ll have to tweak it’s vectors anyway and I can see the subtleties of these letters that give it a special character.

And it shouldn’t be too complicated. Based on your sketch. Quite squarish style with a bit “fat” strokes that look a bit pumped up.

If you know how to use Photoshop I suggest you try learning Illustrator for its similar UI. But before that read about the differences between bitmap and vector graphics to justify why you need to make it in vector based program.

I agree with litera that it’s probably best to design your logo from scratch, by drawing with a vector program.

but if you would like a typeface use as a springboard, check out ITC Tetra

“but if you would like a typeface use ...”

Or probably one of Neville Brody’s FF Gothics.

By the way, you might see if you’d like to push the idea a little further. This example may open up a possibility or two:

By the way, that example was a crop of a piece of early work by Michael Beirut published recently in Design Observer.


Thanks for all your input. I think I’m going to design this logo in Illustrator, although I still haven’t found a suitable font. ITC Tetra comes pretty close, but I’m sure there’s an even better one out there. Can anybody help?

Web & Logo Designer Hamburg

Hey, Nice idea. I found a font that was pretty close to what you want. It’s called “new Detroit”
Here’s the link http://www.1001freefonts.com/ hope that helps.
I always use Adobe illustrator for logo’s . It’s a vector program different from Photoshops rastor format. This way you can use it at any size and it will always remain the same.
Have a great day.

bart69: I wouldn’t click that link for all the free fonts in the world.

wow, such a nice idea, but you have the luxury of having a very simple base font, and simple but elegant detail around the second i, so surely you can afford to go a little wilder with your colours. personally i’d like to see the text in a rich blue with a subtle gradient effect in it to give depth, and then giving way to some really wacky fluoro pink/orange/lime around the i detail. if you choose your colours well it’ll still have a strong masculine feeling, but really smart and modern too. please post your illustrator efforts, this one is exciting

Geez...I thought I was just being helpful. Forget it!!

Hey, thanks for your input again. The New Detroit font is pretty close to what I’m looking for, so thanks bart69!! But still, I don’t trust that site very much, so I’ll probably go with another font (which I haven’t found as yet...). By the way, I tried to design those fonts by hand, but it didn’t come out very well. It seems I haven’t got the Illustrator practice to get this done properly. I still like my initial idea though, and I hope I can post some new results here soon. In the meantime, if you find any other font that resembles the one in my first post, please let me know!!! Cheers...

Web & Logo Designer Hamburg

why not make a face from your sketch?

I tried that! But it’s very very difficult (at least for me). The result I ended up with is not what I wanted...

Web & Logo Designer Hamburg

hello again. Good Luck with your design. I am pretty good at Illustrator and if you need any pointers don’t hesitate to ask.
By the way...I’m pretty new to this site. I guess I just got the jist of what goes on here. Being an artist myself I try and design everything I can by hand and sheer talent. I do understand that some of the font sites out there may not be trustworthy. I will look again and try to help where can. Type is not my strong point so I am too looking to get a little education by come here as well.
Happy thanksgiving to you all.

Have you seen these guys?

Hey & thanks for your many comments & thoughts!

Some of you have pointed out similarities to CreativeBits and SimpleBits, however this wasn’t my intention. It’s just that my business name is very similar, hence there may be some similarities in the logo design as well. At least that’s what I thought - until I had this idea:

Please let me know what could be improved. I know I shouldn’t have used any colour in my first draft, but I thought it’s useful to see what the shading on the dice looks like.

Thanks for any feedback.

Web Design Hamburg

Because you’ve separated the word into two shapes and two colors, I read it as Design BI TS now.

”...but I thought it’s useful to see what the shading on the dice looks like”

I’m not sure they look like dice. Seems somehow closer to alphabet blocks. And anyway why do you think dice may be appropriate for a web design company?

I shouldn’t have used the term “dice” as it may have confused you. In fact, what I’m aiming at is “bits”, which of course is much harder to illustrate. To be honest, I am quite happy with the idea and think I will go through with it. However, the implementation still needs a lot of work. Merry Christmas to you all...

Web Design Hamburg

How about this?

Web Design Hamburg

What face is that? Has a definite Officina feel. A few years ago I would have found it tacky as the face had been overdone so much during the first dot com bubble, but I now realize I kind of miss it. Looks nice.

As for this version, I’d try playing with the proportions a bit. First, between the ’bits’ and the boxes they are on, and then between the boxes and the word ’design’.

Secondly, do you need a gap between the blocks? It’s still reading as Bi ts.

Finally, maybe try going with a small-cap face for the BITS part set at the same size as the x-height of ’design’ (which would be the default if you happen to have a true small caps version of this typeface). That will ’square them up’ on the faces of the blocks and (I think) balance things out better.

It is still reading as BI TS ...

Join the pixel boxes up as real pixels / bits appear on screen. “real pixels”? Sure, put money on it. My friend Amanda reckons the colors are wonderful. Would you consider coloring one face of each box with a “colder” hue? The way an anime art director would do it. That way you could get indigo and magenta in.

Also try: a uniheight font, to reinforce the theme of bits or quanta, all the same size. If only Panoptica came in officina guise.


j a m e s

The font I used in the previous version is “FF Info”. Unfortunately, it’s not available in Small-Caps... But Officina is, and looks even better than FF Info if you ask me. What do you think? I still wonder if people can read the term “Bits” and don’t read “BI TS” as Tiffany pointed out.

@alumium: The Small-Caps idea is priceless; thanks a lot!

Designer Hamburg

The smallcaps is a big improvement. Is it possible to eliminate the gap in between the boxes and still have good spacing for “BITS”?

What do you think?

I think it’s fantastic. Words that spring to mind:
cery cool logo, sir
humanized high tech

j a m e s

Interesting evolution here!

But I must say... I really really like the very first logo sketch! The one with the “it” of “bits” are in pixels! It was a nice integration of concept I think! :)

Jean Chouinard (formerly emerjean on Typophile)

You seem reluctant to have the boxes touch. Why?

Give in to our whims...post one with them touching. ;o)

@ James: Thanks for your kind words :-)

@alumium: OK, I did it! That’s one small step for man...

What do you think is better, a small gap or no gap at all?
Do you think I should even try some gradients on the boxes?

Happy New Year to you all!! (Only 7 hours left here...)

Designer Hamburg

No gap at all is most desirable. Relieved to see the spacing of BITS works out okay—-I thought that’s what was holding back the move.

Try some gradients on the box sides and see how it looks. An alternative to gradients is color design. I have taken the liberty of doing some coloring to show my earlier idea. Hope you don’t mind Timo. The dark faces have hue-shifted colors, the idea being that color has weight and light has temperture, and the combined effect is “cooler” hues in shadowed areas.

j a m e s

I think James’ idea works well...instead of ’darkening’ the back side, try a different tone.

And yea, no gap works best, as it’ll be impossible to discern the small gap at small sizes.

Coloring it that way makes it polished. A finishing touch, imparting a degree of realism. Cleverness.

Hey Darrel that was a very fine idea of yours to use smallcaps. Great result. I was thinking along the same lines, of letterforms that occupy a square footprint. Nick Shinn’s Panoptica and my own Amity font are good examples (but not the right style for this logo), something where the letters are of equal width and “uniheight”.

Gents, laydees, I drink to your good health and marvellous typographic companionship. I love it when a plan comes together :^)

j a m e s

Hey James,

Excellent idea, thanks. The only problem is that I picked the 4 colours from a colour scheme at Wellstyled.com. In other words, I had planned to build my entire new website around that colour scheme. (Enter #cc6600 for colour, then select “Contrast” to see the colour scheme I picked).

But I agree that your version looks slightly more realistic. Can you tell me how you selected the colours? Did you use any sort of tools for this or just randomly picked colours that you thought would work well? Also, I don’t see any change on the orange box. Did you make any?

Designer Hamburg

I “randonly” picked colors by eye. I laid a red color over the orange box face on one layer, and a magenta color over the blue box face on another layer, then blended each color layer at about 70% by Hue.

Thsi animation shows the differences.

The change you see in the white background on the right is a compression artefact. Ignore.

There is a change on the orange box. It becomes closer to red.

j a m e s

Hi James,

This is really nice, thanks. It took me a few minutes to realise that this is indeed an animation and not just an image!! The colour difference is just too subtle. “Your” version is better than my initial one though and I am probably going to stick with it. I am currently working on a new portfolio website and *might* have to change the colour scheme again, but I think I’ve learned my lesson on “colour theory”. So thanks a lot for your help! I may post here again in a few days/weeks... Bye for now.

Designer Hamburg


it’s me again. The good news first: I’m still very happy with my company logo. I think this is the sort of logo you can keep for years and years without having to do too many adjustments.

However, on my new website (currently in development) the logo will be THE focus of attention, if not the central element of the page. For that purpose, I want to beef it up a little using subtle reflections and lighting effects as seen here:

Can anybody suggest ways on how to add those effects to my logo? Do you normally use Illustrator for this? I have the latest version, but it’s quite hard to achieve lighting & gradient effects with. Maybe someone can recommend a good tutorial? Any input is highly appreciated. Cheers...

Designer Hamburg

That does look vector. I got into Illustrator (3.0) with a book titled The Verbum Book of Postscript Illustration. ISBN 1-55851-089-3. It has great tutorials and simple illustrations. It was published in 1990 so it won’t apply as much to current versions, but the exercises are really great.

MAYBE add a very slight gradient, but I wouldn’t go much beyond that in terms of lighting effects.


Do you think this gradient is subtle enough?

Designer Hamburg

I would make it subtler. The higlight is fairly bright there. Try to make the gradient more even. It only really kicks in there at the last moment.

j a m e s

James, you were right (as usual). The more subtle the gradient, the better the final result.

I am using only two gradients here (one on the “B”, the other on the “T”). Do you think I need gradients on the “I” and “S” sides as well?

Designer Hamburg

OK, this would be version 2, with even more shading applied (on the “I” and “S” sides). Not sure which one is better. I’ve been staring at this way too long.

Web Design Hamburg

Both versions work equally well Timo, but I think you should try to keep it as simple as you can, so the first one with the gradient on just B and T. The gradients give the design a lift and work as a finishing touch. Just that little bit extra, that’s all anyone can reasonably expect.

I give this logo five stars out of a possible five stars. I prefer the orange and blue to the purple and blue, but that’s a personal preference so ignore it.

Great job!

j a m e s

I agree with James, especially on the colors. The purple and blue begins to evoke preschool letter blocks. I like the strength and contrast of the orange and blue.

View original article