{"id":5648,"date":"2016-08-19T08:49:33","date_gmt":"2016-08-19T06:49:33","guid":{"rendered":"http:\/\/blog.stephaniewalter.fr\/?p=5648"},"modified":"2016-08-19T08:49:33","modified_gmt":"2016-08-19T06:49:33","slug":"semaine-pixels-19-aout-2016","status":"publish","type":"post","link":"https:\/\/stephaniewalter.design\/fr\/blog\/semaine-pixels-19-aout-2016\/","title":{"rendered":"La semaine en pixels \u2013 19 ao\u00fbt 2016"},"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>

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 : design, performance et tutoriels pour cr\u00e9er des progressive web apps, de la jolie typographie, quelques tutoriels CSS (writing-mode, cr\u00e9ation d’un langage), les principes du design centr\u00e9 utilisateur, manipulation, exp\u00e9rience utilisateur et wireframes, animations CSS et comment les communiquer au d\u00e9velopeur et les rendre fluides. Des tatouages et des illustrations du c\u00f4t\u00e9 de l’inspiration, un ours pour contr\u00f4ler vos appareils \u00e0 distance et un autre ours pour vous fournir des articles sur l’UX du c\u00f4t\u00e9 des outils ainsi qu’une petite librairie d’animation au scroll et des ic\u00f4nes SVG.<\/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

#PWA<\/p>\n

Designing Responsive Progressive Web Apps<\/a>, une excellente lecture sur les challenges non techniques qu\u2019il va falloir r\u00e9soudre quand on commence \u00e0 s\u2019interesser aux PWAs.<\/p>\n

\"\"<\/p>\n

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

#Typography<\/p>\n

How to hack beautiful flourishes into your font<\/a>, petit hack typo pour avoir de jolies lettres, ligatures sur le web<\/p>\n

\"\"<\/p>\n

#CSS<\/p>\n

CSS writing-mode<\/a>, pour changer le sens d\u2019\u00e9critur en fonction de la langue<\/p>\n

\"\"<\/p>\n

#Design<\/p>\n

Human Centered Design & The 6 Fundamental Principles of Interaction Between Products and Users<\/a>, les 6 principes fondamentaux pour une interaction entre le produit et les utilisateurs<\/p>\n

\"\"<\/p>\n

#Wireframes<\/p>\n

Wireframes are waste<\/a>, les wireframes utilis\u00e9s comme outil de validation avec des clients peuvent rapidement mener \u00e0 la catastrophe, mais ce sont d\u2019excellents outils de communication avec les d\u00e9veloppeurs et d\u2019autres designers<\/p>\n

\"\"<\/p>\n

#Design<\/p>\n

Is it ever okay for designers to manipulate people?<\/a> manipuler les utilisateurs, dans quels cas est-ce acceptable ? D\u2019apr\u00e8s l\u2019auteur, lorsqu\u2019on les aide \u00e0 aller dans une direction choisie mais que leur cerveau reptilien les ralentis, mais pas pour les forcer \u00e0 faire quelque chose qu\u2019ils n\u2019ont pas envie de faire<\/p>\n

\"\"<\/p>\n

#PWA<\/p>\n

Offline Storage for Progressive Web Apps<\/a>, du stockage offline pour les Progressive Web Apps<\/p>\n

\"P\"<\/p>\n

#Animations<\/p>\n

Communicating Animation<\/a>, communiquer un langage d\u2019animations coh\u00e9rent entre les diff\u00e9rents membres d\u2019une \u00e9quipe<\/p>\n

\"\"<\/p>\n

#Illustration<\/p>\n

Product Vs. Marketing Illustration<\/a>, le langage des illustrations appliqu\u00e9 de mani\u00e8re diff\u00e9rente entre le marketing et le produit<\/p>\n

\"\"<\/p>\n

#Design<\/p>\n

Anatomy of a pattern in a pattern library<\/a><\/p>\n

\"\"<\/p>\n

#Animations<\/p>\n

Smooth as Butter: Achieving 60 FPS Animations with CSS3<\/a>, des conseils pour des animations fluides<\/p>\n

\"\"<\/p>\n

#Photoshop<\/p>\n

Photoshop Etiquette For Responsive Web Design<\/a>, utiliser Photoshop pour le responsive, quelques conseils<\/p>\n

\"\"<\/p>\n

#Photo #Psychologie<\/p>\n

Top 10 Profile Photo and Portrait Hacks Based on Science<\/a>, 10 conseils bas\u00e9s sur des \u00e9tudes psychologiques pour optimiser les photos sur les sites<\/p>\n

\"\"<\/p>\n

#UX<\/p>\n

Enterprise UX Case Study: Improving Usability Under Tight Deadlines<\/a>, un case study sur l\u2019am\u00e9lioration de l’exp\u00e9rience utilisateur d\u2019un produit avec une deadline courte<\/p>\n

\"\"<\/p>\n

#CSS<\/p>\n

You can kinda invent your own weird design language with attributes and attribute selectors<\/a>, faire son propre langage, pourquoi pas, attention \u00e0 la maintenabilit\u00e9<\/p>\n

\"\"<\/p>\n

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

#Illustration<\/p>\n

Hi! My name is Vicki and I want to help empower girls and women through art!<\/a><\/p>\n

\"\"<\/p>\n

#Graphic Design<\/p>\n

Graphicmeans.com<\/a>, l\u2019histoire du graphisme dans une courte vid\u00e9o<\/p>\n

\"\"<\/p>\n

#Tatouage<\/p>\n

okanuckun<\/a>, mon tatoueur pr\u00e9f\u00e9r\u00e9 du moment :)<\/p>\n

