SlideShare une entreprise Scribd logo
le petit guide de survie
_____________________________________________

    Elodie Jaeger, Médéric Lulin, Peggy Durand
        Master CEN 1 - Paris 8 - juin 2011
Le petit guide survie
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
Le petit guide survie
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
Le petit guide survie
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
Le petit guide survie
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
Le petit guide survie
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
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
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
Le petit guide survie
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
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
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
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
Le petit guide survie
Le petit guide survie
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
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
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
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
Le petit guide survie
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
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
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
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
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
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
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
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
Le petit guide survie
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
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
Le petit guide survie
Le petit guide survie
Le petit guide survie
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
Le petit guide survie
Annexes
Le petit guide survie
Le petit guide survie
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?
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?
Le petit guide survie
Le petit guide survie
Le petit guide survie
Le petit guide survie
Le petit guide survie
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
Le petit guide survie
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
Le petit guide survie
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
Le petit guide survie
Le petit guide survie
Le petit guide survie

Contenu connexe

Tendances

Touche pas à ma Pub - Présentation du projet
Touche pas à ma Pub - Présentation du projetTouche pas à ma Pub - Présentation du projet
Touche pas à ma Pub - Présentation du projet
laetitia_brosse
 
Présentation_CONF_COM
Présentation_CONF_COMPrésentation_CONF_COM
Présentation_CONF_COM
Association Fréquence écoles
 
Startup Week Reloaded.digital
Startup Week Reloaded.digital Startup Week Reloaded.digital
Startup Week Reloaded.digital
Aymeric Bellamy-Brown
 
Concevoir une WebApp pour les professionnel(le)s du Droit
Concevoir une WebApp pour les professionnel(le)s du DroitConcevoir une WebApp pour les professionnel(le)s du Droit
Concevoir une WebApp pour les professionnel(le)s du Droit
Romina Alvarez
 
Ludivine Caron | Rapport de stage | Licence 3 | Agence de communication multi...
Ludivine Caron | Rapport de stage | Licence 3 | Agence de communication multi...Ludivine Caron | Rapport de stage | Licence 3 | Agence de communication multi...
Ludivine Caron | Rapport de stage | Licence 3 | Agence de communication multi...
Ludivine Caron
 

Tendances (6)

Touche pas à ma Pub - Présentation du projet
Touche pas à ma Pub - Présentation du projetTouche pas à ma Pub - Présentation du projet
Touche pas à ma Pub - Présentation du projet
 
Présentation_CONF_COM
Présentation_CONF_COMPrésentation_CONF_COM
Présentation_CONF_COM
 
Startup Week Reloaded.digital
Startup Week Reloaded.digital Startup Week Reloaded.digital
Startup Week Reloaded.digital
 
Concevoir une WebApp pour les professionnel(le)s du Droit
Concevoir une WebApp pour les professionnel(le)s du DroitConcevoir une WebApp pour les professionnel(le)s du Droit
Concevoir une WebApp pour les professionnel(le)s du Droit
 
Ludivine Caron | Rapport de stage | Licence 3 | Agence de communication multi...
Ludivine Caron | Rapport de stage | Licence 3 | Agence de communication multi...Ludivine Caron | Rapport de stage | Licence 3 | Agence de communication multi...
Ludivine Caron | Rapport de stage | Licence 3 | Agence de communication multi...
 
CECOSDA- SPECIFICITES DE LA SENSIBILISATION DANS LE NORD CAMEROUN
CECOSDA- SPECIFICITES DE LA SENSIBILISATION DANS LE NORD CAMEROUNCECOSDA- SPECIFICITES DE LA SENSIBILISATION DANS LE NORD CAMEROUN
CECOSDA- SPECIFICITES DE LA SENSIBILISATION DANS LE NORD CAMEROUN
 

En vedette

Las 10 razones por las NO podemos votar por Evo Morales tras diez años de go...
Las 10 razones por las NO podemos votar por Evo Morales  tras diez años de go...Las 10 razones por las NO podemos votar por Evo Morales  tras diez años de go...
Las 10 razones por las NO podemos votar por Evo Morales tras diez años de go...
Alejandra Prado
 
Sample
SampleSample
Sample
caratozn
 
