Ce document collaboratif appuie un projet de fin d'étude mené dans le cadre du Master 1 Création et Éditions Numérique à Paris 8 en 2011. Le petit guide de survie est un service s’adressant à un public de jeunes travailleurs éprouvant des difficultés avec l’administration. Ils ont entre 18 et 25 ans, et font face à des nouvelles responsabilités. C’est une période qui est souvent synonyme de paperasse et de bouleversements. De plus, toutes ces démarches arrivent quasiment au même moment et nous n’y sommes pas forcément tous préparés. Pourtant c’est un passage obligé et l’on remarque que, si on comprend bien toutes les subtilités de ces formalités, elles nous semblent beaucoup plus accessibles et digestes. Nous souhaitions traiter un sujet qui répondrait à un réel besoin, et apporterait des solutions simples aux problèmes administratif auquel nous avons tous été confronté un jour. Notre but ? Rendre simples et ludiques des sujets parfois barbants par le biais de vidéo didactique. Il existe déjà de nombreux sites traitant ces thématiques, mais l’accès à ces informations n’est pas facilité par le médium employé : plusieurs pavés de texte dans lesquels il faut trouver sa solution… Nous avons donc cherché à rendre l’information plus agréable et intelligible en modifiant sa mise en forme sous forme de vidéos d’information. Pourquoi la vidéo ? Aujourd’hui, plus que jamais, schémas didactiques, jeux ludo-éducatifs, data flow et graphisme participent à la compréhension des choses de ce monde parfois difficile à exprimer et à expliciter par les média habituels. Notre première vidéo traite la thématique de la colocation. C’est l’un des premiers problèmes rencontré lorsqu’on quitte le logement familial. Se pose alors la question de la colocation, qui est la solution la plus abordable financièrement.

1. le petit guide de survie
_____________________________________________
Elodie Jaeger, Médéric Lulin, Peggy Durand
Master CEN 1 - Paris 8 - juin 2011

3. Remerciements
En préambule à ce mémoire, nous souhaitons adresser nos remerciements les plus sincè-
res à toute l’équipe pédagogique du Master Création et Editions Numériques de Paris 8
qui nous ont apporté leur aide et qui ont contribué à l’élaboration de ce projet.
Nous tenons à remercier sincèrement Ghislaine AZEMAR, qui s’est toujours montrée à
l’écoute et disponible tout au long de la réalisation de ce projet.
Nos remerciements s’adressent également à Hélène DESPREZ et Samuel DA SILVA.
Enfin, nous adressons nos plus sincères remerciements à tous nos proches et amis, qui
nous ont toujours soutenus et encouragés au cours de la réalisation de ce projet.
Merci

5. Sommaire
L’équipe ........................................................................................ 7
Introduction ................................................................................ 9
1. Stratégie marketing ....................................................... 11 - 13
1.1 Présentation du public : socio-style
1.2 Positionnement et questionnement
1.3 Les partenaires
1.4 Quelles sont les retombées attendues ?
2. Stratégie de communication .......................................... 15 - 18
2.1 Le design d’information et le Data Flow
2.2 Schéma de complémentarité
3. Stratégie de création ....................................................... 21 - 38
3.1 Le petit guide de survice charte graphique
3.1.1 Pictogrammes / Signes
3.1.2 Le logotye
3.2 L’application mobile
3.3 Les flash codes
3.4 Le site Internet
3.5 Le générique
3.6 L’animation
Conclusion .................................................................................. 41
Annexes ....................................................................................... 43
Bibliographie et webographie ................................................... 57
5

7. L’équipe
Nous sommes en tout trois dans le groupe de projet : Elodie Jaeger, Médéric Lulin et
Peggy Durand. Notre principal point fort à tous est notre sensibilité pour le graphisme,
ce qui nous a permis d’avancer assez vite sur les phases de recherches. Nous possédons,
bien sûr, chacun nos compétences, nos spécificités. Médéric est à l’aise avec le marke-
ting et le travail rédactionnel. Elodie se situe plus dans le domaine de l’édition alors que
Peggy dans celui du multimédia et notamment de l’animation. La principale faiblesse
du groupe est de ne pas avoir de développeur. Nous possédons pourtant des notions de
développement mais pour le moment trop fragile pour se permettre de se dire déve-
loppeur. Nos profils divers mais aussi complémentaires nous ont permis de rebondir sur
des idées créatives.
7

9. Introduction
Comment notre projet a-t-il vu le jour ?
Après une longue période de recherches infructueuses d’idées pour notre projet de fin
d’étude, cette dernière nous est apparue de façon évidente. En effet, nous nous sommes
rapidement dirigés vers notre sujet final car il répondait à un réel besoin auquel nous
avons tous été confronté un jour ou l’autre.
De plus, ce projet a un réel impact sur la vie des gens dans la mesure où il accompagne
l’un des changements le plus important dans notre vie : le passage du statut d’étudiant à
celui de travailleur, d’adolescent à adulte, ou les responsabilités semblent nous écraser.
Cette période est toujours synonyme de changements et d’interrogations, et ce, dans de
nombreux domaines aussi bien personnels que professionnels. Il faut réguler sa situa-
tion avec l’assurance maladie, bien souvent quitter le foyer familial qui est la plupart du
temps la maison de son enfance, il est aussi judicieux de bien comprendre sa fiche de
paye… et tellement d’autres choses. De surcroît toutes ces démarches arrivent quasi-
ment au même moment et nous n’y sommes pas forcement tous préparés. Pourtant c’est
un passage obligé et l’on remarque que si on comprend bien toutes les subtilités de ces
formalités elles nous semblent beaucoup plus accessibles et digestes.
Cependant, un des problèmes qui se pose, aussi bien à vous qu’à nous, est que les sujets
qui nous rebutent sont loin d’être les plus palpitants à traiter. Ils sont souvent lourd de
contenu et font bien plus peur qu’autre chose.
Lors de notre premier tour d’horizon sur la toile nous avons immédiatement observé
des sites très complets qui traitent déjà de ces problématiques. Le contenu est présent
en quantité et on peut, avec beaucoup de courage, trouver la ou les réponses à nos ques-
tions. C’est la mise en forme de ces informations qui pourrait être travaillée de sorte que
l’information soit plus agréable et intelligible. Après avoir fait ces constations et clarifié
notre volonté d’apporter une solution, notre problématique s’est dessinée de manière
très instinctive :
Comment rendre attrayant et compréhensible un sujet qui ne l’est pas ?
9

