Workshop p5.js - contraintes et histoires

À partir d’un assemblage de mots (contraintes) concevoir des interactions avec p5js.

Workshop avec les étudiant.e.s du DNMADe Lycée Hector Guimard (janvier 2022).

L'objectif de ce workshop est d'expérimenter sur la base d'une composition carré, le dessin et l'animation. L'exploration se situe dans l'apprentissage du code et la composition graphique des éléments (couleur, forme, animation, superposition, matière, répétition...).
Pour démarrer ce workshop nous allons tirer des mots-contraintes avec des cartes numériques. Il s'agira de garder 3 mots afin d'imaginer un court scénario d'interaction et/ou d'animation. Je propose de chercher des idées en premier lieu avec des feuilles et des crayons. Ainsi, ces expérimentations serviront de guide pour le code et la suite du travail à l'écran.

Initiation à p5.js

Mouvement = rond + triangle + carré

Workshop avec les étudiant·e·s de 2e année du DNMADE mention graphisme du Lycée André Malraux du 11 au 14 octobre 2021.

L'objectif de ce workshop est d'expérimenter sur la base d'une composition carré, le dessin et l'animation de 3 formes simples : le rond, le triangle et le carré. L'exploration se situe dans l'apprentissage du code et la composition graphique de ces 3 éléments (couleur, forme, animation, interaction, superposition, matière, répétition...).
Pour démarrer le workshop il s'agira de chercher des idées avec des feuilles de papier et des gommettes géométriques. Ainsi, ces expérimentations serviront de guide et de scénarios pour le code et la suite du travail à l'écran.

Workshop avec les étudiant·e·s de 4e et 5e année de l'ESAD de Reims du 23 au 26 mars 2021.

Ce workshop portera sur la création d'interfaces mobile interactives en prenant en compte une approche libre et exploratoire. Il s'agira d'imaginer des expériences esthétiques et sonores dédiée au mobile, à la frontière du web design, du design d'interaction, de la narration et du creative coding.
Dans quel périmètre le designer graphique travaille t-il à la conception d'interfaces mobile ? Quelles sont les possibilités et les outils ? Nous verrons en ouverture du workshop au travers d'une présentation, un ensemble de projets et d'outils qui poseront le cadre du travail graphique et technique.

L'ensemble des projets réalisés par les étudiant·e·s est consultable sur ce site Web : https://interfaces-mobiles-exp.glitch.me/

Affiche interactive avec p5.js

Workshop avec les étudiant·e·s de 4e année de l’atelier de communication graphique de la Haute école des arts du Rhin à Strasbourg du 15 au 17 janvier 2020.

Le but de ce workshop est de concevoir des affiches interactives en prenant comme point de départ le travail autour de la trame et du motif, ainsi que la typographie. L’idée est de placer les étudiant.e.s dans un contexte qui permettra de questionner le rapport au format 
« classique » de l’affiche, au regard des pratiques numériques contemporaines.

Les expérimentations graphiques auront pour objectif le dessin de motifs et la répétition, propre à ma culture du code et du graphisme. Les allers-retours entre les outils permettront une diversité dans les approches : interactivité, animation, typographie, grille, dessin, composition… afin de « jouer » avec des spécificités optiques que la trame et le motif permettent de développer.

Le workshop à abouti à la production d'un ensemble d'interactions et d'animations au format carré avec le logiciel p5.js. Tous les projets ont été regroupé dans une page Web puis vidéo projetée lors de la restitution. Le principe était de reprendre l'idée d'une longue page Web et de la proposer à voir/expérimenter comme une affiche interactive.

Trames et motifs sur/pour le Web

Workshop avec les étudiant·e·s du bachelor design interactif des Gobelins - École de l'image du 15 novembre au 6 décembre 2019.

Cet atelier porte sur le dessin de trames et motifs dans un contexte particulier de rendu final : celui de la page Web. À partir de références qui seront abordées au démarrage de l’atelier, nous verrons que le motif et la trame, dès les débuts du Web, ont servi de support graphique pour des fonds (background) de pages Web. Il sera également question de découvrir d’autres supports qui les utilisent, comme le livre et l’affiche.

Les ressources de ce workshop sont en lignes et consultables à cette adresse : https://www.are.na/nicolas-tilly/trame-et-motif

Page Web du site de la HEAD Genève sur le workshop : https://www.hesge.ch/head/projet/semaine-inaugurale

Photos et vidéo de la restitution des projets :