Le workshop
En une semaine, concevoir une expérience web interactive et puissante visuellement, dont l’identité est construite avec les possibilités du SVG.
Une identité de marque n’est plus un logo figé. Sur le web, elle se recompose selon l’écran, réagit au geste, change d’état. Le workshop propose de la concevoir comme un système : quelques règles, quelques axes de variation, et un dessin qui les traduit en direct dans le navigateur.
Une identité qui se déforme, se recompose et respire.
Un sujet responsable, actuel
Chaque étudiant choisit un sujet ancré dans les enjeux d’aujourd’hui, et construit l’identité web qui le porte.
Le sujet n’est pas un prétexte : c’est lui qui décide de ce qui doit bouger, ce qui doit rester stable, et ce que l’identité doit faire ressentir.
Quelques pistes, à ajuster ou à remplacer :
- L’eau
- La sobriété énergétique
- La biodiversité
- La mobilité douce
- La réparation et le réemploi
- L’alimentation locale
Ressources
Un guide et quatre prototypes à ouvrir, manipuler et décortiquer avant de dessiner.
- Le guideThe Power of SVGToutes les techniques du workshop, démontrées en direct : formes, peinture, texte, masques, filtres, animation.
- Prototype 1Morphing de formesDeux formes extrêmes, une seule interpolation calculée par Flubber.
- Prototype 2Une valeur, une familleUn seul curseur pilote en même temps une forme, une ligne et un point.
- Prototype 3Plusieurs axesDes axes indépendants, sur le principe d’une police variable.
- Prototype 4Axes et familleDes axes réglés par formule, et un axe qui change la structure du dessin.
Ce que SVG permet
SVG est un format texte : net à toute taille, stylable en CSS, scriptable en JavaScript, animable, et calculé en direct par le navigateur.
C’est ce qui en fait un bon matériau pour une identité dynamique et responsive. Le petit laboratoire ci-dessous en donne un aperçu : un écosystème graphique autour de l’eau, où chaque élément réagit aux mêmes règles.
Réglages
Trois règles pilotent tout l’écosystème en même temps.
Sous 30 %, les lignes du motif se mettent en pointillés : la ressource se raréfie.
Écosystème « L’eau »
Un signe, un logotype, un motif et des pictogrammes, dessinés par les mêmes règles.
Techniques utilisées : clipPath (y compris un texte qui sert de masque), tracés calculés en JavaScript, stroke-dasharray et variables CSS. La grille se recompose selon la largeur de l’écran.
-
Une identité qui varie
Une seule valeur peut piloter une famille de formes, ou plusieurs axes indépendants, comme une police variable.
Flubber, formules paramétriques, prototypes 2, 3 et 4 du guide.
-
Une identité responsive
Le dessin s’adapte à son cadre, suit le thème clair ou sombre, garde des traits d’épaisseur constante.
viewBox, preserveAspectRatio, currentColor, vector-effect, variables CSS.
-
Une matière
Bruit, relief, éclairage, flou, effet goo, bichromie : des textures sans une seule image bitmap.
feTurbulence, feDiffuseLighting, feGaussianBlur, feColorMatrix, feMorphology.
-
Une interaction
Le curseur révèle, déforme ou éclaire. Un masque devient une lampe torche, un texte suit une courbe.
mask, clipPath, textPath, pointer events, stroke-dashoffset.
-
Un mouvement
Le mouvement se déclare dans le dessin ou se pilote en JavaScript, selon qu’il doit réagir à l’utilisateur.
SMIL, animations CSS, JavaScript, GSAP.
Ce qui est attendu
- Une expérience web interactive
- Une page ou un petit site qui se manipule, pas une maquette à regarder. Puissante visuellement, elle donne envie de rester.
- Une identité dynamique
- Un système visuel qui varie selon des règles claires : axes, états, réactions au geste.
- Une identité responsive
- Elle se recompose selon la taille de l’écran plutôt que de simplement se réduire.
- Un usage assumé du SVG
- Le SVG n’est pas un format d’export, c’est le matériau de l’identité : formes, filtres, masques, animation.
- Un sujet responsable et actuel
- Choisi par chaque étudiant, il donne sa raison d’être à l’identité.
Planning
Huit séances, soit 20 heures, réparties sur quatre jours.
- Lundi 28 septembre10h–13h et 14h–16h5 h
- Mardi 29 septembre10h–13h et 14h–16h10 h
- Mercredi 30 septembre10h–13h et 14h–16h15 h
- Vendredi 2 octobre10h–13h et 14h–16h20 h
La colonne de droite indique le total d’heures cumulées.
Molinel, salle Zèbre.
Une identité graphique est un système vivant.