Un site web coloré pour une cause humanitaire
Saffron Kitchen Project est une organisation caritative basée à Athènes qui utilise la cuisine comme outil d'inclusion sociale. Nous avons créé un site web avec un design vibrant et des animations fluides en JavaScript natif.
-
60 FPS
Animations fluides
-
<2s
Temps de chargement
-
100%
Vanilla JavaScript
-
3 piliers
Employ, Nourish, Train
Une plateforme digitale au service de l'inclusion sociale
Saffron Kitchen Project est une organisation caritative enregistrée au Royaume-Uni (numéro 1195986) qui opère à Athènes, en Grèce. L'association utilise la cuisine comme levier d'inclusion sociale, avec trois piliers d'action : créer des opportunités d'emploi pour les réfugiés, distribuer des repas nutritifs aux personnes vulnérables, et offrir des formations culinaires professionnelles certifiées en partenariat avec IEK Delta. Dans un contexte où Athènes accueille une population importante de réfugiés et demandeurs d'asile, le secteur humanitaire joue un rôle crucial dans l'économie sociale de la ville.
Le site web devait refléter l'énergie positive et l'impact transformateur de l'organisation. Les objectifs incluaient la création d'une plateforme permettant de présenter les trois piliers d'action de manière claire, d'engager les visiteurs à travers un storytelling visuel fort, d'encourager les dons et l'engagement communautaire, et de recruter bénévoles et partenaires. Le défi principal consistait à créer une expérience utilisateur dynamique et engageante tout en maintenant d'excellentes performances techniques.
En collaboration avec l'agence Shim Sham, nous avons pris en charge le développement front-end et l'implémentation des animations en JavaScript natif (vanilla JavaScript), sans aucun framework. Cette approche nous a permis de contrôler précisément chaque animation et d'optimiser les performances. Le design adopte une palette de couleurs vibrantes (corail, rose, bleu vif) alignée avec les tendances 2022 des sites d'ONG modernes. Nous avons implémenté les animations en utilisant requestAnimationFrame pour des transitions à 60 images par seconde, avec un accent sur les propriétés transform et opacity pour bénéficier de l'accélération GPU. Le résultat est un site qui charge en moins de 2 secondes tout en offrant une expérience visuelle riche et engageante.
-
01
Performance des animations multiples
Le défi principal consistait à implémenter de nombreuses animations interactives tout en garantissant une fluidité parfaite à 60 FPS. Nous avons utilisé requestAnimationFrame et privilégié les propriétés CSS transform et opacity pour bénéficier de l'accélération GPU.
-
02
Design coloré et accessible
Créer un design vibrant tout en respectant les standards d'accessibilité représentait un équilibre délicat. Nous avons vérifié systématiquement les ratios de contraste, testé la navigation au clavier et ajouté des attributs ARIA pour garantir une expérience inclusive.
-
03
Storytelling visuel et animations au scroll
Nous avons créé des animations déclenchées par le défilement avec des effets de parallaxe et des transitions douces. Les requêtes DOM ont été optimisées pour créer une expérience narrative immersive guidant le visiteur à travers les trois piliers de l'organisation.
Les technologies et outils utilisés
Pour ce projet, nous avons opté pour une stack technique épurée centrée sur JavaScript natif. Cette approche sans framework nous a permis de contrôler précisément chaque aspect des animations et de minimiser le poids du code. Les maquettes ont été réalisées sur Figma, permettant une collaboration étroite avec le client pour valider le design coloré et l'expérience utilisateur avant le développement. L'environnement de développement reposait sur Node.js pour la gestion des dépendances et l'automatisation des tâches de build.