11. 1. Stratégie marketing
«Panique à bord, quand le jeune fait face aux responsabilités»
1.1 Présentation du public : socio-style
Notre service s’adresse à un public bien précis. Il s’agit des personnes qui passent du
statut d’étudiant à celui de travailleur et qui se confrontent aux changements naturels de
leurs statuts. Sont donc aussi bien concernés les femmes que les hommes, toutes caté-
gories socio-professionnelle confondues. Ils sont, pour la plupart, des urbains mobiles
ayant accès à internet ou possédant au minimum un smart-phone.
• Notre cœur de public est âgé de 18 à 25 ans.
• Notre public secondaire englobe quant à lui des cas plus «atypiques» (tels que
les travailleurs plus jeunes ou plus âgés que la «normale») et est donc de ce fait
plus général. Il s’étend ainsi de 16 à 28 ans.
1.2 Positionnement et questionnement
Où se place le petit guide de survie dans le marché actuel ?
Les français sont de plus en plus perdus face aux problèmes juridiques et l’ajout per-
pétuel de nuances aux différents textes de lois qui régissent leur vie. Pour lutter contre
ce mal, Internet est une source rapide et régulièrement mise à jour. Il est utilisé par un
grand nombre d’entre eux et est reconnu pour faciliter l’aide de nombreuses person-
nes. Cependant, comme nous l’avons déjà évoqué précédemment, la totalité des sites
proposant une information détaillée sur ces sujets sont extrêmement compliqués dans
leur architecture. Les informations existent bel et bien mais elles sont noyées dans la
masse d’une longue suite de paragraphes que rien ne distinguent les uns des autres. De
plus ce sont souvent des découpes de texte de lois qui sont directement proposées aux
internautes. Pas forcément accessibles à tous, donc. Le positionnement du petit guide de
survie est simple : proposer aux internautes une information claire, rapide et pertinente
en réponse à ses attentes.
Pour cela, nous avons décidés de simplifier au maximum le service en jouant sur deux
principaux fronts. D’une part, un site propre disposant d’une base de données regrou-
11

12. pant toutes nos vidéos et de l’autre, une insertion de ces mêmes vidéos chez différents
partenaires.
1.3 Les partenaires
L’introduction nous a déjà permis de souligner l’existence de nombreux sites d’infor-
mations identiques à celles que nous allons traiter. Certes, leur contenu est très complet,
mais leur mise en forme ne facilite pas la compréhension des informations et conseils
dispensés. Le petit guide de survie n’a pas la prétention d’être innovant dans son conte-
nu mais bien d’illustrer celui-ci de la manière la plus judicieuse possible. Dès lors, il
nous a paru judicieux et même essentiel de réutiliser les informations présentes sur
les sites spécialisés, car nous n’avions pas les compétences requises pour éditer nos
propres sujets. C’est pourquoi nous avons décidé de faire d’eux nos partenaires. Ainsi,
nous pourrons profiter de leur notoriété en étant présent sur leur site et en utilisant leur
contenu, tout en leur donnant la possibilité d’atteindre une cible nouvelle : les jeunes
travailleurs !
Nous serons donc visibles depuis les sites de nos partenaires, via nos vidéos, et si possi-
ble des bannières publicitaires, et bien entendu, dans les crédits.
1.4 Quelles sont les retombées attendues et comment vont elles
être mesurées ?
Nous comptons sur la visibilité que nous offrent nos partenaires, mais aussi la diversité
des supports et médias qu’englobe notre petit guide de survie pour nous garantir de
nombreux retours dans un premier temps.
L’apparition d’une vidéo chez un de nos partenaires nous permettra de gagner en noto-
riété, et donc en partenaires. Le cas échéant, nous pourrons développer l’activité du pro-
jet afin de proposer d’avantage de vidéo à un rythme plus soutenu, qui pourrait appro-
cher six vidéos par mois, soit une vidéo par thématique tous les mois. L’augmentation
de l’audience, du taux de clic et de fréquentation des sites nous sera bénéfique aussi bien
qu’à nos partenaires. Le téléchargement de l’application smart-phone est également un
bon réfèrent qui nous permettra d’accéder à une dimension importante de notre projet :
l’aspect nomade de notre service.
12

13. Bien évidemment, l’un des moyens les plus simples pour avoir un retour d’expérience
direct est de laisser la parole aux principaux intéressés que sont nos utilisateurs. Ils
auront la possibilité de s’exprimer via un forum participatif ouvert. Ce forum nous per-
mettrait de déterminer les futures thématiques à traiter dans les vidéos suivantes.
Après quoi, nous serons en mesure de développer une équipe. Pour permettre un rende-
ment maximal, elle serait composée d’un développeur, de graphistes, dont des freelan-
ces, d’un service marketing et communication, et un gestionnaire assurerait le rythme
de travail soutenu qu’impose un projet comme celui-ci. En somme, une agence complète
afin de gérer l’ensemble des aspects de notre projet pour ne dépendre d’aucun tiers.
Envisager le déploiement du service à d’autres pays et dans d’autres langues si la ne-
cessite s’en fait ressentir est intéressant. Cependant il faut que les thématiques s’y prêtent:
malgré l’universalité de nos problématiques, certaines d’entre elles n’ont de cadre ju-
ridique qu’en France car elles ont des caractéristiques spécifiques à l’administration
française.
Viendront ensuite le développement spécifique à d’autres technologies et médias : des
plaquettes informatives, des applications interactives, des jeux, des bornes interactives
sont envisageables. Il faut voir grand !
Et enfin, la retombée la plus appréciable, et qui fait partie intégrante de notre problé-
matique, serait d’améliorer l’image et la perception de l’administratif et des autres do-
maines d’informations. Car nous le savons, les français, et surtout notre public jeune, ne
sont pas friands de paperasse administrative.
Remarque 1:
Selon l’AFD - l’Alliance Française des Designers-, l’étude sur l’économie du design me-
née en 2010 relève que la performance du design est appréciée de façon souvent empiri-
que et intuitive par les entreprises. Elle a des retombées remarquables sur l’appréciation
de la marque et/ou des services :
• Augmenter la satisfaction des clients (pour 74,5 %).
• Mieux différencier vos produits et services de la concurrence (67,9 %).
• Rendre votre entreprise globalement plus créative (67,9 %).
• Améliorer votre compétitivité (55,7 %).
• Accéder à de nouveaux marchés (59,4 %).
1
AFD, documentation en ligne et gratuite : “comment écrire un brief ? ”
13

