Dossier de conception - Festival du Mot 2009

FESTIVAL
DU MOT
Participez à l’élaboration d’une mémoire collective
et plongez dans une expérience interactive
2009
Virtuel
DOSSIER DE CONCEPTION

Mai 2010 | Gobelins, L’Ecole de l’image - CRMA 2011 Projet et dossier réalisés par Cécile Ormel et Céline Kniebihler

introduction 2

rappel du brief

RAPPEL DU BRIEF

» conception et réalisation » 2 dispositifs de diffusion
de la prochaine édition numérique du Festival du Mot
autour du mot représentatif de l’année 2009
pour le plus large public

site web iPhone

Mai 2010 | CRMA 2011 | Cécile Ormel et Céline Kniebihler

sommaire 3

1
CHOIX DU MOT DE 2009
brainstorming 2009
le mot de 2009
mindmapping 4
SPÉCIFICATIONS TECHNIQUES
2 schéma de principe
benchmark
PITCH normes de gestion de contenu
définitions
problématique et promesse
positionnement 5
SPÉCIFICATIONS GRAPHIQUES

3 brief créatif
références
CONCEPTION concept boards
schéma fonctionnel storyboard du teaser
cartographie générale des usages maquettes
personas et userflows
wireframes 6
SUIVI DE PRODUCTION
méthodologie de production
planning de production
devis estimatif


PREMIÈRE PARTIE

choix du mot de 2009


choix du mot de 2009 5
brainstorming 2009 | le mot de 2009 | mindmapping



virtuel

BOOM DES RÉSEAUX SOCIAUX ARRIVÉE DES OUTILS COLLABORATIFS EN TEMPS RÉEL

Utilisateurs sur Facebook Utilisateurs sur Twitter
en millions en millions Google Wave Mindmeister

40
350

200
10

2008 2009 2008 2009

Source : facebook.com Source : twitter.com



virtuel

APPARITION D’UNE REPRÉSENTATION NUMÉRIQUE DÉVELOPPEMENT DES APPLICATIONS MOBILES
PLUS EXPRESSIVE, HUMAINE (RÉALITÉ AUGMENTÉE, GÉOLOCALISATION)

Avatar 3D
Téléphones mobiles en France Des millions d’applications
iPhone téléchargées

25 %

75 %

smartphones
autres téléphones
Source : zone-numerique.com



science fiction voyage dans le temps

simulation
expérimentation illusion
magie
réalité virtuelle
effets spéciaux
perception
imitation
réalité augmentée enfant
réalité imagination Max et les maximonstres
innovation poésie
Livre dont vous êtes le héros
relations
surréalisme
échanges créer
rêve
partages
espace mental sommeil inconscience
halucinations
connaissances
informatique mémoire Virtuel
ordinateur
numérique Country Story
jeu mmorpg

miroir second life

faire croire apparence
pseudonyme dépendance
avatar faux
Facebook identité repères d'espace
dématérialisation puissance différenciation privé/public
possible
simulation manque repères temporels
limites
toucher
travail collaboratif morale
wave réseau techniques
interactions
mindmeister ! infini


DEUXIÈME PARTIE

pitch


pitch 10

définitions | problématique et promesse | positionnement

» festival du mot » le mot : virtuel
manifestation à caractère festif quelque chose qui n’est pas palpable,
mais qui reste possible dans l’imaginaire
chercher à interpeller et éveiller les sens
de chacun
d’un large public
représentation propre à chaque individu,
mais similaire à l’échelle d’un groupe

Mindmapping autour du virtuel
et de l’imagination
vision perception
créativité invention

inconscient mémoire
enfance
souvenirs
refuge évasion
espace mental
schyzophrénie
trouble
hallucinations
pensée
Virtuel /
Imagination
poésie rêve
sommeil
fantasme
inspiration

imitation
surréalisme magie
illusion


pitch 11


» problématique » promesse
Comment plonger le maximum de personnes • toucher un maximum de personnes en faisant
dans une expérience inattendue, à la fois appel à leurs souvenirs
personnelle et collective ?
• émouvoir en sollicitant la mémoire et en
provoquant la nostalgie
• permettre à l’utilisateur d’être acteur et metteur
en scène


