Catégories
Astuces et Design

Étude de cas: Käthe Kollwitz

L'idée de ce site Web est venue d'une de mes visites au Musée des beaux-arts de l'Ontario. Quand j'ai vu l'exposition, je suis tombé amoureux instantanément et j'ai pensé: je dois créer un mémorial pour cet artiste incroyable, montrer au monde les compétences incroyables des êtres humains et les inspirer de la même manière que j'étais à ce moment-là.

L'œuvre de Käthe est incroyable, ses peintures racontent l'histoire du concept derrière le dessin et transmettent une atmosphère extrêmement réaliste de la personne, de la scène ou de l'objet contenu dans l'art. Les choses les plus impressionnantes sont les détails riches que vous pouvez remarquer dans les peintures.

Mécanisme de narration:

Le cœur du site est l'œuvre d'art de Käthe et son histoire, j'ai donc décidé d'utiliser une chronologie, qui est la manière la plus conventionnelle de créer ce type de narration. Mon objectif n'était pas seulement de raconter l'histoire de l'artiste, mais de créer un mélange en utilisant les textes et ses œuvres de manière synchrone, offrant à l'utilisateur une expérience pour suivre son œuvre le long de son parcours de vie.

Kathe Kollwitz
Kathe Kollwitz: Chronologie

Pour moi, il était essentiel de produire un site Web riche en détails pour correspondre à la méthode de dessin de Käthe. Ce type de site Web (storytelling) pouvait être considéré comme ennuyeux, j'ai donc passé beaucoup de temps à peaufiner les détails et à créer des micro-interactions avec des détails visuels riches, et j'ai évité d'utiliser trop de texte.

Interactions avec le curseur / DrawSvg / États de survol

Le point culminant de ce projet est la section de dessin et la forme du trait obtenu, qui donne à l'utilisateur la possibilité de dessiner avec le même style utilisé par Kathe dans ses peintures.

Le processus et les défis

Comme mentionné ci-dessus, le plus grand défi était de reproduire le «style de forme de peinture de Käthe» pour la section de dessin, et de s'assurer que l'utilisateur obtiendrait une expérience similaire lorsqu'il dessinait. Cette fonctionnalité était importante pour le site Web, dans le but de donner à l'utilisateur le sentiment et la sensation d'être un artiste – et à la fin de tout, l'utilisateur pourrait télécharger son expérience / dessin et le conserver.

Aire de jeu du site Web / interaction de dessin.

Si je pouvais changer ou ajouter quelque chose, j'explorerais plus en détail les peintures et sculptures réalisées par Käthe. J'ai essayé de ne pas utiliser d'images à grande échelle (très grande) pour ne pas nuire au chargement du site Web et au défilement fluide fourni pour le site Web – mais malheureusement, Google Lighthouse se plaignait déjà du nombre d'éléments contenus dans la même page.

Ce site Web a été une excellente expérience d'apprentissage, en particulier sur la toile et l'animation sur le rouleau. »

L'un de mes principaux objectifs, lorsque je développe un site Web, est de mettre en œuvre quelque chose que je n'ai jamais utilisé / utilisé auparavant, afin de continuer à apprendre et à améliorer mes compétences. Ce site Web a été une excellente expérience d'apprentissage, en particulier sur la toile et l'animation sur le rouleau. J'ai choisi d'utiliser les interactions de défilement afin de m'entraîner et d'apprendre à utiliser l'Intersection Observer et à obtenir les travaux de BoundingClientRect (deux technologies récentes dans le Javascript moderne), généralement utilisées pour créer des interactions sur le défilement de l'utilisateur. Les deux ont été extrêmement utiles dans le projet, que vous pouvez jouer avec quelques animations basées sur le défilement.

Animations basées sur le défilement.

Système de navigation

La navigation a été créée en fournissant des chapitres de la vie de Käthe, au début j'étais enclin à faire une pagination dans le site Web, mais le but de ce site Web n'était pas de faire passer longtemps l'utilisateur dessus, mais de m'assurer qu'il suivait la vie de l'artiste entièrement et joué avec la section Draw.

Navigation dans les menus en plein écran.

Pour représenter les différents chapitres, j'ai décidé d'utiliser l'effet d'encre, un de mes effets préférés qui, je crois, correspond parfaitement à l'ambiance de l'histoire.

Transition d'arrière-plan entre les chapitres.

La technologie

La pile pour ce site Web, j'ai utilisé ces langues:

  • PugJS (php / html / transpilateur)
  • Sass (css / transpilateur)
  • ES6 avec Babel.JS (javascript / transpiler)
  • Toile

Bibliothèques:

CMS / Backend:

Avant de terminer, je voudrais souligner l'animation au début du site Web. Dans le fond du préchargeur, il est possible de voir très subtilement les lignes dessinant le mot «Käthe», j'ai obtenu cet effet en utilisant Pearl Sequence et Canvas.

Contexte du préchargeur.

Crédits

Victor Costa est un développeur front-end récompensé internationalement, qui est complètement amoureux de l'interaction technologique.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *