How to design award-winning websites
A list of things to keep in mind when designing great, engaging digital experiences
As a FWA (Favourite Website Awards) jury member, I get to see a ton of great, engaging web experiences from some of the best digital talents in the industry. Although there is no secret trick to winning a website award, I still think there are some rules of thumb to keep in mind, that will yield a clear, value-driven site with a great user experience and engaging content that will make your site memorable and make people go “Hey, check out this site”.
In this article, I’ve gathered some thoughts on what I personally think makes up a great digital experience and what motivates me to vote yes for a site to receive a FWA award. While I know there is more to life than design awards, I still think it’s great to have organizations like FWA, D&AD, Webby and Awwwards recognize projects where the teams behind went that extra mile in order to push their digital product and ultimately our craft a little further. In a way, it’s gamifying our job, turning it into a friendly competition. Fun!
Here’s a list of my personal thoughts on what to do and not to do when building a great, engaging digital experience. And it’s all entirely subjective. Some points might overlap, some you might not agree with and some might be slightly contradictory. That just goes to show that design is a subjective medium with very fluid borders in regards to what is correct and what isn’t. This article is simply my take on what I look for when I review a site. I’ll continually update the guidelines below as I come up with more points. Without further ado, let’s get started.
1. Clear value proposition
It probably goes without saying, but it’s very important that your site has a clear value proposition. Why does it exist? What’s the purpose? This should be clearly communicated either explicitly or implicitly. Every design decision should revolve around that purpose. Be concise, cut away anything that might distract from the vision you’ve established. When a user lands on your site, it should be immediately clear what your site does and what your site is going to offer him/her. This could either be an obvious description of its purpose like in the example below. Whatever your value proposition is, it needs to be clear and make sense to your end user.
Creative Cruise has a clear purpose that’s immediately obvious: to promote an Amsterdam-based event. Even though the layout is almost flyer-like, it has a really fun scrolling-based interaction that heightens the experience and ties in to the concept of an agency-hopping around the canals of Amsterdam.
2. Easy navigation
I cannot overstate the importance of clear navigation. A clear navigation hierarchy provides a crucial skeleton for your site. Feel free to go all crazy in other areas, but keep your navigation somewhat conservative, by using a classic navigation pattern. Great navigation feels invisible and lets your content really stand out, which is what you want. You don’t want to make people spend time figuring out where you hid the menu, you want them to spend time playing with your amazing WebGL interaction. Of course there are lots of exceptions, where it makes sense to re-invent the menu or other UI patterns. Just make sure it’s obvious and graspable within a couple of seconds, otherwise you risk losing some of your visitors.
For Google Ideas, Hello Monday went with a simple, clear navigation that feels familiar. This allows the user to quickly find their way through the different sections of Google Ideas and spend more time playing around with the cool WebGL globe.
3. It’s not just about hover effects
I love a great hover effect, they’re just fun. But your site is going to need more than just cool effects to be engaging and memorable and win an award. Apply effects and transitions so that they support the website experience, and not just because they look good. Style should never get in the way of great UX.
4. Innovate in at least one area
Think about what makes your website stand out. Try to come up with at least one thing, large or small, that you’ve done differently than other sites. Whats your site’s x factor so to speak? What little thing will people remember from your site? A really cool transition, hover effect or a large elaborate interaction. It could even just be really well-written content or a unique tone of voice. Much like in pop songs where there is this one hook that gets stuck in your head, you should have that one thing that makes your site memorable.
The Happy Forecast has a fun, console game like user interface that’s almost a little universe in its own right. Fun and memorable!
5. Keep an eye on loading times
In the era of smartphones and notifications constantly popping up, we’ve all acquired the attention span of gold fish. Loading times are a major nuisance and should be kept to a bare minimum. If there is no way around loading times, think about how you could load parts of the site, so it feels as if the experience has already begun.
6. Go responsive
It’s not much fun putting in countless hours on a project if half of your visitors, the ones on phones or tablets, don’t experience your site properly (if at all). Keep mobile and tablet in mind and design an experience that goes across devices. Of course there are exceptions, but ideally you’d want your project to work equally well on as many devices as possible.
B&O Play by Spring/Summer works equally well on mobile and desktop.
7. Avoid elaborate transitions
Transitions are great and can be fun and exciting, but much like hover effects they need to serve a purpose. And there’s nothing worse than having to wait for a transition to finish in order to continue browsing. Keep it short, subtle and apply only where relevant.
8. Design with your target audience in mind
A great digital experience is tailored to its target audience. Keep them in mind when picking your design elements, colors, typography, visuals, etc. A website designed for young moms inevitably looks different than a website designed for business executives.
9. Engage Instantly
Your site is competing with YouTube, Facebook, e-mails, phone calls, Medium articles, etc. Basically the whole internet. Keep your users engaged from the moment they enter your site. This could be done with an interactive bodybuilder as in the case of Old Spice Muscle Surprise below, but it could also simply be an arresting visual, an interesting statement or beautiful typography.
10. Take advantage of new technologies
Nothing is more exciting than sites that take advantage of new technologies to great effect. They make you go “how on earth did they do that?”. If applicable to your project, think about whether you could try out some new technology or hack a current one to do something new.
In CRAZY SKILLS, Panasonic created an amazing FIFA-like experience all in the browser. How did they do that? (Probably WebGL)
11. Don’t forget humor
Who doesn’t like to laugh? If applicable to the brand and the experience you’re creating, consider using humor to entertain your visitors and make them feel good. Making people smile always pays off in the end!
Legwork use fun, quirky illustrations to highlight the playfulness of their agency and your mood too.
12. Dare to go new ways that don’t feel safe
Try out new ideas. Don’t be afraid of doing something new, just because you’re not sure how it’ll be received. Take chances. Sometimes you’ll fail, often you won’t and it’ll pay off. No matter what you’re still going to learn a ton, when chartering new territory. Catapult yourself out of your comfort zone. Way of the Desperados below provides a quirky, strange experience but it just works somehow.
Go out there and do amazing work!
It all comes down to daring to try out new things and believing in your gut feeling. Aim high! Show us something we haven’t seen before. Get out of your comfort zone, it’s amazing where you’ll end up!
Thanks for taking your time to read my article. Follow me right here on Medium, stay in touch via Twitter or connect on LinkedIn. And if you liked this article, feel free to share it with your friends.