Bailly Pauline Multimédia & Images

Transcription

1 Bailly Pauline Multimédia & Images Université de La Rochelle Licence Professionnelle Création Multimédia 2013/2014

2 INTRODUCTION Ce rapport présente les travaux effectués au sein de l EC «Données du Multimédia et Image», dispensé par Goulven Baron et Pierre Courtellemont dans le cadre de la Licence Professionnelle Création Multimédia de l Université de La Rochelle. En relation avec le thème du «e-tourisme», nous avons été amené à refondre un site préexistant. Une approche «Mobile First», une simplicité ergonomique et le remaniement de la charte graphique furent les principales problématiques de ce sujet. Ce dossier de présentation sera rédigé dès à présent dans l esprit de rendu au commanditaire. C est pourquoi nous mentionnerons, dans un premier temps, les objectifs graphiques, avant que d aborder les questionnements ergonomiques dans un second temps.

3 Salut Babel. Ce dossier de présentation a pour but de vous présenter les travaux de refonte effectués sur le site de l organisme associatif Babel Voyages, qui «a pour but d encourager à voyager plus responsable». Ce dossier de présentation du travail jusqu à présent engagé doit nous fournir les clés pour respecter les objectifs suivants : 1) Redonner une cohérence graphique à l association, tout en gardant son dynamisme et son goût «décalé», 2) Vous offrir une organisation plus ergonomique de la page d accueil: redonner la priorité aux éléments qui font l identité de l association, 3) Donner plus de visibilité à la structure, en expliquant qui ils sont, ce qu ils font, et pourquoi le visiteur en quête de voyages écoresponsables a tout intérêt à poursuivre sa visite sur leur site internet. Tous les éléments présents dans ce dossier constituent une trame de production graphique, nécessaire à la reprise potentielle d une refonte plus poussée. Il doit offrir les clés qui donneront au projet les moyens d avancer, ou encore, lui donner les moyens d y répondre autrement. Bonne navigation.

4 babelvoyages IMPRESSION GENERALE Babel-voyages est un site de e-tourisme, proposant des voyages écologiquement responsables. Sur cette page, et la suivante, vous trouverez une analyse objective de la page d accueil du site de votre association. Elle nous a été utile pour définir les points stratégiques pour le site, et les failles,!devenues les fondements des objectifs fixés. Toutefois, seul le logo permet d identifier la nature du site ; les éléments de la page sont plutôt présentés comme une suite d articles culturels. Il est de surcroît encombré et sans organisation visible. Le visiteur, rebuté par cette vague d informations sans lien avec sa recherche, pourrait être rapidement décontenancé. IDENTITE GRAPHIQUE Contrairement aux sites précédents, Babelvoyages est immédiatement reconnaissable. Le choix des couleurs représente un réel parti pris d audace, et développe une ambiance décalée dûment désirée. Cette approche délurée est retransmise par les choix typographiques, la disposition des blocs, la stylistique du message. L identité graphique est donc cohérente avec la totalité des éléments de contenu et d affichage. Cependant, pour élargir le public cible à des écovoyageurs lambda, il pourrait être préférable d adoucir la charte graphique, et de lui conférer une réelle organisation visuelle.

