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

Les liens de la semaine qu’il ne fallait surtout pas manquer, avec d’excellents articles sur l’UX mobile et les bonnes pratiques du domaine en g\u00e9n\u00e9ral, du street art et des illustrations pour votre inspiration. Du c\u00f4t\u00e9 des outils vous trouverez de quoi nettoyer vos fichiers SVG pour en faire de jolies ic\u00f4nes et font-icons, des tutoriels CSS3 pour des transition de modales et styler des checkboxes. Dans les ressources utiles, un petit rappel de quelques nouveaut\u00e9s Photoshop CC tr\u00e8s sympathiques, des boutons ainsi que des \u00e9mulateurs pour tester les site sur mobile. Sur ce bonne lecture, moi je vais manger des kiwis aujourd’hui ;)<\/a><\/p>\n

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

#SVG<\/p>\n

Work with SVG<\/a>, un petit guide pour travailler avec du SVG aujourd’hui (le g\u00e9n\u00e9rer avec Illustrator) qui contient quelques liens utiles pour nettoyer le code g\u00e9n\u00e9r\u00e9 (voir dans les commentaires \u00e9galement)<\/p>\n

#Web<\/p>\n

This is a webpage <\/a>un tr\u00e8s joli texte \u00e0 lire sur ce qu’est au final le web<\/p>\n

#UX #Mobile<\/p>\n

Tools for Mobile UX Design <\/a>l\u2019auteur revient sur son workflow de design d\u2019exp\u00e9rience utilisateur et sur les outils utilis\u00e9s, aussi surprenants soient ils parfois comme un simple e-mail<\/p>\n

12 usability flaws that are spoiling the mobile web<\/a>\u00a0une petite liste non exhaustive de 12 probl\u00e8mes que l’on peut retrouver sur des sites mobile qui endommagent l’exp\u00e9rience utilisateur<\/p>\n

Mobile Web Problems and How to Avoid Them<\/a>\u00a0une collection de screenshots qui illustrent les probl\u00e8mes de certains sites mobiles et des propositions de solution pour y rem\u00e9dier<\/p>\n

#Processus<\/p>\n

Enabling Excellence in Custom Type Logos through Selectivity <\/a>– l’auteur y expose son processus de choix de client et processus cr\u00e9atif pour du logo en typo, o\u00f9 il dit souvent \u201cnon\u201d \u00e0 des projets et clients potentiels<\/p>\n

#Changements<\/p>\n

There are no small changes <\/a>– ou comment un petit changement qui prend 2min (apparemment) peut se transformer en quelques heures de d\u00e9veloppement en plus Attention l’article ne dit pas qu’il ne faut PAS faire le changement, mais juste \u00eatre conscient des implications :)<\/p>\n

#Mobilit\u00e9 #Fragmentation<\/p>\n

iOS, Android, Fragmentation and You<\/a> un article qui d\u00e9taille la fragmentation du march\u00e9 mobile d\u2019Apple par OS et appareil, qui montre qu\u2019au final si on d\u00e9taille OS et appareil par appareil elle est plus importante que ce que l\u2019on pourrait penser quand on lit que 93% des utilisateurs ont la version 6 d\u2019iOS<\/p>\n

Inspiration<\/h2>\n

#Streetart<\/p>\n

Outdoor<\/a>\u00a0le folio de Aryz qui fait entre autre du street art de grande classe<\/p>\n

#Illustration<\/p>\n

Momoandsprits.com<\/a>\u00a0de jolies illustrations pleines de couleur<\/p>\n

#Typographie<\/p>\n

Webfontscorner.com<\/a>\u00a0une galeries de polices d\u2019\u00e9critures sur diff\u00e9rents sites web pour vous aider \u00e0 faire votre choix d\u2019assemblage de polices<\/p>\n

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

#CSS3 animations<\/p>\n

CSS3 Transitions And Transforms From Scratch<\/a>, parce qu’un tutoriel technique qui ressemble \u00e0 quelques chose avec de jolies illustrations, \u00e7a m\u00e9rite d’\u00eatre relev\u00e9<\/p>\n

#Checkbox<\/p>\n

Personnaliser l\u2019aspect de boutons radio et checkbox en CSS <\/a>un petit tutoriel pour personnaliser les checkboxes en pure CSS<\/p>\n

Des ressources utiles<\/span><\/p>\n

#Placeholder<\/p>\n

Placeimg.com<\/a>\u00a0une solution de placeholder d\u2019images avec diff\u00e9rentes cat\u00e9gories (nature, animaux, tech) et tailles possibles<\/p>\n

#Mobilit\u00e9<\/p>\n

Mobile Emulators & Simulators: The Ultimate Guide <\/a>une liste tr\u00e8s compl\u00e8te de simulateurs pour tester vos sites mobiles<\/p>\n

#Bouttons<\/p>\n

Buttons – A CSS button library built with Sass & Compass<\/a> une librairie de boutons cr\u00e9\u00e9e et avec Sass et Compass pour vos projets<\/p>\n

#Photoshop CC<\/p>\n

Photoshop CC, it\u2019s better<\/a> quelques nouveaut\u00e9s tr\u00e8s sympathiques dans Photoshop CC, personnellement j\u2019ai un faible pour l\u2019isolation des calques qui rend possibles une \u00e9dition des formes plus facile (comme sur Illustrator)<\/p>\n

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

#SVG<\/p>\n

Svgo-gui<\/a> un outil pour nettoyer et optimiser les SVG automatiquement<\/p>\n

#Responsive<\/p>\n

Dimensionsapp.com<\/a> un outil en ligne pour tester un site responsive avec un \u201cpreview mode\u201d qui permet de visualiser dans diff\u00e9rentes tailles d\u2019appareil<\/p>\n

