Titre article sur l'identité graphique des Oreilles en Pointe

Festival les Oreilles en Pointe : Déclinaison papier & web de l’identité graphique 2014

Pour clore cet exposé de mon travail sur la communication du festival Les oreilles en Pointe, je voulais aborder à la fois les aspects graphiques de la déclinaison du thème « super héros » et dédier une partie au site Internet de l’évènement.

POW ! BLOP ! WIZZZZZ ! et emblèmes de super héros

super héros logos

L’iconographie du super héros, c’est un peu le paradis des insignes et la part belle donnée au lettrage onomatopéique du texte. Un super héros sans un emblème qui l’identifie n’est pas vraiment un super héros. Cet emblème est souvent basé sur une forme simple, l’ensemble est épuré et surtout très lisible. Bref, on approche réellement du concept du logo.
J’ai donc décidé de recréer toute une palette de formes cousines de ces symboles que l’on connait si bien pour certains.

Emblèmes super héros - Festival Les Oreilles en Pointe 2014

 

Inspiration et visuel final Les oreilles en pointe2014Le visuel avait déjà impliqué de créer un croissement entre les oreilles de la bébête et la célèbre forme en diamant du symbole de Superman (article précédent sur le direction artistique et graphique du Festival Les Oreilles en pointe). L’exercice était plutôt ludique et permettait de donner des outils d’intégration des diverses informations qu’il faut communiquer sur les supports de communication du festival.

 

Page de programme Les oreilles en Pointe - habillage photos

Pour le programme papier du festival Les oreilles en Pointe, la question d’un habillage original du texte et des photos se pose toujours. J’ai décidé d’insérer les photos des artistes dans ces formes. Cela permettait de présenter les artistes comme les super héros de l’événement et d’imaginer, chacun avec un symbole propre (ou presque) leurs univers, leurs singularités, tout comme les super héros ont leurs forces et leurs points faibles. De façon bien commode, ces emblèmes ont aussi permis de faire des puces de listes.

Pour évoquer la mise en forme graphique des onomatopées, j´ai donné au nom d’artiste le mouvement si caractéristique d’arche vers le haut, un peu façon arc-en-ciel.
De même, à la manière des impressions de la première heure, j’ai utilisé une palette de nuances simple, proche des couleurs primaires : jaune, rouge et bleu. Le noir quant à lui a, à peu prês, un rôle identique à celui des comics. Il est utilisé pour le texte et pour des ombres très tranchées comme un tracé.
Enfin, j’ai voulu rester sur cette option du gros plan choisi pour le visuel : j’ai mis sur tout le fond déplié du programme, la mascotte du festival en vol à la manière de Superman. Chaque volet offre une partie de son petit corps rondouillard. Le traitement peinture/dessin donne un fond texturé qui sied tout à fait à l’identité du festival.

Programme Les Oreilles en Pointe 2014 (pdf version web)

Le site Internet du festival Les oreilles en Pointe 2014

Page site responsive Oreilles en PointeJ’aborde cette déclinaison bien précise de l’identité graphique du festival car elle représente une grande part de mon travail et a des spécificités intéressantes à évoquer. Je dirais que le web offre moins de libertés dans la déclinaison de l’identité graphique. Ou plus précisément, il faut savoir la réinventer pour mieux l’intégrer au web.
Bref, vous avez compris le principe, il fallait mesurer la certaine fantaisie qui la caractérisait sous peine de voir des catastrophes de ce genre (précédents article sur des sites internet). Désormais, la clarté de l’interface utilisateur doit être optimale pour que l’information soit disponible immédiatement et dans n’importe quelle configuration. Il n’était donc pas question d’intégrer comme pour les documents papier, les photos d’artistes dans mes formes emblèmes par exemple. Mais il aurait été dommage de perdre trop de l’esprit du thème de cette année en ne collant que le visuel en haut d’une page. J’ai donc récupéré mes formes emblèmes afin de styler des titres, de créer des boutons et même pour customiser les pointeurs de la Google maps du festival. Il ne faut pas nier que le travail sur ces détails est mu par le plaisir de domestiquer les spécificités techniques des divers outils du web.

Je me permets des parenthèses de détails techniques notées Style CSS, pour ceux que cela pourrait intéresser :

Style CSS : background image responsive pour titres h1,h2,h3 par exemple :

Ici par exemple, au sein du colonne responsive de 300px :

h5.maClass{
  background-size:100% auto;
  margin:0 auto;
  width:100%;
  max-width:300px;
  min-height:154px;    /*  en fonction de l'image    */
  background: url(monFond.png) no-repeat;
  text-align:center;
  padding:48px 0px 0px 0px ;    /*  en fonction de l'image et du texte   */}
 

