New Life
NET|Summer 2019

Bristol studio Fiasco Design explains how it approached a new way of telling stories online, as part of a week-long, in-house project

Nick Lewis, Marjorie Newnham, & Ben Marsh
New Life

BRIEF

A few members of the Fiasco Design team were given a week away from client work after a particularly busy period to flex their creative muscles and design something entirely for themselves. With the aim of creating something original in the digital space, they set themselves a brief of applying simple web-based technologies and 3D animation to bring a short story to life online.

CLOSE UP

(1) The user is guided through the story following interactive hotspots. These are timed to appear after an animation has finished playing or a snippet of text has been revealed. (2) We were able to set the pace of the storytelling by controlling the speed at which text animates into place and using audio cues, something that we spent quite a long time finessing. We wanted to emulate the use of silence and pauses that you would typically find in spoken word. (3) We used a simple progress bar to show the user how far they are through the story. We had initially intended for this to be interactive but had to strip this functionality out due to the project’s time constraints. (4) Each of the completed animations run as MP4s in the background of the site. (5) We overlaid rain and particle effects using JavaScript. This ensures there is always some form of looping movement on the screen when each of the videos ends.

Client work may be necessary to pay the bills but every now and again you need to do something a bit different to stretch your creative muscles and get a fresh perspective on your work. That’s exactly what award-winning Bristol studio Fiasco Design was aiming for during a “mini creative sabbatical” last year that spread over five working days.

This story is from the {{IssueName}} edition of {{MagazineName}}.

Start your 7-day Magzter GOLD free trial to access thousands of curated premium stories, and 9,000+ magazines and newspapers.

This story is from the {{IssueName}} edition of {{MagazineName}}.

Start your 7-day Magzter GOLD free trial to access thousands of curated premium stories, and 9,000+ magazines and newspapers.

MORE STORIES FROM NETView all
Camille Gribbons
NET

Camille Gribbons

UX designer at Booking.com, Camille Gribbons reveals how she first got into the industry

time-read
7 mins  |
June 2020
THE 5G UI REVOLUTION
NET

THE 5G UI REVOLUTION

Tris Tolliday describes his vision of a web UI catapulted forwards by 5G

time-read
3 mins  |
June 2020
HOW TO SHOWCASE YOUR DEV SKILLS
NET

HOW TO SHOWCASE YOUR DEV SKILLS

Aude Barral shares 5 top tips for landing your dream developer job

time-read
3 mins  |
June 2020
KNIVES OUT
NET

KNIVES OUT

Murder mystery film, Knives Out, grabbed everyone’s attention, and so did the fun website that promoted it. Oblio tells Tom May how it created its innovative 3D navigation

time-read
6 mins  |
June 2020
HOW EMOTIONAL LABOUR HINDERS WOMEN IN TECH
NET

HOW EMOTIONAL LABOUR HINDERS WOMEN IN TECH

Christine Brewis, head of digital marketing at Studio Graphene, discusses how gender parity in tech has changed over the last ten years, and what more can be done

time-read
5 mins  |
June 2020
EDAN KWAN
NET

EDAN KWAN

He swapped life as a singer for a career making eye-popping digital visuals. The Lusion founder chats to Tom May about battling demons, winning awards and where digital advertising is heading

time-read
8 mins  |
June 2020
ANDREW COULDWELL
NET

ANDREW COULDWELL

The Brit in LA discusses his new book on design systems, Laying the Foundations

time-read
3 mins  |
June 2020
Top 5 Tips For Ensuring Web Content Is Accessible For All
NET

Top 5 Tips For Ensuring Web Content Is Accessible For All

Merlyn Meredith outlines five top tips for ensuring web content is accessible for all

time-read
2 mins  |
May 2020
WHAT DOES THE FUTURE HOLD FOR BROWSERS?
NET

WHAT DOES THE FUTURE HOLD FOR BROWSERS?

Nico Turco examines the state of play with browsers, whether developers should encourage diversity or monopoly and how Google fits into it all

time-read
6 mins  |
May 2020
YEARS IN THE MAKING
NET

YEARS IN THE MAKING

Exclusively for net: The latest in a series of anonymous accounts of nightmare clients

time-read
3 mins  |
May 2020