Frédéric Aubert : refonte du site vitrine

Contexte

Frédéric Aubert est traducteur technique en freelance, il est spécialisé dans les arts graphiques (imprimerie), la sécurité (cybersécurité) et la création sonore (sound design). Il a réalisé lui-même ce site même grâce à des contenus trouvés sur le web. Au fil du temps, il perd le goût et l’envie d’apporter les changements nécessaires ne sachant pas vraiment dans quelle direction aller. La moindre modification lui prenait beaucoup de temps, temps qu’il ne pouvait pas consacrer à développer son activité ou dans les projets que lui confiaient ses clients. Il a donc fini par reporter la tâche encore et encore.

Mission

Frédéric m’a contacté pour améliorer le site vitrine dédié à son activité de traducteur en Freelance : une refonte à la fois sur le fond et la forme. Nous avons opté pour un site en une seule page (mono page/onepage). En effet, le site qu’il a réalisé avait peu de contenu que l’on peut rassembler puisqu’il n’avait pas l’intention d’en dire beaucoup plus. Aussi, les pages étaient seulement descriptives sans intentions clairement définies.

Diagnostique de l’existant (audit)

Suite à une première prise de contact par mail, je suis allé voir son site. Il y avait très peu de contenus : pas de présentation de Frédéric et de son activité et une description très brève de chacun de ses services. Un formulaire de contact, assez volumineux, est placé à la fin de la page. La navigation quant à elle n’était pas fonctionnelle.

Autant dire qu’il est très difficile de prendre contact avec un professionnel dont il ne sait rien. Mais aussi de bien se positionner dans les résultats de recherche avec si peu d’informations. Ou encore de se sentir en confiance et d’être convaincu par la qualité des prestations de Frédéric face à ce site quasi à l’abandon.

Lors de notre rendez-vous, je me suis rendu compte que j’étais passé à côté des pages services. En rentrant, je suis retourné sur le site. Effectivement, il y avait bien des pages dédiées aux services : Imprimerie, Cybersécurité et Sound editing. Les liens sont placés sur les titres des services avec la description juste en dessous. La seule manière de s’en rendre compte, c’est le pointeur de la souris qui devient une “main”, signe visuel qu’il y a un lien.

Il y a fort à parier que je n’étais pas le seul à être passé à côté.

Réalisation

Les textes

Vous n’êtes pas sans savoir qu’un site sans contenu n’est qu’une coquille vide à l’efficacité inexistante. C’est pourquoi, j’ai proposé à Frédéric de rédiger un premier jet pour les parties « À propos », « Services » de son site. Nous les avons ensuite travaillés ensemble. Je l’ai poussé à expliciter ce qui avait besoin de l’être, simplifier quelques mots techniques et axer le discours sur les bénéfices clients. Ni plus ni moins.

Les styles graphiques

Comme à mon habitude je commence le projet par demander des références, des “concurrents” au client. C’est l’occasion pour eux d’exprimer ce qu’ils aiment et n’aiment pas dans ces sites.

Ce qui plaît à Frédéric :

• Les typographies avec du caractère
• Les thèmes sombres
• Des compositions soignées et bien alignées
• Des textes colorés mis en avant grâce à la couleur et non le gras

Ce qui ne plaît pas à Frédéric :

• Les couleurs criardes et les contrastes vifs
• Les titres avec une alternance de plein et de contour
• Les changements de taille dans les titres

Il était possible de respecter tout ce qu’apprécie Frédéric parce que ça n’allait pas à l’encontre de son domaine d’activité, ni de sa cible. Certes, votre site doit vous plaire, mais il doit avant tout plaire à votre audience, améliorer la confiance et attirer vos prospects.

J’ai fait des recherches de mon côté en analysant la concurrence pour repérer les pratiques courantes : les bonnes à garder en tête, celles à améliorer, mais aussi celles à écarter.

Ensuite, nous nous sommes concentrés sur les polices d’écritures, puis les couleurs. Les styles graphiques du site ont été créés en accord avec les valeurs de Frédéric.

En résulte une identité graphique de caractère à la fois sobre et élégante.

