blog alpha design joomla

Le blog d' Alpha Design Joomla et autres ...

Le Fun processus de création d'un site internet

L'article original en anglais est de pingmag cf "The Website Development Process" , nous avons réalisé la traduction autorisée en français...

site internet processus de développement: présentation des acteurs

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

Il ya 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.

L'Article original, en anglais, fut écrit par Jon.

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 N01 la discussion - the web design process

É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...

le brainstorming - web design process

É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.

le wireframe / le squelette - web design process

É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.

 Plannifier le contenu - web design process

É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.

le feedback client - web design process

É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.

le retour / feedback client - web design process

 

É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.

le redesign - Web design process

 

Étape No 7: Le re-Design

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

l'approbation client - web design process

É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.

le design des autres pages web - web design process

É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.

La confirmation - web design process

Étape No 10: La Confirmation

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

Construire l' html - web design process

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

Vous pouvez alors construire les pages en HTML...

Construire l'html - web design process

É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.

Presentation Client - Web design process

É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.

Tests - web design développement process

É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.

La mise en ligne - le web design process

É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.

Commentaires (0)

Il n'y a pas encore de commentaire

Ajoutez votre commentaire

Pièces jointes (0 / 3)
Share Your Location

Ils nous ont fait confiance

Universités & organismes de recherche

L' INSERM - unité U999, Université Paris Sud - Centre Chirurgical Marie Lannelongue

The Center for Groundwater Studies - Australie

L 'ENSAE : École Nationale de la statistique et de l'administration

La Maison des Sciences de l'Homme Paris Nord , UMS de l'université Paris 8, de l'université Paris 13 et du CNRS

L' Institut Supérieur de Développement - ISD Flaubert

Monpellier RIO imaging (MRI), plate - Forme Technologique (PFT), labellisée IBiSA.

CNRS - INEE  Le Laboratoire d'Excellence Dispositif de Recherche Interdisciplinaire sur les Interactions Hommes-Milieux (LabEx DRIIHM)

Organismes publics

Ministère de la défense : État Major de la 3ème Brigade Mécanisée

La mairie de la ville de Marly le Roi

La mairie de la ville de Breuillet

La mairie de la ville de Thuir

L' Agence Locale de l'Energie de la métropole marseillaise

L' Institut de Formation en Masso-kinésithérapie de Montpellier - Centre Hospitalier Universitaire de Bellevue

Le Centre de Gestion de la fonction Publique Territoriale des Alpes de Haute Provence

La Capitelle - couveuse d'entreprises du Gard

Le Centre Social Intercommunal de Saint Quentin de la Poterie

Le collège & lycée Saint Charles

Le lycée Philippe Lamour

Le centre François Baclesse: Centre de Lutte Contre le Cancer (CLCC)

L' Etablissement Régional de Formations des Professions Paramédicale du Groupement d'Intérêt Public des Etablissement de Santé d'Avignon et du pays de Vaucluse

Entreprises

Astrium une filiale EADS No 1 européen et No 3 mondial de l'industrie spatiale

Messer France

Photonlines

Shânti Gestion

App-Line

Vincent et Mireille

Axiom Information

Galerie Art City

Le Château de Boisson

LM Control

Vagabonde International

Photonlines Energy

la Pisciculture la Croisière

FHSolution

NaturEditions

Etudions à l'étranger

E.P.A.

Microeconomix

Alatak

Jade Black Design

Une bague une destinée

Schmulb

Espace revêtements

Partenaire de réussite

Stylitek

Fun-Kart

The Crew Coach

Sanitval

Ateliers d'écriture de Virginie Lou

cam4you

SDB+

Armelle Bongrain - architecte d'intérieur

ECIM

Riveria Expat Consultants

Florence Thorez - Diététicienne Nutritionniste

Le Séchoir

Le Moulin de Bouydou

L' Espace de Formation Clinique et Psychanalytique

Cours de musique à Montpellier

Leads Planet

Agerix

Etudions à l'étranger

Biopreserv

Aloes RED

InfoTour

EverNew

Synalabs

Bureau d'Etudes Arlaud

Stage de musique été

Fermetures Neuvillaises

Linguapolis

Weblligence

ASD Protect

Véronique Crépaux

Françoise Léon

Inovtolerie

BlueSafe

Viasocial

Repco Marine

King Jouet

Dr Abbas

ER3M

Cryo'net

Vectoring Talents

Desir d'écrire

Dr Girardin

Installation yperreault

Viaortho

Viadentiste

Alice Sweet Home

Cannes property services

La méthode Silva

Les outils du mieux être

Pinceaux et Camaïeux

Viacoach

ASH Conciergerie

MC Coaching Pro

Argos communication 

Cpsforma

Hervé Graille - Architecte 

Adrien Baguet - Architecte

ONG / Associations

UNESCO: International Music Council

L' Association de Recherche en Soins Infirmiers

L' Union Internationale Contre la Tuberculose et les maladies respiratoires

Le Centre National des Risques Industriels

L' Institut International des Hautes Études en Psychanalyse

SurdiFrance : Association nationale de malentendants

La fondation Internationale de l'Hôpital Albert ScMhweitzer à Lambaréné

La Maison des Professions Libérales Ile de France

Le Conseil National de l' Enseignement Agricole Privé

La ligue Dauphiné Savoie de tennis

Le Conseil Permanent Régional des Associations d’Environnement

Le Syndicat des Podologues d'Île de France

La compagnie aux grands pieds

L'Espace de l'Ouest Lyonnais

Les Courants d'Airs

Nîmes Volley Ball

Le Club photo de Saint-Laurent-du-Var 

En poursuivant votre navigation sur ce site, vous acceptez l'utilisation de cookies pour notamment réaliser des statistiques de visites