Le petit guide survie

  • 274 views
Uploaded on

Ce document collaboratif appuie un projet de fin d'étude mené dans le cadre du Master 1 Création et Éditions Numérique à Paris 8 en 2011. …

Ce document collaboratif appuie un projet de fin d'étude mené dans le cadre du Master 1 Création et Éditions Numérique à Paris 8 en 2011.

Le petit guide de survie est un service s’adressant à un public de jeunes travailleurs éprouvant des difficultés avec l’administration. Ils ont entre 18 et 25 ans, et font face à des nouvelles responsabilités. C’est une période qui est souvent synonyme de paperasse et de bouleversements. De plus, toutes ces démarches arrivent quasiment au même moment et nous n’y sommes pas forcément tous préparés. Pourtant c’est un passage obligé et l’on remarque que, si on comprend bien toutes les subtilités de ces formalités, elles nous semblent beaucoup plus accessibles et digestes.
Nous souhaitions traiter un sujet qui répondrait à un réel besoin, et apporterait des solutions simples aux problèmes administratif auquel nous avons tous été confronté un jour.

Notre but ? Rendre simples et ludiques des sujets parfois barbants par le biais de vidéo didactique. Il existe déjà de nombreux sites traitant ces thématiques, mais l’accès à ces informations n’est pas facilité par le médium employé : plusieurs pavés de texte dans lesquels il faut trouver sa solution… Nous avons donc cherché à rendre l’information plus agréable et intelligible en modifiant sa mise en forme sous forme de vidéos d’information.

