Cette page est plus propre que des pages testées (le ).
Ses sont chargées en requêtes, soit de eCO2 émit par chargement

Frederic Aubert : refonte du site vitrine

avril 2021 — Frédéric Aubert
Livrables
Brandboard, Typogramme
Site vitrine
À chaque chargement de cette page
Testé le
CO2 émit
Chargé
Qualité

Frederic 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.

Frédéric Aubert, captures d’écran des pages “Accueil”, “Imprimerie” et “Cybersécurité” du site avant refonte.

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.

Texte et référencement

Un site est mis en ligne pour diffuser des informations, mais sans textes… difficile de communiquer quoi que ce soit. Les textes, aident les moteurs de recherche (Google, Ecosia…) à bien positionner une page web sur un mot-clef. La longueur du texte n’est pas le seul critère à prendre en compte. Plus le texte sera riche, structuré, intéressant et optimisé, mieux il se placera dans les résultats de recherches.

Lors de notre rendez-vous, j’ai compris être 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é.

Des liens bien visibles

Les liens doivent être clairement identifiables pour pouvoir être utilisés. Quelques mots soulignés et dans une autre couleur suffisent pour indiquer qu’il y a une interaction possible. Éviter de placer un lien sur un court mot comme “ici”, il sera difficilement utilisable au doigt sur mobile.

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 plein et contours
  • 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

Planches de combinaisons de 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

Planches de combinaisons de 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.

Planches de combinaisons de couleurs

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. Deux photographies sont placées en alternance avec texte dynamisent l’apparence du site. Elles illustrent ses domaines d’expertises.

Le poids des images

Tu ne les sais peut-être pas mais les images représentent en moyenne de 70 à 80% du poids total d’une page web. C’est pourquoi il est important d’en réduire l’utilisation et de les optimiser (format, taille, poids).

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 ?

Témoignage

Passer du bricolage à un site professionnel et impactant

J’ai contacté Jessy parce que je souhaitais que mon nouveau site soit plus professionnel. Je l’avais réalisé moi-même à partir d’un modèle tout fait, sans trop réfléchir au contenu ni à la forme et ça m’avait pris beaucoup de temps. Pour un freelance l’investissement peut-être un peu intimidant, sans garantie que le résultat plaira… J’avais besoin d’être guidé. Nous avons procédé étape par étape, nous avons construit un projet qui a dépassé mes attentes et correspond à mes valeurs. Nous avons dans le même temps entamé une réflexion en profondeur sur mon activité, et tout cela a donné un nouvel élan à mon entreprise. Aujourd’hui, j’ai un site Web dont je suis fier, que je n’hésite plus à montrer autour de moi. D’ailleurs, tout le monde a trouvé que le site était professionnel, original et mémorable. Jessy propose un service qui va au-delà des simples aspects techniques : accompagnement, créativité, éthique, tout ce qu’il faut pour aller plus loin, dans la bonne direction.

FA Traduction — Lille 
Frédéric Aubert, traducteur technique