user's avatar
KO : the Knowledge Orb
KO : the Knowledge Orb
Une histoire interactive web produite en une semaine.
Ce projet présente un bon ensemble de mes compétences :

- écriture scénaristiques
- programmation web
- réalisation d'illustrations
- production d'une bande son
- réalisation d'un projet interactif

Pour résumer, il s'agit d'un symbole de ce que je voudrais faire : créer et montrer des mondes, des imaginaires.
Origines du projet

A mon arrivée à l'UQAT au Canada, notre enseignante en Problématisation et Créativité nous a donné dès le premier cours un projet à réaliser pour le cours d'après, c'est-à-dire une semaine après. La consigne :

"Faites quelque chose"

Le but était de faire ce qu'on voulait, mais aussi ce que l'on pouvait. C'était une manière de se présenter à ses nouveaux camarade de classe mais aussi aux enseignants. Il fallait montrer ce qu'on pouvait faire, ce qu'on voudrait et aimait faire. 

Pourquoi une histoire interactive web ?
J'ai un profil polyvalent et possède une palette de compétences remplie. C'est avant tout car je me plais à créer des histoires, des mondes, et à les montrer dans toutes leurs facettes. Montrer les rêves. 
Processus

Etape 1 : Idéation
Il s'agit avant tout d'une histoire. Il faut donc savoir ce qu'on veut raconter à travers elle. Créer et montrer des mondes signifie le structurer, et la meilleure manière d'établir de bonnes bases et de décider de la genèse et la mythologie qui y règne. Je veux montrer cette mythologie. 
Ensuite, ne pas perdre de vue qu'il s'agit d'une histoire interactive : l'utilisateur doit faire des choix dans un but précis. Mais lequel ? J'ai choisi un objectif universel dans ce contexte : devoir s'échapper d'un endroit austère et dangereux.

Etape 2 : Structure narrative et arborescence scénaristique
Une histoire interactive à choix implique une arborescence et une structure solide. Toute J'ai repris l'arc narratif le plus classique : situation de départ, élément perturbateur, péripéties, élément de "résolution" et situation finale. L'idée était d'instaurer les deux premières étapes. Les choix de l'utilisateurs allaient ensuite décider des péripéties pour éventuellement arriver à un élément de résolution et donc une situation finale.
J'ai réalisé grâce à whimsical.co des cartes de connaissances pour définir les différents passages et les différents choix, qui a donc constitué la liste des vues du mon site web.

Etape 3 : Création de la structure du site web
Maintenant que tous les éléments étaient sur papier, il fallait les produire. Vu les délais, j'ai décidé de coder le site en Html / Css et javascript. L'utilisateur peut naviguer entre différentes section en cliquant sur des boutons. Ainsi, j'avais une première version du site sans mise en forme ou esthétique, mais qui permettait de jouer à cette histoire.

Etape 4 : Mise en forme
D'abord, il s'agit de mettre en forme via le Css du site. Des illustrations allaient ensuite être intégrées. Ces dernières ont été réalisées avec Adobe Illustrator. 

Etape 5 :  Bande son
Cerise sur le gâteau, la dimension sonore. Il s'agit simplement d'une boucle, représentant l'ambiance paisible mais un peu inquiétante de l'histoire.
KO : the Knowledge Orb
1
13
0
Published:

KO : the Knowledge Orb

1
13
0
Published: