7 Examples Of Great Web Design (And How To Copy Them)
With every day that passes, it becomes harder for great web design to get attention online (at least, the good kind of attention). UX standards keep going up, competition gets fiercer, and people become less patient with sites that don’t quite measure up. If you’re looking to keep your website in contention for traffic, you can’t afford to let your design become outdated.
But before you make improvements, you need to figure out where you’re going wrong, and the easiest way to do that is to take inspiration from other sites that are nailing their design work. When huge corporations invest massive sums in carrying out user testing and slowly optimizing their layouts to reap as many conversions as possible, there’s no sense whatsoever in ignoring the fruits of their labor and trying to reinvent the wheel.
To give you some great ideas of what a great website needs to include today, let’s look at 7 examples of fantastic web design work, and identify some actionable takeaways:
Crypton
Crypton is a trading bot designed to help people buy and sell cryptocurrencies by analyzing patterns using machine learning. Is it effective? I have no idea, and tend to distrust any types of financial trading — but I love the website.
What’s so great about it? Right off the bat it nails the techy aesthetic, using a monochromatic baseline and throwing in pieces of color for emphasis. The arrow at the bottom is animated to encourage the visitor to scroll, and as soon as they do, further animations result.
With every step along the way seamlessly yielding to the next, there’s no moment of inactivity to lose the reader’s attention, and the longer someone keeps reading, the more likely they are to want to give it a try.
The takeaway? Know your audience. A page like this wouldn’t work for someone with no idea what algorithms are, but it doesn’t need to. Don’t try to design your website for everyone. Figure out what your desired visitors will want, and cater to them accordingly.
JOHO’s Bean
Any kind of comestible product requires more creativity in its presentation, because you’re typically trying to appeal to the senses as opposed to practicality. JOHO’s is a coffee company, and its website is quite a thing to behold.
As soon as you arrive at the site, it tells you that you’ll need headphones, and that you can scroll down to begin — that way, it isn’t an annoyance. And once you begin, you go through a narrative, with each page having distinct sound effects, graphics, and interactive elements.
The takeaway? Appeal to the senses. Doing this with visuals and sound effects is very effective, but you don’t have to do it that way. You can also do it with your copy by picking the right words — think about how inventively soap companies describe soap, for instance.
Sean O’Keefe
Sean O’Keefe is an Atlanta mover and shaker and his website reflects it. He is a celebrity chef, event planner, writer, and producer.
As soon as you arrive at the site, a short video is ready to give you a rundown of his latest exploits. And once you start scrolling, you see latest blog posts and a selection of social posts from across his social media accounts.
The takeaway? Show it all. Do this by creating a place where all of your efforts are presented in one place.
Verk
Verk is a store selling minimalist watches, so it’s precisely the sort of site on which you’d expect to see quite a sparse layout, and it doesn’t disappoint. The entire thing is concentrated on function — anything extraneous is left out.
Anyone who arrives on this website isn’t going to have a difficult time figuring out where to go. The product is clearly represented, and the image blends into the background so everything feels cohesive. The internet can feel like an extremely busy place, so allowing some room to breathe is a great move.
The takeaway? Spread everything out. Yes, you have to get to the point, but that doesn’t mean every scrap of space on the screen needs to be filled with content. The more you have on screen, the less significant any given part will feel.
Liberio
Liberio is a search system for interpreting requested parameters and scouring reviews from across the internet to identify the most relevant options, and the homepage has an eye-catching (if perhaps overly bright) design.
Not only do you have the signature yellow tying together the company, the headline, the character, and the sun, but you also have the clear simplicity of the illustration. If you’re claiming to have a service that makes search simpler and clearer, it makes total sense to carry that aesthetic across through the provided visuals.
The takeaway? Use prominent illustrations. SaaS companies in particular seem to love throwing in amateur-style illustrations, and it seems to be the case that they help to humanize these companies that fulfill such technical roles.
Wolf & Badger
Wolf & Badger is a retailer claiming to offer “the best independent brands” — I don’t know if that’s true, but I do know that it has a terrific homepage design (and design in general).
What it achieved with this layout was providing a solid range of options without overwhelming the visitor or risking any confusion. Notice how every set of options is stylistically distinct — the top and bottom options are a subdued grey, the main bar is a light black, the top categories are bold and underlined, and the two tile options are much bigger and presented in white.
The takeaway? Make life easy for the visitor. Know what options they’re going to be looking for, and arrange them to minimize any uncertainty. If you want them to spend a good amount of time on your site, that’s how you’re going to achieve it.
Bowzer Box
Subscription services are very popular these days, and not just for software or media consumption — monthly deliveries of anything from food to toys are springing up consistently, and Bowzer Box is one such company, offering Canadian consumers goodies for dogs.
This store gets a lot of things right. I actually spotted it through an online marketplace for buying and selling businesses, where it’s on offer for a cool $50,000 (not a bad investment if you have that kind of money lying around), and it stuck out to me because of its crisp and clean design.
What do I like about it? The contrast is outstanding — look at how the orange coloring is used across the business name, the highlight of the title, and the CTAs, forming a V shape pointing down. There’s nothing getting in the way from giving it a try.
The takeaway? Use contrast effectively. Filling your website with similar colors and saturation levels will make it really hard for visitors to distinguish the important parts, particularly if they have poor vision or they’re just distracted.
Typeform
Typeform makes it faster and easier to create forms for collecting data. Easy to embed and boasting numerous strong integrations, it helps website owners (particularly in the ecommerce industry) to gather actionable feedback and improve accordingly.
With this focus on ease of use, it’s no surprise that the Typeform design team clearly put a lot of work into taking a mobile-first design approach. Everything scales very smoothly to whichever screen you use to view the site — not just functioning well, but looking as though that particular view is the best one available.
The takeaway? Look good on any device. You can’t get away with targeting desktop users only (especially with Google’s move towards mobile-first indexing), but you shouldn’t cater to mobile alone. Start with a mobile design and steadily expand it to fill a big screen, and you’ll know that your site will work whenever it’s visited.
There’s a lot of creative freedom in designing for the web, but that doesn’t mean there aren’t certain guidelines you should generally follow. Never forget the ultimate objective of your site, which in most cases will be convincing the visitor to do something that benefits you, and put the work in to optimize your results.
Patrick Foster is a writer and ecommerce expert for Ecommerce Tips. He likes seeing companies learn from one another to make their work better. Visit the blog, and check out the latest news on Twitter @myecommercetips.
