Responses by Glenn Catteeuw, UI and motion designer.

Background: Every year around Christmas, leading Belgian newspaper De Morgen releases an overview of the most important articles it published throughout the year. This year, the newspaper decided to create an online experience that gives visitors an interactive overview fit for 2020: one of the most chaotic years of our lives. The goal of the site was to attract new readers and subscribers by triggering their curiosity with an interactive, kaleidoscopic chaos that users could play around with.

Larger picture: In the past, De Morgen has positioned itself as the bringer of clarity in the unclear and chaotic times in which we currently live—hence its baseline: clarity. The online experience follows the concept of its ongoing advertising campaigns.

Design core: 2020 | De Morgen is a responsive website with twelve interactive kaleidoscopic scenes: one for each month of 2020, built with elements that represent that month’s most important new items. Users can interact and play around with the kaleidoscopes as well as discover the news articles that relate to each visual element within.

Challenges: We had a very tight deadline—four weeks from concept to site launch. Because of this, we were obligated to start the development of the interactive kaleidoscope simultaneously with the design of the interface. It wasn’t the normal project flow we’re accustomed to, but to see it all come together after a few weeks definitely put a smile on our faces.

Navigation structure: We wanted users to easily navigate through all the months, so we settled on a classic carousel that stands in contrast to the experimental layout. To push this project to the next level, however, we also added a chronological list of the months where you could see a quick preview of the moving kaleidoscope by hovering on each month.

Another important goal was for users to easily find the underlying articles of each month, which would lead them to the main site of De Morgen. We came up with a news ticker using the same images used in the kaleidoscope. Next to that, we also made the whole kaleidoscope clickable to get users to discover the most important news of 2020.

Technology: The application is built on a custom JavaScript structure with three.js for WebGL, GSAP for animations and Highway for page transitions. The kaleidoscope effect was achieved with a custom post-processing shader to ensure the quality of the images while being performant. Because the content was fixed, there was no need for a CMS, so we decided to generate a static site with a custom Node.js script.