Ensemble pour Clémence

Ce projet consistait à créer un site vitrine pour l’association Ensemble pour Clémence, dans le cadre d’une semaine de Digitale sans Frontière, organisé par MyDigitalSchool. L’objectif était d’aider une association dans le domaine de la santé ou de l’aide à la personne, afin d’améliorer sa visibilité en ligne, en développant son identité visuelle, ses réseaux sociaux et en créant un site web fonctionnel.

Compétences

Développement d’un site vitrine

Rendre le site facile d’utilisation et d’entretien pour l’association

Logiciels

Utilisation du WordPress

Utilisation du langage CSS

Utilisation du langage JS

Utilisation du langage HTML

Développement du projet

Pour ce projet, nous étions en groupe de quatre personnes, 2 développeurs et 2 designers, à savoir Chevalier Rémy avec Vernageau Anaïs pour le côté "design" ainsi que Le Brech Tristan et moi-même pour le développement web. Ici, je me concentrerai donc sur ma partie "développement". Nous avions pour mission de rendre le projet utilisable facilement pour l'association. C'est pour cela que nous avons choisi WordPress comme CMS, pour la création du site vitrine, qui reste facile d'entretien et de modifications, accompagnée d'un guide "utilisateur" que nous avons rédigé.
L'identité visuelle qui comprend les couleurs, le logo, les bannières ont été créés par Chevalier Rémy et Vernageau Anaïs.
Pour réaliser ce site, j'ai utilisé plusieurs extensions :

- LiteSpeed Cache qui contribue à l’optimisation du site, grâce à la mise en cache, pour accélérer le chargement des pages.

- Kadence Blocks qui facilite la création des pages avec des blocs prédéfinis, qui s’ajoutent directement à Gutenberg, le constructeur de page par défaut de WordPress.

- Spectra qui permet l’ajout d’animations et de rendre le site dynamique.
- Code Snippets et WP Code Lite, pour le rajout facile, sans thème enfant) de code HTML et JS, pour gérer certaines animations de chargement, comme le spiner.

- ReSmush.it qui optimise les images.

- HelloAsso qui permet d' implémenter les dons et adhésions, directement via un module sur le site web
Le site est découpé en différentes zones spécifiques. Dans le Header, à gauche, se trouve l’image de marque avec le logo et le nom de l'association. À droite, nous pouvons retrouver le menu principal avec les pages du site et un bouton "Call To Action" pour rejoindre la page d'adhésion.
Dans le Footer, nous pouvons découvrir d’abord les réseaux sociaux sur lesquels l'association est présente avec le logo de kastor green qui valide l'éco-responsabilité du site, puis le menu secondaire avec les pages légales et enfin le copyright.
Par la suite, j’ai créé les différentes pages. La page "Accueil" contient une description de l'association, accompagnée de quelques chiffres clés, une photo et une vidéo.
Sur la page "À propos de nous", nous pouvons lire une belle citation agrémentée d'un bouton "Call To Action" qui redirige de nouveau vers la page d'adhésion, l'histoire de l'association, ainsi que quelques photos des membres du bureau et des administrateurs, puis pour finir un "patchwork" d'images présentant quelques actions que l'association a réalisé.
Dans la page "Événement", nous avons tous les événements organisés par l'association sur l'année et occasionnellement.
En ce qui concerne la page "HelloAsso", elle contient les formulaires de dons et d'adhésion, implémentés à partir du module "HelloAsso".
Enfin, la page "Contact" permet aux visiteur de laisser un message via un formulaire de contact et de trouver les coordonnées de l'association.
Ce projet m’a permis de développer mes compétences en communication, en travail de groupe et en relation client avec des personnes réelles.

Recherche

Pour ce projet, nous étions en groupe de quatre personnes, 2 développeurs et 2 designers, à savoir Chevalier Rémy avec Vernageau Anaïs pour le côté « design » ainsi que Le Brech Tristan et moi-même pour le développement web. Ici, je me concentrerai donc sur ma partie « développement ». Nous avions pour mission de rendre le projet utilisable facilement pour l’association. C’est pour cela que nous avons choisi WordPress comme CMS, pour la création du site vitrine, qui reste facile d’entretien et de modifications, accompagnée d’un guide « utilisateur » que nous avons rédigé.

Identité visuelle

L’identité visuelle qui comprend les couleurs, le logo, les bannières ont été créés par Chevalier Rémy et Vernageau Anaïs.

Développement

Extensions

Pour réaliser ce site, j’ai utilisé plusieurs extensions :

LiteSpeed Cache qui contribue à l’optimisation du site, grâce à la mise en cache, pour accélérer le chargement des pages.

Kadence Blocks qui facilite la création des pages avec des blocs prédéfinis, qui s’ajoutent directement à Gutenberg, le constructeur de page par défaut de WordPress.

Spectra qui permet l’ajout d’animations et de rendre le site dynamique.

Code Snippets et WP Code Lite, pour le rajout facile, sans thème enfant) de code HTML et JS, pour gérer certaines animations de chargement, comme le spiner.

ReSmush.it qui optimise les images.

HelloAsso qui permet d’ implémenter les dons et adhésions, directement via un module sur le site web

Zoning

Le site est découpé en différentes zones spécifiques. Dans le Header, à gauche, se trouve l’image de marque avec le logo et le nom de l’association. À droite, nous pouvons retrouver le menu principal avec les pages du site et un bouton « Call To Action » pour rejoindre la page d’adhésion.
Dans le Footer, nous pouvons découvrir d’abord les réseaux sociaux sur lesquels l’association est présente avec le logo de kastor green qui valide l’éco-responsabilité du site, puis le menu secondaire avec les pages légales et enfin le copyright.

Pages

Par la suite, j’ai créé les différentes pages. La page « Accueil » contient une description de l’association, accompagnée de quelques chiffres clés, une photo et une vidéo.
Sur la page « À propos de nous », nous pouvons lire une belle citation agrémentée d’un bouton « Call To Action » qui redirige de nouveau vers la page d’adhésion, l’histoire de l’association, ainsi que quelques photos des membres du bureau et des administrateurs, puis pour finir un « patchwork » d’images présentant quelques actions que l’association a réalisé.
Dans la page « Événement », nous avons tous les événements organisés par l’association sur l’année et occasionnellement.
En ce qui concerne la page « HelloAsso », elle contient les formulaires de dons et d’adhésion, implémentés à partir du module « HelloAsso ».
Enfin, la page « Contact » permet aux visiteur de laisser un message via un formulaire de contact et de trouver les coordonnées de l’association.