Olivier Lainé

Infographiste - Développeur Web - Motion Designer

Sextant | Maquette

Sextant | Maquette
Facebooktwittergoogle_plusredditpinterestlinkedintumblrmail

 

La maquette que je vais vous présenter est la dernière que j’ai réalisée à ce jour. Je l’ai conçue durant mon stage de fin d’études. L’agence m’a confié le dossier d’un nouveau client, Sextant (un bureau d’études spécialisé dans les fluides), qui souhaitait avoir un site web. Mes supérieurs m’ont fourni le cahier des charges. Je vous expliquerai ma démarche et mes choix graphiques pour répondre aux exigences du client.

 

Travail de préconception

Avant de me lancer dans les détails de mes recherches, je vais rapidement passer sur le cahier des charges. Il était mince… En fait non il était entrain de mourir de faim tellement son contenu était pauvre. On m’a fourni une seule feuille. Et le contenu aurait pu tenir sur un format A5. Bref, je ne vais pas épiloguer dessus je suppose que cela arrive souvent quand les clients n’ont pas d’idées précises. Les exigences étaient : une ambiance zen, sérieuse, moderne, qui donne confiance et rassure les clients. Les noms des pages étaient précisés : Bureau d’études, Ingénierie des fluides, Références (avec des sous-menu dans celle-ci) et Contact.

Avant de pouvoir me lancer dans la conception d’une maquette, ou de n’importe quel projet, j’effectue des recherches pour répondre aux exigences du cahier des charges. J’ai d’abord réfléchi sur le terme « zen ». Je suis tombé sur des sites avec des ambiances particulières (massages, ventes d’huiles essentielles…). L’exemple le plus frappant est celui-ci : des bulles de savons servant de boutons au menu. Pour le coup le côté zen était respecté mais le côté moderne ne l’était pas du tout. Ma recherche s’est portée sur un mot qui se rapprochait de zen : calme. Les sites de relaxation étaient dans les tendances du web design (images pleine page, minimalisme…).

 

Choix de la gamme chromatique de la maquette

Pour les couleurs je me suis dirigé vers une dominante bleu marine. Le bleu est la couleur qui donne le plus confiance en Occident, d’une part, et c’est une couleur plutôt apaisante puisqu’un bleu foncé fait penser à la nuit. En ce qui concerne la tonique je me suis immédiatement dirigé vers une couleur verte (avec une légère teinte de jaune) et avec une saturation vive. Les deux couleurs s’accordent parfaitement et c’est un accord chromatique plus original que bleu et orange.

Pour la police, il était évident de choisir le blanc. Sur une couleur foncée on est forcé d’utiliser une couleur claire pour la lisibilité. Il était hors de question d’utiliser la tonique pour le texte courant cela fatiguerait l’œil lors de la lecture et la tonique serait trop présente. Le vert est dont utilisé pour les titres et les mots importants.

 

Choix typographiques

J’ai utilisé la police d’écriture Open Sans pour les textes courants, les titres, sous-titres, etc… Je l’ai utilisée presque partout sauf pour l’accroche de la page d’accueil, où la police utilisée est la Grandesign. L’Open Sans est une typographie dans les tendances du web design et, n’ayant pas d’empattement, elle est lisible sur toutes les résolutions et tous les supports numériques.

La Grandesign est une police qui a un style graphique moderne. Les lettres ne possèdent pas de déliés, certaines lettres possèdent des empattements rectangulaires. Cette police est droite, stricte, elle rappelle la nature d’un bureau d’études. De plus, elle est stylisée de façon sobre, elle est originale sans être fantaisiste.

 

La charte des images

Pour entrer dans l’univers d’un bureau d’études (et être dans les tendances du web design), j’ai décidé de mettre des images qui utilisent toute la largeur de l’écran. Beaucoup de sites intègrent des images en fond. J’ai imposé des codes graphiques aux images de fond pour correspondre à l’ambiance du site. Les images doivent, bien sûr, avoir pour sujet les thèmes du bureau, travail, ingénierie. Ensuite, il faut ajouter un dégradé de couleur allant du bleu au vert et ajouter un effet de flou pour ne pas altérer la lisibilité du texte.

 

Présentation de la maquette au client

Je terminerai avec la présentation de la maquette au client. Pour la partie graphique… vous avez les explications en haut. J’ai aussi détaillé la partie ergonomique, l’utilisation d’un sous-menu au survol de l’onglet « Références ». La partie « Contact » est bien présente mais elle n’est pas dans le menu. En fait, on accède à cette section du site par le bouton « Devis gratuit », c’est un bouton Call-To-Action.

Les différentes parties du site:

  1. Header, description de l’entreprise et bouton call to action
  2. Description du dernier projet avec une image de celui-ci
  3. Les différents outils/logiciels utilisés par Sextant
  4. Fournisseurs partenaires
  5. Footer du site

Le client a totalement adhéré à la maquette, il est satisfait de l’ambiance qui s’en dégage et que l’esprit de sa société soit retranscrit. Seulement deux choses changeront lors de l’intégration : les images et les textes.

 

Je vous remercie d’avoir lu cet article et j’espère que vous avez apprécié mon travail. D’ailleurs si vous aimez un petit tweet ou like est le bienvenu.

 

Me Contacter