pitch 12


CHOIX D’UN SUPPORT

Je me souviens, Georges Pérec

» quoi ? » comment ?
un recueil de bribes, fragments • en collectant une multitude de souvenirs
de souvenirs de son enfance réels ou imaginaires, individuels ou
collectifs
• en immergeant l’utilisateur dans les
souvenirs de Pérec

» pourquoi ? » pour qui ?
citation de Georges Pérec à propos de Je me souviens : le plus large public :
chaque individu, qu’importe son âge, a ses
« des petits morceaux de quotidien, des choses que
propres souvenirs
tous les gens d’un même âge ont vues, ont vécues,
ont partagées, et qui ensuite ont disparu, ont été
oubliées ; elles ne valaient pas la peine de faire partie
de l’Histoire. Il arrive cependant qu’elles reviennent,
par hasard ou parce qu’on les a cherchées ; c’était
une chose qu’on avait apprise à l’école, une habitude,
une expression, ou quelque chose de tout à fait banal,
suscitant pendant quelques secondes une impalpable
petite nostalgie. »


pitch 13


JE ME SOUVIENS...

» je me souviens, d’après Pérec » je me souviens, en 2009

Je me souviens de ces nuits
Je me souviens de l’annonce de la
de Noël bien plus longues que
disparition de Mickaël Jackson.
toutes les autres nuits.

Je me souviens des coups de Je me souviens de l’élection du
règle en fer sur les doigts. premier président américain métis :
Barack Obama.

Je me souviens des Je me souviens de la main de
vaccinations en collectivité. Thierry Henry.


TROISÈME PARTIE

conception


conception 15

schéma fonctionnel | cartographie générale des usages | personas et userflows | wireframes

ESPACE COLLABORATIF ESPACE APPLI ESPACE IMMERSIF
mode visiteur mode logué voir le mode mode parcours mode partage
d’emploi

télécharger
l’application

créer un ajouter un
facebook/twitter connect
parcours souvenir
ou inscription
tweetbox
être guidé localiser
voir le teaser voir l’activité des un souvenir
membres de la
voir, filtrer les souvenirs
audio, vidéo, photo
communauté twitter  visualiser
les souvenirs

ajouter un
souvenir

site web partager iPhone
un souvenir

commenter
un souvenir mettre à jour
son statut
localiser twitter
un souvenir

tweetbox
voir l’activité de la communauté Twitter


conception 16


SITE WEB

0.0 : INTRODUCTION 1.0 : EXPLORATEUR 2.0 : PARCOURS MOBILE
- teaser - mon compte/connexion - mon compte/connexion
1.1 : AJOUT DE SOUVENIR
- introduction du dispositif - filtre selon critères - vidéo mode d’emploi
- inscription/connexion - mon compte
- par thème - explication du fonctionnement
- formulaire d’ajout
- par média - lien vers iTunes
- par date - aperçu des thèmes
1.2 : UN SOUVENIR
- par popularité - tweetbox
- mon compte/connexion
- par mots-clés
- titre du « je me souviens »
- par amis facebook/twitter
- auteur et date d’ajout
- tweetbox
- options : localisation et date
- commentaires
- partage
- je m’en souviens aussi


conception 17


APPLI IPHONE

0.0 : INTRODUCTION 1.0 : MODE PARCOURS 2.0 : MODE PARTAGE
- mini-teaser - choix du quartier - formulaire d’ajout
1.2 : UN SOUVENIR
- inscription/connexion - choix du thème
- média : photo/son/vidéo
- choix du temps de parcours
3.0 : RÉGLAGES
- fiche du souvenir
- choix du guide
- titre du «je me souviens» - mes comptes facebook, twitter
- boussole
- auteur et date d’ajout - option push
- plan
- je m’en souviens aussi - MAJ auto du statut twitter
- street view
- mise à jour du statut twitter


conception 18


Daniel
50 ans
professeur de philosophie

«J’ai un esprit
débordant d’imagination»
est père de 3 enfants est un enfant dans l’âme

aime raconter des histoires consulte des sites culturels

découvre le lien vers consulte la page
le festival sur Evene parcours mobile s’inscrit

prend connaissance
du déroulement
site web