15. 2. Stratégie de communication
2.1 Le design d’information et le Data Flow
Pour répondre à notre problématique, il nous faut rendre l’information plus claire et
compréhensible. En tant que graphiste il nous semblait à tous trois logique de nous ser-
vir de notre principal atout : la maîtrise des éléments visuels. Nous ne nous en doutions
alors pas, mais notre solution portait le nom de «design d’information».
Le design d’information, lorsqu’il est graphique, se destine à structurer et à mettre en
forme une information, un contenu, de manières plus claires et directes. Il englobe à
la fois la sélection des informations à présenter, leur structuration et leur visualisation.
L’idée étant, ici, qu’un bon croquis vaut mieux qu’un long discours. “Le design d’infor-
mation répond à une méthodologie qui doit suivre plusieurs étapes :
• Recueil de l’information
• Analyse, tri et hiérarchisation de l’information
• Extraction des facteurs principaux
• Mise en forme par les designers avec recherche d’un cohérence au sein d’un
système graphique
• Tests de lisibilité/visibilité du résultat graphique conçu par les designers” 2
Dans un premier temps nous avons observé ce qui se faisait dans ce domaine. Cédric
Villain, enseignant à l’ESAAT, est un spécialiste dans l’animation du design d’infor-
mation. Ses courts-métrages sont populaires, notamment pour leur richesse graphique
et leur qualité à synthétiser et communiquer de l’information. Son court-métrage «Lait
Caramel & Chocolat» réalisé en 2010 à l’occasion du «Défi de fous» numéro 15, apporte
une réflexion sur les différentes couleurs de peau. La grande force de «Lait Caramel &
Chocolat» est l’univers poétique que Cédric Villain a réussi à donner à ce court-métra-
ge. En effet, un véritable jeu s’instaure entre les différentes couleurs de peau. Il a préa-
lablement filmé différentes couleurs de peau (lait, caramel et chocolat) en macro, qu’il
vient placer soit en tant que fond, soit en tant que forme. Ce procédé rend la vidéo plus
humaine et nous rappelle à chaque seconde le sujet principal. S’ajoute à ça bien sur un
travail graphique composé de formes très simple et de quelques mots clés qui viennent
souligner le discours de la voix off très présente.
2
Vollaire Louis. Le design d’information. In: Communication et langages. N°112, 2ème trimestre 1997. pp. 35-50
15

16. Autre exemple, l’émission franco-allemande «Karambolage» diffusée sur la chaîne Arte
a aussi été une forte source d’inspiration pour nous. Des courts-métrages de 12 minutes
sur un ton ludique et humoristique abordent ce qui nous rapproche et nous éloigne de
ces deux cultures. On peut citer des vidéos telles que la sardine en boîte, la meilleure
baguette de Paris ou encore le système universitaire français. Le traitement est toujours
très graphique et les courts-métrages se distinguent les uns des autres puisqu’ils sont à
chaque fois réaliser par des graphistes différents.
«This is you» est, quant à lui, un court-métrage de 3 minutes réalisé par la compagnie
Imaginary Forces pour l’entreprise américaine de meubles et de matériel de bureau Her-
man Miller. Ce petit film nous montre en image les avantages de travailler chez Herman
Miller. Nous avons particulièrement affectionné ce travail pour ces transitions fluides,
inventives et dynamiques. On y retrouve tout comme dans «Lait Caramel & Chocolat»
une voix off très présente accompagnée encore une fois de quelques mots clés. «This is
you» nous a fait réaliser qu’il est tout à fait possible de bien communiquer de l’informa-
tion avec un traitement graphique simple et réfléchi.
Une autre méthode de représentation graphique des données est le Data Flow (traduire
flux de données). Le Data Flow a pour vocation “de comprendre, de hiérarchiser et de
diffuser efficacement les informations” 3. Les métaphores visuelles facilitent grande-
ment la réflexion humaine. De tout temps, les codes ont été utilisés pour parvenir à nous
comprendre, créer et cerner pleinement la réalité. Le Data Flow est décrit comme étant
l’art des “motifs chargés d’intention” 3
Au quotidien, le Data Flow est déjà présent, sous la forme d’un simple guide de mon-
tage (sans prendre en compte la marque IKEA, dont les techniciens ne doivent pas avoir
assimiler le principe didactique). Dans notre cas, il est intéressant de se pencher sur les
schémas d’instructions et les manuels qui ont pour but de mettre en lumière le processus
de montage : faciliter la compréhension des étapes et guider l’utilisateur dans un océan
parfois complexe de significations.
La notion de simplexité est inhérente au traitement de l’information telle qu’on vient
de le découvrir. En effet, il existe dans le design graphique, une notion complémentaire
de simplicité et de complexité qui influence nos choix graphiques afin de produire des
graphiques qui doivent livrer l’information tout en étant esthétique. Attention, il ne faut
3
Klanten, Robert. Data flow 2, design graphique et visualisation d’information, édition Gestalten, 2010.
16

17. pas confondre le terme «simple», qui exprime le dépouillement de tout superflu avec le
terme «simpliste», qui exprime le fait de donner une vision incomplète des choses. Aller
à l’essentiel ! Cette approche qui a fait ses preuves (on constate le succès de la home
page de google.com) n’est pourtant pas évidente à mettre en pratique. John Maeda pré-
sente dans son ouvrage «De la simplicité» une véritable méthodologie de la simplicité
qui permet de comprendre énormément de chose sur ce sujet. Dix lois à propos de la
simplicité sont mises en évidence à la suite de la lecture de son livre : 4
• Réduction : pour atteindre la simplicité, le mieux est la réduction méthodique
• Organisation : avec de l’organisation, un ensemble composé de nombreux
éléments semble plus réduit
• Temps : en économisant son temps, on a le sentiment que tout est simple
• Apprentissage : la connaissance simplifie tout
• Différences : la simplicité et la complexité ont besoin l’un de l’autre
• Contexte : ce qui se trouve à la périphérie de la simplicité n’est absolument
pas périphérique
• Emotion : mieux vaut plus d’émotions que moins
• Confiance : dans la simplicité, nous avons confiance
• Echec : certaines choses ne peuvent jamais être simplifiées
• Loi cardinale : la simplicité consiste à soustraire ce qui est évident et à ajouter
ce qui a du sens
Nous réutiliserons cette notion de «simplicité» / «simplexité» pour la réalisation de nos
vidéos, puisqu’elles se doivent d’être de forme simple, au vu de notre public, tout en
délivrant les données nécessaires à la compréhension de l’information.
A la suite de cette recherche, nous nous sommes vite rendu compte qu’il existait un
grand nombre de création autour du Data Flow et du design d’information. Le second
nous intéresse d’avantage puisqu’il concerne l’information animée. L’un des points forts
qui nous a le plus marqué est la voix off. C’est le point commun de tous ces courts-mé-
trages. C’est un élément très important dont le but est de faire gagner du temps à la com-
préhension et ainsi de limiter la lecture. La lecture est peu présente mais vient renforcer
certains éléments du discours.
4
Maeda John, De la simplicité, Payot & Rivages, 2009.
17