Mamás encuesta
Mamás   encuestaMamás   encuesta
Mamás encuesta
Plof
 
Chagall portage-ppt
Chagall portage-pptChagall portage-ppt
Chagall portage-ppt
chagallportage
 
L’archivage de la vidéo. HEG Préservation, Lichtspiel Bern, 29.4.2015
L’archivage de la vidéo. HEG Préservation, Lichtspiel Bern, 29.4.2015L’archivage de la vidéo. HEG Préservation, Lichtspiel Bern, 29.4.2015
L’archivage de la vidéo. HEG Préservation, Lichtspiel Bern, 29.4.2015
yvesnie
 
Présentation th u233
Présentation th u233Présentation th u233
Présentation th u233
Pascal Bellanca-Penel
 
Marie RéRé
Marie RéRéMarie RéRé
Marie RéRé
flo63000
 
Essai facebook
Essai facebookEssai facebook
Essai facebook
Olivier Dzomo
 
Scoop.it didacticiel 2
Scoop.it didacticiel 2Scoop.it didacticiel 2
Scoop.it didacticiel 2
gweiss8
 
Sfsic Assises 2009 P Delabroise
Sfsic Assises 2009 P DelabroiseSfsic Assises 2009 P Delabroise
Sfsic Assises 2009 P Delabroise
SFSIC Association
 
Diaposas Coulversion2006
Diaposas Coulversion2006Diaposas Coulversion2006
Diaposas Coulversion2006
fredlescure
 
C.c.5.1. energie des changements d'états
C.c.5.1. energie des changements d'étatsC.c.5.1. energie des changements d'états
C.c.5.1. energie des changements d'états
Pascal Bellanca-Penel
 
El Partenón
El PartenónEl Partenón
El Partenón
Mercedes Casuso
 
On Regarde Simplement
On Regarde SimplementOn Regarde Simplement
On Regarde Simplement
guestd73ebfa
 
La Paix
La PaixLa Paix
VI News Letter Juillet Aout2009
VI News Letter Juillet Aout2009VI News Letter Juillet Aout2009
VI News Letter Juillet Aout2009
Fanny Perregaux
 
Manual de COLORNET
Manual de COLORNETManual de COLORNET
Manual de COLORNET
Jorge Mario Alzate León
 

En vedette (20)

Las 10 razones por las NO podemos votar por Evo Morales tras diez años de go...
Las 10 razones por las NO podemos votar por Evo Morales  tras diez años de go...Las 10 razones por las NO podemos votar por Evo Morales  tras diez años de go...
Las 10 razones por las NO podemos votar por Evo Morales tras diez años de go...
 
B2 d1
B2 d1B2 d1
B2 d1
 
Sample
SampleSample
Sample
 
Mamás encuesta
Mamás   encuestaMamás   encuesta
Mamás encuesta
 
Chagall portage-ppt
Chagall portage-pptChagall portage-ppt
Chagall portage-ppt
 
Fantastic
FantasticFantastic
Fantastic
 
L’archivage de la vidéo. HEG Préservation, Lichtspiel Bern, 29.4.2015
L’archivage de la vidéo. HEG Préservation, Lichtspiel Bern, 29.4.2015L’archivage de la vidéo. HEG Préservation, Lichtspiel Bern, 29.4.2015
L’archivage de la vidéo. HEG Préservation, Lichtspiel Bern, 29.4.2015
 
Gastronomie
GastronomieGastronomie
Gastronomie
 
Présentation th u233
Présentation th u233Présentation th u233
Présentation th u233
 
Marie RéRé
Marie RéRéMarie RéRé
Marie RéRé
 
Essai facebook
Essai facebookEssai facebook
Essai facebook
 
Scoop.it didacticiel 2
Scoop.it didacticiel 2Scoop.it didacticiel 2
Scoop.it didacticiel 2
 
Sfsic Assises 2009 P Delabroise
Sfsic Assises 2009 P DelabroiseSfsic Assises 2009 P Delabroise
Sfsic Assises 2009 P Delabroise
 
Diaposas Coulversion2006
Diaposas Coulversion2006Diaposas Coulversion2006
Diaposas Coulversion2006
 
C.c.5.1. energie des changements d'états
C.c.5.1. energie des changements d'étatsC.c.5.1. energie des changements d'états
C.c.5.1. energie des changements d'états
 
