Dossier de Conception

Bijaoui LioneL / BioCaLti LuCas

Mu1 - 2011

Table des matièresI. ConCeptIon Générale 4

1. Concept éditorial 42. Concept interactif 53. Concept graphique 64. Arborescence 75. Workflow 8

II. Chartes 91. Charte interactive 92. Chartes graphique 10

Police de caractère Couleurs et textures

3. Chartes sonore 12

III. ConCeptIon détaIllée 131. Écran Général 13

e1 - encart info, aide et réglages. e2 - Icône haut parleur e3 - Plein écran e4 - Fond d’écran général

2. Écran Accueil 15e1 - Fond e2 - Titre de la page d’accueil e3 - Bouton ‘Démarrer la partie avec tutoriel’ e4 - Bouton ‘Démarrer la partie’ e5 - Étiquette ‘avec tutoriel’

3. Écran Tutoriel 17e1 - Fond e2 - Silhouette Chaise e3 - L’étiqueteuse e4 - Encart Tutoriel 1 e5 - Encart Tutoriel 2 e6 - Chronomètre

4. Écran Niveau 19e1 - Fond e2 - Silhouette Chaise e3 - L’étiqueteuse e4 - Numéro de Chaise e5 / e5 bis - Zone graphique e6 - Chronomètre

5. Écran Animation 21e1 - Grille de boîte e2 - Bouton ‘Continuer’

6. Écran Score 23e1 - Fond e2 - Score e3 - Texte Score e4 - Bouton ‘Rejouer la partie’ e5 - Bouton ‘Retour Accueil’ e6 - Partage du score e7 – Étiquettes de partage Descriptions des situations 25

IV. annexes 251. Storyboard et Animations 25

4

I. Conception Générale1. Concept éditorial

Le site se présente sous la forme d’un jeu, où le joueur doit coller des étiquettes sur des silhouettes de chaises dans le but de trouver le meilleur propriétaire de celle-ci.

Le jeu se base sur l’identité “sociale” à laquelle se rattache une chaise, aux gé-néralités et clichés qui sont liés aux différents modèles, de manière consciente ou inconsciente.

Étiquette : petit écriteau qu’on fixe à un objet pour en in-diquer la nature.

Cliché : Expression toute faite, idée banale exprimée sou-vent et dans les mêmes termes (=lieu commun).

Étiqueter : Classer quelqu’un d’une manière plus ou moins arbitraire. Ici le jeu se base sur le double sens de ce mot.

i

5

2. Concept interactif

Le jeu propose au visiteur une silhouette de chaise. Le joueur utilise une étiqueteuse avec laquelle il peut choisir le personnage qu’il

va associer à la silhouette.Pour faire défiler les personnages, il utilise soit la molette de la souris, soit les

flèches directionnelles du clavier.Ensuite, il lui suffit de cliquer pour étiqueter la chaise et passez à la suite.

6

3. Concept graphique

Le but étant de jouer avec des généralités, une approche théâtrale semble la mieux adaptée.

L’ambiance graphique tourne autour d’une esthétique composée de papier dé-coupé, au faux-semblant de livre pop-up.

Les personnages semblent avoir été grossièrement découpés dans des publicités et des magazines.

Les vidéos se déroulent dans des boîtes de même dimension, avec un plan fixe comme si elles se trouvaient dans une maison de poupée. Chaque personnage pos-sède son propre habillage de boîte, toujours volontairement caricatural.

L’habillage du site est composé de différentes textures de papiers (kraft, carton, feutrine, etc.).

L’animation est très simpliste avec un côté burlesque que l’on retrouve dans les spectacles de marionnettes.

Pop-up : Le livre Pop up est un livre où le lecteur participe de façon interactive. L’action de tourner la page permet le dé-ploiement de l’image et l’apparition de la scène.

Burlesque : désigne un comique exagéré, extravagant qui repose généralement sur un décalage entre la tonalité et le su-jet traité dans un texte.

i

7

4. Arborescence

8

5. Workflow

9

II. Chartes1. Charte interactive

Le changement de page se fait par slide de droite à gauche, hormis la transition allant de la page « score » vers la page d’accueil qui se fait dans l’autre sens.

