Réussir le découpage d’un design web en 10 étapes

À LunaWeb, nous voyons passer quotidiennement de nombreux designs sur nos bureaux. E-mailings, refonte de site Internet, nouvelle charte web, mini-site événementiel… Ils passent entre nos mains et nous devons transformer ces maquettes images en pages web, mais il n’existe pas de règle dans le domaine. Chaque intégrateur aura sa manière de travailler faute de méthode technique universellement approuvée et éprouvée.

psdtocss

Lors de ces 10 dernières années j’ai pu établir une « routine » de conception des pages, qui s’est optimisée de manière plus ou moins empirique à force de recommencer ce process :

  1. Travaillez avec une grille, ou imposez-le au webdesigner (960.gs fournit des modèles pour photoshop, fireworks…). Votre découpage sera ensuite plus rapide et vous limiterez ainsi la prolifération de div inutiles
  2. Pensez déjà aux éléments qui devront être des sprites. Vous devez les extraire de votre design pour en composer les différents états (rollover des menu, boutons réactifs…). Sprites : Tutorials et conseils techniques.
  3. Tracez toutes les découpes en veillant à prévoir les marges, bordures et padding pour les backgrounds. En partant de là, imaginez  une imbrication de div simple, puis passez à l’étape suivante. Si le design est compliqué, n’hésitez pas à coucher cette structure sur papier.
  4. Commencez à intégrer votre code html en respectant la structure que vous venez d’imaginer. Conteneur principal, en-tête, menu, contenu, navigation latérale, footer. Tout doit y être. Soyez lisibles dans votre manière de coder, l’indentation n’est pas un luxe.
  5. Nommez vos blocs de façon sémantique. « menu_left » ou « content_right » sont souvent utilisés à tort car trop spécifiques : préférez « sidebar » et « content ».
    Conseil pratique : pour mieux vous repérer dans votre structure, vous pouvez suffixer vos balises fermantes par un commentaire. Ex. : </div><!– #content –>
  6. Retournez à votre image et optimisez le format de vos découpes comme suit : gif (ou png 8 bit) pour les pictogrammes et aplats, jpeg pour les images riches, png transparent 32 bit pour les images à opacité variable.
  7. Exportez toutes vos découpes dans un sous-dossier.
  8. Très important : incluez un reset css dans le header de votre page html.
  9. Utilisez la grille et vos notes pour définir la taille de vos blocs dans une feuille de style séparée.
  10. Remplacez les textes n’utilisant pas de polices standard avec la technique de l’image replacement.

Voilà, votre design tient debout dans sa forme la plus basique. Vous pouvez attaquer les détails du menu, la typographie, les formulaires…

Et vous, comment voyez-vous ces étapes ? Quels conseils donner à un débutant pour accélérer le process de découpage ?

À lire sur le même sujet :

Coder en CSS plus rapidement, plus intelligemment

Par Kaelig Deloumeau

Kaelig Deloumeau
Kaelig Deloumeau

À propos de l'auteur

Kaelig est intégrateur xHTML/CSS et code toujours dans un souci de propreté, d'ergonomie et d'accessibilité. Il a accompagné LunaWeb pendant 4 ans avant de rejoindre en 2012 la team UX de la BBC, pour s'occuper notamment de la bascule en responsive webdesign de tous les sites de cette vénérable institution. Il a également écrit un ouvrage vite devenue best-seller dans la profession (Avec Sass et Compass - Outils et bonnes pratiques pour l'intégrateur web). Une stèle à son effigie orne l'entrée de l'agence !