[Infographie] Les principales étapes d’un projet web

Les projets web peuvent être complexes et faire intervenir plusieurs personnes. Pour bien piloter vos prestataires et mener vos projets web au bout, vous allez avoir besoin de vous appuyer sur une méthodo. On vous en présente une dans cette infographie, qui reprend les principales phases des projets web, et les livrables de chacune de ces phases. Bonne découverte !

Verbatim

1 – Cadrage et plannification

Le brief

Il consiste à formaliser votre besoin :

• A quoi sert le site web ?
• Quelle audience ?
• Quels objectifs ?
• Quel genre de contenus ?
• etc.

Assurez-vous que votre prestataire a bien compris votre projet.

La charte projet

Elle regroupe les principaux éléments dimensionnants du projet :

• Macro-planning
• Equipe projet
• Rôles et responsabilités
• Estimation en jour/homme
• Estimation en budget
• Principales contraintes techniques
• etc.

Cette charte est un document de référence entre vous et votre prestataire tout au long du projet. Prenez le temps qu’il faut pour avoir une charte bien propre, ça vous évitera des déboires après.

Petite astuce pour le planning et les estimations budgétaires : ne cédez pas aux sirènes du moins disant, vous risqueriez d’avoir des surprises.

Le sitemap

Le sitemap (plan de site) permet de cartographier les différentes pages du site et les principaux chemins de navigation.

Le contrat

Bordez bien votre contrat avec votre presta :

• Quand est-ce que le projet sera considéré comme terminé ?
• Dans quelles conditions pouvez-vous rompre le contrat ?
• Quels sont les les livrables attendus (site web conforme, code source, documentation, etc) ?

Le contrat doit protéger vos intérêts, mais rappelez-vous que le succès du projet dépend surtout d’une bonne relation avec votre presta. Profitez donc de ce moment pour vous assurer que vous êtes sur la même longueur d’onde !

Les ressources projets

Faites l’inventaire de ce dont votre presta aura besoin, et assurez-vous qu’il y aura accès :

• Serveurs, bases de données…
• Contenus écrits, graphiques
• Applications existantes
• etc.

2 – Design graphique

Les wireframes

Les wireframes sont des représentations « basiques » des pages du site. Il s’agit souvent de dessins en noir et blanc avec du « lorem ipsum ». Ils servent surtout à visualiser la structure générale de chaque page et l’emplacement des différents blocs.

L’étape de validation des wireframe est importante car c’est sur eux que se basera la suite du projet.

Les mock-ups

Les mock-ups sont des dessins en couleur et plus détaillés du site. Ils sont souvent faits sous Photoshop. Les éléments des mock-up ont une taille et un aspect proches de ce qu’ils auront dans le site web. Ils incorporent l’identité graphique de l’entreprise (logo, couleurs, typographie, etc.).

Ici encore, il vous faudra tout valider avant de passer à la suite.

La version en HTML

Une fois les mock-ups validés, votre designer transformera tout ça en une version statique du site en HTML. Vous pourrez alors naviguer entre les pages, et les éléments auront le même aspect que sur le site web.

Les fonctionnalités dynamiques du site ne sont pas encore présentes, mais le rendu visuel est là. Vérifiez qu’il correspond bien à vos attentes !

3 – Le développement web

L’environnement de dev

L’installation de l’environnement de développement est la 1ère chose que fera votre prestataire. Demandez-y un accès (ou à l’environnement de test) pour suivre directement l’avancement du projet.

Vous pourrez y voir les templates des différentes pages. Ce sont des « coquilles » reprenant les éléments récurrents des principales pages du site (header, footer, navigation, sidebar, etc.). Ils sont censés être identiques à la version HTML du site.

Les fonctionnalités

C’est souvent ici que ça se complique. Il s’agit de toutes les fonctionnalités interactives du site web :

• Les formulaires
• L’intégration avec les autres outils de l’entreprise
• Les éléments mouvants du site
• Les popups
• Les paniers ecommerce
• etc.

Prenez plusieurs profils de testeurs (développeurs, utilisateurs avancés, novices) et faites vous un cahier de recette. Pensez à visualiser le site sur différents navigateurs et appareils (mobiles, tablettes, ordinateurs). Si votre site est un peu complexe, vous ne manquerez pas de déceler des bugs.

La reprise des anciens contenus

Ici, vous devrez être en mesure de fournir les anciens contenus à votre presta. Ou au moins le moyen de les récupérer. Après ça, c’est à lui de travailler.

Comme d’habitude, une vérification est nécessaire pour s’assurer qu’il n’y a pas d’oubli. Passez en revue chaque bloc du site et leurs contenus :

• Textes formatés ou non, titres, etc…
• Visuels
• Présence des rich medias (tweets, videos, etc.)

4 – Livraison et maintenance

La migration sur le serveur « live »

Il y a plusieurs stratégies de lancement. Vous pouvez tester le site sur le serveur live avant sa mise à disposition du public (qui verra une page « en travaux »), ou après qu’il soit public (mais vos visiteurs risquent de découvrir certains bugs eux-même).

Pour les sites les plus importants, vous pouvez aussi installer un double run : vos visiteurs voient l’ancienne version du site, et vos testeurs voient la nouvelle. Cette option peut toutefois être assez compliquée et chère à mettre en place.

La maintenance

On arrive au bout, mais ce n’est pas forcément la fin de la relation avec votre presta. Différentes actions de maintenance peuvent être comprises dans votre contrat :

• Backups du site
• Administration de serveurs
• Upgrade de CMS / thèmes / plugins
• Résolution de bugs
• etc.