18. 2.2 Schéma de complémentarité
Nous avons vu précédemment dans la stratégie marketing que la communication de
notre projet repose sur nos partenaires. Mais il y a a aussi tout autour de notre projet de
nombreux médias qui s’articulent entre eux et se complètent les uns les autres, ce qui
nous permet d’avoir une visibilité plus large sur Internet et sur des lieux physiques grâce
à nos partenaires.
Nous envisageons d’être présent aussi bien dans les locaux que sur les sites Internet de
nos partenaires pour toucher un grand nombre de personne sensible au sujet. Le site
Internet fera bien sur écho à nos différents partenaires. Il sera aussi intimement lié avec
les différents réseaux sociaux : twitter et facebook avec un système de “like” et de de
tweet très en vogue actuellement. Le fait d’être présent sur les réseaux sociaux est tout à
fait logique et judicieux vis à vis du public que l’on vise. L’application smart-phone sera
bien évidemment aussi mise en évidence sur le site Internet.
18

21. 3. Stratégie de création
3.1 Le petit guide de survie charte graphique
Vous aurez certainement compris une des subtilités de notre service : son nom. Au vu
des constatations et expériences de chacun, le titre de «Petit Guide de Survie» s’est
imposé de lui-même. D’une part, car on souhaitait lui donner un aspect convivial, l’ad-
jectif petit lui confère une sensation d’accessibilité et dédramatise les enjeux de notre
problème : l’administratif. Pour ce qui est de l’idée de «survie», elle parait tout d’abord
un peu extrême, mais le traitement graphique de notre charte lui rend son humour et sa
légèreté. On traite le sujet comme le ferait un aventurier, l’administratif est une jungle ou
des règles que l’on peut parfois qualifier de dépassées et barbares règnent encore. Puis
enfin, le vif du sujet, le guide puisque nous nous définissons comme un service d’aide à
la personne qui devra apporter des solutions et donc éclairer le jeune travailleur perdu et
effrayé par la charge insoutenable des responsabilités.
Voilà, vous savez tout sur notre nom, il est donc temps de faire un tour du côté du gra-
phisme !
3.1.1 Pictogrammes / Signes
Nous avons aisément, et cela grâce aux sites Internet de nos partenaires, dégager six
catégories pour répartir les vidéos : la famille, le logement, le voyage, l’administration,
la santé et l’argent.
Les recherches graphiques sur le traitement de ces catégories a été assez complexe.
En effet, nous ne voulions pas tomber dans le piège de se formaliser à un design trop
«administratif» et conventionnel très commun de nos jours (par exemple représenter le
logement avec un pictogramme en forme de maison).
La différence entre pictogramme et signe c’est fait sentir au cours de nos recherches.
Si nous partions dans des représentations trop abstraites, l’identification de la catégorie
devenait bien trop difficile à percevoir et la présence d’un texte devenait alors indispen-
sable, par contre nous étions dans ce cas, beaucoup moins conventionnel. A l’inverse,
en nous focalisant sur la représentation de la catégorie et donc en nous rapprochant
beaucoup plus d’un pictogramme nous étions beaucoup plus illustratifs et malheureuse-
21

22. ment formels. Les signes et les pictogrammes possèdent chacun leur lot d’avantages et
de d’inconvénients.
Pour sortir des sentiers battus nous avons décidé de continuer dans le prolongement de
la survie -inspiré du nom que nous avions donné au service- et donc de d’adopter un
ton décalé. Ce parti pris nous a permis de prendre une direction pour la création des
pictogrammes, on a tenté de continuer sur ce ton décalé. Nous avons attribué, à chaque
catégorie, une représentation imagée en rapport avec notre parti pris graphique :
• famille = un feu de campement : c’est un lieu convivial où l’on se retrouve en groupe.
• logement = un tepee : plus ludique qu’une tente il représente un endroit ou on loge.
• voyage = une rose des vents : pour faire le tour du globe.
• administratif = un nœud : signifie qu’il faut connaître l’astuce pour s’y retrouver !
• santé = des feuilles “médicinales” : faisons avec ce que la nature a à nous offrir.
• argent = des glands : tout comme l’écureuil épargnons les pour des hivers plus rudes.
Ces catégories se concentrent en cercle, comme des pastilles. Nous attribuons à chacune
d’elle une couleur différente de sorte qu’elles soient identifiable plus facilement. Nous
avons donc six couleur soutenues, pour avoir un ensemble coloré et convivial : rouge,
orange, jaune, vert, bleu et violet. Lors de nos premières recherches, les six pictogram-
mes obtenus nous semblaient être de trop. Nous avons donc décidé d’incruster une tex-
ture en fond. Nous avons apporté un peu plus d’authenticité à ces dessins numériques,
en déformant les lignes de nos symboles afin de faire «vibrer» leurs traits et de casser
ces lignes trop droites. Nous parlions précédemment du souci de la compréhension des
pictogrammes. Dans notre cas il était obligatoire d’accompagner nos pictogrammes du
nom de la catégorie pour interpréter la signification du pictogramme. En effet, nous
avons choisi pour plus de légèreté et d’humour des symboles en décalage avec nos ru-
briques mais il nous faut tout de même que cela reste compréhensible.
22