5 ERGONOMIE En premier lieu, le menu de Babel-voyages est visible dès l affichage de la page. Il engage une belle lisibilité sur les réseaux sociaux, avec un menu secondaire à droite du logo, incitant le visiteur à découvrir l identité du site. Un léger paradoxe est toutefois à relever, puisque le lien vers la page «On parle de nous» est situé dans le footer. Nous retrouvons encore une fois l usage du slider, et le mobile de sa présence en tête de page reste inchangé. Nous retrouvons également un défaut partagé entre chacun des sites ici analysés : la surabondance du menu. Une refonte plus organisée du site serait à envisager. Toutefois, le menu principal reste présent sur chaque page, pour permettre au visiteur de revenir sur ses pas.. Ci-contre, un aperçu du wireframe original du site de Babel Voyages. Il a été conçu à l aide du logiciel web Wirify. Il démontre à la fois le décalage graphique désiré, et le manque!d organisation ergonomique qui en découle. FAIBLESSES Si on retourne faire un saut dans le subjectif, y a pas à dire, votre site est chouette. Que ce soit dans le ton décalé donné aux articles, l ambiance générale et l ensemble graphique, nous, on se sent bien devant votre page d accueil. Mais il y a, premièrement, un problème de visibilité. Votre association n est présentée que par le biais d un lien dissimulé dans le footer de la page. Le visiteur ne sait ni à quel type d organisme il a affaire, et n est plus sûr de la thématique initialement prévue lorsqu il parcourt la page d accueil (cuisine, expo, livres, sorties... et le voyage, dans tout ça?). Ce qui renvoie à notre deuxième point: Les principales informations sont voilées, noyées dans le flux des articles de type «blog». La page d accueil ne possède aucune zone d articles classés par catégories, et la quête des propositions en lien avec l écotourisme peut devenir rapidement fatigante pour le visiteur. Notre dernier et troisième point porte sur l identité graphique du site internet. La cohésion entre les couleurs est mal définie, le logo de type «texte» n est pas suffisamment percutant. Il pourrait être intéressant de remodeler cette identité.

6 conclusion 1 Redéfinir une charte graphique plus approprié au thème écotouristique, ligne phare de l association. Il faut que cette nouvelle directive soit tout aussi percutante que la première, colorée, vive, et éclatante ; tout en ayant une cohésion bien définie. 2 Offrir une organisation ergonomique à votre page d accueil, afin de capter l attention de votre visiteur, et l emmener à l endroit où vous désirez l amener en priorité. 3 Vous donner de la visibilité! Faire comprendre aux visiteurs votre démarche, votre manière de faire, et votre fiabilité.

7 GRAPHIQUEMENT PARLANT

8 analyse concurrentielle Sur un plan graphique, les recherches effectuées ont révélées (sans surprise) que les principales couleurs utilisées pour le thème du e-tourisme écologique rassemblaient des couleurs froides : vert, bleu-vert, bleu, et marron. Les thèmes graphiques les plus régulièrement utilisés sont la faune, la flore, les tracés géographiques et les logos textes.

9 moodboard Première ébauche Réalisé sous Photoshop. Le moodboard ci-dessous, réalisé à la suite de l analyse concurrentielle, et reprenant les «lieux communs» graphiques du e-tourisme, n a pas été retenu. Les couleurs ne sont ni opposées, ni analogues. Elles ne font donc pas ressentir l énergie propre à Babel Voyages. L harmonie n est pas cristallisée. Nous nous sommes donc reportés sur un choix de couleurs monochromatiques, avec une teinte principale de couleur vive, pour remédier à ce manque de dynamisme. La première partie du moodboard final se trouve sur votre gauche!

10 moodboard Ébauche finale Réalisé sous Indesign, Photoshop, et Illustrator Beaucoup plus adapté à l identité de l association, ce moodboard met dès à présent en scène des éléments fonctionnels qui seront intégrés à la maquette de la page d accueil. On y trouve le logo, les icônes, certaines photographies du slider principal, les couleurs et les textures. Véritable charte graphique visuel, ce moodboard reflète parfaitement la ligne graphique que nous avons voulu suivre : énergique, flamboyante, et chaleureuse.

11 chartegraphique Polices Nous avons souhaité conserver la diversité visible sur le site de Babel Voyages. Ces disparités sont plus spécifiquement ancrées dans les teintes utilisées et l organisation despotique des éléments. Comme l organisation et l unifications des corps font partie des objectifs à atteindre, nous avons préféré créer une arborescence de polices diversifiée, majoritairement sans-serif pour une meilleure lecture à l écran. Les deux polices de titre utilisées, «Code Bold» et «Dream Orphans», sont imposantes. La première tranche par sa rondeur et son interlettrage prononcé, ce qui interpellera l oeil du visiteur face aux autres éléments. La seconde, beaucoup plus verticale et très resserrée, vient contrecarrer «Code Bold», tout en restant plus discrète par la taille de police et la graisse moins conséquente. La police de paragraphe, «Myriad Pro», offre une authentique clarté visuelle, porteuse de blancs larges et aérés. Les formes minimales de cette police apporte une légèreté et une fraîcheur qui ne peut que correspondre au domaine du tourisme responsable. «Ebrima» est visuellement proche de cette dernière. «Give it your heart», utilisée pour les liens principaux, renforce une identité versatile et insouciante. L éco tourisme vous rend plus léger!

