Awesome Web Design Examples

by | 2 Jul, 2018 | Growth, Marketing

Web design examples across the spectrum of sites in the market. All of them showcasing the design trends that are driving great user experience right now.

Reading Time: 5 mins
In a separate post we covered the massive trends for web design. Now we showcase 9 awesome examples of these trends.

The sites cover the spectrum of eCommerce, restaurants, government, not for profit and agencies. A key theme you will see in each of the sites is just how they use web design to gain and retain your attention. The best sites are perfectly matched to their conversion purpose.

We’ve included a section on things you might not like about the site. This is not a dig at the talented developers. But is a recognition of the diverse preferences of people in the world. In most web design decisions, there is a trade off.

Use the examples to inspire your web design journey.

1. Answer the Public (Online Tool)

From the same team behind coveragebook.com, Answer the Public is a really useful tool for keyword planning. Not only is the tool great for content ideas, but it provides a great example of background video.

 #responsive #backgroundvideo #rubyonrails

Why is this site awesome?

It uses a truly memorable video in the background. Not just any stock video, but one linked to their value proposition and advertising. Just check out their about us page. The site is built using the Ruby on Rails framework. It is responsive and looks just as good on mobile as it does on desktop.

Mobile: Just as good as desktop.

Why you might not like it?

If an old man playing with his teeth puts you off, then maybe look away for that segment of the video.

2. AYR (eCommerce – Fashion)

AYR (All Year Round) is a ladies online fashion store. Their clean site with plenty of product imagery, is a great model for any eCommerce business.

 #ecommerce #rubyonrails #shopifycart

Why is this site awesome?

The platform is established by the really effective use of a card-style layout. The above the fold section combines the site and product navigation with all the usual cart and member functions. But it does all of this a consistently clean feel throughout the site. Whilst not shown in this post, the product pages make it super easy to buy.

Mobile: Responsive, though desktop is a slightly easier experience.

Why you might not like it?

The mobile experience is not amazing, as some of the navigation is lost in the image background. But that is about it…

3. South Australia Roadtrips (Government)

We included this government site, not only to broaden the field, but also because it’s actually quite good. South Australia may not be the best known state in the country, but their roadtrips site is great at promoting the various attractions.

#publicsector #.net #horizontal

Mobile: their recommendation explains it all.

Why you might not like it?

One of the trade-offs with their horizontal transition approach is that it’s not great for profile. The hamburger navigation at the bottom right is also non-standard. This allows a focus to remain on the key content at the top. But overall, does not support the normal objective of having a consistent experience across platforms.

4. Pablo the Flamingo (Not for Profit)

Whilst not immediately obvious, Pablo the Flamingo is linked to the World Wildlife Foundation (WWF) Adopt a Flamingo initiative. With the ‘Let Me Blow Ya Mind‘ soundtrack in the background, it is hard not to like Pablo.

#animation #notforprofit #allabovethefold

Why is this site awesome?

In a super simple way, it uses animation to get the audience’s attention. The flamingo is not WWF’s most popular animal. Nor is it top of the list for adoption by most people. But the site makes Pablo pretty-damn relatable. All the content is above the fold. There are only three navigation options, so the conversion path is straightforward.

Mobile: Responsive, just like the desktop.

Why you might not like it?

Without any context, it will take 10 seconds scrolling over the icons to work out what the site all is all about. Also the soundtrack may ambush you when are trying to keep a low profile. There is the option to mute the sound, but it may be all too late by then!

5. Minimums (Blog and Affiliate Marketing)

Minimums really does live up it to its name. In a straightforward card layout, the site provides a Q and A style insight into the interesting possessions of various people. So in that sense it is a blog. But then each item is available for purchase or donation off-site. So it does perform an affiliate marketing function of sorts – including sponsored posts.

#cards #blog #wordpress

Why is this site awesome?

A card layout, with a simple search in the header and a basic footer. What is there not to like about its minimalistic approach? There is no surprise that it’s a wordpress site. The mobile experience is just as good as the desktop. Minimums is the quintessential card site, demonstrating the appeal of using the card approach for responsive design.

Mobile: Same cards, just in different layout.

Why you might not like it?

Open to suggestions…?

6. Species in Pieces (Not for Profit)

Species in Pieces provides an awesome interactive exhibition on threatened species. Even if you are just interested in the web design, spending time on navigating the site is worth every minute.

#animation #interactive #css

Why is this site awesome?

The animation in this site is amazing. Each page (including the navigation) is visually appealing. The transitions totally achieve their purpose of distracting you from the page load time. The most interesting part, it is all built using CSS. Just click on the link in the site on, ‘How It’s Made’.

Mobile: No problems here….

Why you might not like it?

Navigation might be a bit hard for some who want to jump around and share individual pages. But to be honest, that is all part of the enjoying the exhibition.

7. Vandal (Restaurant)

Vandal inextricably links art, entertainment and design all into a single institution. Their website provides a perfect showcase for its street food in amongst the work of well-renowned street artists. Four minutes of what should have been blog writing time, were well spent on watching their ‘Making of Vandal‘ video.

 #backgroundvideo #cards #wordpress

Why is this site awesome?

The background video above the fold, perfectly sells the embodiment of the restaurant. The cards layout below the fold, provides a great framework to deliver the relevant content.

Mobile: Advertisement at top is not responsive, but overall still awesome.

Why you might not like it?

The double navigation (both bar and hamburger) on the desktop site are a bit redundant. Also the advertising update to the site is not perfectly responsive. But overall, the site is still pretty amazing.

8. The SmokeHaus (eCommerce – Food)

Not all of us are into smoked goods. But for those that are, then The SmokeHaus provides an excellent eCommerce experience.

#eCommerce #smallgoods #wordpress #woocommerce

Why is this site awesome?

The products are presented in the same way you would expect to see if you walked into a smallgoods store. The use of product imagery throughout the site reinforces the value proposition. There is nothing fancy about the technology behind the store (just WordPress and WooCommerce), but the site provides a great user experience.

Mobile: Even comes with instructions.

Why you might not like it?

Apart from not liking the products, there is not much to say here…

9. The Neighbourhood (Agency)

The Neighbourhood is a Manchester agency that has used their site as a canvas to demonstrate their creative work. Checking out the showreel is one minute well spent.

#backgroundvideo #animation #craftcms

Why is this site awesome?

When you land on the site, you are treated to an eclectic mix of background videos demonstrating their expertise. Then as you scroll down, the animation provides an effective user experience to retain attention. Interestingly, they use Craft CMS for the site – which is becoming increasingly popular.

Mobile: responsive and entertaining

Why you might not like it?

The background video is almost the equivalent of the contemporary carousel. The content is fixed, but the fast-paced video may not be for everyone.

Conclusion

Every day, the skills of amazing web designers are put on display. We created this list to provide some inspiration for others on the web design journey.

Key trends to track in web design include:

  •  Video
  • Animation
  • Card layout
Bitnami