Top 10 Uses of Storytelling in Web Design 2019

There’s some fantastic story driven web design out there. The best of it in my opinion is the stuff that sucks you in without you realising, that keeps you wondering ‘What’s next?’ as you can’t help but scroll through. All these websites are one-page-layouts, I think this is important because asking your audience to click another page to continue a story is a big ask, you really want to save the ‘ask’ for a call-to-action, as you can learn about in this article I wrote on the psychology of the Call to Action Button.

Some other aspects of great storytelling in web design in my opinion include:

  • Motivated movement and animation: meaning that there’s a reason behind that spinning circle or bouncing icon, as a web designer we have the ability to develop motivation into everything you see in front of the viewer. The view-port is the stage!
  • Border-less scrolling: I think boxes are a thing of the past in web design unless they’re using the correct web design language, that’s to say they should be used to categorise, like a full stop before and after, but if your telling a story in your web design try not to block out your story-beats like this – it makes them feel disconnected.
  • Thematic design: If your telling a story then there’s an overarching theme that informs design, you can be really clever with this as some of the websites in this list have been.
  • Minimal & white space heavy: A lot of these websites have a beautiful minimal design, colour heavy and sparse in clunky old web design. I don’t think you really need to use the entire view-port anymore for web design either. You don’t need a sidebar, you don’t really need a header, you don’t even need a footer, just swap that out with a CTA. Less is definitely more today in web design.
  • Anticipated/Teased scrolling: To add to the last point, you want to think of your site in terms of slices, slices that should neatly fit the view port of your viewers screen. Each ‘frame’ (we could call it) should both develop the story further from the previous frame and also build upon it but finally should tease the next frame, with great design and copy.
  • Scene/theme setting photography: I’ve always thought and known photography is an essential asset for website owners to tell their stories, especially photography done specifically for the website. Where as stock footage can work – the context is more vague, but if you photograph specifically for your site then there’s a hell of a lot of context – context is key!

With this being said let’s look at how some of the great British web designers have used rules like these and their own to develop beautiful, engaging and minimal story driven websites. Without further ado here’s Bespoken’s comprehensive list of the top storytellers and their work in web design in 2019…

1. Design by Day – The Rivers Trust

The Rivers Trust is an umbrella organisation of around 60 local member trusts spread out across the UK, they’re government funded and to fight against climate change, pollution and plastic and help makes rivers habitable for local wildlife and people alike – a fantastic organisation with an equally great strap line which Day by Design used to develop their entire website around.

“Where there’s water there’s life”

A beautiful, understated example of great design and storytelling…

When I saw this site design by Design by Day I really felt the mood of it. The main image is a beautiful use of scene setting and teasing the next portion or ‘frame’ of the screen.

Although I listed the use of boxed content as a negative above I think it works in this instance because of the structured approach the Charity takes to their guardianship like approach to British rivers. The boxes add to this sense of order and respectability.

There’s a good use of white space however it does feel cluttered in some areas. Although the all over feel of the website is both refreshing and trustworthy – which are the key moods that you’d want to set if you we’re developing a website for Design by Day.

Understated and effortless – great work by the Design by Day team!

Top 10 Uses of Storytelling in Web Design 2019

Design by Day is a Manchester based Design agency focusing on Branding, Web Design and Animation. Their work stood out from the crowd thanks to their minimalist design language and practical and engaging storytelling techniques. Here’s some more of their work I found to be just as good (but couldn’t add to this list because it would be way too long!)

  1. Catchment Based Approach
  2. Borg 5

2. Built By Buffalo – Box Fusion

Top 10 Uses of Storytelling in Web Design 2019
This website is truly stunning! Beautifully themed and perfectly executed.

Box Fusion is a beautifully designed website. It features beautiful minimal motivated movement and animation which reacts to your scroll, border-less scrolling, thematic design, plentiful white space and anticipation built in to the ‘frames’ between scrolling. So practically ticking almost all the boxes from the list above.

I really fell for this site because it really speaks to the the complicated subject matter. Oracle cloud CRM technologies is complicated stuff, but it’s clear that Built by Buffalo have an understanding of these technologies (by diligent research or because they employ a number of smart web development people not only web design guys as part of their team.)

This understanding of the subject matter really speaks to the iconic use of colour and visuals to represent the subject visually and beautifully. If it’s not already clear I was very impressed with this site, and found that Looking at Built by Buffalo’s portfolio literally all of their other work is just as powerful and impressive as this website!

Lastly I wanted to speak to the animation a little further – it’s the perfect amount. Sometimes you scroll through a website and start to feel motion sick at the number of moving elements of the screen. Even if the animation is sound and impressive – too much of it looks like gloating and can completely turn of the viewer. I think Built by Buffalo really hit the mark in their animation. It’s not only consistent and plentiful (with a crazy amount of professional and well designed animation across multiple pages, not just the homepage) but reserved and additive to the story and theme of the business not distracting and awkward.

