Lorsque j’ai commencé ma formation de webdesigner, j’ai été contactée par la Compagnie des archers d’Egly pour concevoir leur site. Cependant, le style graphique que les membres du bureau ont choisi n’est pas assez moderne. C’est pourquoi j’ai décidé de mon côté d’en faire une refonte. Du logo au site en passant par la charte graphique, j’ai redesigné le tout pour le rendre plus moderne tout en conservant un style vintage.
Chartes graphiques et logos d'Egly
J’ai commencé par réanalyser la charte graphique de départ de la Compagnie des archers d’Egly. Elle comprend les couleurs du logo de départ créé en 1997 ainsi que deux fonts. La font Georgia est utilisée sur les maillots des membres ainsi que les divers objets vendus au sein de la Compagnie.
En suivant cette charte je me suis rendue compte d’un problème majeur dans les contrastes. Pour y palier au maximum j’ai dû prendre la couleur verte principale (#92c24f) et réduire son opacité dans bon nombre de zones. Pourtant ce n’est pas suffisant…
Pour ma refonte j’ai conservé ce vert et ai pris des dégradés de celui-ci. Ainsi la nouvelle palette reste dans des tons verts allant du plus proche du blanc au plus proche du noir. Cette palette permet un meilleur contraste et garde l’esprit « vert » de la ville fleurie qu’est Egly.
Pour les fonts, j’ai préféré conserver la police Georgia pour les titres et boutons. Cependant j’ai choisi une autre police pour continuer dans les contrastes. Ainsi, la font sérif Georgia se distingue aisément de la police Outfit qui est sans sérif et bien plus ronde pour les textes.
Le logo d'Egly
Pour le logo, j’ai repris l’idée du blason qui leur est chère en recentrant le regard sur sa forme. J’ai choisi de mettre moins de détails que dans le blason de départ et d’accentuer la vue sur le loup. En effet, sur le blason de base, le orange ne permet pas de voir tout de suite qu’il s’agit d’un loup. Pourtant, cet animal est le symbole de la ville d’Egly. J’ai également choisi de limiter le nombre de couleurs pour le rendre plus simple à lire, tout en lui donnant un côté vintage.
Visuels sur Figma
Pour faire une refonte plus efficace du site (et pas uniquement les visuels), j’ai dû repenser les différents contenus.
Le header d'Egly
En effet, le site actuel a un nombre de pages impressionnant. Même si avoir beaucoup de pages peut paraître bon pour le client, en avoir trop perd les utilisateurs… J’ai donc décidé de réduire le nombre de liens dans le header à 5 au lieu de 8.
Ainsi, la page d’accueil ne figure pas dans le header car on peut la retrouver en cliquant sur le logo. De plus certaines sections sont fusionnées avec d’autres pour plus de cohérence. La section sur les leçons de tir peut être utile aux débutants , néanmoins, il ne faut pas oublier qu’elles seront apprises aux nouveaux adhérents lors de leurs entrainements. Ainsi, transformer les pages en articles ou les leçons en pdf parait plus adéquat. Je les ai donc placées comme notions complémentaires dans la section « autour du tir à l’arc ».
Pour continuer sur le header, la taille du nouveau logo permet une lisibilité accrue du nom de la Compagnie. L’ancien logo ne permettait pas de lire aisément le nom d’Egly. Il fallait donc le mettre en grand et ajouter le nom de la Compagnie au dessus des liens du header. La taille bien trop grande de ce dernier par rapport aux contenus en fait un gros point faible du site. Avec le nouveau logo ce problème est réglé et l’intérêt de l’utilisateur se porte davantage sur le contenu.
La première vue du site
La première section de la page d’accueil mettait en scène un des archers en train de tirer. Malheureusement, il y a un problème de lisibilité du contenu sur l’image. Pour contrer cela, j’ai décidé de recentrer l’image sur la cible visée par l’archer. Cela correspond mieux au slogan « viser la cible » qui incite l’utilisateur à venir pratiquer. Un encadré à part permet de mieux lire le texte et de voir plus aisément le call to action. Tout au long de la page on retrouve des traits similaires à des flèches. Ils permettent de faciliter la lecture ou de séparer les différents contenus.
Le contenu de la page d'accueil d'Egly
La page d’accueil du site permettait aux utilisateurs de trouver la majorité des pages en la parcourant. Même si cela peut paraître être une bonne idée, il s’agit d’une redondance avec les liens du header. Par ailleurs, la différence de présentation de chaque lien n’aidait les utilisateurs à rapidement trouver ce qu’ils cherchaient. Pour palier à cela, j’ai regroupé les liens sur une seule zone pour en apprendre davantage sur le tir à l’arc.
Pour la partie des actualités, sur le site actuel on ne distingue pas au premier coup d’œil les différents articles. Dans la nouvelle version que je propose, des coins encadrent les différents articles afin de rapidement les comprendre.
La dernière section présente les résultats des archers de la Compagnie sur l’année en cours. Pour rendre le tout plus agréable à regarder, des animations sur les nombres de podiums, mais aussi sur chaque type de médaille ont été ajoutés. De plus, une icone plus simple rend le tout plus cohérent et permet rapidement de voir les différentes places via les couleurs.
