{"id":5760,"date":"2016-10-03T23:01:40","date_gmt":"2016-10-03T21:01:40","guid":{"rendered":"http:\/\/blog.stephaniewalter.fr\/?p=5760"},"modified":"2019-04-28T11:47:25","modified_gmt":"2019-04-28T09:47:25","slug":"freebie-photoshop-style-guide-psd","status":"publish","type":"post","link":"https:\/\/stephaniewalter.design\/fr\/blog\/freebie-photoshop-style-guide-psd\/","title":{"rendered":"Photoshop Style Guide .PSD (et workflow)"},"content":{"rendered":"
Ce contenu a \u00e9t\u00e9 r\u00e9dig\u00e9 il y a 8 ans. Il se peut qu'il ne soit plus \u00e0 jour.<\/div>

Voici le fichier Photoshop de mon style guide de projets web. Vous avez \u00e9t\u00e9 plusieurs \u00e0 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 \u00e9l\u00e9ments de formulaire dans les \u00e9tats normal, active, survol, des tableaux, alignements d’images, etc.<\/p>\n

<\/svg>T\u00e9l\u00e9charger Photoshop Style Guide .PSD<\/span><\/a><\/p>\n

Le fichier utilise les artboards pour s\u00e9parer les diff\u00e9rentes sections ce qui veut dire qu’il fonctionnera bien mieux sous Photoshop CC 2015 et plus. Vous pourrez soit utiliser le syst\u00e8me d’artboards pour exporter les sections, soit utiliser le classique \u00ab\u00a0enregistrer pour le web\u00a0\u00bb pour enregistrer un gros aper\u00e7u.<\/p>\n

\"StyleguideAccessibilit\u00e9 et couleurs<\/h2>\n

La partie Color met l’accent sur l’accessibilit\u00e9 des couleurs. Les lettre AA et AAA se r\u00e9f\u00e8rent \u00e0\u00a0la spec\u00a0W3C accessibility color constrast ratio.<\/a>
\nLa premi\u00e8re ligne propose des couleurs d’arri\u00e8re plan avec un contraste suffisant pour fonctionner avec du texte blanc (ou fonc\u00e9). La seconde ligne propose les \u00e9quivalences en couleur de texte. Dans la plupart des cas on peut utiliser la m\u00eame couleur que la couleur de fond, mais quand le contraste ne suffit pas, je pr\u00e9f\u00e8re parfois proposer une couleur de texte l\u00e9g\u00e8rement diff\u00e9rente mais utilisable avec du texte de petite taille.\"Colors<\/p>\n

Typographie responsive<\/h2>\n

C’est parfois compliqu\u00e9 sur de tr\u00e8s gros et longs projets de garder la coh\u00e9rence typographique tout au long de l’interface. Je mets g\u00e9n\u00e9ralement dans le style guide les r\u00e9f\u00e9rences vers les titrages, mais aussi les \u00e9quivalents du texte en gras, italic, les liens dans plusieurs \u00e9tats et les listes. J’utilise \u00e9galement le style guide pour donner des informations sur le comportement responsive de la typographie sur petits \u00e9crans (surtout quand je n’ai pas le temps de designer toutes les tailles d’\u00e9cran).\"responsive<\/p>\n

Etats des boutons et des formulaires<\/h2>\n

Les d\u00e9veloppeuses n’aiment pas jouer \u00e0 cache cache avec 150 fichiers .PSD pour retrouver le design du bouton au survol, je mets donc en g\u00e9n\u00e9ral au moins les \u00e9tats \u00ab\u00a0normal\u00a0\u00bb, \u00ab\u00a0survol\u00a0\u00bb et \u00ab\u00a0active\u00a0\u00bb des boutons dans le style guide.\"Buttons\"
\nJ’en fait de m\u00eame pour les formulaires. Souvent les d\u00e9veloppeuses vont avoir besoin de beaucoup d’\u00e9tats : normal, au focus, vide, remplis, avec ou sans erreur, etc.
\n\"forms\"<\/p>\n

Alignements d’image<\/h2>\n

J’ai beaucoup travaill\u00e9 avec WordPress sur mes derniers projets, j’essaie donc \u00e9galement de pr\u00e9voir les alignements d’image.
\n\"image<\/p>\n

Et il y a encore pleins de choses sympas dans le style guide. Il va sans doute encore \u00e9voluer d’ailleurs.<\/p>\n

N’h\u00e9sitez pas \u00e0 le fork sur github, \u00e0 envoyer des feedback et \u00e0 poser vos questions dans les commentaires.<\/p>\n

<\/svg>T\u00e9l\u00e9charger Photoshop Style Guide .PSD<\/span><\/a><\/p>\n

\n

Photoshop Style Guide .PSD\u00a0par Walter St\u00e9phanie<\/a> est mis \u00e0 disposition selon les termes de la licence Attribution-ShareAlike 4.0 International (CC BY-SA 4.0)<\/a>.<\/small><\/p>\n

Vous \u00eates autoris\u00e9 \u00e0 :\u00a0Partager \u2014 copier, distribuer et communiquer le mat\u00e9riel par tous moyens et sous tous formats,\u00a0Adapter \u2014 remixer, transformer et cr\u00e9er \u00e0 partir du mat\u00e9riel pour toute utilisation, y compris commerciale.\u00a0Attribution<\/strong> \u2014 Vous devez cr\u00e9diter l’\u0152uvre, int\u00e9grer un lien vers la licence et indiquer si des modifications ont \u00e9t\u00e9 effectu\u00e9es \u00e0 l’Oeuvre.<\/small><\/p>\n","protected":false},"excerpt":{"rendered":"

Voici le fichier Photoshop de mon style de guide de projets web. Vous avez \u00e9t\u00e9 plusieurs \u00e0 me demander ce que j’y met, je me suis dit que je pourrais tout aussi bien vous partager le fichier .PSD. I contient des instructions de couleur, de typographie responsive, des boutons et \u00e9l\u00e9ments de formulaire dans les \u00e9tats normal, active, survol, des tableaux, alignements d’images, etc.<\/p>\n","protected":false},"author":3,"featured_media":5763,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[61],"tags":[],"class_list":["post-5760","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ressource-kit-pdf"],"yoast_head":"\nPhotoshop Style Guide .PSD (et workflow) - par St\u00e9phanie Walter - UX Researcher & Designer<\/title>\n<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=UTF-8" /><!-- /Added by HTTrack --> <meta name=\"description\" content=\"Le fichier Photoshop de mon style guide de projets web est disponible \u00e0 t\u00e9l\u00e9charger gratuitement sur github. Il contient des instructions de couleur, de typographie responsive, des boutons et \u00e9l\u00e9ments de formulaire dans les \u00e9tats normal, active, survol, des tableaux, alignements d'images, etc.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=_-635.html \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Photoshop Style Guide .PSD (et workflow) - par St\u00e9phanie Walter - UX Researcher & Designer\" \/>\n<meta property=\"og:description\" content=\"Le fichier Photoshop de mon style guide de projets web est disponible \u00e0 t\u00e9l\u00e9charger gratuitement sur github. Il contient des instructions de couleur, de typographie responsive, des boutons et \u00e9l\u00e9ments de formulaire dans les \u00e9tats normal, active, survol, des tableaux, alignements d'images, etc.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/stephaniewalter.design\/fr\/blog\/freebie-photoshop-style-guide-psd\/\" \/>\n<meta property=\"og:site_name\" content=\"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.\" \/>\n<meta property=\"article:published_time\" content=\"2016-10-03T21:01:40+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-04-28T09:47:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2016\/10\/styleguide-titre.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"850\" \/>\n\t<meta property=\"og:image:height\" content=\"350\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"St\u00e9phanie Walter\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@walterstephanie\" \/>\n<meta name=\"twitter:site\" content=\"@walterstephanie\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"St\u00e9phanie Walter\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/freebie-photoshop-style-guide-psd\/\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/blog\/freebie-photoshop-style-guide-psd\/\",\"name\":\"Photoshop Style Guide .PSD (et workflow) - par St\u00e9phanie Walter - UX Researcher & Designer\",\"isPartOf\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/freebie-photoshop-style-guide-psd\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/freebie-photoshop-style-guide-psd\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/stephaniewalter.design\/fr\/files\/2016\/10\/styleguide-titre.jpg\",\"datePublished\":\"2016-10-03T21:01:40+00:00\",\"dateModified\":\"2019-04-28T09:47:25+00:00\",\"author\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf\"},\"description\":\"Le fichier Photoshop de mon style guide de projets web est disponible \u00e0 t\u00e9l\u00e9charger gratuitement sur github. Il contient des instructions de couleur, de typographie responsive, des boutons et \u00e9l\u00e9ments de formulaire dans les \u00e9tats normal, active, survol, des tableaux, alignements d'images, etc.\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/stephaniewalter.design\/fr\/blog\/freebie-photoshop-style-guide-psd\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/freebie-photoshop-style-guide-psd\/#primaryimage\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/files\/2016\/10\/styleguide-titre.jpg\",\"contentUrl\":\"https:\/\/stephaniewalter.design\/fr\/files\/2016\/10\/styleguide-titre.jpg\",\"width\":850,\"height\":350,\"caption\":\"[Freebie] Photoshop Style Guide\"},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#website\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/\",\"name\":\"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.\",\"description\":\"Je partage ici mes conseils, mes ressources et outils sur la conception centr\u00e9e utilisateur, la recherche et tests utilisateur, le design de produits, la strat\u00e9gie mobile, l'utilisabilit\u00e9 et l'accessibilit\u00e9.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/stephaniewalter.design\/fr\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf\",\"name\":\"St\u00e9phanie Walter\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/f383c6a4dc55e331bbe2987b622cee6b?s=96&d=retro&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/f383c6a4dc55e331bbe2987b622cee6b?s=96&d=retro&r=g\",\"caption\":\"St\u00e9phanie Walter\"},\"description\":\"UX Researcher & Product Designer. Mobile Expert. Public speaker. Blog writer. Google Dev Expert Web Platform and Product Design (GDE)\",\"sameAs\":[\"https:\/\/stephaniewalter.design\/\",\"https:\/\/www.linkedin.com\/in\/stephaniewalterpro\/\",\"https:\/\/x.com\/walterstephanie\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Photoshop Style Guide .PSD (et workflow) - par St\u00e9phanie Walter - UX Researcher & Designer","description":"Le fichier Photoshop de mon style guide de projets web est disponible \u00e0 t\u00e9l\u00e9charger gratuitement sur github. Il contient des instructions de couleur, de typographie responsive, des boutons et \u00e9l\u00e9ments de formulaire dans les \u00e9tats normal, active, survol, des tableaux, alignements d'images, etc.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/stephaniewalter.design\/fr\/blog\/freebie-photoshop-style-guide-psd\/","og_locale":"fr_FR","og_type":"article","og_title":"Photoshop Style Guide .PSD (et workflow) - par St\u00e9phanie Walter - UX Researcher & Designer","og_description":"Le fichier Photoshop de mon style guide de projets web est disponible \u00e0 t\u00e9l\u00e9charger gratuitement sur github. Il contient des instructions de couleur, de typographie responsive, des boutons et \u00e9l\u00e9ments de formulaire dans les \u00e9tats normal, active, survol, des tableaux, alignements d'images, etc.","og_url":"https:\/\/stephaniewalter.design\/fr\/blog\/freebie-photoshop-style-guide-psd\/","og_site_name":"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.","article_published_time":"2016-10-03T21:01:40+00:00","article_modified_time":"2019-04-28T09:47:25+00:00","og_image":[{"width":850,"height":350,"url":"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2016\/10\/styleguide-titre.jpg","type":"image\/jpeg"}],"author":"St\u00e9phanie Walter","twitter_card":"summary_large_image","twitter_creator":"@walterstephanie","twitter_site":"@walterstephanie","twitter_misc":{"\u00c9crit par":"St\u00e9phanie Walter","Dur\u00e9e de lecture estim\u00e9e":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/stephaniewalter.design\/fr\/blog\/freebie-photoshop-style-guide-psd\/","url":"https:\/\/stephaniewalter.design\/fr\/blog\/freebie-photoshop-style-guide-psd\/","name":"Photoshop Style Guide .PSD (et workflow) - par St\u00e9phanie Walter - UX Researcher & Designer","isPartOf":{"@id":"https:\/\/stephaniewalter.design\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/stephaniewalter.design\/fr\/blog\/freebie-photoshop-style-guide-psd\/#primaryimage"},"image":{"@id":"https:\/\/stephaniewalter.design\/fr\/blog\/freebie-photoshop-style-guide-psd\/#primaryimage"},"thumbnailUrl":"https:\/\/stephaniewalter.design\/fr\/files\/2016\/10\/styleguide-titre.jpg","datePublished":"2016-10-03T21:01:40+00:00","dateModified":"2019-04-28T09:47:25+00:00","author":{"@id":"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf"},"description":"Le fichier Photoshop de mon style guide de projets web est disponible \u00e0 t\u00e9l\u00e9charger gratuitement sur github. Il contient des instructions de couleur, de typographie responsive, des boutons et \u00e9l\u00e9ments de formulaire dans les \u00e9tats normal, active, survol, des tableaux, alignements d'images, etc.","inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/stephaniewalter.design\/fr\/blog\/freebie-photoshop-style-guide-psd\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/stephaniewalter.design\/fr\/blog\/freebie-photoshop-style-guide-psd\/#primaryimage","url":"https:\/\/stephaniewalter.design\/fr\/files\/2016\/10\/styleguide-titre.jpg","contentUrl":"https:\/\/stephaniewalter.design\/fr\/files\/2016\/10\/styleguide-titre.jpg","width":850,"height":350,"caption":"[Freebie] Photoshop Style Guide"},{"@type":"WebSite","@id":"https:\/\/stephaniewalter.design\/fr\/#website","url":"https:\/\/stephaniewalter.design\/fr\/","name":"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.","description":"Je partage ici mes conseils, mes ressources et outils sur la conception centr\u00e9e utilisateur, la recherche et tests utilisateur, le design de produits, la strat\u00e9gie mobile, l'utilisabilit\u00e9 et l'accessibilit\u00e9.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/stephaniewalter.design\/fr\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"fr-FR"},{"@type":"Person","@id":"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf","name":"St\u00e9phanie Walter","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/f383c6a4dc55e331bbe2987b622cee6b?s=96&d=retro&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f383c6a4dc55e331bbe2987b622cee6b?s=96&d=retro&r=g","caption":"St\u00e9phanie Walter"},"description":"UX Researcher & Product Designer. Mobile Expert. Public speaker. Blog writer. Google Dev Expert Web Platform and Product Design (GDE)","sameAs":["https:\/\/stephaniewalter.design\/","https:\/\/www.linkedin.com\/in\/stephaniewalterpro\/","https:\/\/x.com\/walterstephanie"]}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts\/5760"}],"collection":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/comments?post=5760"}],"version-history":[{"count":0,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts\/5760\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/media\/5763"}],"wp:attachment":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/media?parent=5760"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/categories?post=5760"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/tags?post=5760"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}