Le choix du personnage avec l’étiqueteuse se fait avec la mollette de la souris, proche du mécanisme d’une vrai étiqueteuse, ou avec les flèches du clavier, pour plus d’accessibilité.

Au moment du clic, l’étiqueteuse s’anime et une étiquette apparaît sur la chaise. Une fois étiquetée, la chaise défile hors de l’écran pour laisser apparaître la suivante.

Afin de se positionner sur la grille de boîtes, lors des séquences d’animation, le joueur doit dé-placer sa souris sur les bords de l’écran.

Lors du survol de la grille des boîtes, les sons provenant des animations s’accentuent ou s’étouffent

selon que la souris se rapproche ou s’éloigne du centre de l’écran de l’utilisateur. L’étiqueteuse redevient une souris au survol de l’encart info, aide et réglage.

Au clic des boutons aide ou à propos, une fenêtre sort du bas de l’écran avec les informations nécessaires. Le clic d’un bouton change sa texture.

10

L’habillage principal du site se compose de textures cartons. Un jeu de teinte aide à différencier le fond et les éléments de premier plan. Des rajouts d’éléments gra-phiques (bouts de scotch, entailles dans le carton, …) sur les différents écrans amé-liorent l’immersion.

Couleurs et textures

Police et taille style Couleurstitre de la page « accueil »

Impact 160px Normal Texture carton

titre des boutons Impact 80px Normal Texture cartonCorps du texte Courier 19px Normal Noir sur fond blancencart info, aide et réglage

Helvetica 19px Ultra light Blanc sur fond noir

score final Impact 80px Normal Bleutexte score final Courier 48px Normal Noir sur blanc

2. Chartes graphique

Police de caractère

ImpactABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyzCourierABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz

Le titre de page, les titres de bouton et les corps de texte re-posent sur des mor-ceaux de carton qui servent de cadre et donnent un effet de profondeur par rap-port au fond.

Les textures des boutons possèdent une version alterna-tive correspondant à leur clic, simulant un appui sur le carton.

11

L’utilisation et le détournement des pictogrammes présents sur les emballages en carton permettent d’indiquer les niveaux, la fonction de partage, ou la relecture d’une animation. De manière générale, ils servent à l’habillage graphique du site.

L’étiqueteuse qui remplace la souris durant les phases de jeu est représentée de façon simpliste en photomontage avec des textures acier et plastique.

Le chronomètre du jeu est composé de petits rectangles en carton qui dispa-raissent au fur et à mesure de l’avancement du temps.

Chaque animation se place dans une boîte en carton, au sein d’une grille plus large de boîtes. Parmi celles-ci, certaines ne contiendront pas d’animations, mais une boîte vide, non éclairée et sans décoration.

Les personnages et les éléments du décor des boîtes sont détourés grossièrement, comme découpés avec des ciseaux et se présentent à la manière d’un livre pop-up.

L’encart « info, aide et réglage » se différencie volontairement du style graphique du site, avec une approche sobre, pour souligner ses fonctions pratiques.

12

Les sons du site sont réalisés vocalement (beatbox , bruit de bouche).

Écrans sonsAccueil Clic avec la flèche, Changement d’écran, Musique d'ambiance Tutoriel Clic avec l’étiqueteuse, Changement d’écran, Musique d'ambiance Niveaux Clic avec l’étiqueteuse, Défilement du chronomètre, Changement de

chaise, Changement de personnage étiqueteuse, Changement d’écran, Musique d'ambiance

Animations Action des personnages, Changement d’écran, Clic avec la flècheScore Cri de foule, Changement d’écran, Clic avec la flèche

3. Chartes sonore

Beatbox : consiste en l’imitation vocale d’une boîte à rythmes, de scratchs et de nombreux autres instruments (prin-cipalement de percussion).

i

13

III. Conception détaillée1. Écran Général

Cet encart est toujours au premier plan sur tous les écrans du site. Si l’utilisateur pointe sa souris sur cette zone, quelque soit la texture appliquée à celle-ci auparavant, elle retrouve son image par défaut.

