The idea for this website came from one of my visits to the Art Gallery of Ontario. When I saw the exhibition I fell in love instantly and I thought: I must create a memorial for this amazing artist, to show the world what awesome skills human beings have, and to inspire them in the same way I was at that moment.
Käthe's artwork is unbelievable, her paintings tell the story of the concept behind the drawing and transmit an extremely realistic atmosphere of the person, scene or object contained in art. The most impressive things are the rich details that you can notice in the paintings.
The core of the website is Käthe's artwork and her story, so I decided to use a timeline, which is the most conventional way to build this kind of storytelling. My goal was not just to tell the artist's story, but to create a mix using the texts and her artwork synchronously, providing the user with an experience to follow her artwork alongside her life journey.
For me, it was essential to produce a website with rich detail to match Käthe's drawing method. This kind of website (storytelling) could be considered boring, so I spent a good deal of time polishing the details and building micro-interactions with rich visual details, and avoided using too much text.
The highlight of this project is the draw section and the shape of the stroke achieved, which gives the user an opportunity to draw with the same style used by Kathe in her paintings.
The Process & Challenges
As mentioned above, the biggest challenge was replicating “Käthe's painting shape style” for the drawing section, and making sure that the user would get a similar experience when they were drawing. This feature was important for the website, in an attempt to give the user the feeling and sensation of being an artist - and at the end of everything, the user would be able to download their experience/drawing and keep it.
If I could change or add something, I would explore in greater detail the paintings and sculptures made by Käthe. I tried not to use images on a large scale (very big) in order not to harm the website's loading and the smooth scroll provided for the website - ast unfortunately, Google Lighthouse was already complaining about the number of elements contained in the same page.
This website was a great learning experience, especially about Canvas and Animation on the scroll.”
The navigation was created by providing chapters of Käthe's life, at the beginning I was inclined to make pagination in the website, but the goal of this website was not to make the user spend a long time on it, but to make sure that they followed the artist’s life entirely and played around with the Draw Section.
To represent the different chapters I decided to use the ink effect, one of my favorite effects which I believe perfectly matches the story atmosphere.
TechnologyThe stack for this website, I used these languages:
- PugJS (php / html / transpiler)
- Sass (css / transpiler)
Before we finish I would like to highlight the animation at the beginning of the website. In the background of the preloader it is possible to very subtly see the lines drawing the word “Käthe”, I achieved this effect using Pearl Sequence and Canvas.
Victor Costa is an internationally Awarded Front End Developer, who is completely in love with technologic interaction.