Les guitares Oracle

En avril 2016, dans le cadre de notre cours sur l’HTML et le CSS, nous avons reçu un projet qui durerait jusqu’en juin : créer un site Internet complet du début à la fin en utilisant uniquement les deux langages cités.

Maintenant que le projet a été rendu, je vous invite à visiter le site ici. Je vous conseille d’utiliser Google Chrome afin de profiter des masques (voir image ci-dessous). Cet article vise à expliquer la démarche qui m’a conduit à concevoir ce site de cette manière qui était pour moi la seule justifiable.

Capture 300x226 - Les guitares Oracle

La mise en place du site

La première consigne était de choisir un sujet que nous aimions. La deuxième était de créer un site adaptatif en utilisant les Media Queries : c’est-à-dire qu’il devait pouvoir être navigué facilement sur smartphone comme sur ordinateur.

Ma passion étant la guitare et la musique, j’ai choisi de construire le site Internet d’un fabriquant de guitare fictif, Oracle : des guitares d’exception pour professionnels. Comme il devait être adaptatif, j’ai préféré mettre en place un site dit « one page« , où tout le contenu se trouve sur la page d’accueil.

Une bonne manière de travailler lorsque l’on conçoit un site adaptatif est la méthode « Mobile First« . Cela veut dire que l’on va d’abord écrire le code CSS (donc la mise en page) pour les smartphones, le plus petit écran, puis pour les tablettes et enfin les ordinateurs, le plus grand écran. De ce fait, on doit uniquement ajouter des déclarations CSS au lieu d’en supprimer.

Mais avant de commencer à coder, il me fallait une idée de la conception que je voulais suivre. Le site étant au départ un exercice, j’ai préféré faire une approche modulaire. En fait, chaque section du site (Index, histoire, marque, contact…) englobe une image et une partie texte. Cela est facilement géré grâce à des classes et des ID en HTML. Ainsi, si je veux ajouter d’autres sections, il suffit de créer une nouvelle ID pour la section, de la remplir de texte et de lui donner une image. Les marges, les espacements, les polices, les tailles, etc. sont gérés tous seuls.

La vision d’Oracle face au site

Tout ceci concernait le « back-end« , autrement dit la partie qui est invisible à l’écran. Le « front-end« , la partie visible à l’écran, était un petit peu plus difficile à mettre en place.

Qui est Oracle ? Quel est leur produit ? J’ai voulu répondre à ces questions afin d’entamer la démarche du graphisme correctement. J’ai donc créé l’univers de la marque : des guitares de qualité, fabriquées à la main depuis 1950 par un ancien musicien. Il était important pour moi de rappeler le luxe de la marque ; c’est pourquoi je me suis tourné vers une texture noire pour le fond, et que la navigation du site se fait sur une seule page.

Mais la marque possède aussi une riche histoire : un ancien musicien se reconvertissant dans la lutherie. C’est pourquoi les corps de texte démarrent par une lettrine et que les titres ainsi que le menu viennent d’une police à empattement existant uniquement en majuscule. En visionnant le site avec Google Chrome, le texte se divise en colonnes lorsque nous sommes en mode écran (largeur de la fenêtre supérieure à 900 pixels). Certains mots (le nom de la marque et le nom du fondateur) sont écrites dans une police différente. Cet effet, facilement répliqué avec la balise span, renforce le nom de la marque et contribue à son thème d’exception. C’est-à-dire que les guitares d’abord sont exceptionnelles, et un bon produit permet de pouvoir prétendre à une marque exceptionnelle.

La barre de navigation est semi-transparente pour laisser apparaître le contenu derrière et ne pas créer l’impression qu’elle « mange » le site. Toutefois, lorsque l’on passe le curseur sur un des menus celui-ci se remplit gentiment et dépasse légèrement du menu, afin de rappeler un marque-page de livre, qui est symbolique du savoir – une manière de se rattacher au nom du fabriquant, mais aussi de rappeler que les guitares Oracle sont fabriquées par des maîtres en la matière.

Il existe deux masques sur la page : le logo tout en haut et les icônes de messagerie à la fin. En HTML, un masque est une image unicolore qui laissera passer une autre image. Cela permet donc de laisser traverser une image de mon choix à travers le logo, et surtout de la faire suivre le défilement. Cela est plus évident à voir avec les icônes de messages : au début l’une est bleu et l’autre blanche, mais au fur et à mesure que l’on descend le long de la page elles deviennent les deux bleu.

Le masque utilisé pour le logo en haut de la page montre une image colorée, rouge, créant un contraste avec les couleurs froides du site (parenthèse : j’ai essayé différentes couleurs pour le menu ; le bleu était au final la seule couleur qui pouvait être regardée un moment sans avoir mal aux yeux). Ce contraste renforce le thème de la musique, il dit « avec une guitare Oracle, vous mettrez de la couleur dans votre musique ».

Le masque appliqué aux icônes de message a aussi été conçu avec soin : on peut d’abord voir un message venant de la gauche qui, dans les applications de messagerie, indiquent un message provenant d’une autre personne – dans ce cas-ci, le client. Le message en-dessous, venant de la droite, est donc d’Oracle. Il démarre en blanc pour symboliser qu’il n’est pas encore parti, donc que le client n’a pas encore reçu de réponse, mais devient très vite bleu (la même couleur que le message du client) afin de montrer que le service-client répond très rapidement.

Concevoir la marque Oracle

Le site était relativement facile à mettre en place, notamment grâce à cette approche modulaire qui a rendu la création de mes pages facile. Avec le temps qui me restait avant la restitution du projet, j’ai décidé de donner un air de réel à cette marque fictive et de lui concevoir un logo, que voici :

logo

Le nom de la marque, je l’admets, m’est venu par hasard lors de la conception du site, et je n’ai pas passé plus de temps à le chercher. Toutefois, il m’a permis de concevoir un logo parfaitement apte. Nous avons d’abord le soleil, qui est un symbole s’approchant de l’oracle grec – il est souvent associé avec le divin et la mythologie. Ce soleil est représenté d’un rond contenant, à l’intérieur, des rayons. Ces rayons sont en fait des plectres de guitare. Il y en a au total 12, comme le nombre de demi-tons dans une octave. Ils se situent dans le cercle afin de symboliser que le fabriquant conçoit des guitares pour tout type de musique.

A la droite du symbole est écrit le nom de la compagnie dans une police avec empattement en majuscule, rappelant le luxe et la tradition (c’est le genre de police que l’on retrouvait facilement à l’époque des romains). En-dessous, prenant exactement la même largeur que le mot Oracle, on peut lire « guitares d’exception », le slogan de la compagnie. Le slogan complet non-officiel est « guitares d’exceptions pour musiciens d’exception ».

Le dernier attrait de ce logo est qu’il se démarque d’autres logos de guitare : ils sont souvent représentés par le nom de la marque manuscrit, certainement la signature du fondateur. S’il y a un symbole, il n’est pas prépondérant sur le texte. Ici, il est possible d’apposer le logo sur une guitare sans le nom à côté.

Je n’ai pas eu le temps d’ajouter de la couleur au logo en-dehors du masque, mais je prévoyais un dégradé aux couleurs chaudes et dissonantes (à l’instar du logo d’iTunes) afin de recouvrir le concept abstrait, chaleureux et complexe qu’est la musique.

La restitution du projet

Les guitares Oracle ne sont qu’un projet pratique de fin d’année afin de tester nos connaissances du développement web. J’espère que cet article vous a présenté un aspect de la médiamatique qui n’est pas forcément connu, et peut-être vous a aidé à comprendre un peu mieux la conception dans le développement web !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.