{"id":846,"date":"2012-08-09T20:30:14","date_gmt":"2012-08-09T18:30:14","guid":{"rendered":"http:\/\/blog.stephaniewalter.fr\/?p=846"},"modified":"2012-08-10T09:06:31","modified_gmt":"2012-08-10T07:06:31","slug":"des-pixels-et-du-code-22","status":"publish","type":"post","link":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-22\/","title":{"rendered":"Des pixels et du code #22"},"content":{"rendered":"
Ce contenu a \u00e9t\u00e9 r\u00e9dig\u00e9 il y a 14 ans. Il se peut qu'il ne soit plus \u00e0 jour.<\/div>

Cette semaine, quelques liens sympas pour se familiariser avec le design de l’interface Metro, encore des plugins jQuery, ainsi que quelques bons conseils pour les designers concernant les PSDs, les couleurs, deux sites \u00ab\u00a0coup de gueule\u00a0\u00bb,comment l’ergonomie peut faire gagner 173euros \u00e0 un site web. et un petit script pour am\u00e9liorer son workflow sur Photoshop Bonne lecture<\/p>\n

Les tutoriels de la semaine<\/h2>\n

#CSS<\/p>\n

Un syst\u00e8me de rating<\/a> avec seulement deux images dans le sprite, plut\u00f4t intelligent<\/p>\n

Transparent Background Images <\/a>une astuce CSS pour cr\u00e9er des images de fond avec une fausse transparence en utilisant une pseudo-classe<\/p>\n

#CSS3<\/p>\n

Imzflipper<\/a>\u00a0 une petite d\u00e9monstration sympa d\u2019un effet de flipping card<\/p>\n

Des ressources \u00a0utiles<\/h2>\n

#Metro<\/p>\n

Metro-pricing-tables<\/a> , un PSD avec des tables de prix dans un style metro<\/p>\n

Les outils \u00a0et plugins pour vous faciliter la vie<\/h2>\n

#jQuery<\/p>\n

Stickymojo\/<\/a> , un script jQuery pour cr\u00e9er un \u00e9l\u00e9ment fixe sur le c\u00f4t\u00e9 de votre site web<\/p>\n

jBar Plugin, HelloBar jQuery alternative<\/a>, un plugin jQuery pour ajouter une petite bar en haut de votre site que l\u2019utilisateur peut cacher \/ afficher \u00e0 sa guise.<\/p>\n

#Favicon<\/p>\n

Piecon<\/a> , une librairie JavaScript pour ajouter des bars de chargement aux \u00e9motic\u00f4nes d\u2019un site<\/p>\n

#Photoshop<\/p>\n

12 New Photoshop Tools for CS6<\/a> une extension \u00a8Photoshop avec 12 raccourcis indispensables \u00e0 tout designer : alignement horizontal, vertical, centrer un \u00e9l\u00e9ment dans la page, cacher tous les calques, etc.<\/p>\n

Les articles \u00e0 lire<\/h2>\n

#Webdesign<\/p>\n

\u201cI Draw Pictures All Day\u201d <\/a>, un excellent article qui explique pourquoi le fait de gribouiller et faire des sch\u00e9mas pendant une r\u00e9union ou un cours aide certaines personnes \u00e0 m\u00e9moriser l\u2019information plus facilement.<\/p>\n

#Metro<\/p>\n

The Metro Style Design Guide<\/a>, une s\u00e9rie de guidelines pour le design d\u2019interface Metro avec \u00e9galement quelques articles sur les origines et les diff\u00e9rentes interface Windows8, Xbox et Windows Phone<\/p>\n

#Ergonomie<\/p>\n

Comment l\u2019ergonomie web a fait gagner 173K\u20ac \u00e0 notre client<\/a> , s\u2019il vous fallait encore des arguments pour convaincre votre patron qu\u2019un ergonome c\u2019est utile, en voil\u00e0 173K\u20ac<\/p>\n

#Redesign<\/p>\n

Wikipediaredefined.com\/<\/a>, quand une agence d\u00e9cide de proposer de redesigner wikipedia, impressionnant, et tr\u00e8s sympa.<\/p>\n

#iOs<\/p>\n

The average app<\/a> , une analyse de la segmentation des gains des applications sur l\u2019AppStore et du mod\u00e8le \u00e9conomique derri\u00e8re<\/p>\n

#Specwork<\/p>\n

Dontgetscrewedover.com<\/a> , un site et surtout une vid\u00e9o \u201cvis ma vie de designer\u201d o\u00f9 une jeune fille essaie d\u2019avoir un dessin pour 5$, mais… je vous laisse regarder, \u00e7a vous rappellera des souvenirs.<\/p>\n

<\/strong>#Coup de Gueule #Graphisme<\/p>\n

Salut-l-artiste.tumblr.com<\/a> , un tumblr qui relate les annecdotes de tous ces gentils na\u00effs qui essaient de nous faire travailler gratuitement, en \u00e9change de \u201c\u00e7a te fera de la pub\u201d.<\/p>\n

#Webdesign<\/p>\n

Guidelines pour produire des PSD adapt\u00e9s au web<\/a> \u00e0 lire 3 fois, au moins, et mettre dans vos favoris<\/p>\n

Design Tip: Never Use Black <\/a>, car dans la vie, rien n\u2019est vraiment fait d\u2019un noir 100% pur ( #000), il vaut mieux \u00e9viter d\u2019utiliser le noir en design.<\/p>\n

http:\/\/skeu.it\/<\/a>, un tumblr qui rassemble les interface qui usent et abusent du skeuomorphisme<\/a><\/p>\n

Et le lien geek de la semaine, un plan de table super mario<\/a>.<\/p>\n

Pour finir, un petit cadeau de St\u00e9phane Baril que je vous partage avec son autorisation. J\u2019avais d\u00e9j\u00e0 mis en avant combien la propri\u00e9t\u00e9 qui permet de combiner les trac\u00e9s est utile dans Photoshop CS6<\/a>, depuis qu\u2019elle existe je dois l\u2019utiliser 10 fois par jours au moins. Du coup j\u2019avais cherch\u00e9 s\u2019il existait un moyen d\u2019y ajouter un raccourci clavier, mais comme elle se trouve dans le menu des options de l\u2019outil, cela semblait impossible. St\u00e9phane est venu \u00e0 mon secours avec un petit script tr\u00e8s pratique \u201cCombineShapes.jx<\/a>\u201d. Placez le script dans le dossier script (chez moi C:\\Program Files\\Adobe\\Adobe Photoshop CS6 (64 Bit)\\Presets\\Scripts ), et vous pouvez ajouter un raccourci clavier, tada !<\/p>\n","protected":false},"excerpt":{"rendered":"

Ce contenu a \u00e9t\u00e9 r\u00e9dig\u00e9 il y a 14 ans. Il se peut qu’il ne soit plus \u00e0 jour.Cette semaine, quelques liens sympas pour se familiariser avec le design de l’interface Metro, encore des plugins jQuery, ainsi que quelques bons conseils pour les designers concernant les PSDs, les couleurs, deux sites \u00ab\u00a0coup de gueule\u00a0\u00bb,comment l’ergonomie peut faire gagner 173euros \u00e0 un site web. et un petit script pour am\u00e9liorer son workflow sur Photoshop Bonne lecture Les tutoriels de la semaine …<\/p>\n","protected":false},"author":3,"featured_media":848,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[105],"tags":[],"class_list":["post-846","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-veille-liens-utiles"],"yoast_head":"\nDes pixels et du code #22 - par St\u00e9phanie Walter - UX Researcher & Designer<\/title>\n<meta name=\"description\" content=\"Se familiariser avec l'interface Metro,des conseils pour les designers concernant les PSDs, les couleurs, gagner 173k\u20ac gr\u00e2ce \u00e0 l'ergonomie\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-22\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Des pixels et du code #22 - par St\u00e9phanie Walter - UX Researcher & Designer\" \/>\n<meta property=\"og:description\" content=\"Se familiariser avec l'interface Metro,des conseils pour les designers concernant les PSDs, les couleurs, gagner 173k\u20ac gr\u00e2ce \u00e0 l'ergonomie\" \/>\n<meta property=\"og:url\" content=\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-22\/\" \/>\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=\"2012-08-09T18:30:14+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2012-08-10T07:06:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2012\/08\/pixeletcode22.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"630\" \/>\n\t<meta property=\"og:image:height\" content=\"180\" \/>\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=\"@https:\/\/bsky.app\/profile\/stephaniewalter.bsky.social\" \/>\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\/des-pixels-et-du-code-22\/\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-22\/\",\"name\":\"Des pixels et du code #22 - par St\u00e9phanie Walter - UX Researcher & Designer\",\"isPartOf\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-22\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-22\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/stephaniewalter.design\/fr\/files\/2012\/08\/pixeletcode22.jpg\",\"datePublished\":\"2012-08-09T18:30:14+00:00\",\"dateModified\":\"2012-08-10T07:06:31+00:00\",\"author\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf\"},\"description\":\"Se familiariser avec l'interface Metro,des conseils pour les designers concernant les PSDs, les couleurs, gagner 173k\u20ac gr\u00e2ce \u00e0 l'ergonomie\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-22\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-22\/#primaryimage\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/files\/2012\/08\/pixeletcode22.jpg\",\"contentUrl\":\"https:\/\/stephaniewalter.design\/fr\/files\/2012\/08\/pixeletcode22.jpg\",\"width\":630,\"height\":180,\"caption\":\"Des pixels et du code 22\"},{\"@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\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"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\/3311148a94caa2e5ae146ff1cdf9aaf3a0127a7db0337d8c8cbbfc4a425cab0e?s=96&d=retro&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/3311148a94caa2e5ae146ff1cdf9aaf3a0127a7db0337d8c8cbbfc4a425cab0e?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\/https:\/\/bsky.app\/profile\/stephaniewalter.bsky.social\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Des pixels et du code #22 - par St\u00e9phanie Walter - UX Researcher & Designer","description":"Se familiariser avec l'interface Metro,des conseils pour les designers concernant les PSDs, les couleurs, gagner 173k\u20ac gr\u00e2ce \u00e0 l'ergonomie","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\/des-pixels-et-du-code-22\/","og_locale":"fr_FR","og_type":"article","og_title":"Des pixels et du code #22 - par St\u00e9phanie Walter - UX Researcher & Designer","og_description":"Se familiariser avec l'interface Metro,des conseils pour les designers concernant les PSDs, les couleurs, gagner 173k\u20ac gr\u00e2ce \u00e0 l'ergonomie","og_url":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-22\/","og_site_name":"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.","article_published_time":"2012-08-09T18:30:14+00:00","article_modified_time":"2012-08-10T07:06:31+00:00","og_image":[{"width":630,"height":180,"url":"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2012\/08\/pixeletcode22.jpg","type":"image\/jpeg"}],"author":"St\u00e9phanie Walter","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/bsky.app\/profile\/stephaniewalter.bsky.social","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\/des-pixels-et-du-code-22\/","url":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-22\/","name":"Des pixels et du code #22 - par St\u00e9phanie Walter - UX Researcher & Designer","isPartOf":{"@id":"https:\/\/stephaniewalter.design\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-22\/#primaryimage"},"image":{"@id":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-22\/#primaryimage"},"thumbnailUrl":"https:\/\/stephaniewalter.design\/fr\/files\/2012\/08\/pixeletcode22.jpg","datePublished":"2012-08-09T18:30:14+00:00","dateModified":"2012-08-10T07:06:31+00:00","author":{"@id":"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf"},"description":"Se familiariser avec l'interface Metro,des conseils pour les designers concernant les PSDs, les couleurs, gagner 173k\u20ac gr\u00e2ce \u00e0 l'ergonomie","inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-22\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-22\/#primaryimage","url":"https:\/\/stephaniewalter.design\/fr\/files\/2012\/08\/pixeletcode22.jpg","contentUrl":"https:\/\/stephaniewalter.design\/fr\/files\/2012\/08\/pixeletcode22.jpg","width":630,"height":180,"caption":"Des pixels et du code 22"},{"@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":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"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\/3311148a94caa2e5ae146ff1cdf9aaf3a0127a7db0337d8c8cbbfc4a425cab0e?s=96&d=retro&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3311148a94caa2e5ae146ff1cdf9aaf3a0127a7db0337d8c8cbbfc4a425cab0e?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\/https:\/\/bsky.app\/profile\/stephaniewalter.bsky.social"]}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts\/846","targetHints":{"allow":["GET"]}}],"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=846"}],"version-history":[{"count":0,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts\/846\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/media\/848"}],"wp:attachment":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/media?parent=846"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/categories?post=846"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/tags?post=846"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}