Hub À propos
Projets CV

Création d’un site web entier en HTML, CSS, JS, PHP pour un OBNL


IA: Aucune utilisation d’IA dans ce projet.

Voir le projet en ligne

Contrat pour

· 2026 · Site Web



Design & intégration: Guillaume Callebert
Prototype initial: Stéphanie Lauzon
Illustrations: magnific.com
Images: unsplash.com
Icônes: Iconify

Avant de commencer...

Une des membres fondatrices de l’OBNL « Le Nid Bleu » m’a approché en m’expliquant qu’ils avaient besoin d’un site web qu’ils pourraient présenter à des investisseurs potentiels . Leur site web leur permettrait ainsi de rendre le projet plus réel et agir comme carte d’affaires numérique pour présenter rapidement leur concept.

Le processus

1. Évaluation des besoins de l’entreprise et consolidation des contenus existants et des accès.

Afin de commencer le projet du bon pied, j’ai pris le temps de bien comprendre les besoins de ma cliente , et j’ai pris le temps aussi de bien regarder le prototype de maquette que la cliente m’a fournie. Puisque ma cliente avait déjà une bonne idée du contenu qui était requis sur le site web, il me restait donc simplement à adapter le contenu vers un format mieux adapté au web afin de l’intégrer .

Prototype proposé par le client

Prototype proposé par le client

Prototype proposé par le client

Prototype proposé par le client

Prototype proposé par le client

Prototype proposé par le client

Prototype proposé par le client

Prototype proposé par le client

Prototype proposé par le client

Identité visuelle proposée

2. Choix d’une identité visuelle plus moderne et détermination des couleurs et choix de typographies.

Après avoir bien analysé le premier prototype que le client m’a offert, j’ai décidé qu’une nouvelle identité visuelle plus moderne et plus au goût du jour était nécessaire pour faire un site web qui allait vraiment réussir à vendre l’idée de l’OBNL. Pour ce faire, j’ai entre autres utilisé des typographies et couleurs qui étaient déjà utilisées dans le logo préétabli de l’OBNL.

3. Création de la première maquette

Pour commencer à faire le site web, j’ai fait une première maquette en me basant davantage sur le prototype du client pour le mettre plus dans la forme d’un site web pour me donner une idée de l’apparence que le site pourrait avoir. De cette manière, je pouvais ensuite apporter des changements pour moderniser le site web . Il s’agissait donc d’un premier prototype fait avec un outil mieux adapté que je pouvais présenter au client pour avoir sa rétroaction et sa vision du site web.

Première maquette produite

4. Évolution du design

Après avoir présenté la première version au client, j’ai fait les changements qu’ils avaient demandés , entre autre de retirer les images. Ensuite, j’ai proposé au client entre autres de retirer le beige afin d’obtenir un visuel plus moderne. J’ai également fait des changements pour mieux intégrer le visuel que je souhaitais .

After
Before

Évolution du design

5. Intégration HTML/CSS/WordPress

Un des points les plus importants pour le client était la possibilité de faire eux-mêmes des changements , et que ce soit facile pour eux de le faire, étant donné qu’ils sont peu habitués aux logiciels comme WordPress et n’ont pas de formation en programmation. J’ai donc pris le temps de leur faire une petite formation sur l’utilisation de WordPress , et j’ai fait attention de rendre le site le plus dynamique possible pour leur permettre de personnaliser le site web le plus possible .

Intégration via WordPress

Les enjeux du projet

Puisque le fait de pouvoir modifier leur site web par eux-mêmes était très important pour les clients, il m’a fallu porter une attention bien particulière à l’intégration via WordPress , pour que tous les champs dynamiques soient faciles à utiliser par n’importe quelle personne, et que tout ce qui pourrait être dynamique le soit.