This is my list of the best-designed websites. I don’t expect you to agree, and I don’t care if you do either. You’re welcome to post your own list 🙂
Of course I haven’t looked at every website. So this selection is only based on the sites I have come across in the past year.
(Note: Comments are OPEN on this post – for the time being at least.)
My Criteria for Best Website Design
Each year, my criteria change, as I learn a deeper appreciation of marketing. A few weeks before I put my shortlist together, I did an exercise to try to boil down the essence of an effective website. Here’s what I came up with.
“How well does this site achieve the site’s (or owner’s) goals by targeting the right visitors and delivering a great experience?”
So the winning sites must display the following, ideally above the fold on the home page. (Note: It’s shocking how many websites don’t do these most basic things. So, in a way, it’s shocking how easy it actually is to get your website into my Top 10!)
1. A Clear Identification of its Target market
When you visit a web site, you’re looking for something. You have some kind of goal in mind, whether it’s to book a ticket, buy a product at the best price, be entertained, find out some information, whatever.
I often say that all that hangs on a single question:
“Am I in the right place?”
So the main thing a website has to do is state clearly who it’s for, and what it does. If it fails to do that, if I don’t realise that it’s for me and that it offers what I want, the site fails. The web design fails.
It’s amazing how many websites out there just don’t bother to inform their visitors what they’re even for, even in the most prime real estate of all: above the fold on the home page. (You’ll notice that I put a lot of importance on that slice of web design real estate when I’m reviewing sites. Another one is the logo/strapline area.)
2. Making a Compelling Proposition
We really are talking about web design kindergarten here, but that’s still the state of play, even now the world wide web is all grown up and in its twenties. (Hopefully, by the time I’m doing the best designed websites of 2020, we’ll be talking about how brilliantly the shortlisted websites identify and engage and delight their visitors.)
So a website needs to make it clear who its target market is. The next thing I want to know is:
“Why should I proceed with this site?”
We’re talking about buying, ordering, joining, or simply hanging around.
Does the site give me a compelling reason to proceed forward, or am I more likely to go back to the search results or previous page?
Do I trust the site? Is it credible? Is it relevant? What about the products or services on offer? Are they appealing? And am I being treated to an experience that’s at least hassle-free, if not genuinely pleasurable? Do I even care?
So, armed with those two simple criteria: Identifying the target market; and Making a compelling proposition, here’s my list of the best designed websites of 2013.
Best Designed Websites of 2013
Note: These are in no particular order, so I haven’t numbered them. I’ll try to make it clear why I’ve selected each of these sites.
(Just for fun, you may want to count how many of these websites features a large photo of an Apple product with a blurred background behind. And no, that wasn’t one of my criteria for inclusion.)
Does it identify its target market? Well it’s a broad market: anyone who doesn’t have a budget for their money, and who needs one. So the target audience is summed up in the name of the site.
It’s incredibly important to have a main heading that acts as the “start here” point on the page. This one’s great!
The main heading states both the problem (which again equates to the market), and also makes a promise to solve it: Gain Total Control of Your Money. If that’s what you need, you’re in the target audience and we have your attention.
The subhead then provides more detail: “Stop living paycheck to paycheck, get out of debt, and save money faster with YNAB.” So it’s emphasising the problem, making it feel more real, and then expanding on the promise.
That’s great copywriting. Looks simple, right? It often is!
Then check out the three components of the proposition: “A Proven Method” (establishing it works, you can trust it), “Amazing Software” (i.e. You’ll love this, emotional value), and “Free, Live Classes” (which suggests you can do this, giving you confidence to proceed).
All that’s above the fold on the home page. And that’s quite a rare achievement.
The Quizzle.com homepage does less than You Need a Budget. Generally, I would advise websites to put more above the fold on the home page, rather than less, as there’s more at risk by not giving the visitor enough information than by telling too little.
This is also in the dominant style of 2013 websites. Of course, my selection isn’t based on fashion, but if a convention becomes a convention because it works better than what we had before, that’s good design.
There’s a very clear headline. White text over a photo background isn’t always successful, but this works. “When was the last time you checked your credit?”
Who’s the market? People who care about their credit, and who don’t know how they score. This headline makes you ask yourself the question to see if you’re in that group.
What’s the proposition? Checking your credit. The button says, “Get Started – it’s Free”, so that tells you pretty much all you need to know. Of course, you may have more questions, doubts, or concerns, and frankly there is room to be a little more explicit, but I think this site deserves its place in the list simply through the elegance of what it communicates in just a few words.
One mistake, which I would strongly advise them to rectify, is the logo and strapline are far too small. I can barely read the strapline! There’s no need, guys, it’s not like you don’t have space available.
Here’s another great example of a home page that communicates all the essentials in just a few words.
Do I need to explain?
You can also entertain yourself by clicking on all the boxes. I’m not quite sure what what tells you about the service.
There’s some great use of photography, and more succinct copywriting further down the page too. It’s definitely worth browsing this site.
This website is just genius. I’ll let you find out why for yourself, and I bet you spend more than two minutes on it.
I just had to include this in my Top 10 Best Designed Websites list, because it’s so lo-fi and yet so effective. It proves that you don’t need fancy graphics – or fancy typography – to make a really successful website. You just need to know what you want to achieve, and to communicate your message in a compelling way.
Does it identify the target market? No! Not in the slightest. It’s a messed-up world.
But seriously, by the time you figure out what this website is promoting, you’re more inclined to want to get it. Like I said, genius.
(For reasons of total transparency, the designers of this site: Jordan Dick and Sarah Peters, are both members of my Pro Web Design Alliance pro group. However, they’re also two of the best web designers working in the world today, and two of the nicest people you could ever work with.)
The reason this small business website is in my top 10 best designed websites list should be obvious. Check out the content above the fold.
First, do we know exactly who this site is for? Yes: people who don’t have an automatic standby generator. So they’re probably homeowners and in middle age (judging by the photo).
Do we understand the proposition? Yes, it’s straightforward. And we get that what they’re really selling is “Peace of Mind” and that’s one of the most important factors in great copywriting.
There’s social proof, from a testimonial (which also tells you where in the world the business operates: NY), AND there’s a call to action, “Get a Quote And Your FREE Power Evaluation”, all above the fold.
Check out the site, and read the rest of the content on the home page, for a copywriting (i.e. web design) masterclass.
Gov.uk is a new site that aims to bring together all the “customer service” info for every Government department in the UK.
And they pulled it off. It is a triumph of usability and information architecture. (I spent 3 years working on British Government websites, and believe me it is the hardest environment I’ve ever had to work in.)
Who’s its target market? Thousands of different ones! Even to come close to serving half of those, it would be a triumph. But it does better than that.
It’s such an achievement, it even won theÂ Design Museum Design of the Year Award 2013.
It’s time for a web-based app. Just Eat is a UK site that serves the growing takeaway food automation market. I’ve used it, and I thought it was perfect. (In fact, I then got their iPhone app, which is ever better.)
I’ll let you have a play on the site for yourself. Just put in a postcode and select an optional filter on takeaway type, and you get the exact results you need (see an example). No silly fancy filtering, it just shows you what’s near you and delivering right now. It’ll even let you preorder from places that aren’t open yet.
This is an amazing example of a web solution that takes something potentially mind-bendingly complicated, and makes it feel so stupidly easy that even a drunkard can use it.
I couldn’t really justify putting Apple.com in my top 10 list again, particularly as it hasn’t evolved that significantly, so here’s one of its competitors.
Android.com (you may get directed to a local variant) demonstrates some of the best practice of 2013 that we’ve seen on other sites in the list: large hero image, simplistic text-based navigation, single clear headline, just enough text, and a selection of features/benefits with icons.
I’ve also made my one concession to slick and clever front-end wizardry here. if you click between those 4 topics at the bottom (thankfully there’s no automatic slider), they pan in and out on a diagonal trajectory. It’s fluff, but it does help the site to feel very modern.
Warning: Your small business site probably doesn’t need that effect, and you could probably make far better use of the $1000s it would cost a web developer to implement it.
The site isn’t without the odd glitch though (even in Chrome), such as the triple-dot menu appearing behind the headline, but overall it’s a very clean and usable site that (similar to Apple and Microsoft) gives you a window into a lot of content, without being overwhelming.
This site is almost too cool for its own good, but I think it does a good marketing job.
It’s a brand new concept, and (like the wonderful Dollar Shave Club) it relies on a video to explain itself. Watch the video and you’ll get it. You’ll need to watch the video to get what it is, and who it’s for, and that’s probably why it’s the only thing you can really do above the fold.
I think the large images behind the video, which change over time, are actually superfluous, though. They distract from the main content, and don’t really deliver great value. I guess they’re trying to show you how this device could be found in lots of different people’s bags (or stuff), but it’s vague and ultimately unsuccessful.
Scroll down the page and you’re treated to more cool tricks: the “animate-on-scroll” graphics that seem to be the darling of cutting-edge web designers this year. (On that point, at least these aren’t animations that blink away pulling your attention away from the real content. However, I think it’s really just web design porn, and not something that you really need in your toolkit to be a really effective designer.)
That said, the home page (although you have to do a lot of scrolling: another feature of 2013 design, but then we have had mouse wheels and gestures for a while now) does a really good job of getting you to understand the various features of this hyper-modern new product, so it’s a huge success in my book.
Jonathan Fields’ site is a journey into the softer, right-brain side of web design. Jonathan is a speaker, writer, and entrepreneur who isn’t just in the directly-selling-stuff world, so his site aims to engage you on a more emotional level and to build a warmer, deeper type of relationship: the tribe member (or future tribe member).
So yes, we get highly stylised imagery. Yes, we get “animate-on-scroll”. And yes, I think it works. Quite beautifully in fact.
Great photography, great typography, great attitude. All held just in check, not drowning out the core message of the site.