12 chartegraphique Couleurs Si nous suivons notre volonté première d éviter les lieux communs, nous avons écarté les couleurs «clichés» du domaine responsable / écologique. C est pourquoi nous avons adopté une couleur opposée, mais complémentaire au bleu, une couleur universellement chaleureuse, le orange. En choisissant une couleur chaude comme couleur principale, nous conservons votre identité pleine de vitalité, tout en redonnant la cohésion souhaité en utilisant une gamme monochrome. Comme vous pouvez le remarquer sur le cercle chromatique ci-contre, les teintes #FF9966 et #E8380C font partie des couleurs analogues recommandées par le logiciel web Adobe Kuler. Les deux couleurs secondaires ont été sélectionnées pour apporter la fraîcheur reflétée par les polices. Elles s utilisent également comme «tampons», contrecarrant légèrement la densité des couleurs précédemment citées.

13 chartegraphique Logo Le logo initial de l association Babel Voyages est un logo texte rassemblant les trois teintes bleu, vert et rouge très saturées,symboles de leur identité graphique. Il a donc fallu le refondre entièrement, pour l adapter à la nouvelle ligne visuelle. Le détachement des couleurs sur les deux initiales de l association donne une représentation symbolique des couches terrestres internes (lithosphère, asténosphère, manteau inférieur). Nous avons adopté la même démarche qui se veut en contrepied avec les lieux communs de l écotourisme, tout en conservant certains aspects ou symboles. Le globe terrestre, très utilisé, n est représenté que dans sa forme minimale, avec le cercle entourant les lettres. Nous avons également repris l idéogramme de l étonnement, visible principalement en bande dessinées, en utilisant non plus des traits étirés, mais des gouttes d eau. Elles illustrent la promesse d un voyage enivrant, complet de surprises et d étonnement.

14 PARLONS ER-GO-NO-MIE!

15 babelvoyages Vue d ensemble Réalisée sous Photoshop Voici l ensemble du travail de maquettage réalisé. Vous pouvez y voir la page d accueil en situation, dans toute sa hauteur, sur l écran du fond. Juste devant lui, la page d accueil est vue à l ouverture du site internet. Vous trouvez au premier plan la version tablette et la version smartphone. Le dernier screen représente, lui, l application mobile de Babel Voyages.

16 page d'accueil Voici la page d accueil créée pour le site Elle a été réalisée sur un format de 1024px pour une hauteur de 3000px. L objectif principal était de réorganiser les éléments, confus sur la page initiale. Pour ce faire, nous avons créé 3 zones principales : l entête, le corps de page, le footer. Optimisation de la recherche des informations La première partie de la page, l en-tête, hiérarchise les éléments. Elle indique instantanément au visiteur la thématique du site, et le guide vers le coeur du sujet porté par Babel Voyages, les séjours écotouristiques. Dès l affichage de la page sur le navigateur, l utilisateur pourra choisir une destination, un voyage organisé ou un voyage indépendant. Au clic, comme le montre le storyboard à droite de la page, un menu s ouvrira pour permettre au voyageur de choisir une spécification sur la destination. Le temps de recherche des éléments est amoindri : plutôt que de parcourir la page d accueil dans sa totalité sans forcément trouver d éléments en lien avec sa recherche, il pourra la lancer dès son arrivée. Quant à l utilisateur plus attaché à la partie «blog», il n aura qu à scroller ou cliquer sur la flèche descendante du menu pour parvenir au corps de page. Le temps de recherche des informations est ainsi optimisé!

