Clean and Simple are probably the most relevant factors in successful web sites today.
As I explain in “Save the Pixel”, sites don't have to be simplistic or bare, but they should be as simple as they can be to get the job done.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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!
Sign up for my regular newsletter to keep updated on everything I'm doing and thinking about in web design.