23. 3.1.2 Le logotype
Lorsque nous en sommes venus à nous interroger sur le logotype, nous avions déjà
conçu nos six pictogrammes. Et c’est une des raisons pour lesquels il a été très difficile
de le concevoir. Dans un tout premier temps nous avons fait des recherches typographi-
ques autour du nom du service : le petit guide de survie. Notre choix c’est finalement
porté sur la «Miso», une police de caractère créée en 2006 par un architecte suédois
Marten Nettelbladt. Son tracé particulier en fait une fonte monospace -à interlettrage
fixe-, moderne et originale. De plus, elle est distribuée gratuitement sous une licence
libre. La seule restriction est celle de ne pas vendre la police, ou de ne pas l’incorporer
dans une production elle-même vendue sans l’en avertir.
Nous avons ensuite fait des recherches graphiques pour le logotype. La première recher-
che c’est axée sur la réalisation d’un écusson -un morceau d’étoffe en forme d’écu cousu
sur un vêtement et sur lequel apparaît une marque particulière- en référence à notre
univers graphique proche du boy-scout. A l’intérieur de l’écusson nous avons choisi de
signifier le petit guide de survie par un petit livre ouvert. Mais rapidement nous nous
sommes rendu compte que nous retombions dans quelque chose de trop conventionnel
23

24. et une tautologie peu avenante. En effet, aucune surprise à représenter un guide par un
livre. D’un point de vue graphique, il y avait une multitude de tentative possible avec
l’écusson, du fait qu’il existe une écriture graphique et une sémiologie très riche. Il faut
noter qu’il n’était pas facile d’utiliser la couleur dans le logotype étant donné qu’on en
utilisait déjà six pour les catégories. Dans un autre axe de recherche, nous sommes partis
dans la création d’une septième pastille qui en quelque sorte viendrait clore la farandole
de pictogrammes. Tous les trois insatisfaits de ces recherches, nous nous sommes ques-
tionné sur la meilleure façon de communiquer avec notre logotype. Est-il nécessaire de
créer un signe en plus ?
Nous avons finalement constaté qu’il n’était pas nécessaire de créer un symbole de plus
pour notre logotype. La représentation du petit guide de survie, et le concept de notre
service se basaient autour de nos différentes rubriques. Elles sont visuellement fortes et
représentent tous les «outils» à la survie du «jeune en pleine nature». L’utilisation des
six pictogrammes comme ensemble donne une force incroyable au petit guide de survie
qui au final se suffit pour la communication de notre service. Nous avons opté pour deux
déclinaisons du logotype de manière à jongler entre les deux selon les formats et les
médias utilisés.
La première composition est linéale et ordonnée : les symboles se suivent sur un axe ho-
rizontal, et la typographie est placée en dessous de cette ligne et occupe toute la largeur
des pictogrammes. La seconde est centrale et plus rythmée que la première : les picto-
grammes sont disposés en cercle, ils viennent se superposer et un jeu de transparence
s’instaure.
Le problème de la lisibilité du logotype s’est posé, en effet, il est visuelle fourni, il n’est
donc pas envisageable de le garder complet à une petite échelle. Une fois réduit, les
symboles composant les pictogrammes ne sont plus lisibles. Nous avons donc décidé
que passé une certaine échelle, les pastilles ne garderaient que leur couleur ainsi que leur
jeu de transparence.
Nous obtenons, un logotype modulable qui peut, par sa mise en forme, s’inscrire dans de
nombreux médias et des formats différents. Il n’est pas interdit d’utiliser les pictogram-
mes séparé du nom du service et inversement.
24

26. 3.3 L’application mobile
Au jour d’aujourd’hui, plus aucun projet multimédia ne tient la route sans sa fameuse
déclinaison mobile ou son application dédiée aux smart-phones qui ont envahis nos
poches. Le petit guide de survie ne déroge pas à cette règle. En effet dans l’optique d’un
service nomade offrant aux utilisateurs des réponses rapides et claires à tout moment,
l’application le petit guide de survie est toute indiquée.
L’application reprend les caractéristiques graphiques de la charte mise en place.
Elle s’ouvre par un chargement inhérent à toute application mobile ou l’on retrouve le
logo du service. Après quoi, l’utilisateur arrive sur un schéma coloré de visualisation
dynamique d’information regroupant les dernières vidéos positionnées en fonction de
leurs liens de problématiques. C’est une time-line interactive offrant un coup d’œil gé-
néral sur les derniers éléments postés. Quatre onglets sont disponibles en bas de page.
Celui de notre time-line, appelé les News, celui des vidéos les plus populaires, regrou-
pant les dix vidéos les plus vues, un onglet permettant l’accès à la partie de recherche et
enfin un onglet dédié à la géolocalisation permettant aux utilisateurs de repérer ayant un
lien avec nos problématiques traitées.
Pour ce qui est de la partie des vidéos populaires, elle est mise à jour chaque semaine
et présente dans un ordre décroissant la liste de nos vidéos les plus vues. La fonction de
5
Issu du document intitulé « Flash code : un moyen de communication mobile » du site Internet CommentCaMarche.net
26

27. recherche est aussi complète que sur notre site Internet et propose un filtrage intelligent
des résultats en fonction des thématiques sélectionnées.Enfin la géolocalisation vient
compléter notre service en affichant clairement les partenaires à proximités et les vidéos
ayant un lien avec ces lieux. Le service nomade ainsi proposé est en totale adéquation
avec notre recherche de simplicité et de rapidité de réponse.
27

