Web Design Business Logo

Tintin81's picture

Hello,

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

litera's picture

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.

jasonc's picture

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

writingdesigning's picture

"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:

writingdesigning's picture

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

Tintin81's picture

Hey,

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

bart69's picture

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.

EileenB's picture

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

paulsschwarz's picture

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

bart69's picture

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

Tintin81's picture

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

aluminum's picture

why not make a face from your sketch?

Tintin81's picture

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

bart69's picture

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.

Trevor Curtis's picture

Have you seen these guys?

Tintin81's picture

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

Miss Tiffany's picture

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

writingdesigning's picture

"...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?

Tintin81's picture

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

Tintin81's picture

How about this?

Web Design Hamburg

aluminum's picture

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.

Miss Tiffany's picture

It is still reading as BI TS ...

James Arboghast's picture

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.

"mew"

j a m e s

Tintin81's picture

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

James Arboghast's picture

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:
smart
sophisticated
"modern"
"post-modern"
clever
cery cool logo, sir
discreet
stylish
inventive
professional
humanized high tech

j a m e s

deuxpoint's picture

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)

aluminum's picture

You seem reluctant to have the boxes touch. Why?

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

Tintin81's picture

@ 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

James Arboghast's picture

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

aluminum's picture

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.

James Arboghast's picture

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

Tintin81's picture

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

James Arboghast's picture

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

Tintin81's picture

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

Tintin81's picture

Hi,

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

jupiterboy's picture

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.

aluminum's picture

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

Tintin81's picture

Hi,

Do you think this gradient is subtle enough?

Designer Hamburg

James Arboghast's picture

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

Tintin81's picture

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

Tintin81's picture

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

James Arboghast's picture

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

Alaskan's picture

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.

Syndicate content Syndicate content