Obivwak nouveau site wordpress orientation

Le Brief du projet

Maxime et Laure m’ont contacté fin juin 2017 pour la refonte du site Obivwak. Obivwak est une course d’orientation (en fait plusieurs en une seule) qui se déroule annuellement en Rhône-Alpes. Le lieu de l’événement change également chaque année, ce qui en fait une course sans cesse en renouvellement/

J’ignore si c’est vraiment suite à la refonte de l’échappée belle (Trail sur le massif de Belledonne) que Maxime et Laure m’ont contacté, mais je pense que cela a sûrement peser dans la décision. J’ai replongé avec plaisir dans l’univers des courses et des trails, avec cette fois-ci un accent beaucoup plus « orientation »

Le site originel était en Joomla! (Joomla! prend un ! ; je ne signifie pas un mouvement d’humeur). Il était également non responsive ce qui limitait son accessibilité, et la présentation des courses s’éparpillait sur de nombreuses pages peu loquaces. Sa refonte grâce à un outil comme WordPress a également permis de ré-envisager toute la structure de la home et des pages intérieures en retrouvant une possibilité d’éditer le contenu (que le site originel n’offrait plus), et de donner une information plus dense et mieux organisée.

Obivwak
Course orientation en Rhône-Alpes

Obivwak.net

Ancienne page d’accueil

Ancienne présentation d’un trail

La mise en page et la réalisation technique

Déploiement  de la charte graphique

Ré-envisager le site est également une occasion de refondre et/ou créer des codes graphiques pour le site. Au fur et à mesure de son déroulement, et surtout en considérant les impératifs de présentation des courses, ce projet s’est avéré plus graphique qu’il n’y paraissait.

Habillage Site Web Obivwak

Choix des couleurs

Autour de la nuance principale verte déjà existante, un camaïeu monochromatique a été imaginé pour habiller de grandes surfaces et un choix de gris a été pensé pour mettre en valeur certains éléments plus secondaires. J’ai imaginé également plusieurs nuances complémentaires connexes pour accompagner la signalétique propre à chaque course ou Trail.

Icônes pour les trails

Ce point n’éxistait pas du tout dans le précédent site. Des blocs couleurs qui reprennent la forme caractéristique du O du logo ont été pensés et été mis en avant dans la page trails et courses. Toutes les règles CSS ont été harmonisées pour faire apparaître ce choix dans chaque trail (fond de couleur au dessous des textes).

Bannière

Plusieurs bannières ont été créées dans la mouvance de celles qui existaient déjà. Elles habillent toutes les pages, sidebar et signature email.

Fonte de paragraphe et fonte de titrage

Pour faciliter la lecture d’un site à grand trafic à certains moments de l’année, j’ai choisi une fonte de labeur simple et pourtant identifiable. La fonte de titrage a été également repensée.

Entêtes

Pour conférer un caractère fort, impactant et reconnaissable, toutes les pages ont été pensées avec une entête en transparence composée d’une image  et habillée à sa base par une frise originale que j’ai crée, laquelle reprend le message fort de la course : La nature, la montage et la course à pied.

0 réponses

Ajouter un commentaire

Rejoindre la discussion?
N’hésitez pas à contribuer !

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *