Title | KALEIDOSCOPE |
Brand | DE MORGEN NEWSPAPER |
Product/Service | THIS WAS 2020 |
Category |
B01. UX & Journey Design |
Entrant
|
MORTIERBRIGADE Brussels, BELGIUM
|
Idea Creation
|
MORTIERBRIGADE Brussels, BELGIUM
|
Production
|
MORTIERBRIGADE Brussels, BELGIUM
|
Credits
Michiel Baeten |
mortierbrigade |
Copywriter |
Frederic Delouvroy |
mortierbrigade |
Art Director |
Joost / Philippe / Jens Berends / De Ceuster / Mortier |
mortierbrigade |
Creative Directors |
Pieter Nys |
mortierbrigade |
UX Director |
Describe the creative idea
De Morgen Newspaper is all about bringing clarity. In the chaotic times of last year, De Morgen had a lot to clarify. They decided to show the beauty of bringing clarity in chaos. Enter: the kaleidoscope. We visualized the idea of bringing clarity in the chaos by creating an online experience that gives visitors an interactive overview of 2020: the most chaotic year of our lives.
Describe the execution
We launched a responsive website with 12 interactive kaleidoscopic scenes. One for each month, built with elements representing the most important news items for that month. The user could interact and play around with the kaleidoscopes as well as discover the news articles that are related to every element in the kaleidoscope. In total, over 100 articles were integrated in the artwork on the website.
We created an application to craft the kaleidoscopic scenes. The tool lets us define position, rotation, animations and mouse interactions for each individual element in the scene.
The website was built with a Vanilla JS structure combined with WebGL (ThreeJS) for the kaleidoscopes. The general animations and page transitions were built with GSAP & Highway JS.