UI & UX Design Wordpress

Educat’Eurre Canin

Voir le site

Agence : Freelance

Responsabilités : UI & UX Design, Front & Back-End Dev

Année : 2016


Le challenge

Bastien est un éducateur canin résidant à Eurre (Drôme), pratiquant essentiellement l’éducation au clicker training. Il propose aussi des balades éducatives, de la rééducation comportementale, des activités olfactives…

Éducat’Eurre Canin souhaite avoir une présence sur internet pour montrer sa façon de travailler, expliquer sa démarche, qui diffère de l’éducation canine traditionnelle par ses méthodes.
Son site internet devra donc refléter cet aspect de son travail et de sa personne.

Mon approche

Il était important pour moi de comprendre son métier, ses méthodes et sa philosophie avant de débuter directement la création de son site.
Cela me permet de comprendre ses attentes, ses besoins, et ce que je dois faire véhiculer comme message sur le site.

Pour le contenu de son site, Bastien souhaitait pouvoir présenter ses services, ses méthodes, et ses tarifs. Le design devait être relativement simple, avec des touches de vert (nature) et de bleu (calme, sérénité).

Avec toutes ces informations, je commence à noter mes idées sur papier et réfléchir aux différentes interfaces des pages.

Après avoir testé différentes idées et mise en page, j’ai construit les maquettes pour chacune des pages.
J’ai utilisé un bleu et un vert acidulé pour apporter ce côté nature, tout en restant vif.
Le dégradé entre ces deux couleurs ressort très bien, et permet de « casser » ce côté très blanc et froid.

Pour les titres, j’ai choisi la police « Poppins » car elle est très lisible et se mariait bien à la police pour les paragraphes « Lora », permettant d’avoir des textes agréables à lire (mélangeant serif et sans-serif).

Le site étant très simple, les animations étaient nécessaire pour que le contenu soit agréable à lire

Après les maquettes, j’ai utilisé un thème WordPress que j’ai modifié pour correspondre à mes maquettes et à ce que je voulais en faire.
J’ai donc fais quelques modifications CSS, ajouté son contenu et retouché le tout pour que le site soit responsive et agréable à consulter sur tous les supports.

Le résultat est au final relativement simple, j’ai donc voulu apporter quelques animations, des slides (notamment sur la page à propos) et quelques éléments graphique pour apporter une dynamique, afin que le contenu soit agréable à lire.

Pour la page d’accueil, l’utilisation d’un slider me semblait approprié pour rapidement avoir accès aux informations importantes : la présentation de Bastien et sa méthode d’éducation et ses services. La vidéo étant là pour avoir une vue d’ensemble des services, et ainsi avoir un contenu vivant et agréable à regarder .

Les photos, vidéos et icônes on été réalisés par Dreyan, avec qui j’ai collaboré pour réalisé ce site.