Important notice

I haven't recorded details of where I've found all these logos or who did them.

If you're the designer of anything you find on this page, let me know and tell me if you're happy for me to continue to publish your work.

I'll happily attribute all work to original authors and link through to your site.

What makes a good logo

It's a bit intangible, but good logos tend to be clear, often bold, relatively simple, appealing and should say something about the thing they represent (whether factual or qualitative information).

Logos

vdeck logo

The vDeck logo combines 100% clear text (you can't beat bold black on white for legibility) with an appealing glassy button.

I know that glassy effects have been around for years, but I think they'll look good for a while yet, because they're just so damn NICE.

 
Campfire logo

I simply love 37Signals' range of logos (Campfire, Backpack, Basecamp).

Like vDeck above, this is a combo of crystal-clear black text with a suckably appealing coloured graphic.

What's great about this one is how it delivers a combination of differentiated areas of clean colour with softness & richness.

 
Feedburner logo

A pleasant variation on the theme.

The graphic element of Feedburner's logo is brighter and bolder, but the text is less clear (as it's in super-heavy weight and blue rather than black or charcoal).

 
Torchbox branding by Jon Hicks

If you've got room for any more flames (do they risk becoming the chilli pepper of 4 years ago?)...

Jon Hicks' design gives the flames a stronger, more distinctive outline, which lets them break out of any container and stand alone.

The lower-res print variant loses the gradients of the hi-res and uses simplified flat colours, while maintaining the signature shape.

 
Torchbox branding by Jon Hicks

This works.

The logo gets away with its shiny, glassy surface through a very strong, recognisable, shape.

Lovely font too.

 
Store

This lovely logo combines crisp text with a soft, appealing "feature", which in this case is realistic.

A first-class logo, which is engaging and different yet still simple enough to work at a range of sizes in a variety of media.

 
Badboy media and design

Graphic/text combo again (from Lucian Slatineanu), this time on a dark background.

The graphic on the badboy logo seems complicated, with its gradients, but works because the overall shape is simple and recognisable. The font on the logotype matches the graphic well.

 
15tags

A truly excellent logo from Javier at Emaginacion.

It fuses strong flat colours, clear text and simple but recognisable shapes into a pleasing and interesting combination.

 
Fire on design

The graphic element of this logo by Domenico Catapano has a bold and relatively recognisable shape, and creates two interesting negative shapes (negative space).

I think this logo would stand out more and be more memorable with a feature of some kind.

 
WebJay logo

No more separate graphic elements, the WebJay logo is strong enough to stand alone.

The typography and colour give it a fat, friendly feel, and I like the feature on the "J", which is raised from the baseline to give it dynamism and has added vibes to represent what the brand's about.

 
WebJay logo

Another strong singleton logo. This one is super-bold because it's making a super-bold statement.

The badge "O" adds interest for your second look, and the subtle rounding of the badge nicely offsets the flat red of the lettering.

 
Firefox logo by Jon Hicks Thunderbird logo by Jon Hicks Firefox logo as an icon

Jon Hicks' Firefox and Thunderbird logos are well-known masterpieces.

Like the 37Signals logos (above), they are attractive at high sizes due to appealing shapes, colours and lighting effects, yet when reduced down to the size of a small icon they still work.

Working at low-res is due to using clearly differentiated areas of colour or tone that are still recognisable when reduced in size.

I find my Firefox icon is one of the easiest to locate in my WinXP quick start menu (below). I just look for the orange crescent. The blue offsets the orange whatever the background colour may be.

 
Engine

A classic logo, simple text/graphic duo with few colours (which makes life easier reproducing in print & on t-shirts etc.).

There's nothing really clever going on here. It just works. By the same token, there's nothing really interesting or particularly appealing.

However, this is a well-executed example of this type of logo, which is good for most companies.

 

Further reading

Read it offline

Buy the entire Graphic Design section as a PDF e-book:

only £2.50 GBP

Do you love our approach to crafting simple & effective web sites that just work for people?

We'd love to hear about your web strategy. Contact one of our team today!

Search this site
Pro Tips
Learn how to make fantastic web site designs..
Buy "Save the Pixel" now!
On “Save the Pixel”
Clicss templates, great robust useful CSS templates from £40
Share this Article
Send to a friend now&hellip
Follow Ben Hunt on Twitter
Floor 3
111 Buckingham Palace Road
London
SW1W 0WQ
UK
Phone
+44 (0)207 1600 989

Articles + tutorials in Graphic Design for the Web

Web Design index
List of articles and tutorials in Web Design section
Current Style in web design
My summary of the crucial advances in web design in recent years, why today's web sites are better than they were 10 years ago.
Web2.0 Design Style Guide
A guide to the Web2.0 web look, why each feature is effective, and tips on applying the Web20 style to your web sites.
White on White Web Design Style
An overview of my current super-clean design style that really lets the content stand out.
The 10 best-designed web sites in the world
My personal list of 10 favourite sites, and why.
8 Clean web site designs for inspiration
I love collecting links to sites that inspire me to push my own design further, and I thought I'd share my favourites to help inspire you too. The first set perfectly illustrates the core principles of pixel-saving in minimal, clean layouts that focus on the content.
8 Rich web site designs for inspiration
This bunch of sites are all graphcally intense, using a lot of pixels to create a rich experience that doesn't get in the way of successful communication.
9 Functional web site designs for inspiration
A varied group of excellent home page designs that are quite different, but manage to combine brand & functionality effectively on first view.
Clarity in web page design
Making a clear web page depends on making the most important elements appear important, less important stuff less important, related stuff look related, and different stuff look different.
Colour
General guidelines on how to use colour in web pages.
Contrast
The importance of tonal contrast in graphic design for the web
Effective text
Explores the strengths of using HTML text rather than words as graphics in web design
Imagery
How to use imagery to best effect
Attention Map
A low-fi tool for planning page layout, helping you plan what your page should do before you get your hands dirty
Content
Tips on creating effective content for your web pages
Zoom Your Content
Knowing how to size your content appropriately is a fundamental and critical basic skill. All is explained in this article.
Layout for web page design
Overview of the major graphic design devices
Containment
Containment is a layout tool that says visually This thing is part of that
Alignment
Using alignment in visual design for the web to associate related elements
Grouping
Associating elements through relative positioning in space
Rhythm and repetition
A further technique for associating elements is through repeating common styling
3D Effects in graphic design for the web
Guidelines on how to use 3D effects effectively in graphic design for the web
Branding
Tips for branding on the web
Logo design
The four attributes of an effective logo: shape, presence, weight, and contrast
Some Great Web Logos for Inspiration
Sharing my personal collection of almost 50 favourite logos gathered from round the web, with notes on what works & why.
Favourite logos
An older collection of my favourite logos from around the web, with analysis of why I think they work.
Real Web2.0 Design & Branding
Web 2.0 design is not the same as star flashes and shiny table effects - it's about simple, bold, honest brand experiences.
Case study: Artorg
Tweaking the layout to ehance the user experience of a nice community site for graphic artists
Case study: Business Improvement Network
Applies a totally new look and feel to the web site of a business networking organisation
Case study: Kemik's portfolio
Simplifying and enhancing an already attractive artist's portfolio to make it more engaging.
Case study: FairSay home page
A web doctor report for non-profit organisation's home page.
Case study: Media Volunteer
Simplifying and brightening the entry point for a charity application