{"id":5026,"date":"2016-02-19T08:01:55","date_gmt":"2016-02-19T07:01:55","guid":{"rendered":"http:\/\/blog.stephaniewalter.fr\/?p=5026"},"modified":"2016-02-19T10:07:53","modified_gmt":"2016-02-19T09:07:53","slug":"la-semaine-en-pixels-19-fevrier-2016","status":"publish","type":"post","link":"https:\/\/stephaniewalter.design\/fr\/blog\/la-semaine-en-pixels-19-fevrier-2016\/","title":{"rendered":"La semaine en pixels \u2013 19 f\u00e9vrier 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 : red\u00e9finition de nos m\u00e9tiers de webdesigner\/ front-end designer ?, performance web, choix de police d’\u00e9criture, micro-interactions et animations, exp\u00e9rience utilisateur, wireframes et\u00a0workflow responsive \u00e0 base de\u00a0priorisation du contenu \u00e0 diff\u00e9rentes tailles de navigateur\u00a0et\u00a0des webapps dont les\u00a0fonctionnalit\u00e9s se rapprochent du natif. Du c\u00f4t\u00e9 des outils, d\u00e9tection de l’input, explications de certaines propri\u00e9t\u00e9s HTML\/CSS qui semblent \u00e9tranges,\u00a0g\u00e9n\u00e9rateur de notifications, outil d’animation et g\u00e9n\u00e9rateur de style guide HTML.<\/p>\n

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

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

#Design #D\u00e9veloppement<\/p>\n

Front End Design<\/a>, par Brad Frost. AMEN. \u201cHere\u2019s the thing: HTML, CSS, and presentational JavaScript build user interfaces \u2013 yes, the same user interfaces that those designers are meticulously crafting in tools like Photoshop and Sketch. In order for teams to build successful user interface design systems together, it\u2019s crucial to treat frontend development as a core part of the design process.\u201d<\/p>\n

\"\"<\/p>\n

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

#SVG #Color<\/p>\n

Le filtre SVG feColorMatrix<\/a> expliqu\u00e9 dans ses moindres d\u00e9tails<\/p>\n

\"\"<\/p>\n

#CSS<\/p>\n

Lecture tr\u00e8s int\u00e9ressante : The future of loading CSS <\/a>(le futur du chargement du CSS)<\/p>\n

\"\"<\/p>\n

#Performance<\/p>\n

How slow is too slow in 2016?<\/a> \u00e0 quel point votre site est-il lent compar\u00e9 aux autres, quelques statistiques et bonnes pratiques<\/p>\n

\"\"<\/p>\n

#Performance #Web Apps<\/p>\n

Designing faster web apps<\/a>, de l\u2019optimisation de code \u00e0 la perception de performance, des conseils pour acc\u00e9l\u00e9rer vos web apps<\/p>\n

\"\"<\/p>\n

#Typeface<\/p>\n

Choosing and pairing typefaces for cookbooks<\/a>, choisir des polices d\u2019\u00e9criture pour un livre de cuisine<\/p>\n

\"\"<\/p>\n

#Design<\/p>\n

Methods for Using Micro-Interactions on Your Site<\/a>, designer les micro-interactions, ces petits moments souvent oubli\u00e9s<\/p>\n

\"\"<\/p>\n

#Design #Motion<\/p>\n

Motion with Meaning: Semantic Animation in Interface Design<\/a>, un excellent article sur l\u2019importance des animations dans le design d\u2019interface et surtout comment les rendre coh\u00e9rentes pour cr\u00e9er une exp\u00e9rience globale<\/p>\n

\"\"<\/p>\n

#UX<\/p>\n

This is what great UX looks like. (Episode 1)<\/a> quelques exemples d\u2019une excellente exp\u00e9rience utilisateur<\/p>\n

\"\"<\/p>\n

#Responsive<\/p>\n

Creating Content Wireframes For Responsive Design<\/a>, je suis ravie de voir que je ne suis pas la seule \u00e0 faire des inventaires de contenus pour les prioriser (pourtant c\u2019est difficile de faire comprendre ce besoin aux personnes que je forme souvent) et travailler sur Illustrator pour les wireframes responsive. Et pour rester dans le sujet : Wireframe in content blocks<\/a>.<\/p>\n

\"\"<\/p>\n

#Design<\/p>\n

Quelques conseils sur le processus de design pour les d\u00e9butants : How To Design The Best Blog Graphics With Free Tools And Design Theory<\/a><\/p>\n

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

#Responsive<\/p>\n

Responsive web design: What the Internet looks like in 2016<\/a>, une petite analyse de quelques tendances de sites responsive<\/p>\n

\"\"<\/p>\n

#Blog #Livestyle<\/p>\n

deeez.fr<\/a> le blog de deux copains qui va tuer votre compte en banque<\/p>\n

\"\"<\/p>\n

#WebApp<\/p>\n

De bons exemples de \u201c Progressive Web Apps<\/a> \u201c, des sites que vous pouvez \u201c installer \u201c sur votre \u00e9cran d\u2019accueil comme des vrais apps<\/p>\n

\"\"<\/p>\n

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

#Responsive<\/p>\n

Responsive Web Design Workflow<\/a>, un workshop en ligne avec Stephen Hay<\/p>\n

\"\"<\/p>\n

#CSS #Email<\/p>\n

The Fab Four technique to create Responsive Emails without Media Queries<\/a>, \u00a0une solution d\u2019emails responsive sans media-queries qui utilise \u00a0calc(), width min-width et max-width<\/p>\n

\"\"<\/p>\n

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

#Animations<\/p>\n

Spiritjs.io<\/a> le petit fant\u00f4me le plus choupi du jour (et l’outil a l’air prometteur)<\/p>\n

\"\"<\/p>\n

#HTML #CSS<\/p>\n

wtfhtmlcss.com<\/a> le pourquoi du comment certaines propri\u00e9t\u00e9s HTML et CSS semblent fonctionner de mani\u00e8re \u00e9trange<\/p>\n

\"\"<\/p>\n

#Notification<\/p>\n

Un g\u00e9n\u00e9rateur de notifications<\/a> pour les tester sur Chrome<\/p>\n

\"\"<\/p>\n

#Styleguide<\/p>\n

Pratique : Poor man’s style guide<\/a>, un styleguide HTML \u00e0 copier dans vos projets pour \u00eatre sure d\u2019avoir tous les \u00e9l\u00e9ment dont vous aurez besoin<\/p>\n

\"\"<\/p>\n

#Mouse #Touch<\/p>\n

What-input<\/a>, une librarie JS pour d\u00e9tecter la m\u00e9thode de saisie de l\u2019utilisateur (souris, clavier, touch)<\/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 : red\u00e9finition de nos m\u00e9tiers de webdesigner\/ front-end designer ?, performance web, choix de police …<\/p>\n","protected":false},"author":3,"featured_media":5019,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"link","meta":{"_acf_changed":false,"footnotes":""},"categories":[105],"tags":[],"class_list":["post-5026","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 19 f\u00e9vrier 2016 - par St\u00e9phanie Walter - UX Researcher & Designer<\/title>\n<meta name=\"description\" content=\"A ne pas manquer :\u00a0performance web, micro-interactions et animations, wireframes et\u00a0workflow responsive, priorisation de\u00a0contenu, webapps, g\u00e9n\u00e9rateur de notifications, outil d'animation et style guide HTML.\" \/>\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\/la-semaine-en-pixels-19-fevrier-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 19 f\u00e9vrier 2016 - par St\u00e9phanie Walter - UX Researcher & Designer\" \/>\n<meta property=\"og:description\" content=\"A ne pas manquer :\u00a0performance web, micro-interactions et animations, wireframes et\u00a0workflow responsive, priorisation de\u00a0contenu, webapps, g\u00e9n\u00e9rateur de notifications, outil d'animation et style guide HTML.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/stephaniewalter.design\/fr\/blog\/la-semaine-en-pixels-19-fevrier-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-02-19T07:01:55+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2016-02-19T09:07:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2016\/02\/liensemaine-19fev.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-19-fevrier-2016\/\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/blog\/la-semaine-en-pixels-19-fevrier-2016\/\",\"name\":\"La semaine en pixels \u2013 19 f\u00e9vrier 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-19-fevrier-2016\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/la-semaine-en-pixels-19-fevrier-2016\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/stephaniewalter.design\/fr\/files\/2016\/02\/liensemaine-19fev.jpg\",\"datePublished\":\"2016-02-19T07:01:55+00:00\",\"dateModified\":\"2016-02-19T09:07:53+00:00\",\"author\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf\"},\"description\":\"A ne pas manquer :\u00a0performance web, micro-interactions et animations, wireframes et\u00a0workflow responsive, priorisation de\u00a0contenu, webapps, g\u00e9n\u00e9rateur de notifications, outil d'animation et style guide HTML.\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/stephaniewalter.design\/fr\/blog\/la-semaine-en-pixels-19-fevrier-2016\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/la-semaine-en-pixels-19-fevrier-2016\/#primaryimage\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/files\/2016\/02\/liensemaine-19fev.jpg\",\"contentUrl\":\"https:\/\/stephaniewalter.design\/fr\/files\/2016\/02\/liensemaine-19fev.jpg\",\"width\":850,\"height\":350},{\"@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 19 f\u00e9vrier 2016 - par St\u00e9phanie Walter - UX Researcher & Designer","description":"A ne pas manquer :\u00a0performance web, micro-interactions et animations, wireframes et\u00a0workflow responsive, priorisation de\u00a0contenu, webapps, g\u00e9n\u00e9rateur de notifications, outil d'animation et style guide HTML.","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-19-fevrier-2016\/","og_locale":"fr_FR","og_type":"article","og_title":"La semaine en pixels \u2013 19 f\u00e9vrier 2016 - par St\u00e9phanie Walter - UX Researcher & Designer","og_description":"A ne pas manquer :\u00a0performance web, micro-interactions et animations, wireframes et\u00a0workflow responsive, priorisation de\u00a0contenu, webapps, g\u00e9n\u00e9rateur de notifications, outil d'animation et style guide HTML.","og_url":"https:\/\/stephaniewalter.design\/fr\/blog\/la-semaine-en-pixels-19-fevrier-2016\/","og_site_name":"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.","article_published_time":"2016-02-19T07:01:55+00:00","article_modified_time":"2016-02-19T09:07:53+00:00","og_image":[{"width":850,"height":350,"url":"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2016\/02\/liensemaine-19fev.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-19-fevrier-2016\/","url":"https:\/\/stephaniewalter.design\/fr\/blog\/la-semaine-en-pixels-19-fevrier-2016\/","name":"La semaine en pixels \u2013 19 f\u00e9vrier 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-19-fevrier-2016\/#primaryimage"},"image":{"@id":"https:\/\/stephaniewalter.design\/fr\/blog\/la-semaine-en-pixels-19-fevrier-2016\/#primaryimage"},"thumbnailUrl":"https:\/\/stephaniewalter.design\/fr\/files\/2016\/02\/liensemaine-19fev.jpg","datePublished":"2016-02-19T07:01:55+00:00","dateModified":"2016-02-19T09:07:53+00:00","author":{"@id":"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf"},"description":"A ne pas manquer :\u00a0performance web, micro-interactions et animations, wireframes et\u00a0workflow responsive, priorisation de\u00a0contenu, webapps, g\u00e9n\u00e9rateur de notifications, outil d'animation et style guide HTML.","inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/stephaniewalter.design\/fr\/blog\/la-semaine-en-pixels-19-fevrier-2016\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/stephaniewalter.design\/fr\/blog\/la-semaine-en-pixels-19-fevrier-2016\/#primaryimage","url":"https:\/\/stephaniewalter.design\/fr\/files\/2016\/02\/liensemaine-19fev.jpg","contentUrl":"https:\/\/stephaniewalter.design\/fr\/files\/2016\/02\/liensemaine-19fev.jpg","width":850,"height":350},{"@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\/5026","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=5026"}],"version-history":[{"count":0,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts\/5026\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/media\/5019"}],"wp:attachment":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/media?parent=5026"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/categories?post=5026"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/tags?post=5026"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}