TFE - DossiEr DE proDucTion cécile Habran - 3TiD2 - 2012-2013
Contents
1. glisser encore tu vas voir _ Voil tu es arriv au premier temps de l histoire Elise a 8 ans et je te propose d entrer dans son univers chaque tape impr gne toi du r cit trouve la cl qui te permettra de passer la suite et agrandis ta fen tre U coat ws asl al Bra S en J va ja Doz ven CW fim ile ie ee A ae i DA Bienvenue visiteur dans cette histoire interactive et responsive Pourquoi responsive Parce qu elle va s adapter la taille de ton cran Faisons un essai ensemble commence par laisser ta souris dans le coin inf rieur droit de ta fen tre Lorsqu elle se transforme en double fl che clique et glisse vers la gauche HAA Ici sur un support desktop d but du mode d emploi Bienvenue visiteur dans cette histoire interactive et responsive Sur ton support tu commences la fin de l histoire lorsqu lise a 25 ans et je te propose d entrer dans son univers A chaque tape impr gne toi du r cit et trouve la cl qui te permettra de passer la suite COMMENCER U N N La m me page sur un support mobile N L ADAPTATION DE LA NARRATION POUR MOBILE Ila fallu adapter un certain nombre de choses pour les formats mobiles type tablette ou smartphone En effet ces devices n of frant pas la possibilit pour l instant de redimensionner sa fe n tre l tape mode d emploi tait forc ment corrompue Il s agis sait donc de pr venir l utili2. l image et disparaitre au tap clic Les illustrations taient d abord pens es dans un camaieu de bleus quelle que soit la taille de l cran Le texte tait assez long Par la suite les couleurs ont t repens es pour qu elles voluent en fonction de la narration une couleur suppl mentaire par tape voir Les accords chromatiques Le syst me de lecture a chang pour garder un maximum d immersion dans l image Les textes raccourcis sont donc cach s derri re l image et on fait glisser celle ci lorsqu on a besoin d aller relire VOCABULAIRE GRAPHIQUE Certains l ments ont aussi t revus pour mieux coller avec les illustrations la perspective bizarre Tous les blocs color s ont donc t d form s pour harmoniser l ensemble Bienvenue toi visiteur qui passe les portes humides de ce petit village d Ecosse Le chemin principal avec ses cottages color s et le petit pont de pierre qui passe le canal forment un ensemble franchement pas d sagr able regarder J esp re que a te plait parce que l histoire se d roule une rue plus loin celle qui longe la palmeraie l Mobile v1 ENTRE DONC toi qui passes les portes humides de ce petit village d Ecosse Le chemin principal avec ses cottages color s et le petit pont de pierre qui passe le canal forment un ensemble franchement pas d sagr able regarder J esp re que a te plait parce que l histoire se d roule
3. premi res Chaque couleur est ensuite d clin e en diff rentes teintes pour obtenir une palette assez large et tre utilisable dans une illustra tion complexe o seules les masses sont utilis es aucun contour et o donc le contraste uniquement permet de percevoir les formes x 4 4 U x x lt Ss x AA 1 GRILLE UN NOMBRE 1 618 En r alit c est assez compliqu de parler d une grille a propre ment parler dans ce cas ci mais d un combo margin font size puisqu il n y qu un bloc de texte la fois 100 et jamais plu sieurs colonnes N anmoins voici comme j ai proc d la font size choisie est de 18px pour une lecture confortable sur tous les supports avec un interlignage de 1 4 soit environ 25px Les marges sont un multiple de cet interlignage par le coefficient du nombre d or 1 618 soit en mobile divis par le nombre d or gt 15px apartir de 520px tablette et au del multipli par le nombre d or gt 40px Ces valeurs 15 et 40px rythment l ensemble des espaces ensuite utilis s que ce soit l emplacement des aides en temps r el l pais seur des bandes verticales contenant les titres des panneaux aide et narration etc 140px 18 4_ COMBIEN A COUTE DEVIS ESTIMATIF PLAN FINANCIER CONCEPTION laboration du projet des fonctionnalit s 4000 criture de l histoire copywriting nennen 80
4. une rue plus loin celle qui longe la palmeraie l Mobile v5 a VILLAGE DE PLOCKTON Chapitre v1 Bienvenue toi visiteur qui passe les portes humides de ce petit village plant sur la c te ouest del Ecosse La maison communale est un peu d labr e sans doute mais le chemin principal avec ses cottages color s et le petit pont de pierre qui passe le canal forment un ensemble pittoresque et franchement pas d sagr able a regarder tu ne penses pas J esp re que a te plait parce que l histoire que je te propose se d roule une rue plus loin celle qui longe la palmeraie l Tablette v1 OH le d cor n a gu re chang le temps est pass en n imprimant sa marque que subtilement sur Plockton Et pourtant et pourtant Tablette v5 a T VILLAGE DE PLOCKTON Chapitre v5 13 z i EURE See de ER y i y INS A Mi Y Jets ai tk TA P S a lu 4 2 e y 2 gt T Sy i di va ares a Pr HH u en LA N y i A JUSTIFICATION DE L APPROCHE GRAPHIQUE UNE ENVIE UNECONTRAINTE UNE SOLUTION Si je m tais toujours dit que j allais m amuser avec les pixels m me peut tre travailler avec des vrais marqueurs sur du vrai papier et scanner le tout je savais bien qu un moment je devrais m interroger sur la meilleure fa on d optimiser l ensemble Parce que l histoire est responsive et s appuie donc aussi sur les performances d un mo
5. 0 recherches graphiques 6 design 1600 storyboard wireframes nnn annseveneeveneevenvenn 2400 Total pour la conception cn 8800 R ALISATION d veloppement front end HTML5 CSS3 mediaqueries eenn 1600 E 2512 CSG ST an 1200 d veloppement back end AAA o o o pe 800 illustrations vectorielles l ments graphiques accessoires nen 400 18 illustrations narration msi 3600 3illustrations d accueil evene 600 Total pour la r alisation annen ornee venne renserens 8200 CO TS ANNUELS h bergement nom de domaine Total pour les co ts ann els u a 50 tous les prix s entendent HTVA et en 20 5 ET TOIL TES QUI NOTE PERSONNELLE CE QU IL EN EST RESSORTI Si je m tais la base lanc e dans ce projet par plaisir de raconter et d illustrer il s est av r que les parties pour lesquelles je me suis le plus amus e c tait celles qui relevaient du code J ai commenc ma troisi me ann e avec d assez grosses lacunes en javascript Jaime la logique et j adore les maths ce n est pas que j ai des probl mes pour comprendre un script mais je n avais jamais pris la peine de me poser pour bidouiller quelque chose en javascript ou en jquery et les parties th oriques de l ann e pass e me laissaient sur ma fin Bref mes bases taient faibles et mon envie au niveau O a a commenc changer pendant mon stage o mon ma tre de stage a pris la peine un jour de s
6. IONS Toutes les illustrations de l histoire le logo typographique et l en semble des l ments graphiques sont C cile Habran 2013 CODE Hammerjs http eightmedia github io hammer js Biblioth que javascript pour le support tactile SVGPan https code google com p svgpan Script javascript pour l impl mentation du zoom et du pan dans une image SVG MobileDetect http mobiledetect net Class PHP d tectant le support utilis mobile tablette marque FONTS Les polices sont libres de droit La Mathlete utilis e pour les titres est design e par Mattox La Bitter utilis e pour les textes y compris cette page est de sign e par Sol Matas AIDE Certaines parties du code ont pu tre crites gr ce la lecture du site MDN https developer mozilla org du manuel PHP en ligne http www php net manual et de fa on plus g n rale gr ce l aide trouv e sur stackoverflow http stackoverflow com ou gr ce aux conseils avis s de professeurs LISTE DES FONCTIONNALIT S LE MODE D EMPLOI Il a vite t important de guider l utilisateur d s le d but de la visite Au d part baignant dans un univers de graphistes et de webdesigners les r flexes quant au resize de la page me sem blaient presque inn s chez tout un chacun En fait non Le commun des mortels les gens normaux qui ne passent pas au tant d heures sur leur machine parcourir le web ne connaissent en fait
7. Illustrator CS6 HHH Adobe InDesign CS6 ee Adobe Photoshop CS6 kkk Sublime Text 2 kkk CodeKit kk PROGRAMMATION HTMLS CSS3 ARA SASS SCSS REE Javascript kk Jquery KKK PHP Kak Wordpress KKK Foundation 3 0 kkk LANGUES crire Lire Parler Francais KRK HHK ktttk KREKKK Anglais kkkk kkkk KKK o pictos Entypo 23 ALLEZ MERCI SALUT
8. UNE AISTOIRE AESPONSIVE TFE DOSSIER DE PRODUCTION Une narration responsive amp interactive C cile Habran 3TID2 2012 2013 Promoteur Alexandre Plennevaux SUMMAIRE DE QUOIPARLE T ON D ABORD siii 3 Pr sentation g n rale du projet 4 Positionnement du projet ss 5 DEQUOTCESTFATT Va A 6 Origine des contenus sources cr dits 7 Liste des fonctionnalit s aaa 8 DEQUOLCA AD AIR a ab a cn 12 Historique illustr de l volution del interface 13 Justification de l approche graphique 14 Principe de mise en page et choix graphiques 15 CR a a ee io me ot ie 18 COMBIEN CA COUTE aaa 19 Devis estimatif plan financier 20 EO TES OUI a ias 21 Note personnelle denses scans scene eme 22 Curriculum vitae eneen aaa 23 NA es DE QUOI PARLE T ON D ABORD PR SENTATION G N RALE DU PROJET SITU ES NOUVEAU UN RAPIDE PETIT R SUM JUSTE POURTOI Pour cette derni re ann e d tude il nous tait demand de rendre un travail repr sentatif de notre apprentissage en DWM Issue d une formation d illustratrice j avais tr s envie de mixer l illustration et un support web pour cl turer ces ann es d tudes par un travail commun lise une histoire responsive est le titre choisi pour mon TFE D cortiquons le pour voir LISE C est l histoire d une petite fille qui grandit une petite fille qui n a pas tellement d amis mais qui a b
9. asseoir et de m expliquer deux ou trois trucs puis m a laiss e dans ma mouise r fl chir plu sieurs heures pour r soudre un probl me Et j ai bien aim En me lan ant dans mon TFE frustr e de ne pas pouvoir finale ment illustrer le tout la main jimaginais au d but travailler au crayon de couleurs jai commenc avec un croquis rapide de test pour pouvoir travailler directement la partie code J ai appris plus ces 6 derniers mois que depuis le d but de la deuxi me et j ai ador passer des heures sur un souci Au final devoir retourner aux illustrations m a parfois pes mais a a eu du bon J ai aujourd hui l impression d tre arriv e ce que je voulais mixer autant que possible tout ce que j ai appris CE OUEJE COMPTE FAIRE LES PROCHAINS MOIS JE SAIS PAS DES FOIS QUE A T INT RESSE Quand m me les illus papier et la peinture a me manque Alors je compte bien retourner des s ances de mod les ou par tir me balader dans mon coin de campagne un peu comme des vacances Mais il y aussi beaucoup de projets qui m attendent au tournant ceux auxquels j ai dis Non pas avant fin juin et qui vont r ap para tre peine j aurai eu le temps de me poser avec mes crayons Ils me prendront du temps mais seront sans doute une bonne base pour me lancer tout doucement en continuant d apprendre et en profitant de ces quelques mois o je n ai pas encore de grosses responsabilit s et ou je peux pren
10. bile et la connexion qui va avec Alors t l charger une image suffisamment grande que pour tre navi gable avec une connexion 3G si c est du bitmap a allait vite tre pesant dans tous les sens du terme Malgr mon envie de tater du papier l id e du vectoriel a fait son chemin Cela r pondait plusieurs interrogations comment g rer les images explorables zoom comment garder une r solution impec avec le design fluide et entre chaque support comment rendre l image interactive pour les indices par exemple comment rendre tout a pas trop lourd Ainsi j ai du garder cette contrainte de poids en t te pendant mes recherches graphiques parce que m me si le vectoriel c est chouette a pompe dans les performances pour g n rer les images surtout si elles sont complexes 14 PRINCIPE DE MISE EN PAGE ET CHOIX GRAPHIQUES AFFICHAGE ET STRUCTURE VISUELLE DES ECRANS Le principe de navigation est assez simple La partie principale r side dans l illustration en elle m me Lorsqu elle est visible en entier aucun autre l ment ne vient s y superposer hormis les aides en temps r el ou le panneau d indice lorsque l utilisateur trouve ce dernier voir premi re image gauche Les titres des panneaux cach s apparaissent en hover o lors qu aucune activit n est d tect e pendant au moins 3 secondes Le panneau de gauche contient le r cit celui de droite les diff rentes aides url
11. de sauvegarde aide l indice plan de l histoire Pour que l utilisateur sente que ces panneaux peuvent glisser une premi re animation est jou e son arriv e sur une tape de la narration o l illustration glisse vers la droite pour laisser place aux textes Besoin d aide IB CHOIX TYPOGRAPHIQUES Mathlete bulky THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG GOS La Mathlete d j choisie pour la vid o animation de la bande an nonce s accordait bien avec le sujet de mon TFE Une typo hand made uniquement en capitale pour les titres ou le texte non nar ratif et les typos l int rieur des illustrations Le probl me avec cette typo c est que les espaces sont assez mal construites Les espaces inter mots sont trop larges par rapport l interlettrage il fallait donc le prendre en compte dans son utili sation en webfont Les textes sont toujours courts et les letter spacing sont syst matiquement augment s d 1 ou 2px selon le contexte Bitter regular bold The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG ga La Bitter police libre de droit a t choisie pour les textes longs et narratifs pour la page de lancement et m me pour ce dossier Je voulais une typo lisible serif et pas trop fine Il fallait qu elle s harmonise avec la Mathlete
12. dre des risques Il y aussi un appel a projet pour la Communaut Francaise qui tra ne dans un coin et qui m riterait sans doute que j y consacre un peu de temps juste pour voir Et il y a toi sait on jamais qui aurais peut tre une id e Merci en tout cas d avoir lu jusqu ici 22 CECILE HABRAN ILLUSTRATRICE GRAPHISTE 6 D VELOPPEUR FRONT END 118 CHAUSS E DE WATERLOO 5002 SAINT SERVAIS BE 32 0 445 73717 HELLO CECILE HABRAN BE WWW CECILEHABRAN BE sm 26 NOVEMBRE 1989 Y LA LOGIQUE LES MATHS LES ROMANS POLICIERS LES CRAYONS DE COULEURS ET LES SINGES amp 2010 2013 Graduat en Infographie sp cialit Web Design amp Multim dia cole Sup rieure d Infographie Albert Jacquard Namur BE lt gt OCTOBRE 2012 JANVIER 2013 Stagiaire chez Spade SPRL agence web de com munication bas e a Bruxelles D veloppement front end et illustrations DEPUIS AO T 2012 Illustratrice occasionnelle pour misenpage SPRL et le Service ducatif de la M diath que BI DEPUIS JANVIER2011 Infographiste r guli re pour Transcultures une asbl d v nements culturels 2007 2010 Graduat en Arts visuels et de l espace sp cialit Illustration cole Sup rieure des Arts S Luc Bruxelles BE lt S JUIN 2007 Dipl me de secondaires g n rales Institut de la Providence de Champion BE Y PRIX Participation a Skills Belgium m daille d argent en webdesign PROGRAMMES Adobe
13. e http maximin tv srm Petit jeu ou l utilisateur doit resizer sa page au bon format pour gagner l preuve Une fa on ludique d utiliser la taille de l cran http www intacto com responsive2012 card html Carte de voeux responsive de l agence Intacto Enorme utilisation du resize ou des illustrations sont anim es au fur et mesure jusqu atteindre la taille ad quate pour d livrer le message http stuffandnonsense co uk design Ici c est la transformation du header qui m int ressait En r alit c est ce qui se rapproche le plus du sujet de mon TFE puisque le personnage mobylette vieillit en fonction dela taille du browser http blog mimeoverse com https developer cdn mozilla net lien cliquable dans le pdf mais url trop longue pour tre imprim e ici Ces deux derni res url sont li es il s agit la fois du jeu et du blog li a son d veloppement L auteur a repris SuperMario et se sert de la taille du navigateur pour le faire voluer dans le jeu DONC Il n y avait en fait pour ainsi dire aucun projet utilisant le res ponsive des fins narratives comparables ce que je voulais mettre en place pour mon TFE C tait plut t un bon point dans la mesure o je ne risquais pas d tre trop inspir e par l un ou par l autre J ai pu faire mon petit bonhomme de chemin tranquillement mE se DE QUOI CEST FAIT ORIGINE DES CONTENUS SOURCES CR DITS ILLUSTRAT
14. eaucoup beaucoup d ima gination Elle vit dans un minuscule village sur la c te ouest de l cosse et pour passer le temps elle imagine une vie aux objets qui l entourent Toutes les histoires qu elle s invente forment ce conte illustr Plusieurs petites histoires un fil conducteur UNE HISTOIRE RESPONSIVE Ce TFE c est une histoire qui se lit et se regarde de plein de ma ni res diff rentes Elle est responsive parce qu elle va voluer avec ton support cran lise a 8 ans elle te raconte ses histoires dans ton smartphone lise en aura 20 elle te les racontera sur ton desktop aa gt TU VOIS LE PRINCIPE Ce TFE est donc une super histoire multi couches Tu peux la lire travers plusieurs r solutions tu peux la lire aussi sur un seul support C est toi qui vois Le principe c est qu chaque tape toi l utilisateur resizes ta page et trouves l indice pour passer la je suite de l histoire mer POSITIONNEMENT DU PROJET DIFFICILE DE POSITIONNER UN PROJET PAREIL Apr s avoir plus ou moins d fini mon concept j ai vadrouill sur le net la recherche de projets similaires ou en tous cas proches Voici une s rie de liens avec des sites qui se servent du responsive de facon un peu d cal e http play bigspaceship com chrome atic Il s agit d une exp rience Chrome o le son varie en fonction de la taille du browser Au plus il est large au plus le son est grav
15. nd il tombe sur l histoire ou qu il est interrompu en plein milieu un moyen de revenir l endroit ou il s est arr t tait n cessaire Comme ce projet n avait pas la vocation de tour ner sur les r seaux sociaux dans le sens o ce serait dommage de partager une tape sans avoir vu les pr c dentes un envoi par mail tait pertinent Le visiteur peut donc tout moment sauvegarder son avanc e dans l histoire et senvoyer Furl cor respondante par mail Cette url reprend en plus de l tape en cours la r solution la quelle elle a t captur e Ainsi son retour dans l histoire cette ancienne r solution est d abord compar e l actuelle et un mes sage est affich en fonction En effet l utilisateur s est peut tre arr t en format moyen tablette puis revient en format desktop c est dire un pas plus loin dans l histoire Il fallait donc l avertir qu il allait passer la suite ou revenir en arri re c est selon LE PLAN DEL HISTOIRE Pour la m me raison mentionn e plus haut savoir valuer com bien de temps il lui reste pour terminer l histoire semblait impor tant pour le visiteur Cela se fait de fa on assez discr te il lui est simplement indiqu le nombre d tapes restantes sa demande 11 sr Chi DE QUOI A A L AIR HISTORIQUE ILLUSTRE DE L EVOLUTION DE L INTERFACE LES PAGES NARRATION Au d part les textes de l histoire devaient s afficher par des sus
16. que peu cette possibilit qu a leur fen tre de changer de taille Apr s des tests sur des personnes en dehors de l ESIAJ ou de mes activit s li es au web il est apparu qu un mode d emploi tait indispensable Il fallait au moins une fois montrer l utili sateur comment faire Desktop gt Bienvenue visiteur dans cette histoire interactive et responsive Pourquoi responsive Parce qu elle va s adapter la taille de ton cran Faisons un essai ensemble commence par laisser ta souris dans le coin inf rieur droit de ta fen tre Lorsqu elle se transforme en double fl che clique et glisse vers la gauche DE son arriv e sur le site via un support desktop le visiteur est donc oblig de passer par une tape d mo o il lui est deman d de redimensionner sa fen tre Les instructions suivent depuis une r solution maximum jusqu la plus petite o l histoire com mence Je suis donc certaine que l utilisateur commencera le r cit par le bon bout Pour massurer qu il commence bien ce mode d emploi avec une fen tre maximis e 1024px je d tecte sa r solution son en tr e sur le site et affiche un message en fonction Si la fen tre nest pas assez large je lui demande alors de l agrandir Tout va bien Tablette Mobile KID FIE Tu vois L image a chang et lise l h roine de cette histoire est plus jeune Le temps s adapte ton cran Continue de
17. sateur des le d part qu il tait tel ou tel endroit de l histoire Aussi si une tape qui traverse les supports voit sa narration vo luer entre chaque taille de fen tre sur un format mobile en re vanche la narration n est donn e qu une fois par tape et doit se suffire elle m me Le texte est donc adapt pour d livrer l his toire quand m me de fa on globale au sein de chaque support LE PAN 5 ZOOM Dans l id e de recherche d indices il fallait avoir la possibilit d explorer de naviguer dans l image Cette fonctionnalit tait d autant plus importante que la surface est restreinte sur les sup ports mobiles Il a donc fallu mettre en place des outils comme le zoom et le d placement dans l image SVG C est aussi l que l utilisation du SVG prend tout son sens puisque l image garde une qualit parfaite m me 200 sans alourdir le poids de l ensemble L utilisation du zoom sur un ordinateur est li e la roulette de la souris ou au trackpad et au pinch sur les formats tactiles La navigation se fait en simple cliquer glisser DE QUOI AS TU BESOIN Tu dois quitter l histoire LE TEMPS EST PASS Tu veux savoir o tu en es LES INDICES Si l histoire tait pr vue interactive l id e n tait pas non plus d en faire un jeu d nigme complexe Ainsi le visiteur doit trou ver un indice chaque tape mais tout est mis en place pour lui faciliter la t che D abord le texte d
18. tout en apportant un contraste vi suel visible pour qu on comprenne tout de suite qu elle ne serve pas aux m mes fonctionnalit s La Bitter fait tres bouquin de poche du genre des vieux Agatha Christie perdus dans les bibliotheques des parents o le papier jauni bon march a absorb l encre et paissi les caracteres C tait de ca dont j avais envie ca qui collait l atmosph re de l histoire LA MODERNIT arrive quand m me ici et l sur les quais du village portuaire 16 ACCORDS CHROMATIQUES Le bleu turquoise est venu assez t t dans les recherches pour les illustrations J aimais bien sa polyvalence une couleur froide mais dynamique et jai d cid de la garder Ensuite apr s une s rie de discussions et conseils de professeurs ou d autres l ves il semblait n cessaire de marquer une diff rence si pas graphique au moins chromatique dans l volution des illustrations Pour que l utilisateur sente bien qu il changeait de temps dans l histoire jai donc d cid d ajouter une couleur chaque tape I gt E E A Le vert et le rose ont t choisis pour leur harmonie avec le tur quoise et pour la progressivit vers les couleurs chaudes Pour ne pas avoir de coupure trop nette entre les tapes le vert apporte d abord un peu de chaleur tout en restant proche du bleu Le rose arrive ensuite sans choquer l il en apportant un contraste et une couleur compl mentaire par rapport aux deux
19. u r cit donne d j une piste pour le trouver Ensuite sur un ordinateur le curseur de la souris se change en main lorsque l on passe dessus et enfin une aide suppl men taire est fournie via le panneau Besoin d aide dans la droite de l cran En cliquant sur Tu ne trouves pas l indice un nouvel indice crit apparait et l indice de l image est mis en vidence par un rond blanc anim qui l illumine LES AIDES EN TEMPS R EL Pour ne pas casser l immersion du visiteur l aide n est pas visible sous la forme d un bouton superpos l image initialement pr vu dans mon storyboard Elle s affiche en temps r el l arriv e sur une page ou en cas d inactivit de la part de l utilisateur pen dant une certaine p riode Ces aides sous la forme de pictogrammes sont adapt es en fonc tion du support En effet les panneaux narration et besoin d aide s affichent au clic sur desktop mais via un swipe left ou swipe right Les pictos sont donc affich s en fonction apr s 3 secondes Le picto zoom ou pinch aussi indique au visiteur qu il peut ex plorer l image lorsqu elle est affich e en pleine page c est dire avec les panneaux lat raux ferm s 10 Attention tu as quitt l histoire au d but d une tape et tu es sur le point d en afficher la fin Il reste 5 tapes apr s celle L URL DE SAUVEGARDE Comme l utilisateur ne sait pas forc ment combien de temps il a devant lui qua
Download Pdf Manuals
Related Search