{"id":5131,"date":"2016-03-18T08:33:00","date_gmt":"2016-03-18T07:33:00","guid":{"rendered":"http:\/\/blog.stephaniewalter.fr\/?p=5131"},"modified":"2016-03-18T08:42:59","modified_gmt":"2016-03-18T07:42:59","slug":"semaine-pixels-18-mars-2016","status":"publish","type":"post","link":"https:\/\/stephaniewalter.design\/fr\/blog\/semaine-pixels-18-mars-2016\/","title":{"rendered":"La semaine en pixels \u2013 18 mars 2016"},"content":{"rendered":"
Ce contenu a \u00e9t\u00e9 r\u00e9dig\u00e9 il y a 9 ans. Il se peut qu'il ne soit plus \u00e0 jour.<\/div>

Comme chaque semaine, \u00a0un condens\u00e9 de mes lectures et ma veille web design et graphisme, exp\u00e9rience utilisateurs, design d’interface et mobilit\u00e9, mais aussi des outils et ressources pour le web design et de l’inspiration en tout genre : illustrations, photos, sites web, etc.<\/p>\n

Au programme cette semaine : \u00a0les tests utilisateurs expliqu\u00e9s en infographie et l\u2019exp\u00e9rience utilisation expliqu\u00e9e en GIFs, des principes pour le design mobile et une barre de navigation en bas de l\u2019\u00e9cran qui arrive sur Android, sp\u00e9cificit\u00e9s de :not() en CSS et la meilleure unit\u00e9 pour des media-queries, Adobe Comet qui se nomme d\u00e9sormais Adobe XD et arrive. Un peu de procrastination en musique, les shapes CSS, un catalogue d\u2019outils postCSS, des exemples d\u2019interface, un nouveau outil de palette de couleur, une galerie d\u2019image qui fonctionne au survol en CSS et un outil de timeline pour github.<\/p>\n

Pour plus de liens chaque matin vous pouvez me suivre sur twitter<\/a>. Bonne lecture :)<\/p>\n

tl;dnr, s’il devait n’en rester qu’un ?<\/h2>\n

#CSS #Media queries<\/p>\n

PX, EM or REM Media Queries?<\/a> utiliser des media queries en px, em ou rem ? Tldnr; les em semblent \u00eatre l\u2019unit\u00e9 qui fonctionne dans le plus de cas<\/p>\n

\"\"<\/p>\n

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

#UX<\/p>\n

Les tests utilisateurs expliqu\u00e9s en une infographie<\/a><\/p>\n

\"\"<\/p>\n

#UX<\/p>\n

Design user research explained for everyone<\/a>, la recherche utilisateur expliqu\u00e9e avec quelques GIFs<\/p>\n

\"\"<\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

#Mobile<\/p>\n

Principles of Mobile App Design: Engage Users and Drive Conversions by Google<\/a><\/p>\n

\"\"<\/p>\n

#Android<\/p>\n

Bottom navigation<\/a>, Android propose une bar de navigation coll\u00e9e en bas de l\u2019\u00e9cran dans ses guidelines material design. Perso je trouve \u00e7a toujours un peu \u00e9trange vu qu\u2019il y a d\u00e9j\u00e0 les boutons syst\u00e8me \u00e0 cet endroit. A voir \u00e0 l\u2019usage<\/p>\n

\"\"<\/p>\n

#Mobile<\/p>\n

Mobile-First eCommerce: What Customers Expect and Value in Mobile Shopping Experiences<\/a>, ce que les clients attendent d\u2019une exp\u00e9rience d\u2019achat sur mobile<\/p>\n

#CSS<\/p>\n

On :not and Specificity <\/a><\/p>\n

De l\u2019inspiration et de jolies id\u00e9es<\/h2>\n

#Workflow<\/p>\n

\u201cPeople are amazed by what designers could once do with their hands\u201d<\/a> un petit retour en arri\u00e8re sur les process de design avant l\u2019invention du num\u00e9rique<\/p>\n

\"\"<\/p>\n

L\u2019actualit\u00e9 webdesign<\/h2>\n

#Tool<\/p>\n

Project Comet is now Adobe XD<\/a>, disponible uniquement sur mac pour le moment :\/<\/p>\n

\"\"<\/p>\n

#Tool<\/p>\n

Affinity Photo<\/a> arrive sur Windows<\/p>\n

\"\"<\/p>\n

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

#CSS<\/p>\n

Get up to speed with CSS shapes<\/a>, les shapes CSS pour faire de jolis effets (un peu comme sur Indesign)<\/p>\n

\"\"<\/p>\n

#CSS #Typography<\/p>\n

Use `rem` for Global Sizing; Use `em` for Local Sizing<\/a> , utiliser des rem pour du global et du em pour du local<\/p>\n

Des ressources utiles, outils et plugins pour vous faciliter la vie<\/h2>\n

#PostCSS<\/p>\n

PostCSS.parts<\/a>, un catalogue de plugins postCSS<\/p>\n

\"\"<\/p>\n

#UI<\/p>\n

uidb.io<\/a> une base de donn\u00e9e d\u2019\u00e9l\u00e9ments d\u2019interfaces \u00e0 travers le web avec une fonction de recherche<\/p>\n

\"\"<\/p>\n

#Colors<\/p>\n

Lolcolors.com<\/a>, de jolies palettes de couleurs pour votre inspiration<\/p>\n

\"\"<\/p>\n

#CSS<\/p>\n

Une librairie CSS qui fait des effets de survol d\u2019image<\/a><\/p>\n

\"\"<\/p>\n

 <\/p>\n

#Github<\/p>\n

Devspace.io<\/a> un outil qui ressemble \u00e0 tweetdeck mais pour avoir des timelines de vos flux github<\/p>\n

\"\"<\/p>\n

Pour le fun: jeux et d\u00e9mos sympas et impressionnantes<\/h2>\n

#SVG<\/p>\n

PROCRASTINATION : une batterie (pour faire de la musique, pas pour charger votre t\u00e9l\u00e9phone) anim\u00e9e avec laquelle vous pourrez jouer en SVG<\/a><\/p>\n

\"\"<\/p>\n","protected":false},"excerpt":{"rendered":"

Ce contenu a \u00e9t\u00e9 r\u00e9dig\u00e9 il y a 9 ans. Il se peut qu’il ne soit plus \u00e0 jour.Comme chaque semaine, \u00a0un condens\u00e9 de mes lectures et ma veille web design et graphisme, exp\u00e9rience utilisateurs, design d’interface et mobilit\u00e9, mais aussi des outils et ressources pour le web design et de l’inspiration en tout genre : illustrations, photos, sites web, etc. Au programme cette semaine : \u00a0les tests utilisateurs expliqu\u00e9s en infographie et l\u2019exp\u00e9rience utilisation expliqu\u00e9e en GIFs, des principes …<\/p>\n","protected":false},"author":3,"featured_media":5117,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"link","meta":{"_acf_changed":false,"footnotes":""},"categories":[105],"tags":[],"class_list":["post-5131","post","type-post","status-publish","format-link","has-post-thumbnail","hentry","category-veille-liens-utiles","post_format-post-format-link"],"yoast_head":"\nLa semaine en pixels \u2013 18 mars 2016 - par St\u00e9phanie Walter - UX Researcher & Designer<\/title>\n<meta name=\"description\" content=\"\u00c0 ne pas manquer : exp\u00e9rience utilisation, principes de design mobile et barre de navigation basse sur Android, sp\u00e9cificit\u00e9s de :not(), meilleure unit\u00e9 pour des media-queries, palette de couleur, galerie d\u2019image au survol et outil de timeline pour github.\" \/>\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\/semaine-pixels-18-mars-2016\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"La semaine en pixels \u2013 18 mars 2016 - par St\u00e9phanie Walter - UX Researcher & Designer\" \/>\n<meta property=\"og:description\" content=\"\u00c0 ne pas manquer : exp\u00e9rience utilisation, principes de design mobile et barre de navigation basse sur Android, sp\u00e9cificit\u00e9s de :not(), meilleure unit\u00e9 pour des media-queries, palette de couleur, galerie d\u2019image au survol et outil de timeline pour github.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/stephaniewalter.design\/fr\/blog\/semaine-pixels-18-mars-2016\/\" \/>\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-03-18T07:33:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2016-03-18T07:42:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2016\/03\/liens-semaine-18mars2016.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\/semaine-pixels-18-mars-2016\/\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/blog\/semaine-pixels-18-mars-2016\/\",\"name\":\"La semaine en pixels \u2013 18 mars 2016 - par St\u00e9phanie Walter - UX Researcher & Designer\",\"isPartOf\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/semaine-pixels-18-mars-2016\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/semaine-pixels-18-mars-2016\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/stephaniewalter.design\/fr\/files\/2016\/03\/liens-semaine-18mars2016.jpg\",\"datePublished\":\"2016-03-18T07:33:00+00:00\",\"dateModified\":\"2016-03-18T07:42:59+00:00\",\"author\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf\"},\"description\":\"\u00c0 ne pas manquer : exp\u00e9rience utilisation, principes de design mobile et barre de navigation basse sur Android, sp\u00e9cificit\u00e9s de :not(), meilleure unit\u00e9 pour des media-queries, palette de couleur, galerie d\u2019image au survol et outil de timeline pour github.\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/stephaniewalter.design\/fr\/blog\/semaine-pixels-18-mars-2016\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/semaine-pixels-18-mars-2016\/#primaryimage\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/files\/2016\/03\/liens-semaine-18mars2016.jpg\",\"contentUrl\":\"https:\/\/stephaniewalter.design\/fr\/files\/2016\/03\/liens-semaine-18mars2016.jpg\",\"width\":850,\"height\":350,\"caption\":\"La semaine en pixels \u2013 18 mars 2016\"},{\"@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\/walterstephanie\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"La semaine en pixels \u2013 18 mars 2016 - par St\u00e9phanie Walter - UX Researcher & Designer","description":"\u00c0 ne pas manquer : exp\u00e9rience utilisation, principes de design mobile et barre de navigation basse sur Android, sp\u00e9cificit\u00e9s de :not(), meilleure unit\u00e9 pour des media-queries, palette de couleur, galerie d\u2019image au survol et outil de timeline pour github.","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\/semaine-pixels-18-mars-2016\/","og_locale":"fr_FR","og_type":"article","og_title":"La semaine en pixels \u2013 18 mars 2016 - par St\u00e9phanie Walter - UX Researcher & Designer","og_description":"\u00c0 ne pas manquer : exp\u00e9rience utilisation, principes de design mobile et barre de navigation basse sur Android, sp\u00e9cificit\u00e9s de :not(), meilleure unit\u00e9 pour des media-queries, palette de couleur, galerie d\u2019image au survol et outil de timeline pour github.","og_url":"https:\/\/stephaniewalter.design\/fr\/blog\/semaine-pixels-18-mars-2016\/","og_site_name":"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.","article_published_time":"2016-03-18T07:33:00+00:00","article_modified_time":"2016-03-18T07:42:59+00:00","og_image":[{"width":850,"height":350,"url":"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2016\/03\/liens-semaine-18mars2016.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\/semaine-pixels-18-mars-2016\/","url":"https:\/\/stephaniewalter.design\/fr\/blog\/semaine-pixels-18-mars-2016\/","name":"La semaine en pixels \u2013 18 mars 2016 - par St\u00e9phanie Walter - UX Researcher & Designer","isPartOf":{"@id":"https:\/\/stephaniewalter.design\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/stephaniewalter.design\/fr\/blog\/semaine-pixels-18-mars-2016\/#primaryimage"},"image":{"@id":"https:\/\/stephaniewalter.design\/fr\/blog\/semaine-pixels-18-mars-2016\/#primaryimage"},"thumbnailUrl":"https:\/\/stephaniewalter.design\/fr\/files\/2016\/03\/liens-semaine-18mars2016.jpg","datePublished":"2016-03-18T07:33:00+00:00","dateModified":"2016-03-18T07:42:59+00:00","author":{"@id":"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf"},"description":"\u00c0 ne pas manquer : exp\u00e9rience utilisation, principes de design mobile et barre de navigation basse sur Android, sp\u00e9cificit\u00e9s de :not(), meilleure unit\u00e9 pour des media-queries, palette de couleur, galerie d\u2019image au survol et outil de timeline pour github.","inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/stephaniewalter.design\/fr\/blog\/semaine-pixels-18-mars-2016\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/stephaniewalter.design\/fr\/blog\/semaine-pixels-18-mars-2016\/#primaryimage","url":"https:\/\/stephaniewalter.design\/fr\/files\/2016\/03\/liens-semaine-18mars2016.jpg","contentUrl":"https:\/\/stephaniewalter.design\/fr\/files\/2016\/03\/liens-semaine-18mars2016.jpg","width":850,"height":350,"caption":"La semaine en pixels \u2013 18 mars 2016"},{"@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\/walterstephanie"]}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts\/5131","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=5131"}],"version-history":[{"count":0,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts\/5131\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/media\/5117"}],"wp:attachment":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/media?parent=5131"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/categories?post=5131"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/tags?post=5131"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}