De la conception à la réalisation d'un projet web

Avant de produire, il faut comprendre ce qui compose un site web, un logiciel ou une application :

Tout projet commence par un besoin de communication du client : informer, vendre, recruter, fidéliser.

Analyser ce besoin, c'est comprendre le problème à résoudre avant de penser à la solution.

Le résultat de cette analyse s'écrit dans le brief : un document de travail collaboratif qui contextualise l'intégralité du projet.

Trois questions structurent l'analyse :

Le chef de projet organise le travail avec quatre actions et leurs outils :

Il existe aussi le diagramme de PERT, pour évaluer les durées et les risques. Il est devenu rare dans les projets web.

Le cahier des charges est le document de référence du projet. Il fixe les attendus : les pages, les fonctionnalités, les contenus.

Il engage le client et le prestataire sur trois points : les coûts, la performance et les délais.

L'arborescence est une carte des pages du site. Elle représente toutes les pages et les fonctionnalités à développer, et leurs liens entre elles.

Ici, un modèle en arbre : la page d'accueil en haut, puis les pages et leurs contenus en dessous.

L'arborescence peut aussi prendre la forme d'une carte mentale : la page d'accueil au centre, les pages autour, puis les contenus de chaque page.

Exemple : l'arborescence du site « Terre étudiante », avec ses pages (cercles bleus) et ses contenus (carrés orange).

Le wireframe est une maquette en « fil de fer » : des blocs gris, sans couleurs ni images, qui montrent l'organisation des contenus dans chaque page.

Cette méthode facilite les allers-retours et les corrections entre le commanditaire et les concepteurs : modifier un bloc gris coûte moins cher que modifier une maquette finale.

Un wireframe se produit pour chaque support : mobile, tablette, ordinateur. La structure change, le contenu reste le même.

Ici, un wireframe desktop. Le commanditaire peut ajouter des notes (le post-it jaune) pour préciser ses attentes.

La charte graphique définit l'identité visuelle : les couleurs, les typographies, le logo, les styles de boutons.

Deux cas possibles : le client possède déjà une charte, il faut alors l'appliquer. Sinon, il faut la créer.

Un design system va plus loin : c'est une bibliothèque de composants réutilisables (boutons, cartes, formulaires) avec leurs règles d'usage.

Sur la base des wireframes, le graphiste produit les maquettes graphiques qui fixent le résultat attendu. Outil de référence : Figma.

La maquette applique la charte graphique du client sur la structure du wireframe : chaque bloc gris devient un vrai contenu.

Les maquettes doivent intégrer une approche responsive : « mobile first », c'est-à-dire conçues d'abord pour le mobile.

Tous les formats d'écran doivent être conceptualisés : téléphone, tablette, ordinateur.

Les maquettes peuvent être figées ou animées : ici, une interface interactive avec des curseurs.

Le codage convertit les maquettes graphiques en une interface de site web fonctionnelle et interactive.

Pendant cette phase, le site fonctionne en « local » : il s'exécute seulement sur la machine du développeur.

Avant d'ouvrir le site au public, le faire tester par de vrais utilisateurs, choisis parmi les cibles du projet.

La méthode : donner des tâches à accomplir (« trouver la date de la prochaine distribution »), observer sans aider, noter les blocages, puis corriger.

Tester tôt : un prototype cliquable Figma se teste avant même le code. Plus un problème est trouvé tôt, moins il coûte cher à corriger.

La préproduction (le « staging ») : une copie du site installée sur le serveur, pour tester en conditions réelles sans le montrer au public.

La mise en production : le moment où le projet devient accessible publiquement sur le serveur. Chaque mise en production s'appelle une release.

La maintenance : après le lancement, corriger les erreurs, mettre à jour les contenus et ajouter de nouvelles fonctionnalités.

Le code est suivi avec Git : un outil qui garde l'historique des versions et permet de travailler à plusieurs sur le même projet.

Exemple : un wireframe de site de recettes généré par une IA, directement en HTML, affiché dans le navigateur.