Méthodologie de production de site internet

Pour conduire un projet web et maîtriser toutes les étapes.

Produire un site internet de qualité professionnelle nécessite la maîtrise de plusieurs disciplines : prototypage, graphisme, codage, base de données, système de gestion de contenu…

Pour cette raison il est indispensable d’établir une méthode de travail. La méthode a pour but d’organiser et de mener à bien un projet de bout en bout. Il s’agit pour la personne en charge du projet, d’utiliser la méthode de travail définie et de conduire le projet en s’assurant que celui-ci est mené à bien dans les règles préalablement définies.

Avant d’expliciter notre méthodologie, il convient de préciser quelques points concernant le type de projet correspondant le plus à cette méthode. En effet, cette méthode s’applique à des projets sur mesure où le système de gestion de contenu (CMS) ne sera pas trop contraignant, pour que le projet s’adapte aux objectifs du client. Cette méthode convient spécifiquement aux projets qui nécessitent de produire un site internet à partir de prototypes. 
 

01 Etape de définition de projet

Analyse du contexte

Avant de proposer des solutions adaptées au projet, il convient d’analyser le contexte. S’agissant de projets dans le domaine de l’internet, une immense source d’informations est disponible en quelques clic. Mais celle-ci restera complémentaire par rapport au client qui connaît mieux que personne son secteur d’activité.

Identification du public visé

Il s’agit ici d’envisager le plus précisément possible les futurs utilisateurs du site web. Il est en effet essentiel de savoir à quel public sera destiné le site internet. Sans cette information, le projet a de fortes chances de ne pas aboutir au résultat attendu et de manquer sa cible.

Identification des objectifs marketing

Pourquoi le client souhaite réaliser un projet web? Quel sont les objectifs du site internet à moyen et long termes et quelles sont les attentes du client? Toutes les réponses à ces questions dépendent évidemment du type de projet : e-commerce, site d’informations, etc. Les objectifs marketing une fois définis sont prioritaires pour la personne en charge de la conduite du projet et celui-ci doit impérativement les atteindre.

Identification de la concurrence

Les concurrents qui ont déjà un site internet dans le même domaine d’activité sont une source d’inspiration importante. Cela permet d’emblée de répondre à de nombreuses questions : utilisateurs, architecture du site, environnement graphique, etc., il s’agit de prendre en compte tous ces éléments pour imaginer un projet plus ambitieux. 

Comme pour le contexte, le client est la meilleure personne pour identifier ces sources et définir les éléments pertinents pour son projet. Mais il faut aussi prendre en compte l’expérience accumulée par la réalisation d’autres projets dans le même domaine d’activité par l’agence, qui parfois est un excellent atout.

Analyse des forces et faiblesses du site internet actuel

Si il s’agit de procéder à la refonte d’un site internet, cette opération sera facilitée par une version en ligne même si celle-ci est ancienne. C’est un très bon point de départ pour travailler à la conception d’un nouveau site. Cela va offrir un point d’encrage pour imaginer la suite, avec les éléments à reprendre ainsi que ceux qui n’ont pas fonctionné.

Les orientations graphiques 

À la fin du briefing de projet, il est déjà possible d’envisager quelques pistes de réflexion au sujet des orientations graphiques. Celles-ci seront ensuite travaillées pour aboutir à un cahier des charges graphique qui sera inclus dans le cahier des charges global. Les orientations graphiques se décomposent en plusieurs éléments : 

• Les contraintes graphiques qui ont pour but de définir les limites des pages, les marges, le fond, etc.
• Les gammes de couleurs possibles en fonction du logo ou d’autres éléments graphiques déjà disponibles
• L’apparence du site: professionnel, clair, simple, etc.
• La charte graphique si celle-ci est déjà définie 
• Le logo et les documents qui l’accompagnent 
• Les notes prises lors du briefing de projet

Mise au point du cahier des charges