28. 3.4 Les flash codes
Il était également évident qu’il fallait être physiquement présent chez nos partenaires.
Pour communiquer sur notre service au sein des lieux publics, nous avons choisis d’uti-
liser le flash code. “Le flash code est un code en 2D permettant aux détenteurs d’un
mobile d’accéder à une page internet mobile spécifique” 5, avec le marché du mobile
en vogue, nous avions tout intérêt à utiliser cette technologie nomade pour notre com-
munication. En photographiant le flash code l’utilisateur pourra ainsi être dirigé vers
un lien internet ou sera présent une vidéo du petit guide de survie. Tout l’intérêt est de
mettre en avant le concept du petit guide de survie c’est à dire les courtes vidéo qui le
composent.
Notre communication ne se devait pas être lourde d’information d’une part parce que
cela ne ressemble pas à notre “philosophie” mais aussi parce que le lieu ne s’y prêtait
pas. En effet, il est rare de venir pour admirer la décoration de sa CAF, bien souvent
c’est un endroit où l’on est contraint d’aller, soit pour trouver une information, soit pour
régulariser sa situation … On ne s’y attarde donc pas tellement. C’est pour cela que
nos flash codes devaient interpeller, attirer l’intention de manière à inciter notre public
à le photographier. De toutes les recherches la proposition la plus simple est ressortie.
Les flash codes se composent uniquement d’une question ou d’un titre explicite sur une
problématique ou un sujet. Cette phrase est mise en avant par un fond coloré qui reprend
le code coloré assigné à la catégorie auquel il appartient, par exemple, le logement est
assimilé au rouge. Le flash code est aligné au niveau de la question et de taille équiva-
lente afin d’être lisible et visible.
Nous nous sommes posé la question de la présence de notre logotype sur les stickers ?
Est-il nécessaire de «signer» nos flash code ? Afin de mettre en place un teasing, nous
avions pris le parti, dans un premier temps, de ne pas mettre le logotype. Mais dans un
souci de sensation d’insécurité pouvant être néfaste à notre communication, nous avons
décidé d’intégrer le logotype aux stickers, afin d’être reconnue comme entité légale.
Nous avions imaginé un autre type de stickers utilisant la technologie de la réalité aug-
mentée. La réalité augmentée consiste à superposer des images virtuelles (3D) sur la
réalité en temps réel. Ce dispositif connaît un essor depuis quelques années, grâce à
l’évolution des technologies numériques, permettant une utilisation simplifiée et plus
efficace. Il nécessite l’utilisation d’une caméra, d’un écran et d’un logiciel : aujourd’hui,
les mobiles sont des supports parfaits.
28

29. Cette technologie permet aujourd’hui d’imaginer des supports de communication évo-
lué. Il est possible d’utiliser n’importe quel objet comme marqueur de la réalité aug-
mentée. Dans notre cas, on pourrait imaginer des stickers qui, filmés avec un téléphone
doté d’une caméra, permettrait de lire la vidéo en direct du lieu de nos partenaires. Total
immersion, l’agence française spécialisée dans la réalité augmentée, a fait évoluer cette
technologie en la libérant du marqueur une fois «scanner», ainsi, l’utilisateur pourra lire
la vidéo hors du support (stickers).
29

30. 3.5 Le site internet
La question de l’utilité de sa création s’est tout d’abord posée. Notre service a-t-il réel-
lement besoin d’un site Internet ?
Nous nous sommes beaucoup interrogés tout au long de notre projet sur les partenaires
et l’envie de faire du petit guide de survie un service nomade nous a beaucoup séduits.
Mais est-ce possible de pouvoir s’appuyer uniquement sur les partenaires et les réseaux
sociaux pour communiquer sur le web ? A cette question nous en avons déduit que
non.
Pourquoi ? Les vidéos se doivent d’être consultable quelque part facilement avec un
système de recherche et d’autres fonctionnalités à envisager. Nous ne pouvons pas nous
permettre de ne posséder uniquement qu’un compte Viméo puisque cela ne serait pas
pratique. Dans l’optique de développer le projet, la gestion d’un contenu sur un site
communautaire dépassant les 100 vidéos deviens difficile. De plus cela ne met pas en
valeur notre service et à tendance à décrédibiliser notre service. Donc en créant notre
espace sur la toile, notre site internet, on crédibilise le petit guide de survie, on lui donne
une existence.
Notre site internet s’adresse à deux publics, le premier, notre public principal sont les
personnes qui rencontres des problèmes et qui cherche une solution ce qui revient en fin
de compte à notre public déjà présenté précédemment dans la stratégie marketing. Le
public secondaire concerne les personnes qui sont sensible au graphisme et qui consulte
les vidéos de design d’information par curiosité visuelle.
Pour ne pas surcharger le site Internet nous avons décidé d’aller à l’essentiel. La page
d’accueil est divisible en trois parties :
• la recherche
• les «news»
• les vidéos les plus populaires
Le nom du service est visible en haut de page, centré. En dessous, la partie recherche
s’adresse à notre public principal. Elle est agrémentée d’un système de sélection par
catégorie qui vient par la même occasion donné à voir les six rubriques principales que
traite le petit guide survie. Plus bas se trouve les «news» et les plus populaires destinées
aussi bien à notre public secondaire que premier. On peut remarquer qu’il n’y a qu’un
seul lien interne dans le site dédié à une page pour présenter nos partenaires. Le fait de
30

31. ne pas avoir de niveau dans le site Internet est tout à fait volontaire. Le plus fatiguant
dans les sites d’information est la perte de temps qu’il y a à trouver de soi-même ce que
l’on ait venu chercher, bien souvent il y a des sous-sous catégories dans des sous-catégo-
ries… Ici on ne veut pas que l’utilisateur sente la lourdeur d’une recherche. Cependant
il y a de nombreux liens externes : les réseaux sociaux -twitter, facebook- et un lien pour
nous contacter.
31

32. La recherche qui est le cœur de notre projet est bien évidemment volontairement mise
en avant, bien souvent située en haut à droite, nous l’avons placé au centre. Le champ
de recherche s’inscrit dans le contexte d’une phrase : “Je veux en savoir plus sur…” de
manière à humaniser la recherche. Lorsque l’on tape un ou plusieurs mots clés, le champ
de recherche s’agrandit pour laisser place aux vidéos correspondantes. Ces dernières ap-
paraissent de la plus pertinente à la moins pertinente en se référant aux tags. Le résultat
de la recherche est affiché en temps réel pendant la saisie de l’internaute.
La partie «news» met en évidence les derniers courts-métrages réalisés. Un système
de slide (flèche précédente et suivante) est présent pour visualiser d’autres vidéos, au
nombre de quatre maximum. Cette partie permet d’avoir directement accès à la lecture
d’une vidéo. Des informations textuelles sur cette dernière sont apportées : description,
auteur, tags mais aussi la possibilité de twitter et de «liker».
La partie des vidéos les plus populaires, comme son nom l’indique, permet de consulter
les courts-métrages qui ont le plus de succès. Tout comme les «news», un système de
bouton permet de naviguer sur plusieurs pages sans quitter la home.
Les courts-métrages ont toujours comme information le nombre de vues et de la date
de leur parution sur le site. Le survol sur les vidéos est accompagné d’un effet de noir
opacifié ce qui vient assombrir l’image. La date et la catégorie de la vidéo y sont ins-
crites ainsi que la notation (représentée par des étoiles) donnée par les internautes. Les
éléments graphiques sont bien sûr en accord avec les codes colorés des catégories. Il
faut noter que le lecteur vidéo est personnalisé, il est en accord avec le code coloré de
la rubrique.
D’un point de vue technique, le site Internet est développé en HTML5, son format est de
1024 par 728 pixels. L’avantage principal du HTML5 est sa facilité au niveau de la mise
en ligne et de la lecture des vidéos pour les internautes (classique et mobile) puisqu’il
n’y a pas besoin d’utiliser des composants comme Adobe Flash, Google Gears ou en-
core Microsoft silverlight. En effet, ce nouveau standard possède des fonctionnalités tel-
les que l’intégration de vidéo. En parallèle une base de données en PHP est primordiale
pour gérer nos courts-métrages.
Après réflexion le site Internet pourrait avoir un esprit plus communautaire et posséder
des fonctionnalités telles que l’ajout de commentaires. Dans ce cas de figure il est essen-
tiel de passer par un système de comptes et donc d’une gestion avec une base de donnée
en PHP. Cette possibilité n’a malheureusement pas pu être développée d’avantage dans
nos premières réalisations.
32

