{"id":5061,"date":"2016-03-04T08:26:11","date_gmt":"2016-03-04T07:26:11","guid":{"rendered":"http:\/\/blog.stephaniewalter.fr\/?p=5061"},"modified":"2016-03-04T09:26:53","modified_gmt":"2016-03-04T08:26:53","slug":"la-semaine-en-pixels-4-mars-2016","status":"publish","type":"post","link":"https:\/\/stephaniewalter.design\/fr\/blog\/la-semaine-en-pixels-4-mars-2016\/","title":{"rendered":"La semaine en pixels \u2013 4 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 : rythme vertical, moodboard, interfaces mobile, performance web, animations CSS3 et futur du web dans le navigateur mobile, des jolies photos, des tutoriels et astuces CSS (object-fit, etc.), un petit rappel sur les densit\u00e9s d’\u00e9cran et une astuce pour cr\u00e9er une palette de couleur. Du c\u00f4t\u00e9 des outils, du prototypage, de la navigation responsive, un \u00e9diteur CSS, du burger menu anim\u00e9 et des filtres CSS. Ne manquez pas le d\u00e9mineur dans le navigateur si vous voulez tuer votre productivit\u00e9 du vendredi.<\/p>\n

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

Conf\u00e9rences<\/h2>\n

Le futur du web dans le navigateur mobile ? \u2013 Confoo 2016<\/a>, ma conf\u00e9rence sur tout ce que l’on pourra (et peu d\u00e9j\u00e0 faire) dans un futur plus ou moins proche dans les navigateurs mobiles.<\/p>\n

\"Le<\/p>\n

Am\u00e9liorer l\u2019exp\u00e9rience utilisateur gr\u00e2ce aux animations CSS3 \u2013 Confoo 2016<\/a>\u00a0exemples et cas concrets d’animations CSS.<\/p>\n

\"Am\u00e9liorer<\/p>\n

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

#Burger Menu<\/p>\n

Tasty CSS-animated hamburgers<\/a>, des menus burger anim\u00e9s pour votre inspiration\"\"<\/p>\n

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

#Moodboard<\/p>\n

How to mood board<\/a>, comment et pourquoi cr\u00e9er un moodboard<\/p>\n

\"\"<\/p>\n

#CSS<\/p>\n

Why is Vertical Rhythm an Important Typography Practice?<\/a>, ou pourquoi le rythme vertical c\u2019est important<\/p>\n

\"\"<\/p>\n

#Mobile<\/p>\n

Empty State: Mobile App \u201cNice-to-Have\u201d Essential<\/a>, un petit article sur le design d\u2019\u00e9l\u00e9ments \u201cvides\u201d dans les interfaces mobiles<\/p>\n

\"\"<\/p>\n

#Performance<\/p>\n

Performance is a feature<\/a>, trop souvent la performance est trait\u00e9 comme une fonctionne sympa \u00e0 ajouter en fin de projet l\u00e0 o\u00f9 il faudrait la pr\u00e9voir d\u00e8s le d\u00e9but.<\/p>\n

\"\"<\/p>\n

#UX<\/p>\n

Users always choose the path of least resistance<\/a>, les utilisateurs sont fain\u00e9ants par nature, si vous voulez que votre produit fasse la diff\u00e9rence, rendez le facile d\u2019utilisateur<\/p>\n

\"\"<\/p>\n

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

#Photos<\/p>\n

Food of the rainbow<\/a>, \u00e9trangement \u00e7a ne me donne pas vraiment faim<\/p>\n

\"\"<\/p>\n

#Photos<\/p>\n

Just two horns ? Pathetic<\/a> et d\u2019autres images fun \u00e0 base de figurines en plastique. Si vous voulez toute la collection c\u2019est par ici et c\u2019est Aled Lewi qui fait \u00e7a<\/a>.<\/p>\n

\"\"<\/p>\n

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

#Icon #SVG<\/p>\n

GitHub.com ne propose plus ses ic\u00f4nes via font-icon mais est pass\u00e9 au SVG.<\/a><\/p>\n

\"\"<\/p>\n

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

#CSS<\/p>\n

Quelques astuces CSS<\/a><\/p>\n

\"\"<\/p>\n

#CSS<\/p>\n

Pratique pour g\u00e9rer les images responsive par exemple : A Quick Overview of `object-fit` and `object-position`<\/a><\/p>\n

\"\"<\/p>\n

#Design #Color<\/p>\n

A Simple Trick For Creating Color Palettes Quickly<\/a>, un petit tutoriel pour cr\u00e9er facilement des palettes de couleur<\/p>\n

\"\"<\/p>\n

#Design #DPI<\/p>\n

Le Designer’s guide to DPI<\/a> par @KounterB<\/a> a \u00e9t\u00e9 mis \u00e0 jours<\/p>\n

\"\"<\/p>\n

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

#Prototyping<\/p>\n

Ow \u00e7a c\u2019est impressionnant, du prototypage cliquable directement dans Sketch : Unlock Prototyping Capabilities Right Within Sketch With Silver<\/a><\/p>\n

\"\"<\/p>\n

#Navigation<\/p>\n

okayNav<\/a> un petit script pour cr\u00e9er une navigation dont les \u00e9l\u00e9ments disparaissent en fonction de la taille de l\u2019\u00e9cran<\/p>\n

\"\"<\/p>\n

#CSS<\/p>\n

LiveStyle<\/a>, un \u00e9diteur qui te permet de faire de la modification bidirectionnelle de LESS et SCSS<\/p>\n

\"\"<\/p>\n

#CSS #Filtres<\/p>\n

Au cas o\u00f9 vous n\u2019auriez toujours pas compris que l\u2019on peut faire des filtres sur des photos en CSS :\u00a0www.cssco.co<\/a>\u00a0;)<\/p>\n

\"\"<\/p>\n

 <\/p>\n

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

#Animations #Demos<\/p>\n

Animated Icons with mo.js<\/a>, des d\u00e9mos funs<\/p>\n

\"\"<\/p>\n

#Animation<\/p>\n

Mreouw, SVG Animated Low Poly Tiger<\/a><\/p>\n

\"\"<\/p>\n

#Jeu<\/p>\n

Minefield<\/a>, un jeu de d\u00e9mineur multijoueur en HTML5<\/p>\n

\"\"<\/p>\n

#UX<\/p>\n

shittyuiuxanalogies.tumblr.com<\/a>, tout est dans l\u2019URL<\/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 : rythme vertical, moodboard, interfaces mobile, performance web, animations CSS3 et futur du web dans …<\/p>\n","protected":false},"author":3,"featured_media":5071,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"link","meta":{"_acf_changed":false,"footnotes":""},"categories":[105],"tags":[],"class_list":["post-5061","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 4 mars 2016 - 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=\"\u00a0A ne pas manquer :\u00a0 rythme vertical, performance web, CSS object-fit, etc., rappel sur les densit\u00e9s d'\u00e9cran,\u00a0astuce pour cr\u00e9er une palette de couleur, navigation responsive, burger menu anim\u00e9 et filtres CSS.\u00a0\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=_-2523.html \/>\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 4 mars 2016 - par St\u00e9phanie Walter - UX Researcher & Designer\" \/>\n<meta property=\"og:description\" content=\"\u00a0A ne pas manquer :\u00a0 rythme vertical, performance web, CSS object-fit, etc., rappel sur les densit\u00e9s d'\u00e9cran,\u00a0astuce pour cr\u00e9er une palette de couleur, navigation responsive, burger menu anim\u00e9 et filtres CSS.\u00a0\" \/>\n<meta property=\"og:url\" content=\"https:\/\/stephaniewalter.design\/fr\/blog\/la-semaine-en-pixels-4-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-04T07:26:11+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2016-03-04T08:26:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2016\/03\/liensemaine-4av.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\/la-semaine-en-pixels-4-mars-2016\/\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/blog\/la-semaine-en-pixels-4-mars-2016\/\",\"name\":\"La semaine en pixels \u2013 4 mars 2016 - par St\u00e9phanie Walter - UX Researcher & Designer\",\"isPartOf\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/la-semaine-en-pixels-4-mars-2016\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/la-semaine-en-pixels-4-mars-2016\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/stephaniewalter.design\/fr\/files\/2016\/03\/liensemaine-4av.jpg\",\"datePublished\":\"2016-03-04T07:26:11+00:00\",\"dateModified\":\"2016-03-04T08:26:53+00:00\",\"author\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf\"},\"description\":\"\u00a0A ne pas manquer :\u00a0 rythme vertical, performance web, CSS object-fit, etc., rappel sur les densit\u00e9s d'\u00e9cran,\u00a0astuce pour cr\u00e9er une palette de couleur, navigation responsive, burger menu anim\u00e9 et filtres CSS.\u00a0\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/stephaniewalter.design\/fr\/blog\/la-semaine-en-pixels-4-mars-2016\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/la-semaine-en-pixels-4-mars-2016\/#primaryimage\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/files\/2016\/03\/liensemaine-4av.jpg\",\"contentUrl\":\"https:\/\/stephaniewalter.design\/fr\/files\/2016\/03\/liensemaine-4av.jpg\",\"width\":850,\"height\":350,\"caption\":\"La semaine en pixels \u2013 4 avril 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\":\"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":"La semaine en pixels \u2013 4 mars 2016 - par St\u00e9phanie Walter - UX Researcher & Designer","description":"\u00a0A ne pas manquer :\u00a0 rythme vertical, performance web, CSS object-fit, etc., rappel sur les densit\u00e9s d'\u00e9cran,\u00a0astuce pour cr\u00e9er une palette de couleur, navigation responsive, burger menu anim\u00e9 et filtres CSS.\u00a0","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\/la-semaine-en-pixels-4-mars-2016\/","og_locale":"fr_FR","og_type":"article","og_title":"La semaine en pixels \u2013 4 mars 2016 - par St\u00e9phanie Walter - UX Researcher & Designer","og_description":"\u00a0A ne pas manquer :\u00a0 rythme vertical, performance web, CSS object-fit, etc., rappel sur les densit\u00e9s d'\u00e9cran,\u00a0astuce pour cr\u00e9er une palette de couleur, navigation responsive, burger menu anim\u00e9 et filtres CSS.\u00a0","og_url":"https:\/\/stephaniewalter.design\/fr\/blog\/la-semaine-en-pixels-4-mars-2016\/","og_site_name":"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.","article_published_time":"2016-03-04T07:26:11+00:00","article_modified_time":"2016-03-04T08:26:53+00:00","og_image":[{"width":850,"height":350,"url":"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2016\/03\/liensemaine-4av.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\/la-semaine-en-pixels-4-mars-2016\/","url":"https:\/\/stephaniewalter.design\/fr\/blog\/la-semaine-en-pixels-4-mars-2016\/","name":"La semaine en pixels \u2013 4 mars 2016 - par St\u00e9phanie Walter - UX Researcher & Designer","isPartOf":{"@id":"https:\/\/stephaniewalter.design\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/stephaniewalter.design\/fr\/blog\/la-semaine-en-pixels-4-mars-2016\/#primaryimage"},"image":{"@id":"https:\/\/stephaniewalter.design\/fr\/blog\/la-semaine-en-pixels-4-mars-2016\/#primaryimage"},"thumbnailUrl":"https:\/\/stephaniewalter.design\/fr\/files\/2016\/03\/liensemaine-4av.jpg","datePublished":"2016-03-04T07:26:11+00:00","dateModified":"2016-03-04T08:26:53+00:00","author":{"@id":"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf"},"description":"\u00a0A ne pas manquer :\u00a0 rythme vertical, performance web, CSS object-fit, etc., rappel sur les densit\u00e9s d'\u00e9cran,\u00a0astuce pour cr\u00e9er une palette de couleur, navigation responsive, burger menu anim\u00e9 et filtres CSS.\u00a0","inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/stephaniewalter.design\/fr\/blog\/la-semaine-en-pixels-4-mars-2016\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/stephaniewalter.design\/fr\/blog\/la-semaine-en-pixels-4-mars-2016\/#primaryimage","url":"https:\/\/stephaniewalter.design\/fr\/files\/2016\/03\/liensemaine-4av.jpg","contentUrl":"https:\/\/stephaniewalter.design\/fr\/files\/2016\/03\/liensemaine-4av.jpg","width":850,"height":350,"caption":"La semaine en pixels \u2013 4 avril 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":"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\/5061"}],"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=5061"}],"version-history":[{"count":0,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts\/5061\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/media\/5071"}],"wp:attachment":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/media?parent=5061"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/categories?post=5061"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/tags?post=5061"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}