Les d\u00e9mos sympas et impressionnantes<\/h2>\n

#One Layer<\/p>\n

Une fois n\u2019est pas coutume, dans les d\u00e9mos je vous proposer un peu de design, avec le concept de \u201cOne layer<\/a>\u201d, des images r\u00e9alis\u00e9es avec un seul calques et pleins d\u2019effets sous Photoshop. Impressionnant d\u2019un point de vu technique.<\/p>\n

Et s’il devait n’en rester qu’un ?<\/h2>\n

#Graphisme<\/p>\n

Wearegraphicdesigners.be<\/a>\u00a0un collectif qui dont la d\u00e9marche est de promouvoir le m\u00e9tier de Graphiste dans sa globalit\u00e9<\/p>\n

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

Ce contenu a \u00e9t\u00e9 r\u00e9dig\u00e9 il y a 12 ans. Il se peut qu’il ne soit plus \u00e0 jour.Les liens de la semaine qu’il ne fallait surtout pas manquer, avec d’excellents articles sur l’UX mobile et les bonnes pratiques du domaine en g\u00e9n\u00e9ral, du street art et des illustrations pour votre inspiration. Du c\u00f4t\u00e9 des outils vous trouverez de quoi nettoyer vos fichiers SVG pour en faire de jolies ic\u00f4nes et font-icons, des tutoriels CSS3 pour des transition de modales …<\/p>\n","protected":false},"author":3,"featured_media":1678,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[105],"tags":[],"class_list":["post-1677","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-veille-liens-utiles"],"yoast_head":"\nDes pixels et du code #68 - par St\u00e9phanie Walter - UX Researcher & Designer<\/title>\n<meta name=\"description\" content=\"Nouveaut\u00e9s Photoshop CC, utilisabilit\u00e9 et UX de sites mobiles et outils pour nettoyer des fichiers SVG, inspiration de street art et d'illustration pour les graphistes\" \/>\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-68\/\" \/>\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 #68 - par St\u00e9phanie Walter - UX Researcher & Designer\" \/>\n<meta property=\"og:description\" content=\"Nouveaut\u00e9s Photoshop CC, utilisabilit\u00e9 et UX de sites mobiles et outils pour nettoyer des fichiers SVG, inspiration de street art et d'illustration pour les graphistes\" \/>\n<meta property=\"og:url\" content=\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-68\/\" \/>\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=\"2013-06-28T07:00:40+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2013-06-30T20:08:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2013\/06\/pixelcode68.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"700\" \/>\n\t<meta property=\"og:image:height\" content=\"200\" \/>\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\/des-pixels-et-du-code-68\/\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-68\/\",\"name\":\"Des pixels et du code #68 - 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-68\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-68\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/stephaniewalter.design\/fr\/files\/2013\/06\/pixelcode68.jpg\",\"datePublished\":\"2013-06-28T07:00:40+00:00\",\"dateModified\":\"2013-06-30T20:08:11+00:00\",\"author\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf\"},\"description\":\"Nouveaut\u00e9s Photoshop CC, utilisabilit\u00e9 et UX de sites mobiles et outils pour nettoyer des fichiers SVG, inspiration de street art et d'illustration pour les graphistes\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-68\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-68\/#primaryimage\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/files\/2013\/06\/pixelcode68.jpg\",\"contentUrl\":\"https:\/\/stephaniewalter.design\/fr\/files\/2013\/06\/pixelcode68.jpg\",\"width\":700,\"height\":200,\"caption\":\"Des pixels et du code #68\"},{\"@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":"Des pixels et du code #68 - par St\u00e9phanie Walter - UX Researcher & Designer","description":"Nouveaut\u00e9s Photoshop CC, utilisabilit\u00e9 et UX de sites mobiles et outils pour nettoyer des fichiers SVG, inspiration de street art et d'illustration pour les graphistes","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-68\/","og_locale":"fr_FR","og_type":"article","og_title":"Des pixels et du code #68 - par St\u00e9phanie Walter - UX Researcher & Designer","og_description":"Nouveaut\u00e9s Photoshop CC, utilisabilit\u00e9 et UX de sites mobiles et outils pour nettoyer des fichiers SVG, inspiration de street art et d'illustration pour les graphistes","og_url":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-68\/","og_site_name":"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.","article_published_time":"2013-06-28T07:00:40+00:00","article_modified_time":"2013-06-30T20:08:11+00:00","og_image":[{"width":700,"height":200,"url":"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2013\/06\/pixelcode68.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\/des-pixels-et-du-code-68\/","url":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-68\/","name":"Des pixels et du code #68 - 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-68\/#primaryimage"},"image":{"@id":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-68\/#primaryimage"},"thumbnailUrl":"https:\/\/stephaniewalter.design\/fr\/files\/2013\/06\/pixelcode68.jpg","datePublished":"2013-06-28T07:00:40+00:00","dateModified":"2013-06-30T20:08:11+00:00","author":{"@id":"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf"},"description":"Nouveaut\u00e9s Photoshop CC, utilisabilit\u00e9 et UX de sites mobiles et outils pour nettoyer des fichiers SVG, inspiration de street art et d'illustration pour les graphistes","inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-68\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-68\/#primaryimage","url":"https:\/\/stephaniewalter.design\/fr\/files\/2013\/06\/pixelcode68.jpg","contentUrl":"https:\/\/stephaniewalter.design\/fr\/files\/2013\/06\/pixelcode68.jpg","width":700,"height":200,"caption":"Des pixels et du code #68"},{"@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\/1677","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=1677"}],"version-history":[{"count":0,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts\/1677\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/media\/1678"}],"wp:attachment":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/media?parent=1677"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/categories?post=1677"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/tags?post=1677"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}