Nos 3 acteurs: un programmeur, un designer et le client.

Il y a quelque temps Jon mis cette photo sur sa page flick, celle-ci fut choisie comme photo du jour (le 23 Septembre) sur la page officielle du blog flickr. Aujourd'hui elle a été vue plus de 13 000 fois.

La photo ci-dessus faisait en fait partie d'une série de clichés qu'il créa pour une présentation à un client, elles détaillent le processus de design et développement d'un site web d'une façon imagée, facile à comprendre, mais aussi "fun" pour son client. L'article ci-dessous vous expliquera le processus en utilisant les mêmes photos. Nous espérons que vous aimerez cette série de clichés et si cela vous aide aussi à mieux gérer votre workflow alors que vous commencer comme web designer c'est cool :)

Il y a un nombre infini de variables qui peuvent influencer le déroulement de votre projet. Pour cette raison, l'évolution d'un projet ne sera jamais aussi manichéenne que cette séquence puisse le suggérer. Les étapes peuvent être répétées de multiples fois, vous pouvez aussi avoir besoin de plus de temps pour le développement du CMS / back-end. etc. Aussi considérez cette séquence comme un exemple simple du processus avec lequel Jon est devenu familier comme web designer / développeur.

Étape No 1: la Discussion

Naturellement vous allez commencer votre projet par une première réunion client. Lors du premier meeting vous avez devoir établir/définir l'étendu du travail à réaliser, ce qui a besoin d'être fait, les rôles et responsabilités, qui est votre point de contact pour le contenu (texte,images) etc...

Étape No 2: le Brainstorming

Il faut réfléchir à la manière de structurer le site. Ce qui est important? Ce qui n'est pas important? Ce qui doit apparaitre sur chaque page? Suivant la taille du projet vous pouvez souhaiter créer un plan de site visuel pour votre client. Préparer un plan de site est essentiel si vous devez réorganiser le contenu.

Étape No 3: Le wireframe / squelette graphique

Une wireframe est un squelette graphique du site, indiquant la navigation, les fonctions et les éléments de contenu qui apparaitront sur le site web final, mais sans aucun élément graphique du design.
Le but est d'identifier les problèmes et les éléments manquants, elle va servir de base pour la création du contenu, le design et le travail de construction qui s'en suit.
La façon dont vous créez la wireframe/squelette dépend de la taille du site: pour des petits sites internet utilisez Illustrator ou Photoshop peut-être suffisant, mais pour des sites plus complexes ou plus grands, il peut être nécessaire de coder la wireframe en HTML afin que le client puisse s'assurer que tout est à la bonne place.

Étape No 4: Plannifier le Contenu

A partir du plan de site et de la wireframe, vous pourrez avec le client commencer à planifier le texte du contenu. La planifiaction du contenu et son écriture est la plus grosse charge de travail du client durant le projet: cela peut réellement prendre beaucoup de temps.

Étape No 5: Le Design initial

Pendant ce temps le designer peut travailler sur la base du design: la page d'acceuil et les pages de sous-niveau.

Étape No 6: Le retour/Feedback Client

Quand la base du design est prête, le client doit vérifier que vous allez dans la bonne direction et suggérer des ajustements de design éventuel.

Étape No 7: Le re-Design

... Qui va probablement impliquer quelques aller-retour et modifications...

Étape No 8: L'approbation du Client

... Jusqu'à ce que tout le monde soit content.
Le processus du travail-feedback-re-travail est répété à diverses étapes du projet. Mise à part la préparation du contenu, ce processus de validation/approbation est aussi l'une de responsabilité majeure du client.

Étape No 9: Le design des autres pages

Une fois que la base du design est approuvée, vous pouvez commencer à travailler sur le layout et le design de chaque page du site.

Étape No 10: La Confirmation

Et une fois de plus le design des pages est vérifié, re-travaillé et finalement approuvé.

Étape No 11: Construire l'HTML...

Vous pouvez alors construire les pages en HTML...

Étape No 12: ... Et le CSS

... et le CSS, j'aurai pu le mettre en une seule étape, mais j'aime beaucoup ce petit bonhomme de robot.

Étape No 13: Présentation Client

Feedback encore. Vous travaillez de cœur avec le client - travail-feedback-retravail - pour finaliser les détails jusqu´à ce que vous ayez fini le site.

Étape No 14: Tests

La dernière étape de production est le debuggage. Le site a besoin d'être testé sur toutes les plateformes afin d'éliminer tous les problèmes techniques, et les erreurs de contenu. Bien sur lors du développement HTML et CSS vous devez vérifier de toute façon les cross-navigateurs fonctionnalités mais vous avez besoin de faire une vérification majeure à la fin aussi, c'est à dire une vérification pour laquelle vous avez réservé suffisamment de temps.

Étape No 15: La Mise en Ligne

La photo dit "The End", mais bien sur vous ne prenez pas le chèque et direction la porte de sortie en courant, vous avez besoin de suivre le site pour au moins 10 jours en cas de problèmes et si nécessaire apporter des corrections.

En espérant que vous avez aimé ces images, visitez la flick page de pingmag pour accéder à des photos plus grandes.