Le processus de création de site web en 7 étapes : notre guide complet

Tim

Founder, Software Developer

Nous vous expliquons notre méthodologie pour la réalisation d'un site web : de l'avant-projet à la mise en ligne du site. Nous découpons habituellement un projet en 7 étapes distinctes.

voir le site

Créer un site internet n'est pas aussi simple que ça en a l'air. Nous avons concocté une marche à suivre qui est un peu la recette que nous utilisons lors de la création de projets web pour nos clients. Cette structure nous permet de s'assurer de la qualité du produit et de gagner en temps et en efficacité lors de la réalisation du projet.

Pour nous, créer un site définit en 7 étapes :

Objectifs : Quel est le but du site internet, pour quelles raisons des clients le visiteront, quelles sont les fonctionnalités principales attendues (e-commerce, blog, site vitrine, plateforme web complexe, etc.) ?‍
Architecture : Une fois que les objectifs sont définis, on peut imaginer les fondations du site : quelles pages, quelles fonctionnalités et quelle complexité.‍
Wireframes : Il s'agit de maquettes basse fidélité (majoritairement en noir et blanc) qui vont donner la structure et le contenu du site.‍
Design : Sur la base des wireframes, le/la designer crée les maquettes du site, qui contiennent toutes les pages. Le client peut ensuite valider l'ensemble du contenu et du rendu visuel.‍
Développement : C'est parti pour la création à proprement parler du site qui peut être faite sur un CMS ou programmé à l'aide d'un framework, selon la complexité demandée. Parfois, c'est une solution hybride : un CMS pour les fonctionnalités simples et de la programmation pour les modules plus avancés.‍
Tests : Avant de mettre en ligne le site, on vérifie que le développement respecte bien les maquettes, que le site est parfaitement adapté à toutes les tailles d'écran, bref : que tout fonctionne ! Le client peut également voir le site en "test" et faire part de ses remarques.‍
Lancement : Ça y est, le site internet est mis en ligne !

‍

1. Objectifs

Pour commencer, il est nécessaire de se poser quelques questions :

Quel est le but du site internet ?
Pour quelles raisons des clients vont le visiter ?
Quelles sont les fonctionnalités attendues ? Un travail sur la définition de notre MVP (Most Valuable Product) est-il nécessaire ?
Y a-t-il un site internet existant ? Si oui, pourquoi est-ce qu'il est remis à neuf ?
Y a-t-il des sites qui nous plaisent ? Si oui, pour quelles raisons ?
Pouvons-nous nous inspirer de concepts qui fonctionnent (p. ex. de la concurrence) ?

En répondant à ces différentes questions, il est possible de définir clairement les objectifs du site internet. Il s'agit d'une partie primordiale d'un projet et trop souvent largement sous-estimée. Humainement, on a tout de suite envie de se lancer et de parler couleurs et logo.

Les objectifs n'ont pas nécessairement besoin d'être recensés dans un cahier des charges complexe : on peut simplement les résumer en quelques points dans une liste. Cette liste sera réutilisée tout au long des phases suivantes car elle sert de ligne directrice.

Selon l'ampleur du projet, nous recommandons à nos clients de prendre le temps nécessaire pour définir ces aspects et s'assurer le succès de leur projet web en prenant les bonnes décisions lors d'un atelier animé par nos soins : le Design Workshop.

‍

2. Architecture

Ce mot peut faire peur, mais c'est tout simple : on crée maintenant la structure du projet. On définit les points suivants :

Quelles sont les pages du site internet ?
Pour chaque page, quel est son objectif que pense-t-on y inclure (en quelques lignes max.) ?
À quoi correspond l'arborescence ?

Un simple schéma peut nous aider à comprendre le fonctionnement global du site internet :

‍

3. Wireframes

Les wireframes ou maquettes fonctionnelles détaillent les différentes pages et leur structure. On y trouve également une 1re

Pas besoin d'être précis au mot près, mais la longueur des différents textes vont laisser plus ou moins de liberté au design. Selon le public-cible et l'utilité du site, on choisira de créer ces maquettes au format mobile/smartphone ou alors au format desktop, pour de plus grands écrans tel qu'un ordinateur portable standard.

Si on reprend l'exemple de l'architecture du point précédent, la maquette de la page d'accueil desktop peut ressembler à ça :

‍

4. Design du prototype

Après la validation des wireframes, le/la designer peut créer un prototype complet du site : cette fois-ci on parle couleurs, charte graphique, logo et j'en passe.

Grâce à un outil tel que Figma, le client peut directement naviguer entre les pages du site comme il le ferait lorsque le site aura été développé. Cela permet de valider l'apparence générale, le contenu et finalement tout le concept du site, ou presque. En effet, le prototype n'est pas responsive, cela signifie qu'il est généralement créé pour une seule taille d'écran. C'est au moment du développement que la notion de responsive apparaîtra et où l'on pourra tester le site sur un ordinateur, une tablette et un smartphone.

‍

5. Développement

Après l'acquisition d'un nom de domaine et d'un hébergement web, on développe le site à proprement parler. En principe, il n'y a plus tellement de surprises puisque les maquettes complètes ont été livrées et validées par le client. Le/la développeur-euse va suivre le design du prototype afin qu'il soit fidèle à ce qui a été présenté lors de la phase précédente.

Puisqu'un site internet n'est pas statique comme des maquettes, on s'occupe également des tâches suivantes lors du développement :

Rendre le site adapté à tous les formats d'écran : on parle de design responsive
Animer certains textes et images afin de rendre
Gérer tous les éléments interactifs : validation de formulaire, info-bulles d'aide, etc.

‍

6. Tests

Dans le cas d'un site vitrine simple, les tests démarrent lorsque le projet est terminé. Le/la designer vérifie que le/la développeur-euse a reproduit fidèlement les maquettes et que tout est en ordre. C'est toujours mieux d'avoir plusieurs testeurs : chacun va trouver des défauts qu'un autre n'aura pas vu.

A cette étape, on crée en principe un site de staging : ce site permet au client de voir le site web sur un domaine privé (p. ex. test.siteclient.com). Le client pourra ainsi valider le travail avant la mise en ligne. Par la suite, lorsque le client souhaite amener de nouvelles fonctionnalités ou effectuer des modifications, elles seront d'abord déployées sur le site de staging pour validation. Cela permet d'éviter de faire des changements "en production" qui sont toujours risqués et qui donnent une mauvaise image de l'entreprise, par exemple si une page non terminée est visible pour les clients.

‍