33. 33

34. 3.6 Le générique
Afin d’instaurer une régularité et une unité dans la production de nos animations, nous
avons mis en place des génériques de début et de fin. Ils viennent structurer les vidéos
et les identifier comme appartenant au groupe d’animation constituant le petit guide de
survie.
Ils sont composés d’éléments visuels et sonores qui respectent notre charte graphique.
On y retrouve le logo sous ses deux formes : leur animation permet de faire le lien entre
les deux différents formats de composition utilisé dans la charte (le format horizontale
et le logotype de forme «ronde»). Dans un second temps, la thématique traitée est intro-
duite, d’un par l’animation du pictogramme qui la désigne -le tepee pour le logement,
par exemple- puis par l’apparition du titre de la rubrique. Enfin, le problématique est
posée, suivi de l’animation qui répond à ce problème.
Le générique de fin, quant à lui, permet de mettre en évidence les divers protagonistes
ayant contribué à la création de l’animation. Mais aussi de conclure sur notre logo et
de rappeler l’adresse Internet où se rendre pour obtenir d’avantages d’informations sur
le service. Ainsi, si la vidéo est hébergée chez l’un de nos partenaires, l’internaute peut
être redirigé vers notre site web.
Pour souligner notre parti pris graphique, nous avons ajouté une bande sonore à nos gé-
nériques. Nous avons fait le choix d’un morceau actuel et tendance, pour ne pas tomber
dans le tout «scout». Il se compose d’une série de percussions, ponctués d’un tintement,
le tout rythmant l’animation.
34

36. 3.7 L’animation
Le cœur de notre service est la production d’animation visant à vulgariser l’information
et à la rendre plus légère et compréhensible pour notre public. Pour cela, nous avons fait
le choix judicieux de donner à chaque animation son propre traitement graphique. Elles
n’adopteront donc pas la charte graphique générale de notre concept. Dès lors, nous
pourrons traiter les problématiques de manière isolées et créer une ambiance propre à
chaque sujet. Un thème plus délicat comme un souci d’argent n’aura pas le même sché-
ma graphique qu’un sujet traitant de l’obtention d’un visa pour un stage à l’étranger.
Cette variété graphique donnera une certaine fraîcheur à chaque nouvelle production et
respectera notre problématique qui est de «rendre nos sujets plus attrayants».
Pour la production de notre première vidéo, nous avons fait le choix de sélectionner la
thématique sur Internet, parmi les nombreux problèmes posés sur les forums de nos
partenaires. Nous avons conclu qu’il fallait traiter un problème lié au logement, et plus
précisément, la colocation. C’est un des sujets les plus récurrents sur les FAQ et forum
et nous trouvions le sujet adapté à notre public : quand on a 20 ans, il n’est pas évident
de se loger, la colocation est une solution simple et économique.
Seulement, vivre en communauté est une chose, mais s’entendre avec son colocataire
en est une autre, mésentente, désaccord financier, point de vu divergeant, disons-le, la
colocation est aussi une source de problèmes.
Nous avons abordé au travers de notre première animation la question suivante : «Com-
ment quitter sa colocation ? ». Dans un premier temps, nous avons retourné le problème,
afin de définir exactement ce qu’il en était : deux colocataires en désaccord, l’un deux
doit quitter l’appartement.
Jusque-là, on ne voyait pas le souci, comme toute location, il suffisait, d’après nous,
d’envoyer un préavis à son propriétaire selon les clauses définies dans le bail de location.
Nous nous trompions, comme la plupart des colocataires, nous ignorions l’existence de
la clause de solidarité. Après des recherches fructueuses, nous avons pu définir en quoi
elle consistait.
La clause de solidarité : «celui qui quitte la location (ou la personne qui s’est portée
caution pour lui) est toujours tenu de payer sa part de loyer, et cela jusqu’à la fin du bail
(si un nouveau colocataire ne l’a pas remplacé). Et si les locataires restants ne payent
36

37. plus leur loyer, il est même tenu de régler leur part ! A savoir : si le bailleur considère
que les colocataires restants présentent des garanties suffisantes en particulier à travers
la caution, il peut alors rédiger un avenant au contrat de colocation, destiné à libérer le
colocataire qui quitte le logement de cette obligation.»6
Nous avions notre sujet, nous avons donc commencé la rédaction d’une narration selon
le schéma narratif habituel (la situation initiale, l’élément déclencheur, le dénouement,
la situation finale…). Nous avons rédigé un scénario simple, en quelques scènes clés
permettant de mettre en place l’intrigue et de la résoudre rapidement. D’après cette
narration, nous avons dessiné un story-board composé de l’ensemble des éléments clas-
siques d’une animation (mouvement de caméra, voix off…). Ce story-board ne tradui-
sait pas encore le traitement graphique, c’est pourquoi nous avons ensuite effectué des
recherches : nous avons effectué une série de pige sur les tendances actuelles afin de
s’adapter à notre public.
De cette veille graphique, nous avons déterminés un parti pris graphique : nous optons
pour un panel de couleurs vives, voire de couleurs complémentaires, afin de créer un
ensemble dynamique. Pour accentuer sur la dualité mise en place par la mésentente
dans la colocation, nous utilisons des aplats colorés que l’on superpose à la manière de
calques transparents. Ce jeu de superposition crée une interaction entre les éléments de
l’animation : ils se rencontrent, se juxtaposent mais se distinguent. Afin d’apporter du
réalisme et du vivant au discours, nous avons ajouté un univers sonores aux scènes clés
de l’animation, des verres et des glaçons qui tintent pour rappeler la fête par exemple.
Bien entendu, au vu de la simplicité de notre vidéo, une voix off était indispensable pour
retranscrire les détails de notre scénario, dès lors, elle devient le protagoniste omniscient
qui nous donne la solution à notre problème, ici, la clause de solidarité et la recherche
d’un locataire de remplacement pour éviter les encombres.
Les vidéos sont réalisées en haute définition (HD), au format 1280 par 720 pixels. Elles
sont hébergées sur Viméo afin d’être exportables chez nos partenaires. Elles sont visi-
bles sur notre application smart-phone, sur notre site web, chez nos partenaires et sur
les divers réseaux sociaux pour les plus récentes. Ainsi, elles ont une visibilité large sur
Internet.
6
Issu du site www.reussirmavie.net dans l’article La colocation mode d’emplois
37

