Association Fitness Boxing

Webdesign - Print - Divers

Novembre 2018 - Janvier 2019

Stage de fin de formation de Webdesigner à ID Formation, Béthune.

Afin de tester ma capacité à travailler en autonomie, dans l'optique de me lancer en freelance, j'ai effectué mon stage pour l'Association Fitness Boxing.

Cette association, en plus de donner des cours de Fitness Boxing, possède également plusieurs clubs de Krav Maga répartis dans sept villes du Nord-pas-de-Calais sous la Fédération Krav Maga Corp.

1. Wordpress Krav Maga

Il y a donc huit sites Wordpress pour les clubs de Krav Maga : le site du Krav Maga Corp. et un site par ville, ceci afin d'aider au référencement puisque le nom de la ville est inscrit, notamment, dans le nom de domaine.

Quatre des sept sites spécifiques à chaque ville étaient déjà réalisés avec le thème payant Divi. J'ai eu comme mission, dans un premier temps, de faire les trois sites restants en utilisant également Divi et en reprenant les catégories des autres sites.

Une fois la maquette réalisée, validée et les trois sites finis, j'ai dû m'occuper de mettre à jour visuellement les quatre sites déjà existants afin qu'ils aient la même identité visuelle que les nouveaux. Il n'y avait qu'un seul impératif à respecter : les sites devaient tous avoir une couleur dominante différente afin de les différencier facilement.

Pour ces sites, je n'ai utilisé aucun plugin à l'exception du Classic Editor et j'ai intégré l'URL de Fontawesome directement dans le header.php du thème enfant.

Je ne devais pas encore m'occuper de celui, global, du Krav Maga Corp.

Langages utilisés : HTML5 (ajout du bandeau avec la ville du club au-dessus de la navbar), CSS3 (CSS personnalisé).

Logiciels utilisés : Photoshop (maquette), UwAmp (travail en local).

2. Flyer Krav Maga

Entre-temps, j'ai aussi eu à charge de créer un nouveau modèle de flyer pour promouvoir les stages de Self Défense Féminine : seules la date et la ville changeront en fonction de ces stages. Mis à part les textes qui étaient donnés et le format A5 à respecter, j'avais carte blanche sur cette réalisation.

Logiciel utilisé : Photoshop.

3. Apprentissage Newsletter

Durant ce stage, ma tutrice m'a appris les bases de la Newsletter. J'en ai donc créé une pour m'exercer. Je vous invite à en découvrir plus ici.

4. Wordpress Fitness Boxing

Concernant le site sur le Fitness Boxing, ma tutrice m'a proposé de m'occuper de la refonte complète de son visuel. Seules les informations qui y figurent devaient rester identiques. Cette fois encore, j'avais carte blanche. Puisque c'est une activité réservée aux femmes uniquement, il fallait adopter un style moderne, sportif et féminin sans toutefois tomber dans des stéréotypes. Pour les couleurs, il fallait respecter l'identité visuelle du logo.

Sur le site d'origine, il y avait six pages, hors accueil : la présentation du Fitness Boxing, la présentation du Self Défense, les horaires, les tarifs, le plan et le formulaire de contact. Outre les deux pages de présentation, les autres contenaient très peu d'informations. J'ai donc suggéré, lors de la phase de maquettage, de faire un one-page avec l'utilisation d'ancres.

Le design y est plus détaillé et plus complexe que celui des sites de Krav Maga et je tenais à ce que tout soit identique à la maquette. Il m'a fallu écrire beaucoup de CSS additionnel et donc ajuster le responsive en conséquence. Quand je le pouvais, j'ai également intégré du JavaScript directement dans le thème enfant.

Pour ce site, j'ai utilisé le thème Customify et je me suis aidée des plugins Elementor, Classic Editor, WPForms Lite, All in One SEO et WPFront Scroll Top.

Une fois le site mis en ligne, je me suis occupée du SEO.

Langages utilisés : HTML5 (template sans navbar), CSS3 (CSS personnalisé), JavaScript (effets de soulignement au scroll dans la navbar).

Logiciels utilisés : Photoshop (maquette), UwAmp (travail en local).

5. Tutoriel PDF

Pour finir, il m'a fallu créer un PDF pas à pas détaillé pour expliquer comment ajouter une actualité sur les sites de Krav Maga, via le Divi Builder notamment. Nous avons choisis de le concevoir de manière à ce qu'il soit accessible à tout le monde, débutants compris.

Logiciels utilisés : InDesign (mise en page), Photoshop (retouche des captures écran).

6. Au final

Je remercie Aurélie, ma tutrice de stage, pour m'avoir fait confiance, beaucoup appris et encouragée !

Mockup Sites Krav Maga et Fitness Boxing
Maquette Krav Maga (ville) page Accueil Maquette Krav Maga (ville) page Contact
Maquette des pages "Accueil" et "Contact" du site de Krav Maga (ville)
Maquette Krav Maga (ville) page Actualités Maquette Krav Maga (ville) page Cours
Maquette des pages "Actualités du club" et "Cours" du site de Krav Maga (ville)
Flyer Stage de Self Défense Féminin
Modèle de flyer pour le stage de Self Défense Féminin
Maquette Fitness Boxing page Accueil
Maquette de la one-page "Accueil" du site de Fitness Boxing
Maquette Fitness Boxing page Fitness Boxing Maquette Fitness Boxing page Self Défense
Maquette des pages de présentation du "Fitness Boxing" et du "Self Défense" du site de Fitness Boxing
Maquette Fitness Boxing page Accueil responsive mobile
Maquette du responsive de la page "Accueil" du site de Fitness Boxing
PDF "Comment ajouter une actualité sur les sites de Krav Maga ?"