Le texte et les symboles sont blancs sur un simple rectangle noir. Les textes et icônes sont séparées de quelques pixels.

Le texte ‘A Propos’ ainsi que le point d’exclamation sont écrits en Helvetica Neue Ultra Light, 24pt.

Un clic sur ‘A Propos’ déroule une fenêtre décrivant le concept du site et présen-tant rapidement les personnes l’ayant créé.

Un clic sur le point d’interrogation déroule aussi une fenêtre de la même manière que ‘A Propos’. Cette fenêtre explique rapi-dement les points abordés par le tutoriel, c’est à dire le contrôle et le but du jeu.

Le son du clic dans cette zone est un petit son étouffé.

e1 - encart info, aide et réglages.

14

e2 - Icône haut parleur

e3 - Plein écran

e4 - Fond d’écran général

Cette icône représente un haut parleur vu de coté de manière simple et stylisée.

Un clic sur cette icône coupe le son et change l’icône par un haut parleur coupé par une barre diagonale. Un autre clic rétablit le son et l’icône originale.

Un survol fait apparaître une petite réglette au-dessus pour régler le niveau sonore plus en finesse.

Cette icône représente 4 petites flèches pointant chacune sur un coin différent d’un rectangle.

Un clic permet de passer en plein écran et change l’icône. Les flèches partent désormais des coins et vont vers le centre.

Un autre clic rétablit la taille d’écran normale et rétablit l’icône originale.

Un survol fait apparaître une info bulle où il est écrit ‘Plein écran’.

Ce fond sert de texture de base pour tous les autres écrans. Il ressemble à un morceau de carton assombri dont on ne voit pas les bords comme s’ils dépassaient de l’écran.

A chaque niveau la texture carton semble se détruire de plus en plus, accumu-lant morceaux de ruban adhésif, coupures, et autres.

15

Cet élément est composé d’un fond et du texte ‘Clichaise’.Le fond est fait avec une texture carton dont on voit le bord inférieur et qui s’étale

d’un bout à l’autre de l’écran en horizontal et qui part du haut de l’écran jusqu’à envi-ron un quart de celui-ci en vertical.

Le texte est écrit en Impact Regular, 160pt, noir avec un effet d’ombrage pour donner un peu de relief.

2. Écran Accueil

e1 - Fond

Voir ‘Général e4’.

e2 - Titre de la page d’accueil

e3 - Bouton ‘Démarrer la partie avec tutoriel’

Ce bouton est composé d’un fond et du texte ‘Démarrer la partie’.Le fond est fait avec une texture carton dont on voit le bord inférieur. Les bords

semblent déchirés ou mal découpés.Le texte est écrit en Impact Regular, 80pt, noir avec un effet d’ombrage pour don-

ner un peu de relief.

16

e4 - Bouton ‘Démarrer la partie’

e5 - Étiquette ‘avec tutoriel’

Au survol, le texte devient bleu azur.Au clic, la texture du fond change pour donner l’impression d’un appui sur le

carton et un léger assombrissement. Le texte devient bleu nuit. Le clic déclenche l’animation de changement d’écran standard et effectivement change l’écran pour la page Tutoriel.

Ce bouton est composé d’un fond et du texte ‘Démarrer la partie’.Le fond est fait avec une texture carton dont on voit le bord inférieur. Les bords

semblent déchirés ou mal découpés.Le texte est écrit en Impact Regular, 80pt, noir avec un effet d’ombrage pour don-

ner un peu de relief.Au survol, le texte devient bleu azur.Au clic, la texture du fond change pour donner l’impression d’un appui sur le

carton et un léger assombrissement. Le texte devient bleu nuit. Le clic déclenche l’animation de changement d’écran standard et effectivement change l’écran pour le Niveau 1 de l’application sans passer par le tutoriel.

Cet élément est composé d’une texture et du texte ‘avec tuto’.Le texte et la texture ressemblent à une étiquette, placée de travers, sur le coin

inférieur droit du bouton e4.Le texte est écrit en Courier Regular, noir. Le fond est fait d’une texture plastique