41. Conclusion
Le projet offre beaucoup de possibilités à venir, avec son lot de questionnement. Nous
sommes conscients qu’il y a correction possible à apporter à notre projet, notamment
du point de vu du développement, nous avons manqué de compétences, ce qui a été un
préjudice non négligeable dans la création de nos supports d’interaction -site et appli-
cation-.
Notre concept, le petit guide de survie nous semble être un projet novateur et d’utilité
public : repensons au contexte de création qui nous a poussé à imaginer ce guide. Il est
indispensable d’imaginer des solutions pour ce problème d’interprétation d’informa-
tions qui peuvent se révéler cruciales, surtout dans notre société où il est si facile d’ac-
céder aux ressources nécessaires grâce à la mobilité et aux flux d’informations toujours
plus nombreux.
Ce projet à été l’occasion, pour nous, d’expérimenter une approche différente du gra-
phisme à travers le design d’information. C’est un domaine qui tend à se répandre : la
communication ludique et utile, que l’on peut aussi traduire par la communication di-
dactique. Aujourd’hui, plus que jamais, schémas didactiques, jeux ludo-éducatifs, data
flow et graphisme participent à la compréhension des choses de ce monde parfois diffi-
cile à exprimer et à expliciter par les média habituels.
Comme nous l’avons souligné dans la présentation de l’équipe nous avons tous les trois
notre univers graphique, il a donc été question de s’harmoniser, de se compléter mais
aussi de se faire confiance. C’était une expérience à la fois complexe, puisqu’il a fallu
appréhender un logiciel jusque-là peu utilisé, After Effect, et enrichissante puisque l’on
a eu l’occasion de produire une vidéo : scénario, story board et réalisation.
Concernant le court-métrage que nous avons réalisé, “Comment quitter sa colocation ?”
nous avons déjà de bons retours. Notamment d’un anglophone qui nous a indiqué avoir
cerné la thématique de notre vidéo malgré la barrière de la langue. C’est un retour valo-
risant et agréable pour le travail d’animation graphique qui a été effectué. On envisage
d’ailleurs d’ajouter des sous-titres, voire de reprendre la voix off en anglais.
41

43. Annexes

46. Le petit guide
Le petit guide de survie
de survie
Comment obtenir un Je n’en peux plus de mon
passeport en urgence? collocataire! Que faire?
Comment obtenir un Je n’en peux plus de mon
passeport en urgence? collocataire! Que faire?
Le petit guide Le petit guide
de survie de survie
Comment obtenir Je n’en peux plus
un passeport en de mon collocataire!
urgence? Que faire?

47. Lire et comprendre
sa 1ère fiche de paie
Lire et comprendre
sa 1ère fiche de paie
Comment obtenir un
passeport en urgence ?
Comment quitter sa colocation?

53. Planning board
1. D’après des expériences et des constations, on définit le projet.
2. Une équipe est mise en place.
3. On se concentre sur nos observations et on définit un problème à résoudre.
4. On se pose la question de la faisabilité.
5. On définit une cible et création du brief.
6. On fait une étude de marché, benchmark.
6.1 On fait une veille graphique et informatique sur les tendances qui attirent
notre cible
6.2 On étudie le design d’information
6.3 Définition des supports à utiliser
6.4 Contact avec les partenaires : envoi du brief
7. Développement : recherches graphiques , définition d’une charte graphique
8. Production : mockeup, scénario, storyboard, maquette, développement etc.
9. Finalisation des livrables :
- Charte graphique
- Site Internet
- Application smart-phone
- Stickers / Flashcode
- Animation /Générique
10. Mise en ligne
11. Oral
53

55. Le projet en quelques lignes
Le petit guide de survie est un service s’adressant à un public de jeunes travailleurs
éprouvant des difficultés avec l’administration. Ce dernier est souvent synonyme de
paperasse et de bouleversement, mais qui sont s’y ont les comprends plus simple à gérer.
Le petit guide de survie a pour vocation de répondre à ce besoin qui se fait sentir.
Les mots clés
Motion design, internet, service à la personne, jeune, aide, design d’information, loge-
ment, argent, voyage, famille, administratif, santé.
55

57. Bibliographie et webographie
Bibliographie
Baer, Kim. Information Design Workbook: Graphic approaches, solutions, and inspira-
tion + 30 case studies, Rockport Publishers, 2010
Klanten, Robert. Data flow, design graphique et visualisation d’information, édition
Gestalten, 2008
Klanten, Robert. Data flow 2, design graphique et visualisation d’information, édition
Gestalten, 2010
McCandless David, Information is Beautiful, édition Hardcover, 2010
Steinweber, Philipp et Koller, Andreas. Information Design, Handbook Feature, F+W
Publications / HOW Book, 2010
Vollaire Louis. Le design d’information. In: Communication et langages. N°112, 2ème
trimestre 1997. pp. 35-50.
Webographie
l’AFD : http://www.alliance-francaise-des-designers.org/
Guide sur la colocation : http://www.mce-info.org/uploaddocumentationfichier/46fichi
er1.pdf
Les divers sites d’informations :
• le site du gouvernement : www.service-public.fr/
• le site des étudiants : www.letudiant.fr/
• des renseignements sur la colocation : http://www.colocation.fr
• pour les articles de loi : http://www.legifrance.gouv.fr/
57