Josué Aventure

Dâte

2024

Projet

Projet de fin d'année de formation 2024

Le rôle principal

Conception

#wordpress #webdesign #collaboration #graphique #figma #association #maquette 

Objectifs de recherche

Je souhaitais identifier ce que les utilisateurs aiment et n'aiment pas sur leurs interfaces de manière générale. Suite à cela, je me suis défini ces objectifs : 

1. Identifiez les besoins concrets et déterminez ce qui peut être mis en œuvre sur une interface.
2. Identité les tendances et les pratiques pour organiser les différentes informations

Après plusieurs rendez-vous client j'ai fait un récapitulatif du cahier des charges web qui me sera nécessaire pour la réalisation des maquettes.

En débutant ma formation de webdesigner, l'école a rassemblé des étudiants de diverses filières pour former des groupes mixtes destinés à apporter de l'aide aux entreprises.

J'ai été heureuse de travailler aux côtés d'Alyssia, notre chef de projet, Pauline, notre graphiste et Noah, notre développeur.

Ensemble, nous avons sélectionné Josué, un entraîneur sportif animé par sa passion pour le sport et qui relève des défis pour venir en aide à des associations.

L'objectif consistait à créer une identité visuelle applicable sur différents canaux de communication. Ce projet s'est échelonné sur 4 mois durant lesquels j'avais pour tâches de concevoir les zonings, wireframes et maquettes afin de les remettre à mon collègue développeur pour qu'il procède à leur intégration.

Analyse au Minimalisme :

Pour mieux comprendre les attentes du client, j'ai effectué une planche d'idée de templates et sites qui sont inspirant par leurs formes et styles.

Nous avons convenu avec Josué de créer un site fonctionnel et très facile à utiliser, avec seulement l'essentiel. Le Minimalisme était pour moi évident, un mouvement artiste très similaire au design d'intérieur moderne que beaucoup de monde s'inspire aujourd'hui. Créer un site simple, épuré, avec aucuns visuels qui perturberait la lisibilité de l'utilisateur.

Chez la concurrence

Après avoir analysé les concurrents de Josué, j'ai regroupé et séparé les éléments en différentes catégories (Structure et Conception, Contenu, Performances, Sécurité, SEO, Réseaux Sociaux, Accessibilité). Le tableau à droite vous présente un récapitulatif des informations essentielles que j'ai considérées pour comparer les sites concurrents à mon travail.

Arborescence sur site

J'ai initialement conçu 7 pages (À propos, Expéditions, Défis, Associations, Actualité, Sponsors/Partenaires et Contact) qui incluent toutes les différentes catégories. 

Pour simplifier davantage l'interface, j'ai décidé de fusionner les pages Expéditions et Défis. En effet, les expéditions de Josué constituent également des défis pour lui, et maintenir deux pages séparées aurait été redondant. 

Style

Après avoir validé mes wireframes, notre graphiste a créé le logo et sa charte graphique. Nous avons discuté ensemble de possibles modifications des couleurs pour garantir leur accessibilité. Pour cela, j'ai utilisé Colour Contrast Checker afin de valider les couleurs et la typographie.

Une fois les couleurs validées et les contrastes définis, j'ai effectué un test sur la page À propos pour vérifier l'harmonie entre les couleurs et la typographie. Mieux vaut confirmer plusieurs fois.

Conclusion

La conception ci-dessous a subi des modifications par rapport aux versions précédentes dans un souci d'accessibilité et de lisibilité. La taille des polices a été réduite, des lignes ajoutées sous le texte pour séparer les options cliquables, les boutons déplacés, entre autres ajustements. J'ai également fait le site en format mobile et tablette.

Le client était jusqu'à présent satisfait des maquettes, mais il reste encore des améliorations à apporter en termes d'accessibilité. Plus précisément, le logo n'est pas adapté à la version Web en raison d'une typographie surdimensionnée et audacieuse, d'un espacement insuffisant des lettres, d'un mauvais contraste avec la photo d'arrière-plan et d'un décentrage.

De plus, il est suggéré d'améliorer la présentation de l'en-tête si cela est possible.

Dans mon arborescence, j'avais également des pages supplémentaires de prévues comme le Télégramme, mais en raison de l'absence de photos, Josué envisage d'ajouter des pages supplémentaires ultérieurement. Cependant, même si ces modifications ne peuvent être mises en œuvre immédiatement, elles seront envisagées vers la fin de mon programme académique.

Zoning & Wireframes

Voici mes zoning et mes wireframes pour le site de Josué que j'ai créé dans le cadre d'une première tentative de développement de contenu. Je me suis inspirée de ma planche de recherche pour la réalisation de mes wireframes. 

Chaque page contient : 

1. Un header : Un menu principal qui contient des liens pour accéder a chaque page. Le logo est au milieu afin de mettre en avant celui-ci.
2. Textes : Les zones dédiées à un texte sont régulièrement avec un bouton d'action. 
3. Newsletter ; Une section Newsletter qui permet de s'inscrire peu importe où nous nous situons sur le site.
4. Footer : La partie inférieure est très grande afin de mettre les informations nécessaires d'un footer

Voici quelques-uns des écrans que j'ai conçus pour le site de Josué. J'ai mis l'accent, comme convenu, sur le minimaliste et la convivialité dans la conception par l'agencement des couleurs.

J'ai inclus des textes réservés ("Lorem") pour compléter complètement la représentation visuelle de ma maquette. Bien entendu, les photos et les noms d'associations que vous voyez apparaître plusieurs fois ne sont que des espaces réservés pour le moment - nous les remplacerons une fois que nous aurons reçu les photos réelles.