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

Make Better Web Pages!

How to make your web site sell - use my secrets

Find out How

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!

Leave a comment

Articles + tutorials in Graphic Design for Web

White on White Web Design Style
An overview of white-on-white web page design, a clean, appealing, modern web design style that draws focus to the content.
Zoom Your Content!
a Crucial Web Design Technique
Zooming your content is a basic but critical skill that every web designer should know.
9 Highly Functional Web Site UI Designs for Inspiration
A personal collection of 9 highly functional web user interface designs for inspiration
8 Rich Web Site Designs for Inspiration
Ben's collection of links to great, effective, current web designs with rich, highly graphical, and intense styles.
8 Clean Web Site Designs for Inspiration
Collection of clean, simple, effective, current web designs, put together by Ben Hunt
Some Great Web Logos for Inspiration
A collection of high-quality inspiring web site logos for inspiration.
Real Web2.0 Design, the essential Web2 design features
Real Web2.0 design is not about shiny visual graphic effects, but a bold, direct and challenging brand experience.
10 Best Designed Websites in The World
A list of the 10 best-designed web sites in the world, with explanation of which great web design techniques work most effectively and the importance of designing your content.
Web 2.0 How-To Design Style Guide
Web design guide. Web 2.0 how-to design style elements explained. A guide to why web 2.0 design works, how and when to use each design element
Creating Content for Web Pages
Best practice guidelines for how to create, arrange and design Content for web sites and web pages
Using Contrast in Web Design
The importance of contrast in graphic design for the web, and how to use tonal contrast effectively
Using Attention Maps in Web Page Layout
Always sketch an attention map before designing a web page, to indicate areas of relative importance where you want users to focus.
Containment in web design layout
Using containment in web page layout to group elements together is a powerful tool.
Selection of Favourite Great Web Logos
A collection of appealing logos gathered off the web by web designer Ben Hunt
Case study: Artorg makeover
Case study: Makeover of Artorg's community site
Clarity in Web Design – Designing Clear Web Pages
Hints and tips for making web page designs clearer and easier to understand by differentiating and organising visual elements on the web page
Rhythm and repetition in web page layout
How to use rhythm and repetition as layout devices in web page design
Using Alignment in web page layout and design
Tips on using alignment in visual design for the web to associate related elements
Current style in graphic design for the web
A summary of today's best practice in graphic design for the web. Simple, good webssite design examples, good web design and an explanation of modern web 2.0 design techniques.
Colour in Web Design
Tutorial on using Colour in web design to convey branding and improve usability in your web page designs.
Branding for Web Sites
Branding for web sites: How to create, develop and implement a brand for a web site
Grouping elements for clear web page design
Grouping, basic web page layout graphic design technique for associating web page elements on screen.
Usability Case Study: Kemik Portfolio
Case Study: Tweaking Kemik's online art portfolio
Use of 3D Effects in Web Design
Guidelines on how to use 3D effects effectively in graphic design for the web
Effective text for web design
Short article describing the benefits and strengths of using text rather than graphics in web design
Case study: Business Improvement Network redesign
Case study: Business Improvement Network redesign
Imagery: Using images in Web Page Design
Guide with tips on how to use imagery effectively in web page design, good images, graphics & icons
Logo Design for Web Sites
What makes a good web site logo, breakdown of key design factors for creating great web logos
Media Volunteer Redesign
Summary of redesign of Media Volunteer Center
© Scratchmedia Limited, 2006-2010
Floor 3, 111 Buckingham Palace Road, London, SW1W 0WQ, UK
+44 (0)207 1600 989