El Partenón
El PartenónEl Partenón
El Partenón
 
On Regarde Simplement
On Regarde SimplementOn Regarde Simplement
On Regarde Simplement
 
La Paix
La PaixLa Paix
La Paix
 
VI News Letter Juillet Aout2009
VI News Letter Juillet Aout2009VI News Letter Juillet Aout2009
VI News Letter Juillet Aout2009
 
Manual de COLORNET
Manual de COLORNETManual de COLORNET
Manual de COLORNET
 

Similaire à Le petit guide survie

#PortraitDeStartuper #7 - Artips - Coline Debayle
#PortraitDeStartuper #7 - Artips - Coline Debayle#PortraitDeStartuper #7 - Artips - Coline Debayle
#PortraitDeStartuper #7 - Artips - Coline Debayle
Sébastien Bourguignon
 
The Big Stache Academy
The Big Stache AcademyThe Big Stache Academy
The Big Stache Academy
Thierry Croix
 
Dossier agent solo-medias_sociaux
Dossier agent solo-medias_sociauxDossier agent solo-medias_sociaux
Dossier agent solo-medias_sociaux
Yves Williams
 
#PortraitDeStartuper #59 - CityMeo - David Keribin
#PortraitDeStartuper #59 - CityMeo - David Keribin#PortraitDeStartuper #59 - CityMeo - David Keribin
#PortraitDeStartuper #59 - CityMeo - David Keribin
Sébastien Bourguignon
 
#PortraitDeStartuper #54 - Scylla - Alban Garrouste
#PortraitDeStartuper #54 - Scylla - Alban Garrouste#PortraitDeStartuper #54 - Scylla - Alban Garrouste
#PortraitDeStartuper #54 - Scylla - Alban Garrouste
Sébastien Bourguignon
 
#PortraitDeStartuper #95 - Nicolas Rivière - Jump
#PortraitDeStartuper #95 - Nicolas Rivière - Jump#PortraitDeStartuper #95 - Nicolas Rivière - Jump
#PortraitDeStartuper #95 - Nicolas Rivière - Jump
Sébastien Bourguignon
 
Document d'accompagnement - Challenge Étudiants 2019/2020
Document d'accompagnement - Challenge Étudiants 2019/2020Document d'accompagnement - Challenge Étudiants 2019/2020
Document d'accompagnement - Challenge Étudiants 2019/2020
AssociationLimousineChallenges
 
[Concours MNH des étudiants 2015-16] Equipe 64 : Améliorer les soins en chang...
[Concours MNH des étudiants 2015-16] Equipe 64 : Améliorer les soins en chang...[Concours MNH des étudiants 2015-16] Equipe 64 : Améliorer les soins en chang...
[Concours MNH des étudiants 2015-16] Equipe 64 : Améliorer les soins en chang...
MNH - Mutuelle Nationales des Hospitaliers
 
Portrait de startuper #23 - Adways - Jacques Cazin
Portrait de startuper #23 - Adways - Jacques CazinPortrait de startuper #23 - Adways - Jacques Cazin
Portrait de startuper #23 - Adways - Jacques Cazin
Sébastien Bourguignon
 
#PortraitDeStartuper #60 - Leila Benachour - Ouacim Al Mikdad - Tadja Al Mikd...
#PortraitDeStartuper #60 - Leila Benachour - Ouacim Al Mikdad - Tadja Al Mikd...#PortraitDeStartuper #60 - Leila Benachour - Ouacim Al Mikdad - Tadja Al Mikd...
#PortraitDeStartuper #60 - Leila Benachour - Ouacim Al Mikdad - Tadja Al Mikd...
Sébastien Bourguignon
 
Le Tabagisme
Le TabagismeLe Tabagisme
Le Tabagisme
Nijma Plus
 
#PortraitDeStartuper #5 - Archionline - Victor Thoulouze
#PortraitDeStartuper #5 - Archionline - Victor Thoulouze#PortraitDeStartuper #5 - Archionline - Victor Thoulouze
#PortraitDeStartuper #5 - Archionline - Victor Thoulouze
Sébastien Bourguignon
 
