Les 8 étapes de la création d'un site ou d'une application web

Pour tout projet web, nous avons deux parties prenantes : le client, avec ses besoins, ses envies et son univers, et le prestataire avec ses connaissances et ses outils.

Bien souvent chacune de ces parties sont composées de plusieurs personnes, chacune avec leurs postes et leurs compétences respectives mais ce détails sera mis de côté pour une question de simplicité afin d'avoir une vision globale du projet.

Dans cet article je ne ferais pas état des différentes méthodes de conception (comme l'Agile par exemple), qui peuvent influencer l'ordre de ces étapes et la manière de procéder afin de garder une idée générale du parcours de création.

Si vous voulez en apprendre plus sur la méthodologie Agile, je vous conseille de lire mon article à ce sujet.

À noter qu'au cours de chaque étape il est indispensable d'échanger avec le client pour être sûr de rester en phase avec ses attentes, et de faire valider chaque livrable.

1 - Spécifications

Le cahier des charges

Le but du cahier des charges est à la fois de protéger le client et le prestataire en faisant en sorte que chacune des parties aient un document commun sur lequel s'appuyer, contenant les éléments de langage de chacun afin d'éviter toute confusion.

Ce cahier sert aussi à mettre à plat les besoins clients, explicites et implicites, les contraintes et décisions techniques ainsi que tous les éléments nécessaires à la bonne mise en œuvre du projet, quitte à les mettre en annexe.

Ce document, à signer par les deux parties, n'a pas pour but de fixer dans le marbre absolument toutes les décisions liées au projet, car ce dernier évoluera forcément au fur et à mesure, mais simplement de servir de base afin d'éviter toute confusion entre le client et le prestataire.

Je vous invite à consulter mon article sur la rédaction d'un cahier des charges technique minimal !

Formalisation

La phase de formalisation consiste en la création de documents de références, non pas à destination du client, mais à destination de l'équipe de conception (graphique et technique) afin d'éviter les fausses routes lors des futures étapes du projet.

Cette formalisation peut prendre la forme de récits utilisateurs (User Stories), de diagrammes UML, de tableaux de données, etc...

2 - Maquettage

Ici, aucune compétence en dessin n'est requise, il s'agit de dessiner des carrés (et à la limite quelques ronds) pour placer les éléments important des écrans et ainsi réfléchir à l'organisation des données et à la logique du site ou de l'application.

Il est possible d'utiliser un logiciel de mockup mais je vous recommande de commencer le travail au papier/crayon, car un logiciel va vous pousser (parfois inconsciemment) à bien aligner vos éléments, à ajuster les tailles, à les centrer correctement, bref il va vous faire perdre un peu de temps sur des détails.

Or ce qui est important dans la phase de maquettage c'est que vous ne devez pas passez plus de deux à trois minutes sur vos ébauches.

La raison ? Plus vous passez de temps sur une création, plus vous y attachez une importance sentimentale et lorsque la bonne décision est de tout refaire (pour améliorer l'expérience utilisateur), plus vous essaierez de vous persuader que cette version est suffisamment bonne afin de la conserver intacte.

C'est lors de cette étape qu'une grosse partie de l'ergonomie du projet, et donc de l'expérience utilisateur va voir le jour, cette étape n'est donc à ne pas négliger.

3 - Design

Une fois que les maquettes auront été validées avec le client, il faudra venir ajouter le design afin d'obtenir les écrans finaux.

Dans le cas où le client possède déjà une charte graphique très précise et fournie, cette étape peut simplement consister à appliquer toutes les règles de cette charte aux maquettes déjà conçues (logo, polices, couleurs, tailles, espacements, etc...).

Mais dans le cas où le client ne possède rien de tout ça, deux choix sont possibles selon la volonté du client :

• Créer une charte de A à Z, ce qui demandera l'intervention d'un designer
• S'appuyer sur des kits ou des courants graphiques (Material Design, Bootstrap, etc...) accessibles aux développeurs directement

La deuxième option est valable principalement pour les applications, qui ont pour vocation d'apporter une ou plusieurs fonctionnalités spécifiques, plutôt que pour un site principalement là pour vendre et se démarquer des autres.

4 - Conception

Je ne vais pas détailler la conception technique car il existe un million de manières différentes de concevoir techniquement un projet pour un même besoin au départ.

Néanmoins je tiens à préciser que la phase de conception ne comprends pas seulement le développement, mais aussi :

• La mise en place de l'environnement de développement (gestion de versions, CI/CD, serveurs,...)
• Les tests unitaires, d'intégration, de charge,...
• La documentation
• ...

À noter que l'étape de conception n'est pas une étape linéaire, mais c'est une étape sur laquelle on va itérer, rencontrer des problématiques, échanger et trouver des solutions alternatives.

5 - Mise en place des contenus

Les contenus sont le plus souvent fournis par le client lui-même ou par une agence de communication et doivent être pensés en parallèle de la conception afin qu'ils s'intègrent correctement, mais aussi car ils constituent une part non-négligeable du référencement naturel du projet.

6 - Recettage final

Le recettage consiste à parcourir le projet pour vérifier que les fonctionnalités attendues sont bien présentes et fonctionnelles, que les écrans sont conformes aux maquettes et que toutes les attentes formulées par le client et acceptées par le prestataires ont été intégrées au projet.

Des recettages intermédiaires sont bien sûr recommandés, mais le recettage final est le point d'orgue qui va permettre au client de valider l’entièreté du projet avant le lancement.

Le recettage final est plus généralement spécifique aux sites internet, car une application est plus souvent amenée à évoluer et à subir des mises à jour, la phase de conception et les recettages intermédiaires peuvent donc continuer sur plusieurs années.

7 - Déploiement

Du simple site vitrine envoyé sur un hébergement mutualisé à une application complexe hébergée sur une instance cloud, le déploiement final est une étape qui ne peut se faire que lorsque le projet a atteint une phase d'avancement suffisante, mais elle peut se préparer en amont.

Pour certains projets où l'on met en place de la CI/CD (Continuous integration, continuous delivery), le déploiment final est négligeable car tout au long de sa conception le projet est régulièrement redéployé sur des environnement de tests similaires à l'environnement de production.

8 - Support / maintenance

Le support d'un projet est souvent mis de côté lors de la planification d'un projet web, alors que le coût (en temps ou en argent) de cette étape peut parfois doubler le coût initial du projet si la phase de conception a été baclée.

Allouer du temps ou des ressources supplémentaires lors des phases précédentes peut souvent vous éviter un naufrage lors de la phase de support ou de maintenance.