Parfois, ça fait du bien de récapituler... ;)
| Etape | Ce qui est fait | Ce qui est livré | Par qui? |
|---|---|---|---|
| Conception | Le concepteur propose un concept, une structure générale pour le site, y compris une arborescence de navigation. Il est particulièrement important de connaître le nombre de niveaux d'arborescence avant de commencer le design des menus de navigation! | Croquis, schémas, organigrame | Client / SEO / Interaction designer / DA |
| Design graphique | Un graphiste propose un ou plusieurs styles graphiques en tenant comptes des contraintes exprimées à l'étape précédente. | Fichier image "à plat" pour validation client | DA / Graphiste |
| Maquette | Un graphiste finalise un design graphique ("pixel perfect") qui correspond au pixel près à ce que le site donnera dans un navigateur web typique. | Fichier PSD calé au pixel près, calques séparés | Graphiste |
| Découpage |
Le fichier PSD est découpé en images indépendantes, soit par zones, soit par calques ou encore une combinaison des deux, envue de l'étape d'intégration. |
Plusieurs fichiers PNG, GIF et/ou JPG | Graphiste / Intégrateur |
| Intégration | Une page HTML statique est crée avec des contenus d'exemple "lorem ipsum", les éléments graphiques sont positionnés et tous les styles sont appliqués par CSS. Les rollovers sont gérés dans le fichier CSS. On obtient une page HTML qui, une fois ouverte dans un navigateur, ressemble en tous points à la Maquette d'origine. Les rollovers fonctionnent. |
Page HTML ou XHTML statique, accompagnée d'une feuille de style CSS et d'images PNG, GIF ou CSS. | Graphiste / Intégrateur / SEO |
| Dévelopement client side | Un dévelopeur rajoute les éléments javascripts dynamiques tels que menus déroulants, onglets montrant des contenus interactifs, animations, et autres "gadgets" potentiels. | Même page HTML que précédemment augmentée d'un fichier Javascript (.js) | Développeur client side / Interaction designer / SEO |
| Dévelopement server side | Un développeur réalise l'interfaçage avec la base de données, par exemple en PHP. Les contenus "lorem ipsum" sont remplacés par de vrais contenus en temps réel. Les champs de recherche permettent de lancer des recherches. C'est également à cette étape que sont rajoutés les interfaces AJAX telles que: suggestions de recherche d'après les premiers caractères tapés... | Le fichier .html devient un fichier .php . Pour le voir fonctionner il faut le placer sur un serveur web. | Développeur sever side / Développeur client side / Interaction designer / SEO |
Comments from long ago:
Comment from: Mox Folder
Le design graphique “pixel perfect” c’est sooooo siècle dernier. Je comprend que le cient à besoin de valider quelque chose de final mais en meme temps ça me semble tellement dépassé cette idée…
2009-11-18 20-50
Comment from: François Planque
Le design approximatif, avec des coins pas vraiment rounds et des ombres approximatives, c’est sooooooo XXème siècle!
Bon, plus sérieusement: le pixel perfect, c’est pas pour la validation du client, c’est pour l’intégration. T’es d’accord qu’à un moment donné, il faut bien que quelqu’un fasse des ombres et des coins arrondis au pixel!!
Si tu veux tu peux rajouter une étape “validation client” avant le pixel perfect, mais c’est pas une vraie étape de la chaîne graphique, c’est juste un artefact contractuel. Pour moi, tout ce qui n’est pas pixel perfect, c’est dans l’étape design graphique.
2009-11-19 14-45
Comment from: Mox Folder
Je comprend ce que tu veux dire, il faut que les éléments graphiques soit finis, prêts à etre découpés, etc… mais je suis pas super à l’aise à parler de pixel perfect quand derrière il faut faire avec IE, Firefox, Safari, etc.
C’est comme ça qu’au final la quasi totalité des agences se retrouvent à faire du Flash.
Je préfère considérer qu’arriver à un certain point la perfection est tout relative.
Ou peut-être le terme Pixel perfect est pas approprié, ou c’est moi qui bloque dessus parceque souvent je me retrouve à faire design ET integration…. là par exemple je suis en train de refaire notre newsletter au boulot et c’est un vrai casse tête.
2009-11-19 18-10
Comment from: François Planque
Evidemment, il faut choisir un navigateur de référence. Mais pixel perfect, ça veut dire par exemple que les boutons font 22 pixels de haut avec 1 bordure de 1 pixel. Quand tu fais pas gaffe, dans photoshop, tu peux très bien faire ds boutons de 22 pixels et demi et des bordures de 1.25 pixels. Le résultat: flou et moche. C’est ça que ça veut dire pixel perfect. Ca ne veut pas dire qu’il n’y a pas de bugs dans IE :»
2009-11-20 01-03
Comment from: Mox Folder
Ça c’est quand tu connais pas photoshop et/ou que tu es un graphiste ’lazy’ (ou tu fais affaire avec ce qui est pire ;). J’en vois tous les jours, ou presque… y a pas quand dans le batiment qu’on en trouve des comme ça ;)
Mais sympas le tableau sinon c’est bien de rappeler toutes ces étapes.
2009-11-20 16-39
Comment from: François Planque
“Lazy”! C’est le mot! Si tu remplaces “pixel perfect” par “not lazy”, je pense qu’on est d’accord :))
PS: j’ai rajouté une colonne “Qui fait quoi?” :> Ca mériterait qu’on s’attarde sur les erreurs de castings récurrentes et les conflits du type:
- Personne ne veut faire l’intégration.
- On ne s’occupe de l’optimisation pour les moteurs de recherches (référencement/SEO) que beaucoup trop tard.
- On a cru qu’on pouvait se passer d’un Interaction designer et on se retrouve avec un site très beau mais inutilisable.
2009-11-20 17-16
Comment from: Mox Folder
Bien les ajouts, ça permet de voir les implications de chacun tout au long du projet.
Je vais le blogguer ;)
(ça arrive parfois que je vois la programmation arriver direct apres la conception - voir meme pendant et sans interaction designer, difficile à rattraper par le suite)
2009-11-20 18-41
Comment from: François Planque
La prog directement après la conception, en effet c’est souvent un problème. Ca ne marche bien que quand t’as une équipe intégrée qui collabore en live tout au long du projet… mais c’est très rare que les graphistes et les devs soient dans la même pièce très longtemps… donc en général il vaut mieux séquencer le plus possible ;)
2009-11-20 18-52
Comment from: Olivier B. , DA / Chef de projet c/o Ventiloman
Bonjour François,
Merci pour cette brève.
Je la trouve intéressante, c’est bien de restituer les choses. À la fois, j’aurais envie d’ajouter quelques mots.
La notion d’équipe est très importante.
- Une équipe soudée sans concurrence dès le début du projet
- Une équipe qui se cannaît et ayant l’habitude de travailler ensemble.
- Chaque expert à sa place pour plus d’efficacité
- Ne jamais griller une étape
- Une équipe pour aller au bout des galères (car il y en a parfois)
- les échanges dans les équipes sont supers importants
- Finir avec la même équipe
Une ou deux étapes en amont souvent demandées par les WebDesigners:
- Stratégie / Réflexion (en amont)
- La définition des besoins est très importante
- Pourquoi un site ?
- Quel contenu ?
- Quelle marché ?
- Quel concurrent ?
- Des outils web 2.0 pour de nouveaux besoins, lesquels ? pour qui ?
- Stratégie de visibilité (Pour la cible et pour Google!) en amont
- Structuration du site (cela dois être pensé par le Designer / Ergonome) Cette double compétence est un plus.
- L’intégration de l’accessibilité avec validation en respectant les initiatives WAI & W3C.
- Ergonomie (c’est bien de parler de ce point aussi) en amont dans les premiers jets tout doit y être..
- intégrer au moins 10 à 12 logiques de navigation (haha… Secret made in Ventiloman)
c’est bien de définir à quel moment les validations doivent se faite.
Lancement du Site
- Prévoir au plus tôt le faire part de naissance pour le Lancement du Site. à 90% du temps c’est négligé alors que c’est une occasion en Or pour organiser un Superlancement. Surtout s’il y a vente de produit derrière.
Merci encore pour ce Billet.
Au plaisir de te connaître.
Nous avons un amis commun visiblement..
2010-01-22 14-54