Photoshop Style Guide .PSD (et workflow)

[Freebie] Photoshop Style Guide
Ce contenu a été rédigé il y a 2 années. Il se peut qu'il ne soit plus à jours.

Voici le fichier Photoshop de mon style guide de projets web. Vous avez été plusieurs à me demander ce que j’y mets, je me suis dit que je pourrais tout aussi bien vous partager le fichier .PSD. I contient des instructions de couleur, de typographie responsive, de boutons et éléments de formulaire dans les états normal, active, survol, des tableaux, alignements d’images, etc.

Télécharger Photoshop Style Guide .PSD sur github

Le fichier utilise les artboards pour séparer les différentes sections ce qui veut dire qu’il fonctionnera bien mieux sous Photoshop CC 2015 et plus. Vous pourrez soit utiliser le système d’artboards pour exporter les sections, soit utiliser le classique « enregistrer pour le web » pour enregistrer un gros aperçu.

Styleguide finalAccessibilité et couleurs

La partie Color met l’accent sur l’accessibilité des couleurs. Les lettre AA et AAA se réfèrent à la spec W3C accessibility color constrast ratio.
La première ligne propose des couleurs d’arrière plan avec un contraste suffisant pour fonctionner avec du texte blanc (ou foncé). La seconde ligne propose les équivalences en couleur de texte. Dans la plupart des cas on peut utiliser la même couleur que la couleur de fond, mais quand le contraste ne suffit pas, je préfère parfois proposer une couleur de texte légèrement différente mais utilisable avec du texte de petite taille.Colors screenshot

Typographie responsive

C’est parfois compliqué sur de très gros et longs projets de garder la cohérence typographique tout au long de l’interface. Je mets généralement dans le style guide les références vers les titrages, mais aussi les équivalents du texte en gras, italic, les liens dans plusieurs états et les listes. J’utilise également le style guide pour donner des informations sur le comportement responsive de la typographie sur petits écrans (surtout quand je n’ai pas le temps de designer toutes les tailles d’écran).responsive typopgraphy

Etats des boutons et des formulaires

Les développeuses n’aiment pas jouer à cache cache avec 150 fichiers .PSD pour retrouver le design du bouton au survol, je mets donc en général au moins les états « normal », « survol » et « active » des boutons dans le style guide.Buttons
J’en fait de même pour les formulaires. Souvent les développeuses vont avoir besoin de beaucoup d’états : normal, au focus, vide, remplis, avec ou sans erreur, etc.
forms

Alignements d’image

J’ai beaucoup travaillé avec WordPress sur mes derniers projets, j’essaie donc également de prévoir les alignements d’image.
image alignements

Et il y a encore pleins de choses sympas dans le style guide. Il va sans doute encore évoluer d’ailleurs.

N’hésitez pas à le fork sur github, à envoyer des feedback et à poser vos questions dans les commentaires.

Télécharger Photoshop Style Guide .PSD sur github


Photoshop Style Guide .PSD par Walter Stéphanie est mis à disposition selon les termes de la licence Attribution-ShareAlike 4.0 International (CC BY-SA 4.0).

Vous êtes autorisé à : Partager — copier, distribuer et communiquer le matériel par tous moyens et sous tous formats, Adapter — remixer, transformer et créer à partir du matériel pour toute utilisation, y compris commerciale. Attribution — Vous devez créditer l’Œuvre, intégrer un lien vers la licence et indiquer si des modifications ont été effectuées à l’Oeuvre.

Vous souhaitez des conseils en ergonomie ou en expérience utilisateur ? Un design de site, d’interface ou d’application mobile ? Envie de travailler ensemble ou de m’inviter à donner une conférence ? Consultez mes réalisations ou contactez moi directement.

4 réflexions au sujet de « Photoshop Style Guide .PSD (et workflow) »

  1. Merci pour ces ressources, mais après avoir travaillé des années sur photoshop, je trouve désormais illustrator tellement plus adapté au web design
    j’aimerai avoir votre avis

    merci

    • Un peu pareil, illustrator serait super pratique pour du web, le seul souci c’est les exports (et le fait que les intégrateurs aient du mal avec aussi s’ils doivent ouvrir les maquettes)