Web/database development and more...
« Débit ADSL et "atténuation"Tous ces trucs qui démarrent automatiquement dans Windows... »

Design web: étape par étape

18.11.09

Design web: étape par étape

  19:20:09, par fplanque   , Catégories: Développement Web

Parfois, ça fait du bien de récapituler... ;)

EtapeCe qui est faitCe 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.
Diverses icônes sont rassemblées en un seul fichier pour l'optimisation des temps de chargement (techniques des "sprites"). Ce fichier inclue également les versions "roll over" des icônes ou boutons.

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

9 commentaires

Commentaire de: Mox Folder [Visiteur]
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…

18.11.09 @ 20:50
Commentaire de: admin [Membre]  

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.

19.11.09 @ 14:45
Commentaire de: Mox Folder [Visiteur]
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.

19.11.09 @ 18:10
Commentaire de: admin [Membre]  

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 :>>

20.11.09 @ 01:03
Commentaire de: Mox Folder [Visiteur]
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.

20.11.09 @ 16:39
Commentaire de: admin [Membre]  

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

20.11.09 @ 17:16
Commentaire de: Mox Folder [Visiteur]
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)

20.11.09 @ 18:41
Commentaire de: admin [Membre]  

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 ;)

20.11.09 @ 18:52
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:

1. 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 ?

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

3. 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)

4. c’est bien de définir à quel moment les validations doivent se faite.

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

22.01.10 @ 14:54