PiXelliz

Web, Communication Digitale & PAO - Consulting & Enseignement

Formation | Création de sites Web | Graphisme

Bio | Portfolio | Blog | Contact

Vous êtes ici : Accueil » Blog » #Développement d’un site #Web : le processus

#Développement d’un site #Web : le processus

D 2 novembre 2015     H 08:00     A Virginie Boullé     C 1 messages


agrandir

Les grandes étapes du processus de développement d’un site Web

Processus de développement d’un site

Durant ma veille, j’ai découvert cet article très intéressant qui tente d’expliquer de façon simple, illustrée et originale le processus de développement d’un site web.
N’hésitez pas à consulter cet article sur le site de l’auteur [1].

Les personnages

JPEG - 22.3 ko
Process developpement web Acteurs

Vous reconnaîtrait donc, par ordre d’apparition à l’écran :

- Le programmeur : il sera le représentant de l’équipe technique,
- Le deisgner : il représente la conception graphique et le design du projet,
- Le client : le Roi !

Etape 1 : Audit

JPEG - 28.1 ko
Process developpement web Discussion

Vous allez naturellement débuter le projet par une conversation avec le client. Lors de la première rencontre devront être fixés la mission à réaliser (l’analyse des besoins), les rôles et responsabilités respectives ainsi que l’interlocuteur privilégié côté client.

Etape 2 : Brainstorming

JPEG - 17.6 ko
Process developpement web Brainstorming

Il faut ébaucher alors une structure pour le projet. Quelles seront les tâches importantes ? Qu’est-ce qui ne le sera pas. Quel contenu à présenter sur les pages. En fonction de l’importance du projet et de sa richesse, il faudra créer une sitemap afin de faire visualiser le projet au client. L’étape de la sitemap est essentielle dans un projet de réorganisation de contenu.

Etape 3 : Wireframe ou Zoning

JPEG - 25.5 ko
Process developpement web Wireframe gabarit

Un wireframe représente le squelette du site, aussi appelé gabarit. Il en symbolisera la navigation interne, les fonctionnalités ainsi que les éléments de contenu qui apparaîtront sur le site final. En aucun cas le wireframe n’est une ébauche de design ni de graphisme. Il permet de mettre en avant et de révéler les problèmes ou les éventuels éléments manquants. Il servira de fil conducteur à la suite du projet.

La façon de le créer est propre à chacun. Pour des sites de faible importance, son détail pourra se limiter à la création d’un fichier Illustrator ou Photoshop. Pour des projets plus complexes, il pourra être nécessaire de réaliser un prototype HTML, cliquable, de façon à permettre au client de naviguer de page en page et ainsi s’assurer que rien ne manque.

Etape 4 : Elaborer le contenu

JPEG - 24.1 ko
Process developpement web Contenu

Le travail réalisé à partir de la sitemap et du gabarit en relation avec le client va permettre d’élaborer et de fixer le contenu, en particulier les éléments de texte (wording). Le travail d’écriture et de mise en place des éléments de texte est certainement le plus long et contraignant pour le client, puisqu’il est à sa charge.

Etape 5 : Ebauche de design

JPEG - 25 ko
Process developpement web Design

Après validation des étapes précédentes, l’équipe graphique peut ébaucher un design et une charte graphique (page d’accueil, rubriques et sous-rubriques).

Etape 6 : Feedback du client

JPEG - 27.4 ko
Process developpement web Feedback client

Lorsqu’une base de charte graphique est réalisée, le client doit s’assurer que l’équipe technique va dans la bonne direction. Le cas échéant redresser le cap, et dans tous les cas, propose, commenter, suggérer des améliorations.

Etape 7 : Retours sur les feedback clients

JPEG - 25.1 ko
Process developpement web Re design

Les remarques du client vont nécessiter des ajustements et du travail de la part de l’équipe technique.

Etape 8 : Accord du client

JPEG - 21.6 ko
Process developpement web Accord sur le design

Le process d’aller-retour entre le client et l’équipe de conception est répété jusqu’à trouver l’accord complet du client. C’est la phase de recette préliminaire du client.

Etape 9 : Création des pages intérieures

JPEG - 22.9 ko

Une fois l’accord sur le design d’ensemble trouvé, il faut le décliner pour les pages intérieures du site.

Etape 10 : Confirmation

JPEG - 28 ko
Process developpement web Accord

Le client doit là encore donner son aval.

Etape 11 : Développement, création en code HTML pour le fond...

JPEG - 23.6 ko
Process developpement web HTML

L’équipe de développeurs peut commencer à décliner le code du site (HTML, Php, .Net,…)

Etape 12 : …et CSS pour la forme

JPEG - 24.2 ko
Process developpement web CSS

Ces deux étapes ne peuvent faire qu’une. Le HTML pour le fond, la structure du site et du CSS pour la forme, le style graphique du site.

Etape 13 : présentation au client

JPEG - 27 ko

Là encore le projet est présenté au client. Un process d’aller-retour reprend à un niveau beaucoup plus fin cette fois-ci. On procède aux derniers ajustements de contenu et de présentation.

Etape 14 : Tests et recettes

JPEG - 26.1 ko
Process developpement web Test

La dernière étape du processus est la phase tant redoutée de debuggage. Le site doit être testé sous toutes les coutures, sur différentes platte-formes techniques (OS, navigateurs) afin de s’assurer de sa multi-compatibilité.
Le contenu doit lui aussi être encore inspecté. Cette phase peut s’avérer longue puisqu’elle va permetter de révéler les derniers détails. De plus, la comptatibilité d’un code sur une large palette de configurations est toujours une étape longue et difficile pour le développeur.

Etape 15 : Mise en production

JPEG - 21.4 ko
Process developpement web Lancement

L’image dit “The end” mais évidemment l’histoire ne s’arrête pas au règlement de la prestation, une maintenance et une surveillance doivent être mises en place, au moins durant les premiers jours de production. Des derniers correctifs pourraient s’avérer nécessaires.


Sources : Traduit de l’article The Website Development Process, Innovablog sur le site d’Innovablog


[1en anglais

1 Messages

Un message, un commentaire ?
modération a priori

Ce forum est modéré a priori : votre contribution n’apparaîtra qu’après avoir été validée par un administrateur du site.

Qui êtes-vous ?
Votre message
Ajouter un document

Rechercher un article

Le blog d'une amoureuse du Web.

″ Consultante & Enseignante dans le domaine des Technologies de l’Information et de la Communication Digitale, je vous parle ici de Web, de Graphisme et d'intéractivité. ″ +


Je vous propose


Ici on parle de


Tweets


My Websites