Fantastic work from the Built by Buffalo team, I’d highly suggest you check out their portfolio for yourselves and treat yourself to some of the most engaging web design work that’s being produced today in the UK…

Top 10 Uses of Storytelling in Web Design 2019

Built by Buffalo is a fantastic web development and design agency based in Brighton, there’s a bunch of them and their skill-set is incredibly varied from e-com to illustration and everything in-between. They also a lot of dogs between them. Again, definitely check out their portfolio. Here’s a bunch of sites that I also loved to no end…

  1. DCM.co.uk
  2. Sheldrick Wildlife Trust
  3. CPJ Field
  4. Infrata.com
  5. Cognosis
  6. Koryo Group

3. Parall.ax – Yorkshire Energy

Top 10 Uses of Storytelling in Web Design 2019
Awesome minimal interactive element! I just had to add this one to the list…

This simple interactive element for Yorkshire Energy’s web redesign by Parall.ax really ties together the entire site and it’s design, it’s very minimal and subtle – which is another reason I really love this implementation.

The rest of the site is quite reserved but for the same reason The Rivers Trust website works the orderly layout is attractive as the business or organisation behind it is a well respected institution – so it all adds to the theme.

The site itself feels tight and professional, minimal and effective – it’s a great example of simplicity and boiling down creatives ideas into beautiful design language for web.

Top 10 Uses of Storytelling in Web Design 2019

Parall.ax is a super professional, award winning studio based in Leeds. They’re website is super experimental and interesting to navigate. There’s a contrast in their own portfolio and professional body of work – it’s much more reserved but the design language is there it’s just further refined – they’re an interesting team that you’ll want to keep your eye on for future work I’m sure.

Cap-HPI

4. PS Website Design – Joshua Ellis

Top 10 Uses of Storytelling in Web Design 2019
Beautiful use of storytelling with photography…

PS Website Design did a great job of Joshua Ellis, a distinguished British manufacturer of luxury clothing items. Often times with luxury, the best way to show it off is with beautiful big photography.

This websites copy and photography really sells that ‘luxury’ feel, it might feel a bit more traditional in it’s approach but that’s kind of the point – the brand is hundreds of years old (Est. 1767.)

Photography is also great when your defining your audience, in this case younger wealthier men and women.

Although traditional it really does tick a lot of boxes, and the rest of PS Website Design’s stuff is equally as brilliant and a lot more ‘out there’ in some cases…

Top 10 Uses of Storytelling in Web Design 2019

PS Website Design is a web design biz based in Leeds, West Yorkshire. They’re portfolio is vast and a treat to look at as they’ve got a lot of character as a design agency and that translates into their work in the best way, here’s some more great work they’ve done…

5. Bozboz – Jeremy Paxman

Top 10 Uses of Storytelling in Web Design 2019
Funky, fun and ever so British..

Bozboz have done a great job of producing an engaging and characterful portfolio website design for Jeremy Paxman.

The site really doesn’t take itself seriously, which is a funny juxtaposition from his on screen persona. It’s incredibly charming and incredibly British. But not so far as it’s corny.

Some of the pages are very tongue in cheek, for example his ‘praise’ page (a play on a testimonials page) features some choice words from certain people in the public eye.

It’s extremely charming and tells a very care free and fun story of Paxman, the Bozboz team did a great job!

Top 10 Uses of Storytelling in Web Design 2019

Bozboz are a big award winning Web Design agency situated in Brighton. I’d love to see them do more portfolio sites like Paxman’s, but in the meantime you can check out their portfolio for some really big campaigns!..

6. Union Room – Renwick Sons

Top 10 Uses of Storytelling in Web Design 2019
This is one of the most perfect, fantastic scene setting background videos I’ve ever seen!..

Something that people often don’t employ on their website designs is background header videos. Union Room and Renwick Sons is one of the best advertisements for the use of header videos I’ve ever seen.

From the first frame as you hit the site it draws you into the concept and before you know it your invested. It’s the perfect mix of professional video production and professional web design. It’s all so simple but masterful.

The video itself sets the scene – premium horse grooming equipment from the perspective of the ideal client or persona.

Scrolling through they use equally if not more impressive photography to further drive the skill and effort of that goes into this bespoke high end product, and the culture surrounding it.

It’s really very impressive and minimal at the same time – truly a masterfully designed website which we can all learn a lot from!..

Top 10 Uses of Storytelling in Web Design 2019

Union Room is a fantastic web design agency based in Newcastle that really understand the importance of great photography and videography and imagery in general mixed with minimalist beautiful web design – it truly is a masterful combination, you should definitely check out their portfolio!..