crée son parcours visualise poursuit le parcours
et choisit ses options un souvenir avec le guide (géoloc)

télécharge l’appli
iPhone

se rend se rend
à la première étape au souvenir suivant
en ville


conception 19


Lien vers le festival sur le site culturel Evene.fr Teaser d’introduction du festival


conception 20


Page de lancement : choix entre l’application web et l’application mobile Parcours mobile : introduction et teaser de l’application iPhone


conception 21


Parcours mobile - formulaire d’inscription Parcours mobile - connecté


conception 22


Connexion ou création de compte Connexion Choix d’un quartier dans Paris Choix d’un thème


conception 23


Mode Street view

Choix d’un temps de parcours Choix d’un guide de parcours Visualisation d’un souvenir audio


conception 24


Mathile
17 ans
lycéenne en terminale ES

«Je veux m’exprimer
librement sur le web.»
partage sur les réseaux sociaux tient un blog

sort souvent avec ses amis

voit une notification clique pour
d’ajout de souvenir en savoir plus publie sur facebook

facebook

parcourt l’explorateur commente
de souvenirs et coche «je m’en souviens»

est loguée ajoute
(facebook connect) son souvenir
site web

ajoute à son blog
blog


conception 25


Message Facebook sur le mur d’un ami Connexion avec un compte Facebook sur le site


conception 26


Connexion avec un compte Facebook - confirmation Home : explorateur de souvenirs


conception 27


Home : explorateur de souvenirs - onglets filtres ouverts Visualisation d’un souvenir


conception 28


Ajout de souvenir - étape 1 Ajout de souvenir - étape 2


conception 29


Ajout de souvenir - étape 2 (ajout d’une photo) Ajout de souvenir - étape 3


conception 30


Nathalie
28 ans
secrétaire de direction

«Je veux découvrir twitte habite Paris
des lieux insolites.»
aime la vidéo, voyage souvent

organise des sorties entre amis connectée toute la journée

se promène
en ville

en ville

écoute et regarde décide de filmer localise partage son film
l’animation son propre souvenir son souvenir via l’application
ouvre l’application

reçoit un push
«souvenir à proximité»
iPhone

actualise
son statut twitter
twitter


conception 31


Visualisation d’un souvenir vidéo

Notification - push Fiche d’un souvenir Actualisation du statut Twitter


conception 32


Ajout de souvenir Sélection du type de média Sélection d’une image Géolocalisation du souvenir


QUATRIÈME PARTIE

spécifications techniques


spécifications techniques 34

schéma de principe | benchmark | normes de gestion du contenu

» technologies utilisées
APIs
- langage de programmation ActionScript 3, choisi pour la
possibilité qu’il offre en terme d’animation et permettant
également d’appliquer nos récentes connaissances, ainsi que
de les approfondir, dans un projet concret.
- base de données MySQL, pour le stockage de données, l’ajout
de contenus etc. réponse
requête
- AMFPHP, pour communiquer avec la base.
Pour cela divers services ont été développés dans le langage

php
de script PHP.

requête appel

» librairies et apis réponse retour
AS3
BDD + HTML & CSS
- librairie TweenLite, moteur d’interpolation rapide, léger et
souple pour nos animations.
- API GoogleMaps,pour permettre aux utilisateurs de localiser
leur souvenirs.
serveur client
- API Twitter, pour permettre aux membres de la communauté
du festival d’échanger sur l’expérience qu’on leur propose.




LE COQ SPORTIF HBO IMAGINE

+ système de filtres et navigation intuitives + système de navigation innovant et notion de profondeur avec la 3D
- visuellement trop chargé - très lourd au chargement et visuellement trop complexe




TIME MACHINE NY TIMES

+ 3 navigations différentes possibles dans l’historique + légèreté visuelle et système de filtres
- la profondeur dépend de l’ancienneté




METRO PARIS

+ géolocalisation, réalité augmentée, système de boussole
- concerne uniquement les transports et commerces




FESTIVAL DU MOT
souvenirs de 2009
et de Pérec photos

vidéos
VISITEURS
souvenirs personnels

SERVEUR
sons

BDD