\"\"<\/p>\n

#Mignon #Remote<\/p>\n

Un petit ours pour contr\u00f4ler \u00e0 distance vos appareils<\/a><\/p>\n

\"\"<\/p>\n

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

#Edge #Notifications<\/p>\n

Edge integrates a site\u2019s web notifications into Windows 10\u2019s Action Center<\/a>, les notifications web de Edge arrivent dans le notification center de Win 10<\/p>\n

\"\"<\/p>\n

#concours<\/p>\n

a-k-apart.com<\/a> une initiative pour construire un projet de site fonctionnel, qui charge moins de 10k de ressources et fonctionne sans JavaScript<\/p>\n

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

#PWA<\/p>\n

A Beginner\u2019s Guide To Progressive Web Apps<\/a>, un guide pas \u00e0 pas pour construire une Progressive Web App<\/p>\n

\"\"<\/p>\n

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

#Mobile<\/p>\n

W3C mobile checker (alpha)<\/a><\/p>\n

\"\"<\/p>\n

#UX<\/p>\n

Introducing the UX Bear<\/a>, une interface conversationnelle qui va vous proposer des articles sur l\u2019UX<\/p>\n

\"\"<\/p>\n

#JS<\/p>\n

scrollanim.kissui.io<\/a>, une librairie pour faire des animations au scroll en JS, attention \u00e0 ne pas en abuser<\/p>\n

\"\"<\/p>\n

#A11y<\/p>\n

A free online course for building accessible Web Applications<\/a>, un cours gratuit en ligne pour construire des web apps accessibles<\/p>\n

\"\"<\/p>\n

#SVG<\/p>\n

Bytesize<\/a>, un petit jeu d\u2019ic\u00f4nes en SVG<\/p>\n

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