17 ... au survol Réorganisation des contenus Visibilité Si nous mentionnons maintenant le corps de page, nous pouvons aisément dire que le contenu est simplifié. Cela n est peut-être pas adapté à l identité de l association, mais l utilisateur pourra trouver les informations qu il souhaite bien plus facilement. Sur la page de contenu initiale, les recommandations, autant que les news ou les expos ou les sorties sont mélangées. Nous avons trouvé intéressant de regrouper les éléments par un ordre d importance hiérarchique. En effet, organiser les articles par thèmes ou par affiliation n aurait pas été faisable, étant donné la quantité d éléments divers que propose Babel-Voyages. Ainsi, Les zones «Coups de coeur», «Actu», et «Bons plans» vous permettent d oganiser les éléments avec intelligence. De surcroît, comme Babel Voyages est également un site de contenus de type «blog», la section «Coups de coeur» s est révélée être une évidence. Composée comme un slider, elle vous permet de mettre à jour vos informations privilégiées, au nombre de votre choix. Elle privilégiera les voyages et les sorties culturelles. La section des actus vous permet de mettre à jour régulièrement les nouveaux articles. Le visiteur peut également cliquer sur le calendrier pour n avoir que les contenus mis en ligne le jour choisi. Petit bémol sur cette section, nous aurions pu y insérer un bouton «Newsletter» permettant au visiteur de s inscrire. La troisième section, enfin, vous permet d incorporer toutes les recommandations de restaurants, de séjours à bas coûts, etc... Avec la première section, «Qui sommes-nous», il comprendra qui vous êtes ; élément qui était à la base de notre objectif «visibilité». C est pourquoi cette partie se trouve directement après la zone d accueil. Cependant, cette section manque certainement d un lien qui redirigera l usager vers une page consacrée entièrement à l association. Le footer, quant à lui, est une interface de communication entre le visiteur et Babel- Voyages. Il présente vos coordonnées et un formulaire de contact. Il renvoie également aux réseaux sociaux sur lesquels l association est présente. Ainsi, dès la page d accueil, l utilisateur peut donner un avis ou poser une simple question ; Babel Voyages est accessible à tous, et pour tous. Pour vous rendre plus présent encore sur la toile du numérique, nous avons créé une page d accueil responsive, adaptable à tous supports, les trois principaux formats étant l ordinateur, la tablette, et le smartphone.

18 maquette i-phone La maquette optimisée smartphone reprend les trois sections précédemment citées : le header, le contenu, et le footer. page d'accueil L une des principales modifications est portée sur la zone de recherche des destinations ; elle perd sa hiérarchie verticale pour lui préférer une hiérarchie numérale. Elle figure en premier lieu sur la page, mais n est pas démarquée des autres sections. D autre part, la section «Qui sommes-nous» a du être supprimée au profit de l élément précédent. Le burger renverra au menu secondaire, c est-à-dire le menu présentant les icônes. Le footer maintient son rôle de plateforme de contact et son objectif de visibilité, avec les icônes de réseaux sociaux centrés sur la section.

19 icone i-phone news letter L icône de l application mobile a été réalisée grâce à l outil App Icon Template. Elle s illustre d un symbole type du tourisme responsable, le sac à dos. Le logo de l association aurait également pu y être intégré. La newsletter est construite sur le même modèle que la maquette PC, en conservant toutefois l aspect dénudé de la maquette Smartphone. Le logo dirige l utilisateur vers le site de l association, et la première section de contenu présente l information la plus importante.

20 " BIENVENUE DANS LES ANNEXES "

21 annexe 1 WIREFRAME Ceci est le wireframe de la page d accueil du site internet. Il a été développé sous Axure, après plusieurs prototypes non concluants développés sous Balsamiq Mockups.

22 annexe 2 RECHERCHE LOGOTYPE Recherche logographique. Ci-dessous, les premiers logos recherchés en lien avec le premier moodboard. Ci-contre, les logos d essai avec initiales et idée de «couche terrestre».

