This collection of modern sites are all great examples of simple, effective layouts. Some have more content, some less, some are richer, some plainer, but they're all really good examples that can inspire us all to keep designs clean and let the content shine through.

My list of favourite Clean Web Designs

#1 Backbase

The Backbase site is classically clean and simple - a great example of pixel-saving in action. Notice what's not there.

There's a faint border to hold the feature area together, but there's no background to the page, there are no column backgrounds (the styling of the content does the demarkation of screen real-estate), no dividers between the columns etc.

So the content that is shown stands out well. The screenshots (on the compulsory shiny table) and the 1/2/3 bullets stand out pretty well. Perhaps these elements could be brought out even more, say making the screenshots graphic bigger or bursting it out of the panel? Overall very tidy.

Backbase screenshot

#2 Strayer University

I love the Strayer site! The layout is pretty conventional and minimal, but what's particularly great about this design is how well the content moves forward to meet you.

If you compare this site with the previous example, notice how the key content is made larger and bolder. This applies to the text (e.g. Why Choose) and also to the feature imagery, which is cropped right down to maximise the amount of space used by the relevant features (and also feels intimate & warm).

The only thing I can find to criticise is the mustard colour on the “Current Students” header. Seems to be from somewhere else. Overall a first-rate web site.

Strayer University screenshot

#3 Tick (time tracking app)

Tick shows best-of-breed design for this style. Super-minimal again, with a nice bold logo, and text-only nav.

The colours are pretty flat, but appealing, but they're implemented on the whole using the most basic CSS properties: background-color & border-color. This results in a very lightweight background layout that's effective and creates a great scene for the content.

The content, in this case, is mostly screenshots of the software. I really like how the close-up grabs are full-size, cropped, in your face. This really helps the software (which looks really well-designed anyway!) feel simple and friendly.

Tick (time tracking app) screenshot

#4 Media Temple

MediaTemple, the premium web hosts, have always had super, shiny web sites, never a step off the pace with current design. The latest site is perhaps the cleanest yet, with an Appley simple layout combined with good typography, and the excellent rich photography and imagery that categorise MediaTemple's look. The handful of thin lines and generous white space frame the text & cute icons very nicely. A super example of simple design with interesting imagery.

Media Temple screenshot

#5 Artypapers

Artypapers feels open, bright and breezy thanks to a sky & clouds theme together with almost no pixels used for layout at all.

The site is almost entirely white, which lets you focus on the words, the nice icons, and - er - that's it. The content.

Classic Web2.0 colour palette works well. What more can I say? You just browse & enjoy. Job done.

Artypapers screenshot

#6 Ash Web Studio

In many ways, Ash Web Studio's new design is a classic blog layout - good & simple - but it has a few twists I find really appealing.

First is the “warm grey” colour scheme - really soft, smart and appealing. (Interestingly, I use 2 monitors, and on the richer screen the site's particularly nice, but on my laptop screen, which is colder in colour and has a bit less contrast, the scheme is bordering dull…)

The other thing I love about this layout is the subtle icons, which are large and have a hand-drawn feel.

Ash Web Studio screenshot

#7 Imified

Here we see another of the Web2.0 design toolkit techniques coming into play - the full-width coloured strip.

Without the nice up-front screengrab-type image and super-bold "Instant Productivity", the strip might be too dominant, but here it works just perfectly. Great simple logo, and zero other layout pixels… all works to give an easy and friendly feel. First-class design.

Imified screenshot

#8 Esource Marketing

I've kept this site in my Inspiration collection for a long time, because while I don't particularly like it, there are some things it reminds me to do.

What I don't particularly care for, I think, is the way the leaf shape (2 opposite rounded corners) is used so much. I'd be happier if it were just on the 3x headers, and maybe the feature image of the man, but I feel the heading is overkill. I do find the circular "Start Now" button makes a refreshing change, keeping the energy from going all leaf-shaped.

The things I like about this design are the round button, the consistent tone delivered by the different colours, and the smart, classical typography.

The page does feel somehow cold and aloof compared to some of the others in this list, as though the content's a bit too far away. Nevertheless, it's an open and clean design that keeps attention on the content.

Esource Marketing 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