Composantes d’un webdesign facile à intégrer

Attention, cet article a été déplacé dans les archives, donc le contenu peut ne plus être à jour. A vous de voir 🙂

Voici quelques caractéristiques d’un web design fourni en PSD simple à intégrer, permettant d’éviter certains soucis chronophages.
Cette liste n’est pas exhaustive, et je n’oblige évidemment personne à la suivre 🙂

Organisation

  • Le PSD est bien rangé. Dossier header, footer, etc.
  • Des règles sont utilisées pour souligner les zones importantes

Polices & Couleurs

  • Les fonts utilisées sont disponibles sur Font Squirrel ou Google Webfonts.
  • La liste des fonts et graisses utilisées est accessible à côté (Mail, Redmine, Fichier txt, etc.).
  • Les couleurs de polices sont spécifiées via l’outil caractère, pas dans les options de fusion.
  • Les polices contiennent bien les caractères adéquats (accents, etc)
  • La palette des couleurs de polices est disponible dans un PSD séparé.
  • Un type de :hover est prévu pour chaque type d’élément cliquable.
  • Eviter de styliser plusieurs éléments textes adjacents en un seul calque, ajoutant ainsi 10 espaces et plus pour caler. (Ex: Lien 1______Lien 2__ Lien 3 etc )

Options de fusion

  • Pas de lumière tamisée.
  • Pas de fusion produit sur un fond pouvant varier.

DRY : Ne vous répétez pas

  • Les éléments ne changent pas de façon majeure de sens ou de forme selon les pages : Bouton changeant de forme sur une page en particulier parce que trop ressemblant à un input etc.
  • Les éléments de formulaire ont un style unique, avec éventuellement un ou deux thèmes supplémentaires (Variation sur les couleurs, la largeur des éléments, la position des labels)
  • De même, les titres de page sont présentés de manière similaire.
  • Les marges sont régulières : 17px par ci, 22px par là… Pas si visuellement, rien n’est apporté.
  • La présentation d’un contenu « dégradé » est gérée : Titres trop longs, textes trop courts, menus avec trop d’éléments, …
  • La présentation est gérée pour une fenêtre de navigateur plus large que la DA.
  • Un loop (visualisation d’un élément type article, produit, etc. dans une liste) est toujours représenté de façon similaire si la même quantité d’information est véhiculée, avec la même importance.

Responsive sous Photoshop

  • Toutes les icônes sont vectorisées.
  • Les survols doivent avoir une alternative fonctionnelle si l’écran est tactile.
  • Un bloc ne change pas de parent entre les vues.
  • Une zone cliquable sur du tactile doit faire au moins 30px de large/haut.
  • Vous pouvez vous inspirer des vues ci-dessous. Le plus courant est 1024-768-320.
  • Vue « grand écran » : 1280px de large ou plus.
  • Vue par défaut : 1024px de large. Si le site n’est pas pensé mobile first, l’intégration sans media queries démarrera de cette vue.
  • Vue « tablette portrait » : 768px de large. A partir de ce point, on pense uniquement en tactile.
  • Vue « mobile paysage » : 500px de large.
  • Vue « mobile portrait » : 320px de large. Si le budget le permet, penser à la dégradation sous 320px.

Divers

  • Les éléments sortant de la grille sont limités ou maitrisés. Ex : un halo gigantesque en fond.
  • Les règles sont respectées au maximum : Un minimum d’éléments se suivant avec une marge gauche/droite variant par rapport à son voisin du dessous.
  • La sémantique est simple à suivre : Pas de titre énorme en dessous d’un petit titre.
  • Idéalement, un style guide avec la majorité des éléments (boutons, liens, textes, titres, formulaires) est fourni, permettant de démarrer au plus vite la phase d’intégration dans le CMS, thème, etc.

En voyez-vous d’autres ?

Edit : Zoontek me signale sur Twitter le très bon « Photoshop Etiquette » qui ajoute d’autres bonnes pratiques.

Partager cet article

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

  • Evidemment, chez Colorz, mon employeur, cette liste n’est pas nécessaire, car ces éléments sont déjà en place.

  • Comment ça se passe si la typo est payante et donc disponible sur des Typekit-like ?

    Et j’allais dire, mais c’est la dernière ligne, un PSD de production reste ce qu’il y a de mieux à faire par le webdesigner pour tous les éléments récurrents (titres, input, boutons majeurs/mineurs avec déclinaisons focus / hover, couleurs, éléments informatif / succès / erreur / attention, etc).

    Par contre, le respect de la grille est parfois et même souvent trop contraignant, de plus, s’il y a utilisation d’une grille, le webdesigner doit spécifier sur laquelle il s’est basé.

    Pour ce qui est de la largeur de la DA, généralement, un psd de 1600px de large suffit.

  • @n0unours
    * Typekit est payant, mais fonctionne très bien. Le but étant d’avoir une typo testée en usage web.
    * Au lieu de grille, c’est surtout d’éviter l’absence de colonnes. Même si elles sont larges, étroites, ou calculées de manière particulière, elles permettent d’éviter de trop jouer avec les marges latérales.
    * L’exemple parfait sur la largeur de la DA est le slider d’accueil sur http://www.colorz.fr : la DA se prolonge, mais le comportement du slider « full-width » était bien spécifié en amont.

  •  » un PSD de production reste ce qu’il y a de mieux à faire par le webdesigner pour tous les éléments récurrents (titres, input, boutons majeurs/mineurs avec déclinaisons focus / hover, couleurs, éléments informatif / succès / erreur / attention, etc). »

    Oh love. Parfait pour faire une feuille d’objets.

  • Mon graphiste adoré me fait les exports, et me fournit un document avec tous les styles et informations nécessaires… et j’ai même plus besoin de réclamer les sprites CSS, c’est fourni avec ! 🙂
    En général, juste avant qu’il ne produise ces documents, on fait une review très rapide et peu formelle, ça permet de détecter des trucs potentiellement pénibles ou compliqués… ce qui est très rare.