Responses by Victor Work.

Background: The idea for this website came from one of my visits to the Art Gallery of Ontario in Toronto, Canada. When I saw its exhibition on Kollwitz’s work, I fell in love instantly and thought: ‘I must create a memorial for this amazing artist.’

Design core: Kollwitz’s artwork and her story. I decided to use a timeline not just for the story but for the pictures, which let the user follow her artwork at the same time as her life journey.

Favorite detail: The draw section and the shape of the stroke I achieved, which reflects the same style used by Kollwitz in her paintings.

Challenges: Actually, as I mentioned above: achieving the same shape style of Kollwitz’s paintings for the draw section and making sure that the user would get a similar experience when drawing. This feature was important for the website to provide visitors with the feeling of being an artist—and at the end of everything, they would be able to download their drawing experience.

New lessons: Making this website was a great learning experience, especially with Canvas and animation on scroll. I chose using scroll interactions in order to practice and learn better about how the Intersection Observer API and getBoundingClientRect work—two recent technologies in JavaScript.

Navigation structure: I created the navigation thinking about how to provide chapters of Kathe’s life. At the beginning, I was inclined to make pagination, but the goal of my website was not bog users down with many pages but make sure that they’re going to learn about the artist’s life and play around with the draw section.

Special navigation features: I built a fullscreen navigation to separate the sections and chapters of the website.

Technology: For the stack of this website, I used these languages: Pug, Sass, ES6 with Babel.js and Canvas. The libraries used are webpack, imagesLoaded.js, and GreenSock and TweenMax for the animation. The back end is built in Wordpress and mySQL.

Anything else? The animation at the beginning of the website. In the background of the preloader, it’s possible to see the very subtle lines drawing the word Käthe. I achieved this effect using PEARL Sequence and Canvas.