Charte Graphique Et Ergonomique
Refonte du site web Théâtre Nanterre-Amandiers
WEB DESIGN Pauline FAGET Julien GOUVERNET Licence 3 Multimédia
2
I.
Définition générale du projet et de la démarche graphique
1.1.
Objectifs
L’objectif de la refonte du site web théâtre Nanterre Amandiers était de redonner une image plus sérieuse (Objectif affectif). Deuxièmement, l’objectif était de pousser à l’achat (Objectif conatif) des places de spectacle mais aussi des produits dérivés comme les DVDs. Enfin, l’objectif final était de mettre en valeur les spectacles (Objectif cognitif) pour inciter les internautes à régulièrement consulter le site.
1.2.
Esprit général
Un site qui se veut esthétique (pour garder le client sur le site), pragmatique (pour l’inciter à l’action) et accessible (pour fidéliser) pour une cible large qui va des adolescents aux personnes âgées.
1.3.
Démarche graphique
En respectant la charte graphique (couleur jaune et noir et forme rectangulaire) nous avons voulu arrondir les angles pour plus de souplesse et tamiser le jaune vif pour moins d’agressivité. Par ailleurs, le fait de jouer avec des « blocs » impose un certain ordre.
1.4.
Concept
Nous voulions un concept tournant autour de l’organisation dans lequel on trouve l’information rapidement. Le principe était de rééquilibrer le texte par rapport aux images pour obtenir une dominante visuelle et l’information essentielle que l’internaute aurait à chercher.
Charte graphique et ergonomique
Pauline Faget & Julien Gouvernet
3
2. Audit du site et de la concurrence 2.1. Audit du site sélectionné, réponses et justifications du questionnaire + captures Audit du site DECRIVEZ LES PREMIERES IMPRESSIONS EN ARRIVANT SUR LE SITE… Le site du théâtre de Nanterre à première vue ressemble à un blog un peu brouillon. Le jaune omniprésent, agresse l’internaute visuellement parlant et l’organisation générale des éléments, est réellement « brouillon ».
Le logo, élément très important par le choix des couleurs car en effet, si le noir peut faire ressortir la sobriété de l’univers, le jaune reste néanmoins très visible et impose logiquement cette couleur sur le graphisme du site. Couleur fatigante pour les yeux sur écran.
SONT-ELLES EN ADEQUATION AVEC LE SUJET ? La toute première question que nous nous posons est : Où sommes-nous ? D’instinct, il nous est peu possible de comprendre l’environnement où nous nous trouvons. Par ailleurs, l’univers du théâtre est un bien curieux environnement, mais ne justifie aucunement une organisation aussi « brouillonne », de différentes typographies et un menu peu ergonomique.
LE NOMBRE DE COULEURS UTILISE ? Il est au nombre de Trois : Le Noir, la couleur du texte du logo, du fond de menu et de la plus part des textes du site. A noter que les hyperliens sont également en Noir et donc peu différenciables d’un simple texte souligné. Le Jaune, un élément de couleur clairement mis en avant. Le logo étant « ouvert » sur du jaune, le fond du site est devenu de manière logique, jaune… Le Jaune pâle, un élément de contraste, permettant de créer une certaine structure en y plaçant du texte par-dessus (ex : menu de droite). L’effet est intéressant mais reste cependant une couleur agressive.
LES FORMES DU SITE SONT ELLES EN ADEQUATION AVEC LE SUJET ? D’une manière générale, les formes ne sont pas travaillées et donc rectangulaires par défaut. Cela correspond à l’image de ce que nous pouvions trouver sur le web dans ses débuts.
Charte graphique et ergonomique
Pauline Faget & Julien Gouvernet
4 En effet, même si le côté très droit du rectangle peut faire rappeler le côté organisé du théâtre, il manque tout de même d’une certaine originalité, élément pourtant très important pour se différencier des autres sites du même milieu.
Y A-T-IL UNE UNITE DANS LE SITE, UNE COHERENCE ? Sur l’ensemble, il n’y a pas présence d’une grande cohérence sur le site. Une page sur deux il y a un fond différent sur la gauche. (Voir les schémas si après) A noter que la seule cohérence sur tout le site est dans le placement du menu en haut à gauche (Voir le deuxième schéma). Un menu peu ergonomique (petit, texte blanc sur noir) et désordonné. C’est typiquement le genre de menu que nous pouvions trouver dans le début des années 2000.
LES VISUELS SONT ILS PERTINENTS AVEC LE SUJET ET SONT ILS UTILES ? Visuels pratiquement inexistants ou dans un mauvais état (voir images à droite). Concernant le peu de visuels présents, un effet de bordure à été tenté sans être pour autant efficace car mal cadré.
L’EQUILIBRE DES ELEMENTS GRAPHIQUES ET INFORMATIQUES EST IL EFFICACE ? D’une manière générale, l’équilibre des éléments graphiques et informatiques n’est pas efficace. Cet équilibre pourrait se faire en tout premier lieu par une arborescence plus claire suivit d’un placement de l’information plus organisé.
L’EMPLACEMENT DES ELEMENTS IMPORTANTS EST IL PERTINENT ? Mis à part le menu en haut, seul élément correctement placé, le reste des items reste totalement désorganisé comme pour simple exemple du lien pour l’information trafic placé parmi les actualités et les nouvelles pièces de théâtre. Incohérent.
Charte graphique et ergonomique
Pauline Faget & Julien Gouvernet
5
LE PRINCIPE GRAPHIQUE POUR LE MARQUAGE DE POINT DE SITUATION EST IL PRESENT ET SI OUI EST IL EFFICACE ? Au survol du menu, la couleur de fond change (ex : orange) les pages ne respectent pas dans ce code couleur et restent en noir. Ce qui aurait pu être un effet intéressant pour les rubriques.
IL Y A T IL DES ELEMENTS GRAPHIQUES TYPE PUCES, SCHEMAS ? Les seuls éléments de ce type se trouvent dans la billetterie, représentés par de petits triangles noirs ou rouges.
LES ELEMENTS GRAPHIQUES SONT ILS UTILES A LA LISIBILITE OU A LA COMPREHENSION DU TEXTE ? Oui, ils le sont mais étant trop utilisés sur une même page, deviennent inefficaces.
LA HIERARCHIE DES ELEMENTS TEXTES EST T ELLE RESPECTEE ? Oui, même si cette mise en place n’est pas vraiment efficace au niveau cohérence.
QUESTIONNAIRE LA REGLE DES TROIS CLICS EST-ELLE RESPECTEE ? Oui, La règle des trois clics est dans l’ensemble bien respectée ce qui reste une bonne chose.
IDENTIFIONS-NOUS TOUJOURS OU NOUS NOUS TROUVONS DANS LE SITE ? Il n’y a pas de fil d’Ariane, nous ne savons jamais où nous nous trouvons dans le site. La plus part du temps, nous pouvons nous orienter à l’aide du menu qui reste activé sur les pages ou nous sommes.
Y A-T-IL UN LIEN SUR LE LOGO PERMETTANT LE RETOUR A L’ACCUEIL ? Le lien sur le logo permet bien le retour à l’accueil.
Charte graphique et ergonomique
Pauline Faget & Julien Gouvernet
6
COMBIEN Y A-T-IL DE RUBRIQUE DANS LE MENU PRINCIPAL ? Il y a un total de cinq rubriques dans le menu principal, menu situé en haut.
LES LIBELLES DE RUBRIQUE SONT-ILS PERTINENTS ? Les libellés sont plus ou moins pertinents : la rubrique « Jean-Louis Martinelli » ne laisse pas d’indice quand à son contenu par exemple.
COMBIEN DE MENU EXISTE-T-IL ? Il existe deux menus collés l’un à l’autre. La hiérarchie des rubriques n’est pas ergonomique : la rubrique « billetterie » se trouve dans le metaMenu et non dans le menu principal ce qui n’est pas logique pour un site de théâtre. Un troisième menu vertical est visible sur certaines pages à droite. Cependant, en fonction de la résolution du navigateur de l’internaute, on l’aperçoit à peine et un ascenseur horizontal apparaît dans le navigateur.
COMBIEN DE NIVEAU D’ARBORESCENCE EXISTE-T-IL DANS LE MENU PRINCIPAL ? Il existe deux niveaux d’arborescence dans le menu principal. Ex : La saison > les spectacles > le More Cruel.
EXISTE-T-IL UN POINT DE SITUATION OU EST LE FILS D’ARIANE ? Il n’y à pas de fil d’Ariane, mais un moyen subtil de se retrouver à l’aide du menu qui reste actif lors du surf.
EXISTE T IL UN CODE COULEURS ET SI OUI EST IL RESPECTE ? Au survol du menu principal, l’arrière plan du menu prend une couleur vive (ex : La saison devient orange). Malheureusement, on ne retrouve pas cette couleur une fois sur la page.
LA NAVIGATION DU SITE EST ELLE INTUITIVE ? La navigation n’est pas vraiment intuitive : lorsque l’internaute clique sur une rubrique du menu principal, un menu en colonne s’affiche à droite du menu principal. Ce qui n’est pas très lisible et de plus les items ne sont pas clairs. De plus, le menu se trouve en haut de page et il n’existe pas de lien vers celui-ci en bas des pages (système d’encres). Il y a cependant une barre de recherche assez efficace même si la présentation des résultats reste très sommaire (Texte noir sur fond rectangulaire blanc avec présence de lignes d’erreurs de code pour l’affichage des images).
Charte graphique et ergonomique
Pauline Faget & Julien Gouvernet
7
2.2.
Etude de la concurrence, les plus et les moins + captures
Points forts
Points faibles o
Théâtre Châtelet
Clair et lisible, Charte graphique cohérente, Très bonne mise en valeur des pièces par un menu interactif, Menu de droite donne les actualités, Fils d’Ariane.
Théâtre du Rond Point
Mise en page originale (journal), Fils d’Ariane, Bonne hiérarchie du texte. Bon sujet
o o
Calendrier facile d’utilisation, Rubrique lieux intéressants dans le quartier (restaurants ...).
o o
Théâtre de Saint Denis
Visuel de bannière hors sujet (Cf. New York) o Mauvaise mise en page du texte à l’accueil, o Calendrier.
o
o
Espace Michel Simon
Menu et sous menu lisibles clairs et ergonomiques, Calendrier en haut de page accessible partout et clair, Fil d’Ariane, Graphiquement cohérent.
o o o
o
Théâtre de Bordeaux
Calendrier, Forme du menu intéressant.
Charte graphique et ergonomique
o o
Menu non lisible, Animation présente à toutes les pages, Accumulation de services en haut de page (recherche, newsletter…).
Graphiquement hors-sujet, Menus incohérents graphiquement et ergonomiquement, Pas de lien vers l’accueil sur le logo.
Animation de bannière présente tout le temps et mouvante, Mauvaise proportion rapport image/texte, Menu thématique au milieu de toutes les pages ; non ergonomique Image à gauche inutile.
Intitulé de menu non intuitif, Rapport texte / image déséquilibré.
Pauline Faget & Julien Gouvernet
8
Charte graphique et ergonomique
Pauline Faget & Julien Gouvernet
9
Charte graphique et ergonomique
Pauline Faget & Julien Gouvernet
10
Charte graphique et ergonomique
Pauline Faget & Julien Gouvernet
11
3. Avant / après 3.1.
Captures du site avant la refonte (home + pagetype)
Home
Pagetype
Charte graphique et ergonomique
Pauline Faget & Julien Gouvernet
12
3.2.
Capture du site après refonte (home + 3 pagetypes)
Home
Charte graphique et ergonomique
Pauline Faget & Julien Gouvernet
13 Fiche spectacle
Charte graphique et ergonomique
Pauline Faget & Julien Gouvernet
14 Calendrier
Charte graphique et ergonomique
Pauline Faget & Julien Gouvernet
15 RĂŠservation
Charte graphique et ergonomique
Pauline Faget & Julien Gouvernet
16
4. Arborescence 4.1.
Arborescence du site avant refonte
Charte graphique et ergonomique
Pauline Faget & Julien Gouvernet
17
4.2.
Arborescence du site après refonte
4.3. Descriptif et apportés
explicatif des changements et améliorations
Dans un premier temps nous avons regroupé les éléments similaires. Par exemple nous avons regroupé les deux catégories « Jean Louis Martinelli » et « Le théâtre ». Jean louis Martinelli fait partie de la catégorie Théâtre car J-L-M est le fondateur du théâtre. Par ailleurs, nous avons regroupé « Archive » et « Multimédia » dans une catégorie qui s’intitule « La Saison », puisque se sont des archives et contenus multimédias qui concernent les saisons passées ou d’aujourd’hui. De ce fait nous avons mis en valeur les catégories « billetterie » et « infos pratiques » au milieu du menu. Et pour finir nous avons ressorti deux éléments importants pour créer deux catégories qui sont « l’espace pro » et « Actions culturelles ».
Charte graphique et ergonomique
Pauline Faget & Julien Gouvernet
18
5. Spécification techniques 5.1.
Résolution
Afin de prévoir l’affichage du site sur un maximum de tailles d’écran possibles, soit 1024*768 qui représente 26% des différents ordinateurs du monde (http://www.libstat.com/pages/resolution.htm), nous avons décidé de cadrer notre site en 1000*768. Ainsi nous évitons l’apparition d’une scrollbar pour les pages n’en nécessitant pas. Le serveur hébergement dédié : Linux sous distribution Ubuntu Server avec Apache et un système LAMP (Linux Apache MySQL PHP). Concernant la programmation du projet, il y à plusieurs manières de le faire tout dépend du prix que le client veut mettre. Par exemple si on utilise un CMS (tel Joomla, Drupal, ...) il faut juste mettre le thème graphique de notre site et le configurer (système de réservation, etc...) ou bien on programme tout de A à Z. Evidemment la 2ème solution n'est pas la plus intéressante et pour les programmeurs (simplicité) et pour le client (prix). Ce sera donc CMS pour notre cas (facilité de maintenance pour le client car présence d'un back office tout fait, etc...)
5.2.
Javascript, Flash, CSS, …
Concernant la technologie de notre site : il est avant tout destiné à être réalisé en PHP/HTML/CSS et Javascript (Jquery pour la galerie de la HOME, pour les menus et Calendrier) ainsi qu’en AJAX (Calcul en temps réel du coût sans rafraichir la page). De plus pour une question de mise à jour, de gestion de base de données ainsi que du référencement, il nous est vivement conseillé les technologies de bases (PHP, HTML, etc...).
Charte graphique et ergonomique
Pauline Faget & Julien Gouvernet
19
6. Ligne graphique de la page d’accueil 6.1.
Description + Zones détaillées
La page d’accueil est constituée d’un écran principal dominant et situé au centre de la page. Ce rectangle contient l’information principale ; c'est-à-dire les spectacles à l’affiche ainsi qu’un bref résumé et un système d’étoile pour la notation du spectacle. Ce rectangle permet, dans un seul espace, de voir ce qui se passe au théâtre en ce moment en quelques cliques. La dominante de visuel par rapport au texte est créée pour attirer l’œil de l’internaute. Ainsi l’une des images, soigneusement sélectionnée, pourra interpeler l’attention de l’internaute et vouloir chercher plus loin l’information.
En dessous de cet espace de présentation de la programmation nous remarquons la présence de l’actualité qui a pour objectif de mettre en avant des éléments autres que les spectacles vivants. En effet on y retrouve la vente de DVD, le journal du théâtre ainsi qu’un « Gros plan sur.. ». Ces informations seront mises à jour au fur et à
mesure comme la programmation. Cet espace est séparé en trois par la largeur pour parcourir rapidement et complètement l’ensemble des informations. Le principe reste le même par rapport à l’équilibre texte/image. En effet on a une illustration avec son titre, un cours résumé ainsi qu’un bouton pour approfondir la recherche.
Charte graphique et ergonomique
Pauline Faget & Julien Gouvernet
20 Nous constatons, après ces deux espaces horizontaux, un espace sur la gauche plus vertical pour bien marquer la séparation des informations. Ces informations sont secondaires d’où leur placement et leur taille réduite. On y retrouve la demande de newsletter, les infos pratiques ainsi qu’un espace multimédia. Ces trois éléments vont permettre à l’internaute soit de montrer sa marque de fidélisation par l’inscription à la newsletter, soit de repérer géographiquement l’emplacement du théâtre et de voir que le théâtre est disponible grâce aux numéros de téléphones, soit de découvrir par un moyen ludique l’ensemble des spectacles et autres activités de la structure par les vidéos.
Si l’internaute est un client régulier du théâtre et qu’il sait ce qu’il vient chercher sur le site, il n’aura qu’a se diriger vers les espaces aux extrémités du site c'est-à-dire la recherche rapide, accessible en haut à droite comme le veut la convention ou le calendrier en bas du site.
Si l’internaute connait d’avance le titre du spectacle il se dirigera vers la recherche, il commencera à taper le début de son titre et une aide à la recherche (type google ou facebook par l’utilisation de la technique JavaScrip/Jquery) pourra l’aider à affiner sa recherche. Par contre si il a une envie d’aller au théâtre mercredi prochain il se dirigera vers l’agenda, cliquera sur le jour qui l’intéresse et connaîtra directement ce qu’on lui propose.
La page d’accueil se voulait pratique et esthétique pour inciter au clic. Avoir un espace ou l’on trouve l’information d’un seul coup d’œil pour ne pas aller la chercher à droite et gauche.
Charte graphique et ergonomique
Pauline Faget & Julien Gouvernet
21
6.2.
Capture de la page d’accueil
Charte graphique et ergonomique
Pauline Faget & Julien Gouvernet
22
7. Ligne graphique des pages intérieures 7.1. Description de chaque page + Zones détaillées de chaque page La Fiche spectacle est l’endroit où l’on trouve toutes les informations nécessaires sur le spectacle que l’on désire voir. Ces informations se regroupent dans le grand rectangle qui domine largement la page. Cet espace est séparé en deux parties horizontales. Première partie on y retrouve le visuel, le titre, le système de notation ainsi qu’un menu qui a pour objectif d’organiser les nombreuses informations de la pièce de théâtre. Ensuite dans la seconde partie on a le texte correspondant à la catégorie sélectionnée. Le texte est écrit blanc sur noir en trois colonnes, pour faciliter la lecture de l’internaute avec des lignes ni trop longues ni trop courtes. Une fois la lecture sélective ou complète faite, en bas à gauche on constate un espace de partage sur les différents réseaux sociaux, si l’internaute a aimé ce qu’il a lu il voudra peu être le faire partager à son ami pour qu’il vienne avec lui. Si le lecteur n’est pas satisfait il va avoir le reflexe de repartir sur la Home par le logo en haut à gauche et sur son parcourt visuel il pourra remarquer les recommandations faites par les internautes grâce au système de notation par étoiles.
L’espace partenaires est ici pour donner un « cachet » à la pièce car si elle est partenaire d’un journal ou d’une chaine de télévision réputée cela pourra conforter le client sur la qualité du programme. Calendrier On retrouve le même principe du rectangle que pour la home et la fiche spectacle. Cette fois ci on assiste à une dominante de texte car le choix de l’internaute est fixé. Les titres et les dates sont donc mis en valeur ainsi que le bouton réservation de couleur jaune comme le titre. Le résumé reste très succinct mais l’utilisateur a toujours la possibilité d’en savoir plus grâce au bouton d’information. Les illustrations sont de tailles réduites et elles résument rapidement le spectacle.
Charte graphique et ergonomique
Pauline Faget & Julien Gouvernet
23 A gauche on constate le calendrier en bonne et due forme contrairement à celui qui est placé en bas de la page type qui est plus original. Ainsi l’internaute peut soit rechercher son spectacle grâce aux dates soit par la catégorie de son spectacle. L’internaute peut affiner ses résultats en triant les résultats du calendrier par catégories.
Réservation Dans l’espace de réservation, qui est aussi dans le même espace rectangulaire noir, nous observons un fils d’Ariane qui permet à l’internaute de suivre les étapes à venir et présentes ainsi que d’avoir la possibilité de revenir en arrière dès qu’il le souhaite. Dans cet espace le spectacle est brièvement récapitulé avec la date de réservation qu’il est possible de changer (grâce au lien souligné et entre parenthèse pour faire comprendre à l’internaute que c’est un lien). Ensuite d’autres informations vont être demandées ; le nombre de place et la catégorie (grâce aux systèmes de menu déroulant et de puce). Puis en dessous de cela une ligne jaune marque une césure pour mettre en avant le détail de la facture et le montant total en jaune également (même principe que l’addition). Ensuite avant de pouvoir passer à l’étape suivante, nous avons décidé de faire cocher obligatoirement les conditions générales de ventes à l’internaute par précaution (même si cela n’est pas obligatoire).
De même que pour rassurer l’internaute, un menu d’informations complémentaires a été rajouté pour qu’il puisse se renseigner sur toutes les conditions de ventes…
Pour toujours plus de souplesse l’agenda traditionnel reste présent sur le coté gauche comme dans les pages précédentes. Le calendrier note le jour que l’on est et les dates disponibles pour le spectacle choisi. Une légende est présente pour une meilleure compréhension. On constate également en dessous du calendrier différents champs de sélections pour affiner les recherches ou commander d’autres billets par la suite.
Charte graphique et ergonomique
Pauline Faget & Julien Gouvernet
24
7.2.
Capture des pages
Charte graphique et ergonomique
Pauline Faget & Julien Gouvernet
25
8. Principes ergonomiques de navigation 8.1. Descriptif appliqués
et
justification
des
principes
ergonomiques
Le fil d’Ariane mis en place dans la page de réservation permet à l’internaute de se rassurer quand à l’organisation du site. Celui-ci peut en effet, et à tout moment, revenir en arrière en cliquant sur la section précédente et ainsi se repérer sur les diverses étapes à venir (Règlement, Confirmation de Règlement, …) Lors d’une recherche avec l’outil de recherche situé en haut à droite de la page, l’internaute saisit les premières lettres et se verra proposer différents résultats pouvant correspondre à sa requête sans valider à chaque fois. C’est un procédé de plus en plus courant il permet un gain de temps et une recherche plus efficace quand l’on ne sait pas parfaitement quoi chercher. Lors d’un clic sur une date précise dans l’agenda horizontal situé en bas de la page d’accueil, une bulle apparaitra proposant ainsi les différents spectacles effectifs de la journée. Un lien direct vers les informations complémentaires ainsi que la réservation directe seront présents. Cliquer sur les mois grisés, permet d’avoir une vue d’ensemble sur ce qui va être programmé prochainement. Lors du survol de la souris sur un Item du menu principal, un effet de roll-over se fait présent par le changement de couleur du fond (Jaune foncé/Jaune clair). Un clic sur l’item en question permet de découvrir un sous menu horizontal, etc. Sur la Home Page, l’encadré « A l’affiche », permet de rapidement prendre compte de ce qui se fait à la période actuelle au théâtre. Les 5 derniers ajouts sont listés et toutes les 4s, la fiche suivante est affichée (du haut vers le bas). L’utilisateur peut à tout moment cliquer sur une fiche précise et obtenir plus de renseignement en cliquant sur l’icône « en savoir plus ».
8.2.
Sur la Home - Exemple de simulation du déroulé de navigation
Charte graphique et ergonomique
Pauline Faget & Julien Gouvernet
26
Charte graphique et ergonomique
Pauline Faget & Julien Gouvernet
27
-
Descriptif niveau
et explication du déroulé de menu second
Pour le menu de second niveau, un clic sur un item permet soit de découvrir l’apparition d’un menu du 3eme niveau, ou bien d’accéder à la page d’information désirée.
9. Typographie 9.1.
Descriptif et justificatif
La typographie des titres a été choisie à partir du fort empâtement et du corps épais de la typographie du logotype. Une typo ressemblante à celle du logo pour une meilleure cohérence.
9.2.
Liste des typos utilisées
Typo principal H1 (Menu) : Stencil Std, Bold, taille 20 Typo secondaire H2 (Sous Menu) : Stencil Std, Bold, taille 12 Typo H3 (Texte) : Calibri, Regular, Taille12 Typo H4 Footer (crédit, etc...) : Calibri, Regular, taille 12
Charte graphique et ergonomique
Pauline Faget & Julien Gouvernet
28
9.3.
Détail de chaque typo (couleurs, fonction, corps…)
Stencil Std est une typo avec un empâtement relativement gros. Son corps est gras et cette typo est utilisée uniquement en capital. Elle est imposante. Elle est utilisée en noir pour le menu sur fond jaune pour mettre en avant celui-ci et est en blanc sur le reste de la page pour ne pas trop agresser l’œil de l’internaute et bien séparer le menu des titres des catégories.
Calibri est une typo plus discrète, elle est très arrondie comme le veut la structure du site. Elle est bien lisible en blanc sur noir. On peut l’utiliser en gras et italique. Elle écrit tout le contenu textuel du site.
10. Couleurs 10.1.
Descriptif et justificatif du choix de la gamme de couleur
Les couleurs présentes dans le site sont le jaune, le noir et le blanc. Parfois sont utilisés les dégradés de jaune et blanc mais uniquement pour les boutons. Le jaune et le noir ont été imposés par la charte graphique du logo. Cependant une troisième couleur devait s’ajouter pour plus de dynamisme. Le noir sert de support au texte, il est utilisé en aplat. Le jaune sert à mettre en avant les titres et les paragraphes. Et le blanc est utilisé pour l’écriture des paragraphes ainsi que pour les grands titres des catégories du menu.
10.2.
Palette de couleur et détails techniques
Charte graphique et ergonomique
Pauline Faget & Julien Gouvernet
29
11. Éléments graphiques 11.1.
Descriptif et justification des divers éléments graphiques
La structure du site se construit à l’aide de rectangles noirs, arrondis dans les coins, de contour blanc où l’information est contenue. A gauche les informations secondaires s’y trouvent, comme la newsletter, les infos pratiques, l’agenda… Elles sont en liens avec les informations principales qui se trouvent au milieu de la page comme les fiches spectacle ou le calendrier. Elles dominent largement l’espace. Ensuite on retrouve les informations complémentaires en bas de la page, l’agenda et le copyright.
11.2.
Puces / boutons
Les boutons réalisés sont de couleur blanche ou de couleur jaune dégradé blanc. Les boutons de couleur blanche s’associent aux boutons qui aboutissent sur de l’information. Exemple de bouton blanc : Découvrir, en savoir plus, télécharger, suite et suivant. Les boutons de couleur jaune aboutissent à l’achat ou la réservation. Cette distinction permet à l’internaute de toujours se repérer. Les puces sont en jaune et leur marquage sont en blanc contour gris. De forme ronde ou carrée en fonction des normes.
Charte graphique et ergonomique
Pauline Faget & Julien Gouvernet
30
11.3.
Photo (taille, fonction, situation, traitement, cadrage…)
Photographie Arrière plan du site web
Cette photographie représente une scène de théâtre. Elle a été floutée et recadrée en 1000*768 pixels pour recouvrir l’ensemble de l’arrière plan du site. Elle permet de donner des tons de couleurs chaudes (légèrement sépia) pour représenter les lumières intimistes des salles de spectacles ainsi qu’un dynamisme grâce aux formes indéfinies qui représentent le mouvement. Elle se retrouve sur l’ensemble des pages du site. Photographie Illustration pour fiche spectacle Cette photographie est extraite de la pièce de théâtre « Deux voix ». Elle représente l’héroïne de la pièce, ce qui permet au spectateur d’avoir un avant gout du personnage qu’ils vont voir durant le spectacle. Cela implique le spectateur directement dans la pièce.
Charte graphique et ergonomique
Pauline Faget & Julien Gouvernet
31 Cette photo à été recadrée et arrondie pour les besoins de la fiche spectacle. Cependant elle reste de grande taille pour avoir une dominante visuelle. Les couleurs sont une fois de plus des couleurs chaudes. Pour toutes les fiches spectacle, le même principe est respecté.
Photographie « Avatar » pour calendrier Ces photographies de petit format sont employées en tant « qu’avatar » pour les spectacles de chant comme Charles Berling, ou comme illustration pour la pièce de théâtre « Poupée » lorsque des images ne sont pas disponibles. Elles sont très représentatives du sujet et permettent au spectateur de voir très vite ce qui l’intéresse
Illustrations Ces illustrations, pour un DVD disponible et un journal à télécharger, permettent de visualiser ce qui va suivre après le clic de l’internaute sur l’un des sujets qui l’intéresse. En effet ce sont : pour la première, la pochette du DVD et pour le deuxième, la couverture du journal.
Logotype
Ces logos sont présents d’une part pour une marque de reconnaissance par rapport aux marques de prestiges comme Le Monde ou France inter et d’autre part, par rapport à l’image quelle transporte aisément comme les réseaux sociaux type Facebook ou Twitter.
Charte graphique et ergonomique
Pauline Faget & Julien Gouvernet
32
11.4.
Description du logo
Le logotype du théâtre Nanterre Amandiers est en forme de rectangle, qui représente le cadre d’une scène de théâtre et de couleur jaune, souvent utilisé pour le spectacle car elle représente la lumière, la gaité et énergie... Par-dessus ce dernier est écrit « théâtre Nanterre Amandier » de couleur noir en capital avec une typo à fort empâtement pour un appui solide et bien encré. Chaque mot est disposé l’un en dessous de l’autre. Le fait que ces mots soient d’une taille croissante cela représente une sorte d’escalier au coté droit. Cela peut représenter les marches des estrades pour le public et les artistes. Deux bandes noires épaisses horizontales viennent prendre en étau le texte pour souligner encore plus le caractère solide du théâtre. Le noir représente ici la sobriété et la classe pour trancher avec le jaune et pour présenter un théâtre aux caractères ambivalents.
Charte graphique et ergonomique
Pauline Faget & Julien Gouvernet
33
Annexes Différentes maquettes réalisées au paravent :
Charte graphique et ergonomique
Pauline Faget & Julien Gouvernet
34
Charte graphique et ergonomique
Pauline Faget & Julien Gouvernet
35
Charte graphique et ergonomique
Pauline Faget & Julien Gouvernet
36
Charte graphique et ergonomique
Pauline Faget & Julien Gouvernet