Panorama du web créatif
Vue d’ensemble
Section titled “Vue d’ensemble”Objectif : Ouvrir les possibles, découvrir les territoires créatifs, donner l’eau à la bouche
Partie 1 : Ouverture provocante
Section titled “Partie 1 : Ouverture provocante”“Le web n’est pas juste pour des sites corporate. C’est un espace de création unique qui combine texte, image, son, interactivité, temporalité. Vous allez explorer ce potentiel et créer des expériences que personne n’a jamais vues.”
Remise en question
Section titled “Remise en question”Ce que ce cours N’EST PAS :
- Un cours de syntaxe JavaScript ligne par ligne
- Un cours où je dicte du code au tableau
- Un cours où l’IA est interdite
- Un cours centré uniquement sur la technique
Ce que ce cours EST :
- Un laboratoire créatif avec contraintes techniques
- Un accompagnement pour réaliser vos visions créatives
- Une exploration du web comme medium
- Un cours où l’IA est un outil parmi d’autres
Votre bagage créatif
Section titled “Votre bagage créatif”Vous maîtrisez déjà :
- VFX et compositing (Nuke, After Effects) → vous comprenez le flux d’images
- 3D (Blender, Maya, Houdini) → vous comprenez la génération procédurale
- Motion design → vous comprenez le timing et l’animation
Le web est simplement un nouveau medium avec ses propres possibilités.
Questions ouvertes (discussion)
Section titled “Questions ouvertes (discussion)”- Qu’est-ce qu’un site web pour vous ?
- Quelles expériences web vous ont marqué ?
- Qu’est-ce que le web peut faire que le cinéma/la 3D ne peuvent pas ?
Partie 2 : Panorama de la création web
Section titled “Partie 2 : Panorama de la création web”“Avant de parler des 5 territoires du cours, explorons ensemble la richesse du web créatif. Bien au-delà des sites corporate, le web est un espace de création artistique, narrative et expérimentale.”
Format
Section titled “Format”Pour chaque domaine :
- Présentation rapide du concept
- Projection/test d’1-2 exemples marquants
- Questions rapides : Qu’est-ce qui fonctionne ? Pourquoi c’est inspirant ?
1. Web documentaires et scrollytelling
Section titled “1. Web documentaires et scrollytelling”Le concept : Raconter des histoires vraies en utilisant le scroll comme outil narratif.
Exemples marquants
Section titled “Exemples marquants”Snow Fall (NYT, 2012) - L’avalanche qui a changé le web journalisme
- Texte, photos, vidéos, animations 3D synchronisées au scroll
- Pionnier du “scrollytelling”
- Voir dans la galerie
The Boat (2015) - Le voyage d’un réfugié vietnamien
- Roman graphique animé avec son spatial
- Le scroll contrôle le rythme de découverte
- Voir dans la galerie
Do Not Track (2015) - Série sur la surveillance numérique
- Documentaire personnalisé (utilise VOS données)
- Interactivité qui sert le propos
- Voir dans la galerie
2. Clips musicaux interactifs
Section titled “2. Clips musicaux interactifs”Le concept : Le spectateur devient acteur de la musique et de l’image.
Exemples marquants
Section titled “Exemples marquants”The Wilderness Downtown (Arcade Fire, 2010)
- Utilise Google Street View de VOTRE quartier d’enfance
- Fenêtres multiples synchronisées à la musique
- Voir dans la galerie
Like a Rolling Stone (Bob Dylan, 2013)
- Zapping TV interactif : chaque chaîne chante la chanson
- 16 canaux vidéo synchronisés
- Voir dans la galerie
The Johnny Cash Project (2010)
- Clip collaboratif : dessinez une frame
- Des milliers de personnes ont contribué
- Voir dans la galerie
3. Data storytelling et visualisations narratives
Section titled “3. Data storytelling et visualisations narratives”Le concept : Transformer des données en récits visuels et émotionnels.
Exemples marquants
Section titled “Exemples marquants”The Fallen of WWII (2015)
- Visualisation de l’échelle de la guerre
- Animation + narration audio
- Voir dans la galerie
The Pudding - Analyses culturelles visuelles
- “The Office” dialogue analysis, Hip-Hop vocabulary…
- Données rendues accessibles et narratives
- Voir le site
Out of Sight, Out of Mind (2013)
- Frappes de drones américains visualisées
- Le scroll comme passage du temps
- Voir dans la galerie
4. Art numérique et net art
Section titled “4. Art numérique et net art”Le concept : Le web comme galerie et comme medium artistique.
Exemples marquants
Section titled “Exemples marquants”Patatap (2014) - Instrument visuel et sonore
- Chaque touche = son + animation
- Exploration pure du geste
- Voir dans la galerie
Silk (2010) - Générateur de motifs symétriques
- Dessin génératif hypnotique
- Outil simple, résultats complexes
- Voir dans la galerie
5. Fictions interactives et ARG
Section titled “5. Fictions interactives et ARG”Le concept : Récits où vos choix changent l’histoire, parfois dans le monde réel.
Exemples marquants
Section titled “Exemples marquants”Bandersnatch (Black Mirror, 2018)
- Film Netflix à embranchements
- Méta-narration (le personnage sait qu’il est contrôlé)
- Voir dans la galerie
Her Story (2015)
- Jeu d’enquête par recherche de vidéos
- Reconstituez l’histoire dans le désordre
- Voir dans la galerie
We or Die (Simon Bouisson)
- Fiction narrative interactive
- Mélange vidéo et interactivité web
- Voir le projet
FPS Chatroulette
- Expérience interactive entre jeu et performance sociale
- Jouer à un FPS avec des inconnus via webcam
- Voir des exemples
6. Expériences immersives (VR/AR web)
Section titled “6. Expériences immersives (VR/AR web)”Le concept : Plonger dans des environnements 3D accessibles depuis le navigateur.
Exemples marquants
Section titled “Exemples marquants”Notes on Blindness VR (2016)
- Expérience de la cécité en VR
- Le son comme seule perception spatiale
- Voir dans la galerie
Bear 71 (2012)
- Documentaire immersif sur un ours suivi par GPS
- Multi-écrans, webcams, données réelles
- Voir dans la galerie
7. Jeux narratifs expérimentaux
Section titled “7. Jeux narratifs expérimentaux”Le concept : Jeux où le gameplay sert la narration, pas l’inverse.
Exemples marquants
Section titled “Exemples marquants”Papers, Please (2013)
- Jeu politique sur l’immigration
- Vous êtes agent de contrôle frontalier
- Mécaniques répétitives qui créent l’empathie
Life is Strange (2015)
- Narration à embranchements émotionnels
- Pouvoir de rembobiner le temps
- Vos choix ont des conséquences
Device 6 (2013)
- Roman typographique interactif
- Le texte dessine le chemin du personnage
- Voir dans la galerie
8. Installations et expériences hybrides
Section titled “8. Installations et expériences hybrides”Le concept : Le numérique au service d’expériences physiques et spatiales.
Exemples marquants
Section titled “Exemples marquants”Insurrection 1944
- Parcours narratif géolocalisé dans Varsovie
- Audio spatial déclenché par votre position
- Voir dans la galerie
Small Bang Cinemacity
- Balade cinéma dans Paris
- QR codes narratifs sur les lieux de tournage
- Voir dans la galerie
Projections interactives
- Façades de bâtiments qui réagissent aux passants
- Installation muséales connectées
- Événements hybrides physique/numérique
Suite : Les 5 territoires et mission
Section titled “Suite : Les 5 territoires et mission”→ Voir la mission d’exploration complète
Les parties suivantes (territoires du cours et mission d’exploration) ont été déplacées vers un document séparé pour alléger cette séance.
Cette page se concentre uniquement sur la découverte des 8 domaines créatifs du web.