blanche brillante comme celle qui est produite par les étiqueteuses.

17

3. Écran Tutoriel

e1 - Fond

e2 - Silhouette Chaise

e3 - L’étiqueteuse

Voir ‘Général e4’.

Cet élément se compose d’un fond.Le fond est représenté par la silhouette d’une chaise choisie au hasard parmi les

10 chaises disponibles au cours du jeu.La silhouette est obtenue en découpant la couche de papier supérieure d’un car-

ton ondulé.

Cet élément dynamique se compose d’une texture dans laquelle se loge un ca-dran de sélection.

Cet élément suit la position de la souris de l’utilisateur et la remplace.Il ressemble à une étiqueteuse en plastique avec un viseur. La texture est obtenue

en recomposant plusieurs textures provenant de sources diverses. Le centre du viseur se trouve au point précis de sélection de la souris de l’utilisateur.

Le cadran de sélection est un élément dynamique. Il permet d’afficher et de

18

e4 - Encart Tutoriel 1

e5 - Encart Tutoriel 2

e6 - Chronomètre

choisir le nom d’un des personnages du jeu, écrit en Courier, noir sur fond blanc. Les noms défilent avec la molette de la souris ou avec les flèches du clavier. Un son de cli-quetis s’entend à chaque changement.

Un clic hors de l’élément e2 déclenche le son d’un mécanisme qui se bloque (« clak »).

Un clic sur l’élément e2 déclenche une animation durant laquelle l’ étiqueteuse semble étiqueter la silhouette de la chaise. Le nom du personnage choisi sera écrit en Courier, noir sur l’étiquette blanche dûment créée. Les étiquettes sont placées de biais avec un angle choisi aléatoirement entre 30° et -30°.

Cette action entraîne une animation qui assombrie l’écran sauf la zone e6 et fait apparaître un encart de texte en dessous. Le texte est ‘Attention, désormais vous avez un temps limite pour étiqueter les chaises. Le nombre de bouts de carton représente le temps qu’il vous reste’. Il est écrit en Courier, noir, 18pt.

Cet élément dynamique se compose d’un fond et d’un texte. Il flotte à gauche du viseur de l’élément e3.

Le fond ressemble à un bout de carton déchiré.Le texte est ‘Bienvenue dans Clichaise ! Le but du jeu est d’étique-

ter le bon personnage sur la bonne chaise. La molette de la souris ou les flèches du clavier font défiler les différents noms.’

Le texte est écrit en Courier, noir, 18pt.

Cet élément se compose d’un fond et d’un texte. Il est placé à droite de l’élément e2.

Le fond ressemble à un bout de carton déchiré.Le texte est ‘Après avoir choisi le bon cliché, étiquette la chaise avec un clic des-

sus...’ Le texte est écrit en Courier, noir, 18pt.

Cet élément dynamique se compose d’un fond.Le fond représente 20 petits bouts de carton qui disparaissent un par un en 20

secondes. C’est le temps alloué au joueur. Néanmoins, durant le tutoriel, le chrono-mètre ne se lance pas.

19

4. Écran Niveau

e1 - Fond

e2 - Silhouette Chaise

e3 - L’étiqueteuse

Voir ‘Général e4’.

Cet élément se compose d’un fond.Le fond est représenté par la silhouette d’une chaise choisie au hasard parmi les 10 chaises

disponibles au cours du jeu. La silhouette est obtenue en découpant la couche de papier su-périeure d’un carton ondulé.

Plus les niveaux augmentent plus le nombre de chaise à étiqueter augmente.Au clic, après l’animation d’étiquetage, la chaise se déplace vers la gauche, hors de l’écran,

pour être remplacée par une autre chaise.

Voir ‘Tutoriel e3’.L’étiquette suit le mouvement de la chaise lorsqu’elle quitte l’écran.

20

e4 - Numéro de Chaise

e5 / e5 bis - Zone graphique

e6 - Chronomètre

Cet élément dynamique se compose d’un fond basé sur le picto-gramme de gauche. Seul le numéro est modifié pour afficher le numéro courant sur le total de chaises du niveau.