À chaque étape plusieurs propositions sont faites. Frédéric m’a fait part ce qui lui plaît et lui déplaisait. Nous avons avancé de cette manière jusqu’à la livraison finale du projet.

Typographies

Afin de sélectionner les typographies et se concentrer uniquement là-dessus, des propositions en noir et blanc en thème clair et sombre.

J’ai proposé une typographie avec empâtement pour les titres. Ce type de typographie a du caractère et se prête parfaitement au titre. Pour les textes courants, une typographie en bâton avec de la rondeur pour contraster et apporter de la douceur à l’ensemble.

Couleurs

Nous avons opté pour un thème sombre qui différencie le site de Frédéric des autres traducteurs mais aussi pour des raisons écologiques. Ce type de thème diminue la consommation d’énergie des écrans, permet d’allonger leur durée de vie et celle des batteries des appareils mobiles.

Les nuances de marrons comme couleur de la page et un marron plus clair ou plus foncé pour mettre en avant certains éléments secondaires de l’interface…

Le blanc cassé est utilisé pour les textes, cette couleur contraste suffisamment avec la couleur d’arrière‑plan. Avoir un bon contraste est important, cela facilite la lecture, assure que toute personne sera en mesure de lire le contenu, même les personnes ayant des déficiences visuelles. Le contraste n’est pas non plus trop fort, ce qui évite que les couleurs “bavent” / “vibre” et d’avoir mal aux yeux. L’orange quant à lui est utilisé pour mettre l’accent sur des portions de phrases.

Les wireframes et les pages

Une fois la page chargée, le visiteur sait à quoi s’attendre. Dès l’entête le visiteur sait ce que propose Frédéric et sa spécificité : traducteur de contenu technique : arts graphiques et cybersécurité. Puis, les parties thématiques se succèdent. La partie “À propos” présente Frédéric, son activité, ses valeurs. La partie spécialité, présente ses offres de services. Pour conclure sur la partie contact dont le formulaire est réduit au strict minimum, ce qui facilite et encourage la prise de contact. Notre choix s’est porté sur un formulaire pour sécuriser l’adresse e-mail de Frédéric et limiter la réception de spams et autres désagréments.

Les images

Parce qu’il n’y avait pas besoin de plus, j’ai limité le nombre de photographies à celles vraiment utiles. Seules 2 photos sont utilisées dans la conception du site vitrine, une par service. Les images sont optimisées, leur poids est allégé, leur format adapté au besoin et la taille adaptée au contexte d’usage. La colorimétrie des images est rabattue à 2 couleurs.

Ce qui réduit le poids de la page et donc son empreinte écologique, mais aussi le nombre de requêtes faites au serveur pour afficher les différents éléments de la page. L’apparence du site est dynamisé par l’alternance de textes et de de photographies qui illustrent ses domaines d’expertises.

L’intégration

Comme dit au-dessus un effort global a été fait pour réduire l’impact négatif du site web en optant pour un site plus sobre sans lourdeur graphique ni techniques grâce à une palette de couleur et un choix de typographies réduites, des images optimisées en taille et en poids, des plugins bien choisis et limité à l’essentiel… Il n’y a pas d’animations décoratives, et aucune ne se joue en boucle.

En résultent un code léger et un site qui nécessite peu de ressources pour son fonctionnement et son apparence. Par exemple, seules 2 typographies sont utilisées dont une variable (plus légère) et elles sont hébergées au même endroit que le site. Ce qui facilite le travail du navigateur pour charger et afficher la page, au lieu d’aller les charger depuis Google Font (avec les problèmes de protection de données que cela implique). Ce qui évite en plus que des codes de suivi s’infiltrent dans votre site sans que vous ne l’ayez demandé.

Sur le site, il n’y a pas d’Analytics non plus. Comme aucun contenu externe n’est chargé, aucun cookie n’est requis. Ironie du sort, j’ai placé un bandeau pour signaler aux utilisateurs que le site ne dépose qu’un seul cookie celui du bandeau qui prouve leur consentement.

Curieux·se de voir ce que ça donne en ligne ?