L’organisation du festival et les visiteurs logués sont en mesure tags
d’alimenter le site de souvenirs.
Les médias sont stockés sur le serveur FTP du festival.
Chacun d’entre eux possède une référence dans la BDD,
commentaires
permettant à l’application de les récupérer et de les afficher.
Du contenu est également sauvegardé en base, notamment les
mots-clés et commentaires relatifs à un souvenir.


CINQUIÈME PARTIE

spécifications graphiques


spécifications graphiques 40

brief créatif | références | concept boards | storyboard du teaser | maquettes

GRILLE DE LECTURE

» contraintes » challenges
Concevoir deux applications interactives Comment donner graphiquement de
indépendantes et complémentaires. la légèreté à un mot abstrait comme
«virtuel» ?
Susciter l’imagination, le rêve, la
nostalgie à un maximum d’utilisateurs. Comment garder une unité graphique
sur deux supports différents ?
Le design doit s’inscrire dans l’ambiance
festive et légère du festival. Comment donner envie à des personnes
de tous âges de participer ?
Le design doit pouvoir s’adapter à ces
contraintes sur les deux plateformes.

» conclusion » mots clés
Le design graphique doit créer de
l’émotion, susciter l’imagination à
un large public afin de leur donner
envie de prendre part au festival.




COLLABORATION CADAVRE EXQUIS SOUVENIR COLLECTE DE FRAGMENTS

Vitrine de référence, Boltanski

Jean Arp, O. Dominguez, André Breton, J. Lamba,
M. Jean, S. Taeuber-Arp Y. Tanguy

Boîte en valise, Marcel Duchamp




IMAGINATION RÊVE

Eternal Dreamer, Michel Gondry La Science des rêves, Michel Gondry




SOUVENIR

Michael Hughes

ENFANCE




SOUVENIR

voyage, fragment
secrets, magie
nostalgie




ENFANCE

légèreté,
imagination,
aérien




Je me souviens...

1 2 3 4

des petits morceaux de quotidien, des choses que tous les gens d’un même âge elles ne valaient pas la peine de faire partie de l’Histoire.
ont vues, ont vécues, ont partagées, et qui ensuite ont disparu, ont été oubliées ;

5 6 7 8

Il arrive cependant qu’elles reviennent, par hasard ou parce qu’on les a cherchées ; c’était une chose qu’on avait apprise à l’école, une habitude, une expression, ou
quelque chose de tout à fait banal, suscitant pendant quelques secondes une
impalpable petite nostalgie.




SITE WEB

Teaser d’introduction (voix off : citation de Georges Pérec) Page de lancement : choix entre l’application web et l’application mobile




SITE WEB

Home : explorateur de souvenirs - mode non loggé Home : explorateur de souvenirs - mode logué




SITE WEB

Home : explorateur de souvenirs - connexion Home : explorateur de souvenirs - inscription




SITE WEB

Home : explorateur de souvenirs - onglets filtres ouverts Visualisation d’un souvenir




SITE WEB

Ajout de souvenir - animation de création d’une bulle Ajout de souvenir - étape 1




SITE WEB

Ajout de souvenir - étape 2 Ajout de souvenir - étape 3




SITE WEB

Ajout de souvenir - étape 3 (carte de géolocalisation) Parcours mobile : introduction et teaser de l’application iPhone




APPLI IPHONE

Page de lancement (après un court Première étape : connexion ou Deuxième étape : choix d’un quartier Troisième étape : choix d’un temps de
teaser d’introduction) création de compte dans Paris parcours




Quatrième étape : choix d’un thème Quatrième étape : choix d’un thème Cinquième étape : choix d’un guide de Map : géolocalisation de la position de
(Souvenirs de 2009) (Je me souviens de G. Pérec) parcours l’utilisateur et des souvenirs




Animation d’introduction d’un Visualisation d’un souvenir image Visualisation d’un souvenir image - Visualisation d’un souvenir audio -
souvenir : il faut souffler pour faire informations sur le contenu informations sur le contenu.
disparaître les bulles et apparaître le Le son se lance automatiquement.
média.


SIXIÈME PARTIE

suivi de production


suivi de production 58

méthodologie de production | planning de production | devis estimatif