Il sert à donner une indication au joueur pour mieux lui permettre de gérer son temps.

Cet élément dynamique désigne une zone dans laquelle pourra se charger aléa-toirement un ou deux éléments graphiques parmi une palette large. Ce ou ces images se placeront dans la zone de manière encore une fois aléatoire, avec en plus la possi-bilité de leur donner une orientation libre (de 0° à 360°).

Grâce à cette zone, chaque niveau aura un aspect unique, agrémenté de picto-grammes, déchirures, bouts de ruban adhésif, tampons à demi effacé, etc.

Cet élément dynamique se compose d’un fond.Le fond représente 20 petits bouts de carton qui disparaissent un par un en 20

secondes. C’est le temps alloué au joueur. Ici, contrairement au tutoriel, le chrono-mètre se lance. Le temps alloué à chaque niveau est le même.

21

5. Écran Animation

e1 - Grille de boîte

Cet élément dynamique est composé d'un fond à l'aspect d'une grille de 3 par 3 remplie de boîtes vides sombres.

Cet élément est volontairement plus large que l'écran, obligeant le joueur à poin-ter sa souris vers un bord de l'écran pour faire glisser le fond dans le sens inverse.

De plus, les animations correspondantes au niveau précédemment terminé viennent se loger de manière aléatoire dans certaines boîtes de la grille. Cela laisse évidement beaucoup de boîtes vides, obligeant le joueur à se repérer aux sons durant les animations.

22

e2 - Bouton ‘Continuer’

Les animations se lancent automatiquement les unes après les autres avec une certaine latence.

Lorsqu'une animation se termine, une couche transparente grisée se place sur la boîte avec une icône en son centre. Un clic sur cette icône permet de relancer l'animation.

Une marge devra être créée hors de la grille, de manière à ce que les vidéos qui se trouvent au bord de la grille ne soit pas collées au bord de l'écran de l'utilisateur.

Cette marge sera illustrée de manière à donner l'illusion que la grille de boîte se prolonge avec d'autres boîtes qui plongent dans l'obscurité. Cela permet de casser la dimension fixe de l'application et d'ajouter un peu de profondeur.

Ce bouton se compose d'un fond et d'un texte. Ce bouton permet de lancer le ni-veaux suivant, ou la page score.

Le fond est fait avec une texture carton dont on voit le bord inférieur. Les bords semblent déchirés ou mal découpés.

Le texte est écrit en Impact Regular, 80pt, noir avec un effet d'ombrage pour donner un peu de relief.

23

Voir ‘Général e4’.

Cet élément dynamique donne le résultat final du joueur. Il est placé légèrement de biais. Le texte est écrit en Impact 80 pt, bleu azur.

Cet élément dynamique affiche un texte en rapport avec le résultat final du joueur. Le texte est écrit en Courier Regular, 48pt, noir sur fond blanc comme pour une étiquette.

6. Écran Score

e1 - Fond

e2 - Score

e3 - Texte Score

24

Ce bouton se compose d’un fond et d’un texte. Ce bouton permet de relancer le premier niveau du jeu.

Le fond est fait avec une texture carton dont on voit le bord inférieur. Les bords semblent déchirés ou mal découpés.

Le texte est écrit en Impact Regular, 80pt, noir avec un effet d’ombrage pour don-ner un peu de relief.

Ce bouton se compose d’un fond et d’un texte. Ce bouton permet de relancer le premier niveau du jeu.

Le fond est fait avec une texture carton dont on voit le bord inférieur. Les bords semblent déchirés ou mal découpés.

Le texte est écrit en Impact Regular, 80pt, noir avec un effet d’ombrage pour don-ner un peu de relief.

Cet élément est composé d’un fond et du texte ‘Partagez votre score :’.Le fond est fait avec une texture carton. Les bords semblent déchirés ou mal dé-

coupés. Le texte est écrit en Courier Regular, 48pt, noir sur fond blanc comme pour une étiquette.

Cet élément est composé d’un fond et de texte.Le fond ressemble aux étiquettes de petites annonces dont on peut arracher le

numéro de téléphone. Cependant, en lieu et place d’un numéro, on trouve le nom des réseaux sociaux Facebook, Twitter, et Google+.