Ce contenu a \u00e9t\u00e9 r\u00e9dig\u00e9 il y a 8 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 : design, performance et tutoriels pour cr\u00e9er des progressive web apps, de la jolie typographie, quelques tutoriels …<\/p>\n","protected":false},"author":3,"featured_media":5643,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"link","meta":{"_acf_changed":false,"footnotes":""},"categories":[105],"tags":[],"class_list":["post-5648","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 ao\u00fbt 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=\"Design, performance et tutoriels pour cr\u00e9er des progressive web apps, principes du design centr\u00e9 utilisateur, manipulation, exp\u00e9rience utilisateur et wireframes, communication et fluidit\u00e9 des animations CSS, ic\u00f4nes SVG et librairie d'animation au scroll.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=_-2288.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 19 ao\u00fbt 2016 - par St\u00e9phanie Walter - UX Researcher & Designer\" \/>\n<meta property=\"og:description\" content=\"Design, performance et tutoriels pour cr\u00e9er des progressive web apps, principes du design centr\u00e9 utilisateur, manipulation, exp\u00e9rience utilisateur et wireframes, communication et fluidit\u00e9 des animations CSS, ic\u00f4nes SVG et librairie d'animation au scroll.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/stephaniewalter.design\/fr\/blog\/semaine-pixels-19-aout-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-08-19T06:49:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2016\/08\/liens-semaine-19-aout.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=\"4 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-19-aout-2016\/\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/blog\/semaine-pixels-19-aout-2016\/\",\"name\":\"La semaine en pixels \u2013 19 ao\u00fbt 2016 - par St\u00e9phanie Walter - UX Researcher & Designer\",\"isPartOf\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/semaine-pixels-19-aout-2016\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/semaine-pixels-19-aout-2016\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/stephaniewalter.design\/fr\/files\/2016\/08\/liens-semaine-19-aout.jpg\",\"datePublished\":\"2016-08-19T06:49:33+00:00\",\"dateModified\":\"2016-08-19T06:49:33+00:00\",\"author\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf\"},\"description\":\"Design, performance et tutoriels pour cr\u00e9er des progressive web apps, principes du design centr\u00e9 utilisateur, manipulation, exp\u00e9rience utilisateur et wireframes, communication et fluidit\u00e9 des animations CSS, ic\u00f4nes SVG et librairie d'animation au scroll.\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/stephaniewalter.design\/fr\/blog\/semaine-pixels-19-aout-2016\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/semaine-pixels-19-aout-2016\/#primaryimage\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/files\/2016\/08\/liens-semaine-19-aout.jpg\",\"contentUrl\":\"https:\/\/stephaniewalter.design\/fr\/files\/2016\/08\/liens-semaine-19-aout.jpg\",\"width\":850,\"height\":350,\"caption\":\"La semaine en pixels \u2013 19 ao\u00fbt 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 19 ao\u00fbt 2016 - par St\u00e9phanie Walter - UX Researcher & Designer","description":"Design, performance et tutoriels pour cr\u00e9er des progressive web apps, principes du design centr\u00e9 utilisateur, manipulation, exp\u00e9rience utilisateur et wireframes, communication et fluidit\u00e9 des animations CSS, ic\u00f4nes SVG et librairie d'animation au scroll.","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-19-aout-2016\/","og_locale":"fr_FR","og_type":"article","og_title":"La semaine en pixels \u2013 19 ao\u00fbt 2016 - par St\u00e9phanie Walter - UX Researcher & Designer","og_description":"Design, performance et tutoriels pour cr\u00e9er des progressive web apps, principes du design centr\u00e9 utilisateur, manipulation, exp\u00e9rience utilisateur et wireframes, communication et fluidit\u00e9 des animations CSS, ic\u00f4nes SVG et librairie d'animation au scroll.","og_url":"https:\/\/stephaniewalter.design\/fr\/blog\/semaine-pixels-19-aout-2016\/","og_site_name":"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.","article_published_time":"2016-08-19T06:49:33+00:00","og_image":[{"width":850,"height":350,"url":"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2016\/08\/liens-semaine-19-aout.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":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/stephaniewalter.design\/fr\/blog\/semaine-pixels-19-aout-2016\/","url":"https:\/\/stephaniewalter.design\/fr\/blog\/semaine-pixels-19-aout-2016\/","name":"La semaine en pixels \u2013 19 ao\u00fbt 2016 - par St\u00e9phanie Walter - UX Researcher & Designer","isPartOf":{"@id":"https:\/\/stephaniewalter.design\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/stephaniewalter.design\/fr\/blog\/semaine-pixels-19-aout-2016\/#primaryimage"},"image":{"@id":"https:\/\/stephaniewalter.design\/fr\/blog\/semaine-pixels-19-aout-2016\/#primaryimage"},"thumbnailUrl":"https:\/\/stephaniewalter.design\/fr\/files\/2016\/08\/liens-semaine-19-aout.jpg","datePublished":"2016-08-19T06:49:33+00:00","dateModified":"2016-08-19T06:49:33+00:00","author":{"@id":"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf"},"description":"Design, performance et tutoriels pour cr\u00e9er des progressive web apps, principes du design centr\u00e9 utilisateur, manipulation, exp\u00e9rience utilisateur et wireframes, communication et fluidit\u00e9 des animations CSS, ic\u00f4nes SVG et librairie d'animation au scroll.","inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/stephaniewalter.design\/fr\/blog\/semaine-pixels-19-aout-2016\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/stephaniewalter.design\/fr\/blog\/semaine-pixels-19-aout-2016\/#primaryimage","url":"https:\/\/stephaniewalter.design\/fr\/files\/2016\/08\/liens-semaine-19-aout.jpg","contentUrl":"https:\/\/stephaniewalter.design\/fr\/files\/2016\/08\/liens-semaine-19-aout.jpg","width":850,"height":350,"caption":"La semaine en pixels \u2013 19 ao\u00fbt 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\/5648"}],"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=5648"}],"version-history":[{"count":0,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts\/5648\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/media\/5643"}],"wp:attachment":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/media?parent=5648"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/categories?post=5648"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/tags?post=5648"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}