Séance 1a - Exploration et inspiration

Vue d’ensemble

Durée : 2 à 2.5 heures
Objectif : Ouvrir les possibles, découvrir les territoires créatifs, donner l’eau à la bouche

Timing de la séance

• 30 min : Ouverture provocante
• 60-70 min : Panorama de la création web (8 domaines)
• 15 min : Les 5 territoires du cours (synthèse)
• 15 min : Mission d’exploration

---

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

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

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)

• 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 (60-70 min)

“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

Pour chaque domaine (environ 7-8 min) :

1. Présentation rapide du concept (1 min)
2. Projection/test d’1-2 exemples marquants (5 min)
3. Questions rapides : Qu’est-ce qui fonctionne ? Pourquoi c’est inspirant ? (1-2 min)

---

1. Web documentaires et scrollytelling

Le concept : Raconter des histoires vraies en utilisant le scroll comme outil narratif.

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

Le concept : Le spectateur devient acteur de la musique et de l’image.

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

Le concept : Transformer des données en récits visuels et émotionnels.

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

Le concept : Le web comme galerie et comme medium artistique.

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

Every Icon (1997) - John F. Simon Jr.

• Œuvre conceptuelle : générer toutes les icônes 32×32 possibles
• Prendra plusieurs trillions d’années
• Pionnier du net art

---

5. Fictions interactives et ARG

Le concept : Récits où vos choix changent l’histoire, parfois dans le monde réel.

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

The Dark Knight ARG (2007)

• Chasse au trésor mondiale pour promouvoir le film
• Téléphones, pizzerias, sites web, événements réels
• Des millions de participants

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)

Le concept : Plonger dans des environnements 3D accessibles depuis le navigateur.

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

A-Frame experiments

• WebVR accessible sans casque
• Créer des mondes 3D avec du HTML
• Voir le framework

---

7. Jeux narratifs expérimentaux

Le concept : Jeux où le gameplay sert la narration, pas l’inverse.

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

Le concept : Le numérique au service d’expériences physiques et spatiales.

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

---

Partie 3 : Les 5 territoires du cours (15 min)

“Vous venez de voir la richesse du web créatif. Ce cours se concentre sur 5 territoires qui vous permettront d’explorer ces possibilités de manière structurée. Mais rappelez-vous : les frontières sont poreuses, votre projet peut mélanger plusieurs territoires.”

Les 5 territoires

1. Expériences muséales/spatiales
   Le numérique enrichit des lieux physiques (géolocalisation, QR codes, audio spatial)

2. Jeux de société hybrides
   Applications compagnons qui assistent l’expérience de jeu sans la dominer

3. Expériences de lecture augmentées
   Narrations non-linéaires, hypertexte, scrollytelling, fictions à embranchements

4. Interfaces expérimentales/ludiques
   Réinventer les gestes et interactions, détournement d’UI, expériences surprenantes

5. Outils créatifs et générateurs
   Instruments numériques, génération procédurale, outils qui deviennent créatifs

→ Chaque territoire a sa page dédiée avec exemples détaillés et analyses.

---

Partie 4 : Synthèse et mission d’exploration (15 min)

Synthèse des territoires

Questions à poser aux étudiants :

• Quel territoire vous parle le plus ?
• Pourquoi ?
• Premières idées qui émergent ?
• Voyez-vous des ponts entre plusieurs territoires ?

Grille d’analyse des œuvres

Pour chaque œuvre que vous explorerez, posez-vous :

1. Forme d’interactivité (voir ressource)

   • Machine, Sociale, ou Contributive ?

2. Rôle du public (voir ressource)

   • Fantôme, Personnage, Divinité, ou Lui-même ?

3. Structure narrative (voir ressource)

   • Linéaire, Élastique, Concentrique, Parallèle, Embranchements, ou Constellation ?

---

Mission d’exploration pour la semaine

1. Explorer largement la création web (obligatoire)

Phase 1 : Exploration libre (3-5 œuvres)

Explorez la création web sans vous limiter aux 5 territoires du cours. Trouvez 3 à 5 exemples qui vous inspirent parmi les 8 domaines vus en cours ou ailleurs :

• Web documentaires et scrollytelling
• Clips musicaux interactifs
• Data storytelling
• Art numérique et net art
• Fictions interactives et ARG
• Expériences immersives (VR/AR)
• Jeux narratifs expérimentaux
• Installations et expériences hybrides
• Ou tout autre domaine créatif web que vous découvrez

Phase 2 : Focus sur les 5 territoires (2-3 œuvres)

Après cette exploration large, identifiez quel(s) territoire(s) du cours vous attire(nt) et trouvez 2-3 exemples supplémentaires dans ce(s) territoire(s).

Pour chaque exemple, notez dans votre carnet :

• Nom et lien/référence
• Description rapide de l’expérience
• À quel domaine/territoire ça appartient
• Ce qui fonctionne / ne fonctionne pas
• Forme d’interactivité, rôle du public, structure narrative
• Une capture d’écran ou photo
• Pourquoi ça vous inspire

Où chercher ?

• Galerie complète (120+ œuvres)
• Awwwards - sites créatifs primés
• Codrops - expérimentations web
• The Pudding - data storytelling
• neal.fun - expériences ludiques
• Incredibox - outil créatif musical
• Itch.io - jeux indépendants narratifs
• Chrome Experiments - expérimentations web

2. Commencer le carnet de recherche

Format libre (Notion, Google Docs, carnet papier scanné…) :

• Œuvres explorées (avec analyse)
• Réflexions personnelles
• Idées qui émergent
• Questions techniques
• Inspirations visuelles

3. Lectures recommandées (optionnel)

• Les 3 formes d’interactivité - Machine, Sociale, Contributive
• Le rôle du public dans le récit - Fantôme, Personnage, Divinité, Lui-même
• Structures narratives interactives - Les 6 architectures de récit

---

Ressources complémentaires

Collections d’inspiration

• Galerie complète - 85+ œuvres analysées
• Ressources pédagogiques - Tutoriels et outils

Théorie

• Formes d’interactivité
• Rôle du public
• Structures narratives