7. Sleeky – Mount Media

Top 10 Uses of Storytelling in Web Design 2019
Lovely lovely colours…

Mount Media is a really good approach to minimalist design with strong contrast pastel colours mixed with effective clear and organised storytelling.

Simple symbolism really works, and can keep your site looking clean and attractive without overwhelming your audience with everything you can do for them (if your a B2B service like in this example.)

This simple symbolism is used throughout the site and it works really well, well done Sleeky.

Top 10 Uses of Storytelling in Web Design 2019

Sleeky is a fun, web design, marketing and print agency based in Newcastle who produce fun effective story driven websites, there Luck B* website linked below is a lot of fun, check it out…

8. Series Eight – Season Creates

Top 10 Uses of Storytelling in Web Design 2019
Impressive design from an impressive portfolio

Series Eight is a hugely successful design agency and it show in Season Creates, a basketball eCommerce site. It hits the theme perfectly – it’s one of the coolest looking sites I’ve seen this year.

It’s urban and engaging and very celebratory of the sport and the culture – and it works so well for that reason.

Fun animation of text is minimal and well implemented.

Beautiful design, beautiful photography and fantastic storytelling in the way they break down the ball and their geeky love of the basketball.

Top 10 Uses of Storytelling in Web Design 2019

Series Eight is a London based web agency that build websites, digital products, brand and ecom sites. They’re award winning and have a very impressive rota of clients – their work really speaks for itself – superb design mixed with superb photography and great storytelling, a must check out for any aspiring web designer…

9. 56 Degrees – Collfryn Farm

Top 10 Uses of Storytelling in Web Design 2019
Incredibly temping offer Collfryn Farm…

Collfryn Farm is such a beautiful site, 56 degrees are, I believe, the best at developing the ‘feel’ of the clients product or service, if you look at their further portfolio understand what I mean by that.

‘Unwind’ is the first thing you see and the imagery sells that idea. After scrolling through this site you can’t help but want to take them up on their offer.

The fun printed photo style approach and simple ‘hooks’ on the site make the one-page-layout make these learn more buttons irresistible, and if you’ve read our Call to Action article, you’ll know how effective they’ve used their CTA.

Then it ends with a repeated check in date widget, fantastic work and I’m sure a greatly effective landing page – this simple one page layout with CTA’s a dense information on Learn More pages is, I believe one of the most effective approach to developing a lead generating landing page/website.

Top 10 Uses of Storytelling in Web Design 2019

56 Degrees is a fantastic web design agency based in London that make understated beautiful websites that are as effective as they are attractive, for sure check out their work…

10. Limely – Nine Elephants

Top 10 Uses of Storytelling in Web Design 2019
Feels very Thai…

Nine Elephants is a website for a Thai restaurant in Chester that really sells the experience with great experience of the food and the effort of the chefs.

Their use of video in their banner is again a great way to set the mood.

It feels smokey and engaging with the black and orange colour scheme. Experiencing the website would I’m sure help convince anyone that the restaurant is worth visiting.

Very impressive work from Limely.

Top 10 Uses of Storytelling in Web Design 2019

Limely is a young web design agency based in Chester with a lot of energy and a really fun portfolio of work. Their own website is a real show of their talents and expertise. They work primarily in website design and development and also wordpress > Magento crossover development. Check out their portfolio!

And there you have it!…

A comprehensive list of 10 of the most effective story driven website designs of 2019 and 10 of the most effective storytellers – I.e Web developers – from across the UK. If your a web developer and or designer I hope this inspires you to seek new ways to develop your websites incorporating the ideas and concepts discussed and reviewed in this article.

And if your looking for a local designer, we’ve covered a lot of locations in our list – it’s not all just in the big cities – there’s a lot of great teams out there like Built by Buffalo in Brighton and Union Room in Newcastle.

It’s really exciting to nerd out on these fantastic designs and to keep them in mind when I come to design websites for my own clients, I hope you enjoyed this list! Please share and comment to help spread the word about these great British website designs and developers!

Written by Adam Smith

Top 10 Uses of Storytelling in Web Design 2019I’m a designer and storyteller.

This blog is a place for me to document my experiments combining three key fields: Design, Storytelling and Digital Marketing.

I hope I can also inspire and guide you towards towards your own Digital Storytelling goals and successes.

Top 10 Uses of Storytelling in Web Design 2019

Leave a Comment

Your email address will not be published. Required fields are marked *

Like This Blog?
Thanks, we
designed it
ourselves!..

Check out our portfolio of work and get in touch with us if your looking for your own website or blog designer…

Subscribe to my blog!

Keep up to date with the latest, greatest storytelling posts with alerts to your inbox…

© 2019 Bespoken. All Rights Reserved.