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.

Tags : , ,