Communication Arts webpicks: The Future of Sustainability

The immersive digital version of non-profit Forum for the Future’s annual publication conveys the sustainability challenges our planet faces.

Responses by Hayley Yates, account manager, Tom Morris, partner/head of creative and Nick Lewis, creative technologist, Fiasco Design

Background: We designed this site to provide users with an impactful and shareable digital version of international sustainability non-profit Forum for the Future’s annual thought leadership publication, The Future of Sustainability. The main objective is to effectively convey the serious nature of the challenges to sustainability that our planet currently faces. The publication encourages and inspires people in positions of power to make change, as well as communicate the urgency with which these issues need to be addressed.

Highlights: Forum for the Future deals with research and future projecting on a massive scale. We wanted to find a balance between pushing the boundaries of what browsers are capable of technologically while making this vital content manageable and accessible. So, we went for a minimal design style in a full-screen takeover approach that creates an immersive experience. It is also built as a single-page scrolling site, which creates an uninterrupted reading experience without the need of clicking through chapters.

Challenges: The content section of the site. We had to ensure that the performance was effective across all major browsers, and a lot of time and effort was spent on optimising this section. It’s a particularly innovative approach to a content section, as well as being aesthetically pleasing, lending itself to the futuristic nature of the publication.

Favourite details: The way that the design adapts to the content in each chapter, as this was our way of ensuring that the content makes the needed impact. Given the importance of Forum’s work, we felt a keen responsibility to communicate the urgency behind it, without the design getting in the way. Also, the transparent numbers that mark out the Signals of Change sections; there’s a certain enjoyment knowing that the code is pretty cutting edge and makes them look just right.

Navigational structure: The publication has been written with the intention of users reading it from start to finish, so the navigation only appears when users scroll back up a page on the site, to ensure that the immersive nature of the content and the imagery isn’t interrupted.

Technological features: The site is running on a WordPress back-end, allowing FFTF to have complete control over its content. The front-end uses a mixture of Javascript libraries and custom-built on screen detectors that help animate the site’s chapters. The 3-D scrolling chapter navigation consists of a custom coded module built with CSS3 and Javascript to smoothly animate on scroll, while still being readable on search engines. Site animations are smoothed out further with the use of request Animation Frame.

thefuturescentre.org/fos2019


Warning: Undefined variable $postID in /www/fiascodesign_482/public/wp-content/themes/fd/parts/old-post-content.php on line 58
Gradvice: The Do's and Don'ts When Contacting Design Agencies

3 Mins

Gradvice: The Do’s and Don’ts When Contacting Design AgenciesFollowing on from our first Gradvice piece – Advice from the FD team on how to land your first job – for our second instalment we have collated a useful list of items that we would encourage, and discourage, when contacting design agencies. First up… The Do’s ☺ Find the name of someone appropriate within […]

7 Mins

Gradvice: Advice from the FD team on how to land your first jobIn the first of a three part series, we’ve banged our heads together to come up with – what we hope will be – useful advice for new grads – Gradvice™️ if you will. To kick things off, we’ve collected some sage words of advice from the FD team on landing your first job in […]

New Life 8

5 Mins

New Life: A Week Long Creative Experiment in StorytellingLong term client projects, no matter how enjoyable, can burn out even the most hardy creatives. According to iStock, this is what office burnout looks like: In order to recharge after a busy period last year, a few designers and developers here at Fiasco were handed a week to take time out from client briefs […]

Communication Arts webpicks: Hereford College of Arts

2 Mins

Communication Arts webpicks: Hereford College of ArtsTextured visuals and large-scale photography fold together in Hereford College of Arts’ new site. Responses by Ben Steers, cofounder/creative director, Nick Lewis, creative technologist/web developer and Marjorie Newnham, account executive, Fiasco Design. Background: The purpose of the site is to inspire prospective students (and their parents) by showcasing the stories and the work produced by the Hereford […]

Our CD Ben Steers speaks to Creative Boom about the Fiasco journey and our recent rebrand 4

8 Mins

Our CD Ben Steers speaks to Creative Boom about the Fiasco journey and our recent rebrandGoing freelance is always challenging. It was something many of us did after the global recession 10 years ago. Some out of necessity, as jobs were few and far between. Others because there was so much opportunity to do so. Many of us went on to build successful agencies. One such individual is Ben Steers, […]