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

Frederic Aubert : Refonte du site vitrine

Date
avril 2021
Client
Identité graphique
Site
À chaque chargement de cette page
Testé le
CO2 émit
Chargé
1,53Mo
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é sur le web. Au fil du temps, il perdu l’e goût’envie d’apporter les changements nécessaires ne sachant pas vraiment dans quelle direction aller. La moindres modification lui prenait beaucoup de temps, temps qu’il ne pouvait pas consacrer à développer son activité ou dans les projets que lui confiait ses clients.

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 ôpté pour un site en une seule page (monopage/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 quand à elle n’était pas fonctionnelle.

Fréderic Aubert, capture d’écran du site avant refonte

Autant dire qu’il est très difficile pour un prospect 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. Il est aussi difficile pour un prospect 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 d’être communiquer quoi que ce soit. Les textes, entre autre, 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é à coté des pages services, 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 identifiable 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 retravaillé 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’il aiment et n’aiment pas dans ces sites.

Ce qui plait à Frédéric :

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

Ce qui ne plait 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éées 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 étapes plusieurs propositions sont faites. Frédéric m’a fait part ce qui lui plait et lui déplaisait. Nous avons avancé de cette manière jusqu’à la livraison finale du projet.

Typographies

Planches combinant des 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 empatement 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 baton avec de la rondeur pour contraster et apporter de la douceur à l’ensemble.

Couleurs

Planches combinant des 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 au yeux. Le orange quant-à lui est utilisé pour mettre l’accent sur des portions de phrases.

Les wireframes et les pages

Dès l’arriver sur le site, le visiteur sait à quoi s’attendre. L’entête précise ce que propose Frédéric et son positionnement stratégique : traducteur de contenu technique : arts graphique et cybersécurité. Puis, les parties thématique 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. Non avons opté pour un formulaire pour sécuriser l’adresse email de Frédéric et limiter la réception de spams et autres désagréments.

Planches combinant des 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é au contexte d’usage. La colorimétrie des image 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 qui servir les différents fichiers. Les 2 photos 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 un grand pourcentage du poids moyen des pages Web. Les images représente en moyenne XX% du poids total d’un site. 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 jouent en boucle.

En résulte 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 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 n’avez rien 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 mis en place un bandeau pour signaler aux utilisateurs que le site ne dépose qu’un seul cookie celui du bandeau de 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