Céline ZiwèsBrut de PommePlatane
Céline Ziwès, un univers dessiné, un site qui lui donne vie.
À Rennes, Céline Ziwès dessine en direct pendant les conférences, traduit les idées en images et porte ses dessins sur scène. Brut de Pomme a imaginé l’univers de son nouveau site, en papiers découpés. Nous l’avons développé en écrivant chaque animation à la main, nous l’hébergeons en France et nous avons réalisé le film qui a annoncé sa mise en ligne.
- 9
- pages, du dessin en direct à l’atelier Rosir
- 0
- bibliothèque d’animation : chaque mouvement est écrit à la main
- 3D
- pour le cheval rouge, chargé seulement sur grand écran
- 28 s
- de film pour annoncer le lancement sur les réseaux
01 / L’univers
Le dessinest un langage. Céline le parle en conférence, sur scène et dans ses livres.
Formée en sciences politiques, installée à Rennes depuis vingt-cinq ans, Céline Ziwès est dessinatrice, autrice et facilitatrice graphique. Elle intervient en Bretagne, dans le grand Ouest et partout en France, pour l’ADEME, Amnesty International, l’INRAE ou Brest métropole.
01 / Le trait
Dessiner.
Donner forme aux idées.
Facilitation graphique · Illustration
Voir la facilitation graphique02 / Le récit
Raconter.
Des histoires qui résonnent.
Livres · Conférences dessinées
Voir les publications03 / La rencontre
Créer du lien.
Sur scène et en atelier.
Ateliers · Performances · Partage
Voir les performances
02 / Le besoin
Un sitequi bouge comme ses dessins, et qu’elle tient à jour sans nous.
On doit pouvoir s’y promener comme dans son atelier, puis lui écrire. Il fallait garder chaque détail de la maquette sans alourdir les pages, et laisser Céline publier ses dates et ses actualités elle-même.
1.
Un univers en papier découpé
Mains en trame, papiers scotchés, formes au crayon, papier froissé : la maquette de Brut de Pomme en met sur chaque page, et presque tout bouge.
Nous avons placé chaque pièce au pixel près et écrit chaque mouvement à la main, sans bibliothèque d’animation.
2.
Des spectacles en tournée
« Le fracas n’existe pas », « Wondermama » : les représentations s’ajoutent au fil de la tournée, et une date passée ne doit pas rester affichée.
Céline saisit ses dates dans l’administration. Une date passée quitte le site d’elle-même le lendemain.
3.
Une actualité qui vit sur Instagram
Céline partage ses dessins et ses rendez-vous sur Instagram, depuis deux comptes. Les recopier sur le site ferait une tâche de plus.
Chaque nuit, le site reprend ses dernières publications Instagram dans « Les actus ».
03 / À essayer
Approchezla souris : le site de Céline répond à vos gestes.
Deux détails repris de celineziwes.com, avec ses images et ses réglages. Les liens mènent au vrai site.
Une navigation sans mots.
Six formes au crayon mènent aux six rubriques. Quand la souris approche, la forme se replie et son nom apparaît, d’autant plus net que le pointeur est proche. Sur téléphone, un menu reprend les formes avec leur nom.
En un coup d’oeil :
Un œil qui vous suit.
Au-dessus du collage de ses clients, le o de « coup d’oeil » est un œil dessiné. Il cligne, regarde tour à tour les papiers que le vent soulève, puis suit la souris dès qu’elle entre dans la section. Ici, il vous suit dans tout ce chapitre.
04 / Le film de lancement
Ça bouge par ici :28 secondes pour annoncer le nouveau site.
Pour la mise en ligne, fin septembre 2026, nous avons aussi réalisé le film d’annonce, au format 4:5 des fils LinkedIn et Instagram. Il reprend les couleurs, les polices et les images du site, et montre sa vraie page d’accueil.
Le film enchaîne six tableaux en papiers découpés : « Il y a du nouveau… Ça bouge par ici. », avec une main qui brandit un mégaphone ; « Dessiner. Donner forme aux idées. » ; « Raconter. Des histoires qui résonnent. » ; « Créer du lien. » ; « Tout un univers. À portée de clic. », où la page d’accueil du site défile dans un navigateur ; enfin « Entrez dans le dessin. Le nouveau site est en ligne : celineziwes.com ». La vidéo est accompagnée de musique, sans paroles.
Le film est écrit en code, avec Remotion : changer un texte, une couleur ou l’ordre des tableaux ne demande pas de reprendre le montage à la main.
05 / De la maquette au site
Brut de Pommea dessiné l’univers. Nous l’avons fait bouger, à la main.
Nous sommes partis des maquettes et des images du studio. Les mouvements sont écrits en CSS et en TypeScript, sans bibliothèque d’animation : rien de superflu à télécharger, et tout s’arrête si le visiteur a demandé à réduire les animations.
Un mégaphone qui s’agite
Sur l’accueil et la page des conférences, la main au mégaphone s’agite en pivotant au poignet, comme celle-ci.
« Une véritable magicienne »
ANFH Bretagne
Des papiers soulevés par le vent
Dans le collage de ses clients, un coup de vent soulève un papier à la fois sur son scotch. Dessous : un morceau de fresque ou le début d’un avis. Passez dessus : le papier reste levé.
Des traits qui s’écartent
Au survol d’une photo, l’anneau, le zigzag et la vague au crayon s’écartent, la photo pivote et laisse place à une autre. Passez sur l’affiche du spectacle.
Un cheval en 3D, seulement s’il le faut
Sur grand écran, le cheval rouge de l’accueil est un modèle 3D : la lumière tourne autour de lui quand la page défile. Ailleurs, ou si le visiteur économise ses données, une photo le remplace. Les 2 Mo du moteur 3D et du modèle ne sont chargés que s’ils servent.
Et le site reste léger.
Le CSS est déjà là
Le style tient dans la page : aucune feuille à attendre avant le premier affichage.
Le JavaScript à la demande
La page arrive complète. Le script d’une section ne se charge qu’à son approche.
Des images à la bonne taille
AVIF ou WebP, en quatre largeurs, avec un aperçu flou le temps du chargement.
Lisible dans tous les cas
Le contenu s’affiche sans script, et chaque animation s’arrête si le visiteur le demande.
06 / Les technologies
Hébergéen France, et suivi par nos soins.
Le site, son administration et sa base de données sont hébergés chez Scaleway, à Paris, avec une sauvegarde chaque nuit. Un CDN européen sert les pages au plus près des visiteurs. L’audience se mesure avec Umami, installé sur nos serveurs, sans bandeau de cookies. Nous appliquons les mises à jour de sécurité ; le reste est fait de logiciels libres.
- Scalewayle site, son administration et sa base de données, à ParisHébergeur français
- Bunnyla diffusion des pages et des imagesCDN européen
- Umamila mesure d’audience, sans cookieAuto-hébergé
- TanStack Startle siteMIT
- Reactl’interface et ses animationsMIT
- Payloadl’administration : dates, actualités, médiasMIT
- PostgreSQLles données, sauvegardées chaque nuitLicence PostgreSQL
- TypeScriptle langage du codeApache-2.0
- Kubernetesla mise en productionApache-2.0
L’équipe
Faisons
connaissance.
Nous sommes développeurs et designers, à Poitiers et à Rennes. Vous échangez directement avec les personnes qui conçoivent vos outils et vous aident à les prendre en main.
Nous nous déplaçons chez vous.
Notre conviction :
Votre savoir-faire, augmenté par l’IA.
Et vous ?Alors, on travaille ensemble ?
En visio, nous vous montrons le site de Céline et son administration, puis nous regardons ensemble ce que votre univers demande.