Pourquoi la vidéo ? Aujourd’hui, plus que jamais, schémas didactiques, jeux ludo-éducatifs, data flow et graphisme participent à la compréhension des choses de ce monde parfois difficile à exprimer et à expliciter par les média habituels.
Notre première vidéo traite la thématique de la colocation. C’est l’un des premiers problèmes rencontré lorsqu’on quitte le logement familial. Se pose alors la question de la colocation, qui est la solution la plus abordable financièrement.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
274
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
5
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. le petit guide de survie_____________________________________________ Elodie Jaeger, Médéric Lulin, Peggy Durand Master CEN 1 - Paris 8 - juin 2011
  • 2. RemerciementsEn 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 8qui 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, quinous ont toujours soutenus et encouragés au cours de la réalisation de ce projet. Merci
  • 3. SommaireL’équipe ........................................................................................ 7Introduction ................................................................................ 91. 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’animationConclusion .................................................................................. 41Annexes ....................................................................................... 43Bibliographie et webographie ................................................... 57 5
  • 4. L’équipeNous sommes en tout trois dans le groupe de projet : Elodie Jaeger, Médéric Lulin etPeggy 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 quePeggy dans celui du multimédia et notamment de l’animation. La principale faiblessedu groupe est de ne pas avoir de développeur. Nous possédons pourtant des notions dedé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 surdes idées créatives. 7
  • 5. IntroductionComment notre projet a-t-il vu le jour ?Après une longue période de recherches infructueuses d’idées pour notre projet de find’étude, cette dernière nous est apparue de façon évidente. En effet, nous nous sommesrapidement dirigés vers notre sujet final car il répondait à un réel besoin auquel nousavons 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 accompagnel’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 denombreux 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 dutemps la maison de son enfance, il est aussi judicieux de bien comprendre sa fiche depaye… 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’estun passage obligé et l’on remarque que si on comprend bien toutes les subtilités de cesformalité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 sujetsqui nous rebutent sont loin d’être les plus palpitants à traiter. Ils sont souvent lourd decontenu 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ésenten 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 quel’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èretrès instinctive : Comment rendre attrayant et compréhensible un sujet qui ne l’est pas ? 9
  • 6. 1. Stratégie marketing«Panique à bord, quand le jeune fait face aux responsabilités»1.1 Présentation du public : socio-styleNotre service s’adresse à un public bien précis. Il s’agit des personnes qui passent dustatut d’étudiant à celui de travailleur et qui se confrontent aux changements naturels deleurs 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 mobilesayant 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 questionnementOù 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 contrece mal, Internet est une source rapide et régulièrement mise à jour. Il est utilisé par ungrand 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 sitesproposant une information détaillée sur ces sujets sont extrêmement compliqués dansleur architecture. Les informations existent bel et bien mais elles sont noyées dans lamasse d’une longue suite de paragraphes que rien ne distinguent les uns des autres. Deplus ce sont souvent des découpes de texte de lois qui sont directement proposées auxinternautes. Pas forcément accessibles à tous, donc. Le positionnement du petit guide desurvie est simple : proposer aux internautes une information claire, rapide et pertinenteen réponse à ses attentes.Pour cela, nous avons décidés de simplifier au maximum le service en jouant sur deuxprincipaux fronts. D’une part, un site propre disposant d’une base de données regrou- 11
  • 7. pant toutes nos vidéos et de l’autre, une insertion de ces mêmes vidéos chez différentspartenaires.1.3 Les partenairesL’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 conseilsdispensé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, ilnous a paru judicieux et même essentiel de réutiliser les informations présentes surles sites spécialisés, car nous n’avions pas les compétences requises pour éditer nospropres 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 leurcontenu, tout en leur donnant la possibilité d’atteindre une cible nouvelle : les jeunestravailleurs !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 denombreux 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’augmentationde l’audience, du taux de clic et de fréquentation des sites nous sera bénéfique aussi bienqu’à nos partenaires. Le téléchargement de l’application smart-phone est également unbon réfèrent qui nous permettra d’accéder à une dimension importante de notre projet :l’aspect nomade de notre service.12
  • 8. Bien évidemment, l’un des moyens les plus simples pour avoir un retour d’expériencedirect est de laisser la parole aux principaux intéressés que sont nos utilisateurs. Ilsauront 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 rythmede travail soutenu qu’impose un projet comme celui-ci. En somme, une agence complèteafin 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’administrationfrançaise.Viendront ensuite le développement spécifique à d’autres technologies et médias : desplaquettes informatives, des applications interactives, des jeux, des bornes interactivessont 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, nesont 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éciationde 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
  • 9. 2. Stratégie de communication2.1 Le design d’information et le Data FlowPour répondre à notre problématique, il nous faut rendre l’information plus claire etcompré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 doutionsalors pas, mais notre solution portait le nom de «design d’information».Le design d’information, lorsqu’il est graphique, se destine à structurer et à mettre enforme 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” 2Dans un premier temps nous avons observé ce qui se faisait dans ce domaine. CédricVillain, 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 graphiqueet leur qualité à synthétiser et communiquer de l’information. Son court-métrage «LaitCaramel & Chocolat» réalisé en 2010 à l’occasion du «Défi de fous» numéro 15, apporteune 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’ilvient placer soit en tant que fond, soit en tant que forme. Ce procédé rend la vidéo plushumaine et nous rappelle à chaque seconde le sujet principal. S’ajoute à ça bien sur untravail graphique composé de formes très simple et de quelques mots clés qui viennentsouligner 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
  • 10. Autre exemple, l’émission franco-allemande «Karambolage» diffusée sur la chaîne Artea aussi été une forte source d’inspiration pour nous. Des courts-métrages de 12 minutessur un ton ludique et humoristique abordent ce qui nous rapproche et nous éloigne deces deux cultures. On peut citer des vidéos telles que la sardine en boîte, la meilleurebaguette de Paris ou encore le système universitaire français. Le traitement est toujourstrè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 compagnieImaginary 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 HermanMiller. 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 isyou» 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 (traduireflux de données). Le Data Flow a pour vocation “de comprendre, de hiérarchiser et dediffuser 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 à nouscomprendre, créer et cerner pleinement la réalité. Le Data Flow est décrit comme étantl’art des “motifs chargés d’intention” 3Au 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 avoirassimiler le principe didactique). Dans notre cas, il est intéressant de se pencher sur lesschémas d’instructions et les manuels qui ont pour but de mettre en lumière le processusde montage : faciliter la compréhension des étapes et guider l’utilisateur dans un océanparfois complexe de significations.La notion de simplexité est inhérente au traitement de l’information telle qu’on vientde le découvrir. En effet, il existe dans le design graphique, une notion complémentairede simplicité et de complexité qui influence nos choix graphiques afin de produire desgraphiques qui doivent livrer l’information tout en étant esthétique. Attention, il ne faut3 Klanten, Robert. Data flow 2, design graphique et visualisation d’information, édition Gestalten, 2010.16
  • 11. pas confondre le terme «simple», qui exprime le dépouillement de tout superflu avec leterme «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 homepage 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 lasimplicité 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 sensNous réutiliserons cette notion de «simplicité» / «simplexité» pour la réalisation de nosvidéos, puisqu’elles se doivent d’être de forme simple, au vu de notre public, tout endé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 ungrand nombre de création autour du Data Flow et du design d’information. Le secondnous intéresse d’avantage puisqu’il concerne l’information animée. L’un des points fortsqui 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 renforcercertains éléments du discours.4 Maeda John, De la simplicité, Payot & Rivages, 2009. 17
  • 12. 2.2 Schéma de complémentaritéNous avons vu précédemment dans la stratégie marketing que la communication denotre projet repose sur nos partenaires. Mais il y a a aussi tout autour de notre projet denombreux médias qui s’articulent entre eux et se complètent les uns les autres, ce quinous 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 denos partenaires pour toucher un grand nombre de personne sensible au sujet. Le siteInternet fera bien sur écho à nos différents partenaires. Il sera aussi intimement lié avecles différents réseaux sociaux : twitter et facebook avec un système de “like” et de detweet 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 serabien évidemment aussi mise en évidence sur le site Internet.18
  • 13. 3. Stratégie de création3.1 Le petit guide de survie charte graphiqueVous aurez certainement compris une des subtilités de notre service : son nom. Au vudes constatations et expériences de chacun, le titre de «Petit Guide de Survie» s’estimposé 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 notreproblème : l’administratif. Pour ce qui est de l’idée de «survie», elle parait tout d’abordun peu extrême, mais le traitement graphique de notre charte lui rend son humour et salégèreté. On traite le sujet comme le ferait un aventurier, l’administratif est une jungle oudes règles que l’on peut parfois qualifier de dépassées et barbares règnent encore. Puisenfin, 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 eteffrayé 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 / SignesNous avons aisément, et cela grâce aux sites Internet de nos partenaires, dégager sixcaté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 lelogement 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égoriedevenait 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 rapprochantbeaucoup plus d’un pictogramme nous étions beaucoup plus illustratifs et malheureuse- 21
  • 14. ment formels. Les signes et les pictogrammes possèdent chacun leur lot d’avantages etde d’inconvénients.Pour sortir des sentiers battus nous avons décidé de continuer dans le prolongement dela survie -inspiré du nom que nous avions donné au service- et donc de d’adopter unton décalé. Ce parti pris nous a permis de prendre une direction pour la création despictogrammes, on a tenté de continuer sur ce ton décalé. Nous avons attribué, à chaquecaté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 à chacuned’elle une couleur différente de sorte qu’elles soient identifiable plus facilement. Nousavons 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 casserces lignes trop droites. Nous parlions précédemment du souci de la compréhension despictogrammes. Dans notre cas il était obligatoire d’accompagner nos pictogrammes dunom de la catégorie pour interpréter la signification du pictogramme. En effet, nousavons 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
  • 15. 3.1.2 Le logotypeLorsque 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 difficilede 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 finalementporté sur la «Miso», une police de caractère créée en 2006 par un architecte suédoisMarten Nettelbladt. Son tracé particulier en fait une fonte monospace -à interlettragefixe-, moderne et originale. De plus, elle est distribuée gratuitement sous une licencelibre. La seule restriction est celle de ne pas vendre la police, ou de ne pas l’incorporerdans 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 coususur un vêtement et sur lequel apparaît une marque particulière- en référence à notreunivers graphique proche du boy-scout. A l’intérieur de l’écusson nous avons choisi designifier le petit guide de survie par un petit livre ouvert. Mais rapidement nous noussommes rendu compte que nous retombions dans quelque chose de trop conventionnel 23
  • 16. et une tautologie peu avenante. En effet, aucune surprise à représenter un guide par unlivre. D’un point de vue graphique, il y avait une multitude de tentative possible avecl’écusson, du fait qu’il existe une écriture graphique et une sémiologie très riche. Il fautnoter qu’il n’était pas facile d’utiliser la couleur dans le logotype étant donné qu’on enutilisait déjà six pour les catégories. Dans un autre axe de recherche, nous sommes partisdans la création d’une septième pastille qui en quelque sorte viendrait clore la farandolede 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 decréer un signe en plus ?Nous avons finalement constaté qu’il n’était pas nécessaire de créer un symbole de pluspour notre logotype. La représentation du petit guide de survie, et le concept de notreservice se basaient autour de nos différentes rubriques. Elles sont visuellement fortes etreprésentent tous les «outils» à la survie du «jeune en pleine nature». L’utilisation dessix pictogrammes comme ensemble donne une force incroyable au petit guide de surviequi au final se suffit pour la communication de notre service. Nous avons opté pour deuxdéclinaisons du logotype de manière à jongler entre les deux selon les formats et lesmé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 largeurdes 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 transparences’instaure.Le problème de la lisibilité du logotype s’est posé, en effet, il est visuelle fourni, il n’estdonc pas envisageable de le garder complet à une petite échelle. Une fois réduit, lessymboles 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 leurjeu de transparence.Nous obtenons, un logotype modulable qui peut, par sa mise en forme, s’inscrire dans denombreux 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
  • 17. 3.3 L’application mobileAu jour d’aujourd’hui, plus aucun projet multimédia ne tient la route sans sa fameusedéclinaison mobile ou son application dédiée aux smart-phones qui ont envahis nospoches. Le petit guide de survie ne déroge pas à cette règle. En effet dans l’optique d’unservice 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 lelogo du service. Après quoi, l’utilisateur arrive sur un schéma coloré de visualisationdynamique d’information regroupant les dernières vidéos positionnées en fonction deleurs 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 etenfin un onglet dédié à la géolocalisation permettant aux utilisateurs de repérer ayant unlien avec nos problématiques traitées.Pour ce qui est de la partie des vidéos populaires, elle est mise à jour chaque semaineet présente dans un ordre décroissant la liste de nos vidéos les plus vues. La fonction de5 Issu du document intitulé « Flash code : un moyen de communication mobile » du site Internet CommentCaMarche.net26
  • 18. recherche est aussi complète que sur notre site Internet et propose un filtrage intelligentdes résultats en fonction des thématiques sélectionnées.Enfin la géolocalisation vientcompléter notre service en affichant clairement les partenaires à proximités et les vidéosayant un lien avec ces lieux. Le service nomade ainsi proposé est en totale adéquationavec notre recherche de simplicité et de rapidité de réponse. 27
  • 19. 3.4 Les flash codesIl é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’unmobile d’accéder à une page internet mobile spécifique” 5, avec le marché du mobileen 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é versun lien internet ou sera présent une vidéo du petit guide de survie. Tout l’intérêt est demettre en avant le concept du petit guide de survie c’est à dire les courtes vidéo qui lecomposent.Notre communication ne se devait pas être lourde d’information d’une part parce quecela ne ressemble pas à notre “philosophie” mais aussi parce que le lieu ne s’y prêtaitpas. En effet, il est rare de venir pour admirer la décoration de sa CAF, bien souventc’est un endroit où l’on est contraint d’aller, soit pour trouver une information, soit pourrégulariser sa situation … On ne s’y attarde donc pas tellement. C’est pour cela quenos 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 uneproblématique ou un sujet. Cette phrase est mise en avant par un fond coloré qui reprendle code coloré assigné à la catégorie auquel il appartient, par exemple, le logement estassimilé 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, nousavions pris le parti, dans un premier temps, de ne pas mettre le logotype. Mais dans unsouci de sensation d’insécurité pouvant être néfaste à notre communication, nous avonsdé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 laré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 plusefficace. 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
  • 20. 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éphonedoté d’une caméra, permettrait de lire la vidéo en direct du lieu de nos partenaires. Totalimmersion, l’agence française spécialisée dans la réalité augmentée, a fait évoluer cettetechnologie en la libérant du marqueur une fois «scanner», ainsi, l’utilisateur pourra lirela vidéo hors du support (stickers). 29
  • 21. 3.5 Le site internetLa 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 partenaireset 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éseauxsociaux pour communiquer sur le web ? A cette question nous en avons déduit quenon.Pourquoi ? Les vidéos se doivent d’être consultable quelque part facilement avec unsystème de recherche et d’autres fonctionnalités à envisager. Nous ne pouvons pas nouspermettre de ne posséder uniquement qu’un compte Viméo puisque cela ne serait paspratique. Dans l’optique de développer le projet, la gestion d’un contenu sur un sitecommunautaire dépassant les 100 vidéos deviens difficile. De plus cela ne met pas envaleur notre service et à tendance à décrédibiliser notre service. Donc en créant notreespace sur la toile, notre site internet, on crédibilise le petit guide de survie, on lui donneune existence.Notre site internet s’adresse à deux publics, le premier, notre public principal sont lespersonnes qui rencontres des problèmes et qui cherche une solution ce qui revient en finde compte à notre public déjà présenté précédemment dans la stratégie marketing. Lepublic secondaire concerne les personnes qui sont sensible au graphisme et qui consulteles 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 paged’accueil est divisible en trois parties : • la recherche • les «news» • les vidéos les plus populairesLe nom du service est visible en haut de page, centré. En dessous, la partie recherches’adresse à notre public principal. Elle est agrémentée d’un système de sélection parcatégorie qui vient par la même occasion donné à voir les six rubriques principales quetraite le petit guide survie. Plus bas se trouve les «news» et les plus populaires destinéesaussi bien à notre public secondaire que premier. On peut remarquer qu’il n’y a qu’unseul lien interne dans le site dédié à une page pour présenter nos partenaires. Le fait de30
  • 22. ne pas avoir de niveau dans le site Internet est tout à fait volontaire. Le plus fatiguantdans les sites d’information est la perte de temps qu’il y a à trouver de soi-même ce quel’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. Cependantil y a de nombreux liens externes : les réseaux sociaux -twitter, facebook- et un lien pournous contacter. 31
  • 23. La recherche qui est le cœur de notre projet est bien évidemment volontairement miseen avant, bien souvent située en haut à droite, nous l’avons placé au centre. Le champde recherche s’inscrit dans le contexte d’une phrase : “Je veux en savoir plus sur…” demanière à humaniser la recherche. Lorsque l’on tape un ou plusieurs mots clés, le champde 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ésultatde 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èmede slide (flèche précédente et suivante) est présent pour visualiser d’autres vidéos, aunombre de quatre maximum. Cette partie permet d’avoir directement accès à la lectured’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 consulterles courts-métrages qui ont le plus de succès. Tout comme les «news», un système debouton 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 datede leur parution sur le site. Le survol sur les vidéos est accompagné d’un effet de noiropacifié 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. Ilfaut noter que le lecteur vidéo est personnalisé, il est en accord avec le code coloré dela rubrique.D’un point de vue technique, le site Internet est développé en HTML5, son format est de1024 par 728 pixels. L’avantage principal du HTML5 est sa facilité au niveau de la miseen ligne et de la lecture des vidéos pour les internautes (classique et mobile) puisqu’iln’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 primordialepour gérer nos courts-métrages.Après réflexion le site Internet pourrait avoir un esprit plus communautaire et posséderdes 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éeen PHP. Cette possibilité n’a malheureusement pas pu être développée d’avantage dansnos premières réalisations.32
  • 24. 33
  • 25. 3.6 Le génériqueAfin d’instaurer une régularité et une unité dans la production de nos animations, nousavons mis en place des génériques de début et de fin. Ils viennent structurer les vidéoset les identifier comme appartenant au groupe d’animation constituant le petit guide desurvie.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 entreles deux différents formats de composition utilisé dans la charte (le format horizontaleet 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 estposé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 protagonistesayant contribué à la création de l’animation. Mais aussi de conclure sur notre logo etde rappeler l’adresse Internet où se rendre pour obtenir d’avantages d’informations surle 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 tomberdans le tout «scout». Il se compose d’une série de percussions, ponctués d’un tintement,le tout rythmant l’animation.34
  • 26. 3.7 L’animationLe cœur de notre service est la production d’animation visant à vulgariser l’informationet à la rendre plus légère et compréhensible pour notre public. Pour cela, nous avons faitle choix judicieux de donner à chaque animation son propre traitement graphique. Ellesn’adopteront donc pas la charte graphique générale de notre concept. Dès lors, nouspourrons 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 etrespectera 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 lathématique sur Internet, parmi les nombreux problèmes posés sur les forums de nospartenaires. Nous avons conclu qu’il fallait traiter un problème lié au logement, et plusprécisément, la colocation. C’est un des sujets les plus récurrents sur les FAQ et forumet nous trouvions le sujet adapté à notre public : quand on a 20 ans, il n’est pas évidentde se loger, la colocation est une solution simple et économique.Seulement, vivre en communauté est une chose, mais s’entendre avec son colocataireen est une autre, mésentente, désaccord financier, point de vu divergeant, disons-le, lacolocation 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 deuxdoit 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 dela clause de solidarité. Après des recherches fructueuses, nous avons pu définir en quoielle consistait.La clause de solidarité : «celui qui quitte la location (ou la personne qui s’est portéecaution 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 payent36
  • 27. plus leur loyer, il est même tenu de régler leur part ! A savoir : si le bailleur considèreque les colocataires restants présentent des garanties suffisantes en particulier à traversla caution, il peut alors rédiger un avenant au contrat de colocation, destiné à libérer lecolocataire qui quitte le logement de cette obligation.»6Nous avions notre sujet, nous avons donc commencé la rédaction d’une narration selonle 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éspermettant de mettre en place l’intrigue et de la résoudre rapidement. D’après cettenarration, 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é desrecherches : nous avons effectué une série de pige sur les tendances actuelles afin des’adapter à notre public.De cette veille graphique, nous avons déterminés un parti pris graphique : nous optonspour un panel de couleurs vives, voire de couleurs complémentaires, afin de créer unensemble dynamique. Pour accentuer sur la dualité mise en place par la mésententedans la colocation, nous utilisons des aplats colorés que l’on superpose à la manière decalques transparents. Ce jeu de superposition crée une interaction entre les éléments del’animation : ils se rencontrent, se juxtaposent mais se distinguent. Afin d’apporter duréalisme et du vivant au discours, nous avons ajouté un univers sonores aux scènes clésde 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 pourretranscrire les détails de notre scénario, dès lors, elle devient le protagoniste omniscientqui nous donne la solution à notre problème, ici, la clause de solidarité et la recherched’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. Ellessont 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 surles divers réseaux sociaux pour les plus récentes. Ainsi, elles ont une visibilité large surInternet.6 Issu du site www.reussirmavie.net dans l’article La colocation mode d’emplois 37
  • 28. ConclusionLe projet offre beaucoup de possibilités à venir, avec son lot de questionnement. Noussommes conscients qu’il y a correction possible à apporter à notre projet, notammentdu point de vu du développement, nous avons manqué de compétences, ce qui a été unpré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 estindispensable 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 toujoursplus 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 : lacommunication 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, dataflow 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 troisnotre univers graphique, il a donc été question de s’harmoniser, de se compléter maisaussi de se faire confiance. C’était une expérience à la fois complexe, puisqu’il a falluappréhender un logiciel jusque-là peu utilisé, After Effect, et enrichissante puisque l’ona 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é avoircerné 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 envisaged’ailleurs d’ajouter des sous-titres, voire de reprendre la voix off en anglais. 41
  • 29. Annexes
  • 30. Le petit guide Le petit guide de survie de survieComment obtenir un Je n’en peux plus de monpasseport en urgence? collocataire! Que faire?Comment obtenir un Je n’en peux plus de monpasseport 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?
  • 31. 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?
  • 32. Planning board1. 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 brief7. Développement : recherches graphiques , définition d’une charte graphique8. 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érique10. Mise en ligne11. Oral 53
  • 33. Le projet en quelques lignesLe 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 depaperasse 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ésMotion design, internet, service à la personne, jeune, aide, design d’information, loge-ment, argent, voyage, famille, administratif, santé. 55
  • 34. Bibliographie et webographieBibliographieBaer, Kim. Information Design Workbook: Graphic approaches, solutions, and inspira-tion + 30 case studies, Rockport Publishers, 2010Klanten, Robert. Data flow, design graphique et visualisation d’information, éditionGestalten, 2008Klanten, Robert. Data flow 2, design graphique et visualisation d’information, éditionGestalten, 2010McCandless David, Information is Beautiful, édition Hardcover, 2010Steinweber, Philipp et Koller, Andreas. Information Design, Handbook Feature, F+WPublications / HOW Book, 2010Vollaire Louis. Le design d’information. In: Communication et langages. N°112, 2èmetrimestre 1997. pp. 35-50.Webographiel’AFD : http://www.alliance-francaise-des-designers.org/Guide sur la colocation : http://www.mce-info.org/uploaddocumentationfichier/46fichier1.pdfLes 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