e4 - Bouton ‘Rejouer la partie’

e5 - Bouton ‘Retour Accueil’

e6 - Partage du score

e7 – Étiquettes de partage

25

IV. Annexes1. Storyboard et Animations

Chaise Pdg

Chaise Secré-taire

Chaise Alcoolique

Chaise Bour-geoise

Chaise Campeur

Chaise Mamie

Chaise Designer

Chaise Ecolier

Chaise Arbitre

Chaise Ciné-aste

Pdg 1a 1x 1d 1x 1x 1x 1x 1b 1c 1eSecrétaire 2c 2a 2x 2x 2e 2x 2x 2b 2x 2dAlcoolique 3c 3x 3a 3x 3c 3x 3x 3d 3b 3xBourgeoise 4x 4b 4x 4a 4x 4x 4x 4x 4x 4xCampeur 5b 5x 5x 5x 5a 5x 5x 5x 5x 5xMamie 6x 6x 6x 6x 6x 6a 6x 6x 6x 6xDesigner 7x 7x 7x 7x 7x 7x 7a 7x 7x 7xEcolier 8b 8c 8d 8e 8i 8j 8f 8a 8g 8hArbitre 9x 9x 9x 9x 9x 9x 9x 9x 9a 9xCinéaste 10x 10x 10x 10x 10x 10x 10x 10x 10b 10a

Descriptions des situations

Situation 1

1a: Il est assis sur son bureau touche sa chaise , il répond a un appel .

1b: Chaise trop petite , seule sa tête dépasse du bureau il essaye d’écrire mais ne peut pas atteindre sa feuille et finit en hurlant.

1c: Il est écrasé contre le plafond et fi-nit en hurlant.

1d: Essaye d’attraper le téléphone et bas-cule avec la chaise sur le bureau.

1x: Il est devant le bureau et exprime son mécontentement en montrant la chaise.

1e: Il est assis sur la chaise , le tissu craque et se retrouve par terre , seul ses bras depassent du bureau.

26

Situation 2:

2a: Elle est assise sur sa chaise et passe des coups de téléphone tout en se limant les ongles.

2b: Elle est assise sur la chaise avec un air d’incompréhension puis se relèv avec la chaise coincée.

2c: Elle est étonnée par le confort de la chaise, le pdg rentre et hurle pour récupérer sa chaise.

2d: Se prend pour une star, prend la pause, le pdg rentre et hurle.

Situation 3:

3a: Il trinque tout seul et boit son verre.

3b: Il prend la chaise pour une personne et lui parle.

3c: Il s’endort avec la chaise.

3d: Se prend la chaise dans les pieds et tombe.

Situation 4:

4a: Bois le thé.

4b: Essaye d’attraper la tasse mais la chaise recule à chaque essai.

4x: Exprime son mécontentement sur la chaise.

27

Situation 5:

5a: Est assis et prend une bière .

5b: Il grille à cause du cuir sur le siège .

5x: il essaye de replier la chaise mais n’y arrive pas , il exprime son mécontentement.

Situation 6:

6a: Tricote sur sa chaise.

6x: Exprime son mécontentement.

Situation 7:

7a:Est assis et contemple la sculpture.

7x: Est debout et contemple la chaise.

Situation 8:

8a: S’ennuie sur son bureau.

8b: Fait semblant de passer un appel sérieux.

8c: Fait la toupie avec la chaise.

8d: Joue au pirate.

28

8e: Joue au roi et fait semblant de don-ner des ordres.

8f: Joue au pilote d’avion.

8y: Joue à l’arbitre.

8h: Joue au réalisateur.

8i:Joue le pilote de course.

8j: Joue au cowboy tout en basculant sur la chaise.

Situation 9:

9a:Il siffle et fait le geste «Out».

9x: Est assis et siffle plusieurs fois pour exprimer son mécontentement.

Situation 10:

10a: Est assis et lance une prise avec son mégaphone.

10b:Est assis à la hauteur du projecteur et grille.

10x: Il est retourné sur sa chaise et se plaint avec le haut parleur.