Nous avons immédiatement mis en place Nous avons également mis en place un outil
une communication via GoogleDocs, de stockage et de partage de fichiers en ligne
cet outil nous a permis de structurer nos (type Subversion) nommé DropBox.
discussions, créer des todo-listes, Il nous a permis de synchroniser nos fichiers
mettre en place un planning de production, (notamment les maquettes et animations
concevoir un formulaire pour récolter des du site), mais également d’accéder à leurs
souvenirs etc. différentes versions : cet outil donne la
possibilité d’accéder aux copies antérieures
des fichiers supprimés.




Planning de production - 4 janvier 2010 Retroplanning - 7 mai 2010




TARIF/ TARIF
CHANTIERS LOTS JOURS JOUR TOTAL TARIFS PAR CHANTIER
CONCEPTION DESIGN D’INFORMATION, FONCTIONNALITÉS, CONTENUS 4 540 2160 Le devis comprend la conception et la
CONCEPTION-RÉDACTION, WORDING 3 450 1350 5 860 EUROS réalisation du projet (site web designé et
ERGONOMIE 5 470 2350
développé et application web designée et
CRÉATION DIRECTION ARTISTIQUE 11 démonstration animée). Il compte aussi la
recherches pistes graphiques 5 540 2700 réalisation et le montage vidéo des deux
design de la home (explorateur), page parcours, page teaser 5 540 2700
design des écrans de l’application iPhone 1 540 540 teasers, ainsi que la composition musicale
10 450 EUROS
DÉCLINAISON DES MAQUETTES, RETOURS 5 380 1900 de l’ambiance sonore du site.
ANIMATION 2.2 Le total de toutes les prestations réalisées
animation de l’oiseau Twitter 0.2 450 90
démo de l’application iPhone 2 450 900 est de 46 271 euros.

PRODUCTION TOURNAGE 2 680 1360
VIDÉO ACQUISITION 0.5 450 225
POST-PRODUCTION 4 450 1800 3 985 EUROS
MONTAGE 1 450 450
ENREGISTREMENT DE LA VOIX-OFF 0.5 300 150

DESIGN SONORE COMPOSITION FOND SONORE DU SITE 1 380 380 570 EUROS
BRUITAGES 0.5 380 190

DÉVELOPPEMENT CONCEPTION 6
conception de la bdd 1.5 495 742.5
organisation des classes du projet 4.5 495 495
DÉVELOPPEMENT BACK-OFFICE 7.5
création des services php 4 495 2227.5
liaison php/flash et création de classes datas 2 495 990
tests/utilisation d’api Twitter 1.5 495 742.5
DÉVELOPPEMENT FLASH 18.5
intégration et organisation des assets (création des bibliothèques flash) 4 495 2227.5
interactions (navigation/boutons/formulaires) 9 495 4455
animation 0.5 495 247.5
développement de classes diverses (lecteur audio/vidéo, loader...) 3 495 1485
24 026 EUROS
tests/utilisation d’api GoogleMaps 2 495 990
DÉPLOIEMENT 4.5
déploiement en ligne 3 495 1485
backup final 0.5 495 247.5
démo camtasia 1 495 495
TESTS ET DEBUGS 17
tests de faisabilité 3 495 1486
tests utilisateurs 5 495 2475
debug et corrections 5 495 2475
optimisation 4 495 2227.5

GESTION PLANNING, RETROPLANNING 2.5 460 1150
DE PROJET PRICING, SUIVI BUDGÉTAIRE 0.5 460 230 1380 EUROS


Festival du Mot 2009 : virtuel est un projet réalisé par Cécile
Ormel (conception et direction technique) et Céline Kniebihler
(conception et direction artistique), étudiantes en Conception
réalisation multimédia à Gobelins, L’Ecole de l’image.

Suivez l’avancement du projet sur notre blog et notre page Twitter :

projet-jemesouviens.blogspot.com
twitter.com/FestivalDuMot09

Dossier de conception - Festival du Mot 2009

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (20)

Similar a Dossier de conception - Festival du Mot 2009

Similar a Dossier de conception - Festival du Mot 2009 (20)

Más de Céline Kniebihler

Más de Céline Kniebihler (7)

Dossier de conception - Festival du Mot 2009