Loading ...

Responses by Max Pinas, creative director, Dept.

Background: The website is part of a bigger campaign that celebrates the 150th birthday of the luxury department store Bijenkorf. The campaign consists of the introduction of exclusive anniversary products, amazing shop windows, incredible experiences and a website that serves as its digital exposition. The site compels visitors with illustrations, motion and sound clips that show Bijenkorf through the decades.

In just four weeks, we created a mobile and desktop experience that captures the imagination. The 150-year campaign does not only bring entertaining and beautiful history to the forefront, but Bijenkorf is also selling 150 exclusive items in stores and online. A selection of the items is featured on the website: visitors can see the items in their historical context and click through to the product page in the Bijenkorf shop.

Favorite details: For a month, creatives and developers worked together to achieve an amazing result. The synergy between the various specialists can be felt on the website: a digital experience with a wow factor that surprises the user with innovative motion design.

The illustrations are an important aspect of the website—of which we are very proud. We gave a lot of attention to ensure the perfect interpretation of the animations. The timeline is divided into sections by time period you can scroll through. Each period has unique content: videos, radio clips and text, for example. Additionally, we were able to gather many interesting visual and audio fragments from Bijenkorf itself as well as third parties, which once again shows the cooperative support of all people involved.

Challenges: Just that we set out to make something that felt different from most other websites. We really wanted you to experience the different facets of the iconic Bijenkorf brand, and how it is embedded in Dutch history and modern pop culture. We found that we needed much more than a couple of stale paragraphs of text to communicate its different aspects.

Technology: As the illustrations were such an important part of the website, we devoted a lot of time to perfecting the display of the animations. They were made in After Effects and rendered in the animation library Lottie with support of the Bodymovin plug-in that exports the animations from After Effects into JSON data. When you’re all the way at the end of a time period, the next will be loaded in and automatically plays the Lottie animations while users scroll to the first piece of text. These page transitions were made with barba.js, and scrolling the timeline was made possible with the help of GreenSock.

Furthermore, we used vanilla JavaScript with some small CSS surprises: for example, a custom cursor and a color-changing logo when a video appears on the screen—thanks to the mix-blend-mode. Although the illustrations are animated, the content itself is static and the website has no CMS. It took a lot of redactional work to make all the text fit into the site’s design as much as possible.

debijenkorf150jaar.nl

Browse Projects

Click on an image to view more from each project
X

With a free Commarts account, you can enjoy 50% more free content
Create an Account
Get a subscription and have unlimited access
Subscribe
Already a subscriber or have a Commarts account?
Sign In
X

Get a subscription and have unlimited access
Subscribe
Already a subscriber?
Sign In