My top 10

#1 Apple.com

Apple is the best example of striking the balance of simplicity (white space, strong type) with rich imagery sensitively-applied.

It's also a big, varied, constantly-new site with loads of content, which always feels easy & enjoyable to navigate.

For solving the numerous demands on the UI so elegantly, this is, in my opinion, the best-designed web site in the world today.

apple.com screenshot

#2 Mozilla.com

Clear, open, fresh, simple. When you arrive at this site, you're under no doubt what the site does, or where to start looking for what you want. The design is positive and happy. A winner.

mozilla.com screenshot

#3 Iconbuffet.com

The site sells icons, so it lets the icons rule, showing its wares from the first page.

The colours and typography are solid & strong, projecting a trustworthy brand while not getting in the way of the proposition.

iconbuffet.com screenshot

#4 WhyWeWhisper.com

“Why We Whisper - restoring our right to say it's wrong” is a book about freedom of speech in the USA, written by Senator Jim DeMint and J. David Woodward.

The page design is a great example of pixel-saving in action, with very little complexity going into the page background (chrome), leaving room for large, clear type. I love the flourished rules between the quotes.

If I have one criticism, the page doesn't tell you up-front what it's about.. relying on prior knowledge or even reading, which may be a lot to ask.

Another very worthy simple & impacting book site is “Gangs of America.com”, book by Ted Nace.

WhyWeWhisper.com screenshot

#5 Circografico.com.ar/

The guy's an illustrator, so his site has to:

It does both these things really well!

The graphic design is designed around Alex's work, with intelligent typography and just enough pixels used to give the site background its tattered, rich vibe.

I love the way his portfolio page uses gradients to suggest the work in a print context.

circografico.com.ar/ screenshot

#6 EnhancedLabs.com

Another icon maker, doing bigger, richer icons, so the the site showcases them bigger & richer.

Bold, flattish colour creates a strong first impression and still lets the product stand out.

enhancedlabs.com screenshot

#7 Protolize.org

Tony Yoo's collection of recommended web resources is a great example of strong graphic elements balancing to make a site that's bold and easy to use.

Big text, simple nav, high usability, all wrapped in strong colour and finished off with nice graphical touches.

protolize.org screenshot

#8 Bearskinrug.co.uk

Another illustrator's site (Kevin Cornell). What can I say about this that I didn't say about Alex Dukal's site?

It embodies the essence of Kevin's style, and - if you look - does an excellent job of filling the space with content, needing almost no page furniture at all.

Count how many things on the page are both navigation and content. Everything has had the touch of the illustrator's brush, so the site is just saturated with his talent.

bearskinrug.co.uk screenshot

#9 Corkd.com

Dan Cederholm's personal wine review project provides a neat, cleanly-designed interface, featuring an intelligent colour scheme and fantastic simple logo.

Easy to use and fun to browse. This site strikes the balance just right.

corkd.com screenshot

#10 Sumagency.com

Oh so 2.0, but I just love it. You know what gets me every time? Acres of balanced white space, easy-read text and cute content graphics combining to tell a simple story. First-rate.

sumagency.com screenshot

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