16: DIGITAL DESIGN (Micro-site)
Statskogmillionen - Statskog
|Title of Entry:||Statskogmillionen|
|Entrant Company:||Try Apt AS|
|Creative Agency:||Try Apt AS|
|Live site URL:||https://www.statskog.no/statskogmillionen/|
|Sector:||PUBLIC & SOCIAL|
|Account Manager:||Kaare Øystein Trædal|
|Date of Release:||2019-12-01|
|Digital Producer:||Andreas Roel Vevle|
|Notes:||Statskog is a Norwegian state-owned enterprise responsible for the management of state-owned forest and mountain real estate totaling approximately 20% of the area of Norway. Statskogmillionen annually provides funding towards various small funded projects around the country. The initiative was established several years ago and prior to the distribution in 2019, Statskog wished to make the information available about the funds already released.
With this assignment, we wanted to create a transparent communication that motivates people and organisations to apply. We also wanted to show what the funds were used, and create a platform where the recipients could share their projects with others. We developed a website where recipients can easily share pictures of their projects with others. And if the recipient don’t submit an image, the site displays a generic illustration with the same theme as the project. In total we made ten animated illustrations.
Using WebGL technology, we created a simple Norwegian map where the audience can easily explore and click on all projects, as well as navigating through list view and search. The inspiration for the visuals comes from old style map presentations and topography. At the same time, we wanted to create a mood that honored the visual theme of outdoor activities in nature. The simplistic design and monochromatic colour palette is a continuation of this together with the animation of roots that grow into a small sphere—a project that symbolizes growth and contributes to experiences and an appreciation of nature.
Each project has its own presentation with the opportunity to share photos. For the projects not yet provided with photos, we created a set of illustrations influenced by classic flora and fauna illustrations in ink. Then we took inspiration from cinemagraph and animated unique parts of each illustration, making it seem you’re captured a moment.
The site is powered by Craft CMS using a React.js frontend to handle navigation and UIs. For the main visual, the stylized map, we’re using three.js to render the graphics and map markers. We decided on using WebGL for a couple of reasons. We wanted to incorporate particle effects in the intro animation, and we didn’t want to worry about the performance impact of an ever growing amount of markers.
|Designer:||Malin Elisabeth Lindberg|
|UX Designer:||Malin Elisabeth Lindberg|
|Art Director:||Malin Elisabeth Lindberg|
|Other Credits:||Illustrator - Syver Lauritzen|