Le cahier des charges est un document de synthèse des éléments évoqués précédemment : analyse du contexte, identification du public visé, identification des objectifs marketing, identification de la concurrence, analyse des forces et faiblesses du site Internet, cahier des charges graphiques avec pour compléter un plan sous la forme d’un organigramme qui explicite les modèles des pages à réaliser. Le cahier des charges peut également être complété par d’autres éléments de normes et d’éléments graphiques à reprendre comme le logo, etc. Cela varie en fonction des projets. Une fois élaboré, le cahier des charges va servir de guide tout au long de la conception du projet et cela pour tous les intervenants.

Création du compte de suivi de projet internet

À ce stade, tous les éléments sont en place pour travailler au projet. Il faut cependant prévoir un espace pour suivre les différentes étapes de la conception du projet côté client. Pour cela, un espace privé au sein d’un site internet peut être un très bon outil. Celui-ci peut proposer d’avoir un aperçu de l’avancement global du projet, mais aussi de voir et de valider les différentes propositions graphiques, les prototypes, etc. L’espace privé peut aussi afficher le temps alloué au projet ainsi que l’attente entre les différentes validations du client.

 

02 Etape de développement de l'architecture du site

Inventaire des contenus existant sur le site actuel et hors web

Avant de travailler à la conception du projet il est préférable de posséder tous les éléments du client. Il peut s’agir des textes, du logo, d’éléments graphiques d’autres projets, flyer, brochures, catalogue…  Le but est de gagner du temps pour ne pas reproduire un logo déjà réalisé précédemment. Mais aussi de s’inspirer de ce qui a déjà été produit pour aller plus loin en terme graphique.

Elaboration de la structure générale du site

Pour faciliter le travail de tous les intervenants, un plan sous la forme d’un organigramme est un vrai plus. Même quand il s’agit d’un projet avec seulement quelques pages, cela aide à la compréhension du travail à réaliser. On peut considérer deux types de plan, un pour les sites statistiques et un pour les sites dynamiques. Dans le premier cas il sera question de prévoir les pages du projet, pour un site dynamique on parlera plus de modèles de pages.

Agencement du contenu

Définir concrètement ce qu’il convient d’ajouter dans chacune des pages du site. Ici aussi, cela va dépendre du type de site. Pour un site statique, il faudra imaginer le contenu pour chacune des pages du site en plus du haut et bas de page. Pour un site dynamique, ce sera également le cas mais pour chaque modèle de page. Quoi qu’il en soit, il s’agit de noter précisément dans un document le contenu que chaque page ou modèle de page doit comporter.

• Convention de nomage des pages
• Création des gabarits de page
• Définition des parcours- type
• Prototypage en HTML
• Création de scénarios utilisateur
• Définition des mots clés pour le référencement

03 Etape de conception graphique

• Elaboration de la charte graphique
• Création de l'interface graphique de la page d'accueil
• Création de l'interface graphique des pages types
• Création de l'interface graphique de la newsletter
• Test de navigation et d'affichage

04 Etape de production et intégration

• Création du code source des pages-types
• Découpage et optimisation des éléments graphique sur les pages
• Insertion des contenus statique textes, images, animations....
• Intégration du code Javascript
• Création des feuilles de style CSS
• Elaboration des contenus dynamiques
• Création des base de données pour les contenus dynamiques
• Création du back Office d'administration (CMS)

05 Etape de référencement et optimisation

• Optimisation technique des pages pour le référencement
• Optimisation des mots clés
• Création d'un plan de site pour indexation Google avec mise à jour dynamique
• Inscription dans les moteurs de recherche et annuaires
• Réécriture du nom des pages dynamiques (option dynamique)
• Mise à jour automatique du plan du site pour Google (option dynamique)

06 Etape de statistique et maintenance

• Statistiques complètes depuis l'hébergement
• Statistique par courriel (Google Analytics)
• Mises à jour des contenus du site
• Création de visuel, d'animation, de schéma...

Notre méthodologie de travail est inspirée du livre sur la conduite de projet « [Re]design web [2.0] » , de Kelly Goto & Emily Colter au édition Eyrolles.

Auteur : L'équipe Olloweb