23 annexe 3 VEILLE - ANALYSE CONCURRENTIELLE Analyse de deux sites concurrents, avec zoning. Définition des failles et des atouts. voyagespourlaplanete.com ecovoyageurs LOGO ZONE DE NAVIGATION SLIDESHOW Photos générales FORMULAIRE DE RECHERCHE PRODUITS ARTICLES Présentation des produits LOCALISATION LIEN PAGE FACEBOOK LIENS RESEAUX SOCIAUX LIENS MANUEL D UTILISATION FORMULAIRE CONTACT LABELS PARTENAIRES NUAGE DE MOTS CLES FOOTER - Mentions légales

24 voyages pourlaplanete ecovoyageurs IMPRESSION GENERALE Le site internet Voyages pour la Planète est un site de e-tourisme, référençant des offres de voyages en accord avec la thématique. Le visiteur peut clairement identifier la nature et le sujet du site. IDENTITE GRAPHIQUE La home page est attractive. Le sujet est cerné par l utilisation de couleurs, de textures et d images en lien avec les valeurs promulguées par l écotourisme. (le bois, le feuillage, icône en forme de planète,...). De surcroît, le site développe sa thématique écologique en insérant des symboles propres à la figure du voyageur : boussole, photographies, passeport... Cependant, la zone de contenu manque de créativité : les polices sont standardisées, les bordures des différents blocs sont minimales, le formulaire de recherche l est également. Voyages pour la Planète manque d une charte graphique précise, innovante et créative. ERGONOMIE Les contenus importants sont visibles dès l affichage de la page d accueil (navigation et formulaire de recherche) ; ils sont de surcroît mis en évidence par le positionnement du slider, qui va attiser la curiosité du visiteur. Le site propose également une zone de contenu présentant les offres récentes (sur le zoning, la zone <ARTICLES>), distinctes des zones secondaires par sa taille et son design. Toutefois, si l interface de navigation semble en premier lieu claire et concise, son contenu est trop imposant. Il aurait été plus judicieux de développer le menu principal, afin d alléger la liste déroulante des différentes pages proposées. Également, le footer ne permet pas au visiteur de remonter en haut de la page d accueil. L ergonomie manque de fluidité. IMPRESSION GENERALE Le site internet Ecovoyageurs est un site de e-tourisme, référençant des offres de voyages en accord avec la thématique. Le visiteur peut clairement identifier la nature et le sujet du site. Toutefois, le site semble légèrement encombré. Le visiteur peut être rebuté par le trop grand nombre de blocs de contenus. ERGONOMIE La barre de navigation est visible dès l affichage de la page d accueil ; le site met également en évidence le formulaire permettant de rejoindre la communauté. Pour donner envie au visiteur de le faire, ils ont positionné un bloc présentant les valeurs du site. C est un bonus indéniable. De plus, comme le site Voyages pour la planète, le positionnement du slider va attirer l oeil du visiteur sur ses trois zones essentielles. A contrario, le contenu du menu déroulant manque encore une fois d organisation. Le visiteur peut réellement être découragé par l abondance de pages. Il faudrait envisager une refonte du site, composé avec une organisation des pages beaucoup plus concise. IDENTITE GRAPHIQUE Bien que classique, l identité visuelle du site www. ecovoyageurs.com respecte la thématique écotouristique. Les couleurs utilisées sont en accord ave le produit de vente. Les différents niveaux de textes sont reconnaissables. Cependant, les couleurs sont relativement restreintes (3 teintes principales), et le choix typographique est discutable. La charte graphique manque de cohérence, puisque le choix d un design sobre et minimaliste, plutôt d inspiration urbaine et futuriste, n est pas en accord avec le thème du voyage, de la découverte, et du respect de l envvironnement. De surcroît, le site n utilise que des photographies ; ni texture, ni illustration. Il serait important de diversifier l identité visuelle du site, à mon goût, trop épurée.

25 BAILLY PAULINE