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.