#PortraitDeStartuper #36 - Place2Swap - Lucie Soulard & Estefania Larrañaga
#PortraitDeStartuper #36 - Place2Swap - Lucie Soulard & Estefania Larrañaga#PortraitDeStartuper #36 - Place2Swap - Lucie Soulard & Estefania Larrañaga
#PortraitDeStartuper #36 - Place2Swap - Lucie Soulard & Estefania Larrañaga
Sébastien Bourguignon
 
Portrait de startuper #63 - Dashlane - Alexis Fogel
Portrait de startuper #63 - Dashlane - Alexis FogelPortrait de startuper #63 - Dashlane - Alexis Fogel
Portrait de startuper #63 - Dashlane - Alexis Fogel
Sébastien Bourguignon
 
Rapport sur la responsablité social de l'entreprise
Rapport sur la responsablité social de l'entrepriseRapport sur la responsablité social de l'entreprise
Rapport sur la responsablité social de l'entreprise
Mehdia Belkaid
 
Guide méthodologique de la conduite de projet
Guide méthodologique de la conduite de projetGuide méthodologique de la conduite de projet
Guide méthodologique de la conduite de projet
Jamaity
 
emanuela afendulis - Votre job recrutezmoi i4emploi entretien avec une doct...
emanuela afendulis - Votre job recrutezmoi i4emploi   entretien avec une doct...emanuela afendulis - Votre job recrutezmoi i4emploi   entretien avec une doct...
emanuela afendulis - Votre job recrutezmoi i4emploi entretien avec une doct...
Alban Jarry
 
#PortraitDeStartuper #1 - Teeps - Fabrice Berger-Duquene & Sonia Zarowsky
#PortraitDeStartuper #1 - Teeps - Fabrice Berger-Duquene & Sonia Zarowsky#PortraitDeStartuper #1 - Teeps - Fabrice Berger-Duquene & Sonia Zarowsky
#PortraitDeStartuper #1 - Teeps - Fabrice Berger-Duquene & Sonia Zarowsky
Sébastien Bourguignon
 
#PortraitDeStartuper #47 - Samuel Metias - Comeet
#PortraitDeStartuper #47 - Samuel Metias - Comeet#PortraitDeStartuper #47 - Samuel Metias - Comeet
#PortraitDeStartuper #47 - Samuel Metias - Comeet
Sébastien Bourguignon
 
#PortraitDeStartuper #6 - Groupe Réussite - Aghilas Hached
#PortraitDeStartuper #6 - Groupe Réussite - Aghilas Hached#PortraitDeStartuper #6 - Groupe Réussite - Aghilas Hached
#PortraitDeStartuper #6 - Groupe Réussite - Aghilas Hached
Sébastien Bourguignon
 

Similaire à Le petit guide survie (20)

#PortraitDeStartuper #7 - Artips - Coline Debayle
#PortraitDeStartuper #7 - Artips - Coline Debayle#PortraitDeStartuper #7 - Artips - Coline Debayle
#PortraitDeStartuper #7 - Artips - Coline Debayle
 
The Big Stache Academy
The Big Stache AcademyThe Big Stache Academy
The Big Stache Academy
 
Dossier agent solo-medias_sociaux
Dossier agent solo-medias_sociauxDossier agent solo-medias_sociaux
Dossier agent solo-medias_sociaux
 
#PortraitDeStartuper #59 - CityMeo - David Keribin
#PortraitDeStartuper #59 - CityMeo - David Keribin#PortraitDeStartuper #59 - CityMeo - David Keribin
#PortraitDeStartuper #59 - CityMeo - David Keribin
 
#PortraitDeStartuper #54 - Scylla - Alban Garrouste
#PortraitDeStartuper #54 - Scylla - Alban Garrouste#PortraitDeStartuper #54 - Scylla - Alban Garrouste
#PortraitDeStartuper #54 - Scylla - Alban Garrouste
 
#PortraitDeStartuper #95 - Nicolas Rivière - Jump
#PortraitDeStartuper #95 - Nicolas Rivière - Jump#PortraitDeStartuper #95 - Nicolas Rivière - Jump
#PortraitDeStartuper #95 - Nicolas Rivière - Jump
 