Créer ces propres pointeurs Google Maps :

Pointeurs Google maps Festival les Oreilles en Pointe 2014

Google maps propose une palette de pictogrammes pour identifier des repères lors de la création de plan : pictogrammes pour des lieux divers, flèches, etc. On peut également utiliser ses propres fichiers en faisant un lien vers leur hébergement en ligne. Au delà de la simple customisation, je trouvais intéressant de « marquer le territoire » de pointeurs / éclairs à la Flash Gordon comme s’ils répertoriaient des événements fantastiques survenus. N’est ce pas l’ambition d’un festival que d’offrir de l’exceptionnel sur un territoire et un lapse de temps donnés ? D’autant que le festival Les Oreilles en Pointe s’attache réellement à habiter le territoire de la vallée de L’Ondaine. Au niveau technique, les images ne doivent pas dépasser 64 pixels (elles seront diminuées le cas échéant). Je trouve intéressant de prévoir une ombre portée comme les autres marqueurs ou fenêtre de légende de Google Maps afin de garder une homogénéité.

Pour finir avec les derniers éléments tiers intégrés au site, il ne fallait pas oublier l’intégration d’éléments liés aux réseaux sociaux. Et surtout, il était souhaitable pour un festival de concerts d’avoir de la musique sur le site. (Mais attention ! Il est une sacro sainte règle dans la création de site Internet : pas de son sans action de l’utilisateur).
J’ai donc procédé à l’intégration de vidéos officielles des artistes depuis Youtube et Dailymotion etc, et à une playlist générée par mes soins depuis Deezer (Le seul inconvénient de cette dernière méthode est que seuls des extraits seront fournis pour toute personne non connectée à un compte Deezer).

Style css : le plugin LikeBox de facebook :

Il faut placer le lien iframe du module dans une div .FB. La div génère l’espace nécessaire et s’adapte à son environnement. Et le module s’adapte à la div. On peut un peu styler le plugin pour qu’il se fonde dans la page. Ici par exemple : pas de bordure et un fond dégradé.

.FB {
  position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; max-width: 100%; height: 527px; } 
  .FB iframe{
  position: absolute; top: 0; left: 0; width: 100%; height: 527px;
  background: rgb(255, 239, 42);
  background: -moz-linear-gradient(0deg, rgb(255, 242, 190) 14%, rgb(255, 239, 42) 69%); /*  Gecko (Mozilla)  */
  background: -webkit-linear-gradient(0deg, rgb(255, 242, 190) 14%, rgb(255, 239, 42) 69%);/*  Chrome, Safari, Androïd  */
  background: -o-linear-gradient(0deg, rgb(255, 242, 190) 14%, rgb(255, 239, 42) 69%); /*  Opera  */
  background: -ms-linear-gradient(0deg, rgb(255, 242, 190) 14%, rgb(255, 239, 42) 69%); /*  Microsoft  */
  background: linear-gradient(0deg, rgb(255, 255, 255) 14%, rgb(180, 201, 227) 69%); 
  padding: 0 0px;
  margin: 10px 0;
  border: none;
  color: rgb(255,255,0);
  }

Style CSS : intégration responsive de vidéos youtube/dailymotion etc. :

Même principe : Il faut placer le lien iframe de la vidéo dans une div .maDiv. La div génère l’espace nécessaire à la vidéo et s’adapte à son environnement. Et la vidéo s’adapte à la div.

.maDiv {
  position: relative;
  padding-bottom: 56.25%; /* rapport 16:9 */
  padding-top: 30px;
  overflow: hidden;
  max-width: 100%;
  height: auto; } 
.maDiv iframe, .maDiv object, .maDiv embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

Bonne source à garder : http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

Et du responsive sinon rien !

Site Festival Oreilles en pointe - responsive
Je parlais de l’accès à l’information rapide et en toutes circonstances. Je faisais bien sûr référence aux divers appareils utilisés désormais pour surfer. Le site se devait de répondre à cette exigence : fournir les informations et outils aussi bien sur tablettes que mobiles. C’est pourquoi le terme responsive est pas mal revenu dans mes petites parenthèses css ou autres.
Le site permet donc à l’internaute où qu’il soit, d’acheter ses places de concerts, d’obtenir des informations segmentées et pratiques, de se donner une idée de la teneur de la programmation, de capter l’ambiance du festival, d’obtenir des itinéraires facilement, de partager le contenu avec son cercle d’amis ; et ce tout en gardant son petit grain de malice : Croyez vous vraiment que la bébête puisse voler ?
Bon surf ! Et bon Festival !