Document d'accompagnement - Challenge Étudiants 2019/2020
Document d'accompagnement - Challenge Étudiants 2019/2020Document d'accompagnement - Challenge Étudiants 2019/2020
Document d'accompagnement - Challenge Étudiants 2019/2020
 
[Concours MNH des étudiants 2015-16] Equipe 64 : Améliorer les soins en chang...
[Concours MNH des étudiants 2015-16] Equipe 64 : Améliorer les soins en chang...[Concours MNH des étudiants 2015-16] Equipe 64 : Améliorer les soins en chang...
[Concours MNH des étudiants 2015-16] Equipe 64 : Améliorer les soins en chang...
 
Portrait de startuper #23 - Adways - Jacques Cazin
Portrait de startuper #23 - Adways - Jacques CazinPortrait de startuper #23 - Adways - Jacques Cazin
Portrait de startuper #23 - Adways - Jacques Cazin
 
#PortraitDeStartuper #60 - Leila Benachour - Ouacim Al Mikdad - Tadja Al Mikd...
#PortraitDeStartuper #60 - Leila Benachour - Ouacim Al Mikdad - Tadja Al Mikd...#PortraitDeStartuper #60 - Leila Benachour - Ouacim Al Mikdad - Tadja Al Mikd...
#PortraitDeStartuper #60 - Leila Benachour - Ouacim Al Mikdad - Tadja Al Mikd...
 
Le Tabagisme
Le TabagismeLe Tabagisme
Le Tabagisme
 
#PortraitDeStartuper #5 - Archionline - Victor Thoulouze
#PortraitDeStartuper #5 - Archionline - Victor Thoulouze#PortraitDeStartuper #5 - Archionline - Victor Thoulouze
#PortraitDeStartuper #5 - Archionline - Victor Thoulouze
 
#PortraitDeStartuper #36 - Place2Swap - Lucie Soulard & Estefania Larrañaga
#PortraitDeStartuper #36 - Place2Swap - Lucie Soulard & Estefania Larrañaga#PortraitDeStartuper #36 - Place2Swap - Lucie Soulard & Estefania Larrañaga
#PortraitDeStartuper #36 - Place2Swap - Lucie Soulard & Estefania Larrañaga
 
Portrait de startuper #63 - Dashlane - Alexis Fogel
Portrait de startuper #63 - Dashlane - Alexis FogelPortrait de startuper #63 - Dashlane - Alexis Fogel
Portrait de startuper #63 - Dashlane - Alexis Fogel
 
Rapport sur la responsablité social de l'entreprise
Rapport sur la responsablité social de l'entrepriseRapport sur la responsablité social de l'entreprise
Rapport sur la responsablité social de l'entreprise
 
Guide méthodologique de la conduite de projet
Guide méthodologique de la conduite de projetGuide méthodologique de la conduite de projet
Guide méthodologique de la conduite de projet
 
emanuela afendulis - Votre job recrutezmoi i4emploi entretien avec une doct...
emanuela afendulis - Votre job recrutezmoi i4emploi   entretien avec une doct...emanuela afendulis - Votre job recrutezmoi i4emploi   entretien avec une doct...
emanuela afendulis - Votre job recrutezmoi i4emploi entretien avec une doct...
 
#PortraitDeStartuper #1 - Teeps - Fabrice Berger-Duquene & Sonia Zarowsky
#PortraitDeStartuper #1 - Teeps - Fabrice Berger-Duquene & Sonia Zarowsky#PortraitDeStartuper #1 - Teeps - Fabrice Berger-Duquene & Sonia Zarowsky
#PortraitDeStartuper #1 - Teeps - Fabrice Berger-Duquene & Sonia Zarowsky
 
#PortraitDeStartuper #47 - Samuel Metias - Comeet
#PortraitDeStartuper #47 - Samuel Metias - Comeet#PortraitDeStartuper #47 - Samuel Metias - Comeet
#PortraitDeStartuper #47 - Samuel Metias - Comeet
 
#PortraitDeStartuper #6 - Groupe Réussite - Aghilas Hached
#PortraitDeStartuper #6 - Groupe Réussite - Aghilas Hached#PortraitDeStartuper #6 - Groupe Réussite - Aghilas Hached
#PortraitDeStartuper #6 - Groupe Réussite - Aghilas Hached
 

Le petit guide survie

  • 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
  • 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