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

Comme chaque semaine, \u00a0je vous propose un condens\u00e9 de mes lectures et ma veille Web Design et graphisme, exp\u00e9rience utilisateurs, HTML, CSS, outils, ressources et inspiration. Cette semaine je vous propose une grand s\u00e9lection d’articles orient\u00e9s sur le m\u00e9tier et processus de travail du Designer Web : perfection au pixel pr\u00e8s, checklist de designer et incidence d’outils d’automatisation de code dans nos m\u00e9tiers. \u00a0Vous trouverez \u00e9galement la rubrique des ressources utiles et outils tr\u00e8s fournie cette semaine : acc\u00e8s \u00e0 Typekit depuis le bureau, outils pour le retina, plugins Photoshop pour les grilles verticales et g\u00e9n\u00e9rateur de faux \u00ab\u00a0utilisateur\u00a0\u00bb pour vos projets. Enfin n’oubliez pas l’article \u00e0 lire absolument cette semaine qui traite d’exp\u00e9rience utilisateur. Bonne lecture.<\/p>\n

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

#Responsive<\/p>\n

A Responsive Web Design Process<\/a> un excellent article sur le processus de cr\u00e9ation d\u2019un site responsive : commencer par le contenu, \u00a0penser au mobile d\u00e8s le d\u00e9part, mais ne pas forc\u00e9ment commencer le design dans Photoshop avec le mobile<\/p>\n

#Webdesign<\/p>\n

What\u2019s wrong with \u201cPixel Satisfaction\u201d? <\/a>la recherche de la perfection et du pixel perfect est une chose louable dans nos m\u00e9tiers, mais on oublie bien trop souvent que le PSD n\u2019est qu\u2019il \u00e9tape parmi tant d\u2019autres. J\u2019aime beaucoup la citation
\n\u201cAiming for excellence in the final product is always the goal. However, when presenting a mockup, it should be ok if an element is a few pixels off, especially if it saves you (and your client\u2019s budget) an hour of work\u201d<\/p>\n

Designers checklist advices <\/a>plusieurs petites lites de conseils pour les webdesigner<\/p>\n

Why designers are talking about the wrong thing<\/a>, plut\u00f4t qu\u2019un r\u00e9sum\u00e9 je vous propose une citation : \u00ab\u00a0You know what I don’t give a shit about? Design tools. (…) HTML, CSS & JAVASCRIPT bring your painting to life\u00a0\u00bb<\/p>\n

Laziness & The Web Designer<\/a> l\u2019avis d\u2019un designer sur les outils comme Macaw ou CSS3hat qui exportent automatiquement du code et rendent les designer paresseux selon lui<\/p>\n

Donner de la valeur au design,<\/a> montrer le processus cr\u00e9atif pour rassurer le client mais \u00e9galement montrer la valeur ajout\u00e9e \u00e0 son travail<\/p>\n

Inspiration<\/h2>\n

#Logo<\/p>\n

Hawt Sauce<\/a>, un tr\u00e8s joli design de logo pour de la sauce tomate fait maison<\/p>\n

#Packaging<\/p>\n

Lacy Kuhn<\/a> un packaging de c\u00e9r\u00e9ales avec un concept adorable et original<\/p>\n

#Typography<\/p>\n

Fantastic Shoppe Fronts<\/a>, un tumblr qui rassemble de tr\u00e8s belles photos de deventures avec de jolies lettres<\/p>\n

#Art<\/p>\n

The Zoom Quilt it<\/a> un project d\u2019art collaboratif avec un concept de zoom infini dans une illustration. Et dans le m\u00eame style \u201cInfinite Oz<\/a>\u201d.<\/p>\n

#Interractions<\/p>\n

The perils at Great Falls\u00a0<\/a>un article interactif sur le Washington Post pour pr\u00e9senter les dangers de diff\u00e9rents courants<\/p>\n

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

#CSS<\/p>\n

Absolute Center<\/a> , centrer verticalement et horizontalement une modale en CSS.<\/p>\n

#Responsive<\/p>\n

Multi-Level Push Menu<\/a>\u00a0un menu responsive \u00ab\u00a0Off-screen\u00a0\u00bb avec plusieurs niveaux de profondeur<\/p>\n

Des ressources utiles<\/h2>\n

#Ghithub<\/p>\n

A guide to using Github Pages<\/a>, un guide simple \u00e0 l\u2019utilisation de github<\/p>\n

#Illustrator<\/p>\n

Adobe Illustrator CS6 Shortcuts Cheat Sheet<\/a> , pour conna\u00eetre vos raccourcits sur le bout des doigts<\/p>\n

#Adobe CC<\/p>\n

Early access to Typekit and file sync in Adobe CC<\/a>, un acc\u00e8s en avant premi\u00e8re aux fonctionnalit\u00e9s de synchronisation et polices sur bureau de Typekit<\/p>\n

#Mobile<\/p>\n

Are you making any of these 8 common (and wrong) assumptions about mobile performance?<\/a> un article d\u00e9taill\u00e9 et illustr\u00e9 d\u2019\u00e9tudes chiffr\u00e9es qui va \u00e0 l\u2019encontre de certains mythes sur la mobilit\u00e9<\/p>\n

#Retina<\/p>\n

How to test a website for Retina on Windows without an actual Retina display?<\/a> ou comment utiliser Firefox pour avoir un premier aper\u00e7u de votre site en retina<\/p>\n

#Mockup #Mobile<\/p>\n

PixelSign HTML5 device mockups<\/a> des maquettes de mobiles en HTML pour pr\u00e9senter un design d\u2019application directement dans un appareil<\/p>\n

Des ressources gratuites<\/h2>\n

#Font<\/p>\n

Dense typeface<\/a> \u00a0une \u00e9l\u00e9gante police g\u00e9om\u00e9trique \u00e0 t\u00e9l\u00e9charger et utiliser gratuitement pour vos projets<\/p>\n

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

#Grid<\/p>\n

modulargrid.org<\/a>\u00a0un outil en ligne et plugin Photoshop pour cr\u00e9er une grille verticale pour aligner la typographie<\/p>\n

#Utilisateur<\/p>\n

randomuser.me<\/a>\u00a0vous propose un faux nom, photo et adresse mail pour cr\u00e9er des utilisateurs al\u00e9atoires pour vos designs et bases de donn\u00e9es<\/p>\n

#Ic\u00f4nes<\/p>\n

60 SEO Service icons<\/a> un kit de 60 ic\u00f4nes qui pr\u00e9sentent diff\u00e9rents services \u201cSEO\u201d mais peuvent \u00e9galement \u00eatre utilis\u00e9es pour beaucoup de prestations et services web.<\/p>\n

#Flat UI<\/p>\n

flatuimaps.com<\/a>\u00a0je n\u2019aime vraiment pas les couleurs du kit \u201cFlat UI Pro\u201d, mais si ce n\u2019est pas votre cas, ce g\u00e9n\u00e9rateur de cartes Google Maps pourrait vous plaire<\/p>\n

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

#CSS<\/p>\n

une ic\u00f4ne d\u2019appareil photo<\/a> dans un style iOS, faite \u00e0 partir d\u2019un seule \u00e9l\u00e9ment HTML, \u00e0 savoir body.<\/p>\n

#Jeu<\/p>\n

LittleAlchemy<\/a>, \u00a0un petit jeu dans le navigateur o\u00f9 il faut combiner des \u00e9l\u00e9ments pour en cr\u00e9er de nouveaux<\/p>\n

Babbit<\/a>\u00a0un autre jeu de procrastination matinale o\u00f9 il faut attraper les carottes avec le lapinou<\/p>\n

#Canvas<\/p>\n

Touch device jelly menu concept<\/a>, un effet fun au touch et au scroll de la page :)<\/p>\n

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

#UX<\/p>\n

Designing User Interfaces for Your Mother<\/a>, un excellent article pour nous rappeler au final comment un \u00ab\u00a0vrai\u00a0\u00bb utilisateur va utiliser un site, un navigateur, ce qu’il en attend et \u00a0ce qui peut lui fait peur et le freiner dans son exp\u00e9rience<\/p>\n

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

Ce contenu a \u00e9t\u00e9 r\u00e9dig\u00e9 il y a 11 ans. Il se peut qu’il ne soit plus \u00e0 jour.Comme chaque semaine, \u00a0je vous propose un condens\u00e9 de mes lectures et ma veille Web Design et graphisme, exp\u00e9rience utilisateurs, HTML, CSS, outils, ressources et inspiration. Cette semaine je vous propose une grand s\u00e9lection d’articles orient\u00e9s sur le m\u00e9tier et processus de travail du Designer Web : perfection au pixel pr\u00e8s, checklist de designer et incidence d’outils d’automatisation de code dans nos …<\/p>\n","protected":false},"author":3,"featured_media":1789,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"link","meta":{"_acf_changed":false,"footnotes":""},"categories":[105],"tags":[],"class_list":["post-1787","post","type-post","status-publish","format-link","has-post-thumbnail","hentry","category-veille-liens-utiles","post_format-post-format-link"],"yoast_head":"\nDes pixels et du code #75 - 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=\"Exp\u00e9rience utilisateur,outils et ressources pour Webdesigner, tester du retina sur Firefox, inspiration graphique et packaging, plugin de rythme vertical et tous les liens \u00e0 ne pas manquer cette semaine !\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=_-3760.html \/>\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 #75 - par St\u00e9phanie Walter - UX Researcher & Designer\" \/>\n<meta property=\"og:description\" content=\"Exp\u00e9rience utilisateur,outils et ressources pour Webdesigner, tester du retina sur Firefox, inspiration graphique et packaging, plugin de rythme vertical et tous les liens \u00e0 ne pas manquer cette semaine !\" \/>\n<meta property=\"og:url\" content=\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-75\/\" \/>\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-08-16T07:24:17+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2013\/08\/pixelcode75.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=\"5 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-75\/\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-75\/\",\"name\":\"Des pixels et du code #75 - 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-75\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-75\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/stephaniewalter.design\/fr\/files\/2013\/08\/pixelcode75.jpg\",\"datePublished\":\"2013-08-16T07:24:17+00:00\",\"dateModified\":\"2013-08-16T07:24:17+00:00\",\"author\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf\"},\"description\":\"Exp\u00e9rience utilisateur,outils et ressources pour Webdesigner, tester du retina sur Firefox, inspiration graphique et packaging, plugin de rythme vertical et tous les liens \u00e0 ne pas manquer cette semaine !\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-75\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-75\/#primaryimage\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/files\/2013\/08\/pixelcode75.jpg\",\"contentUrl\":\"https:\/\/stephaniewalter.design\/fr\/files\/2013\/08\/pixelcode75.jpg\",\"width\":700,\"height\":200,\"caption\":\"Des pixels et du code #75\"},{\"@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 #75 - par St\u00e9phanie Walter - UX Researcher & Designer","description":"Exp\u00e9rience utilisateur,outils et ressources pour Webdesigner, tester du retina sur Firefox, inspiration graphique et packaging, plugin de rythme vertical et tous les liens \u00e0 ne pas manquer cette semaine !","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-75\/","og_locale":"fr_FR","og_type":"article","og_title":"Des pixels et du code #75 - par St\u00e9phanie Walter - UX Researcher & Designer","og_description":"Exp\u00e9rience utilisateur,outils et ressources pour Webdesigner, tester du retina sur Firefox, inspiration graphique et packaging, plugin de rythme vertical et tous les liens \u00e0 ne pas manquer cette semaine !","og_url":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-75\/","og_site_name":"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.","article_published_time":"2013-08-16T07:24:17+00:00","og_image":[{"width":700,"height":200,"url":"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2013\/08\/pixelcode75.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":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-75\/","url":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-75\/","name":"Des pixels et du code #75 - 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-75\/#primaryimage"},"image":{"@id":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-75\/#primaryimage"},"thumbnailUrl":"https:\/\/stephaniewalter.design\/fr\/files\/2013\/08\/pixelcode75.jpg","datePublished":"2013-08-16T07:24:17+00:00","dateModified":"2013-08-16T07:24:17+00:00","author":{"@id":"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf"},"description":"Exp\u00e9rience utilisateur,outils et ressources pour Webdesigner, tester du retina sur Firefox, inspiration graphique et packaging, plugin de rythme vertical et tous les liens \u00e0 ne pas manquer cette semaine !","inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-75\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-75\/#primaryimage","url":"https:\/\/stephaniewalter.design\/fr\/files\/2013\/08\/pixelcode75.jpg","contentUrl":"https:\/\/stephaniewalter.design\/fr\/files\/2013\/08\/pixelcode75.jpg","width":700,"height":200,"caption":"Des pixels et du code #75"},{"@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\/1787"}],"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=1787"}],"version-history":[{"count":0,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts\/1787\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/media\/1789"}],"wp:attachment":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/media?parent=1787"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/categories?post=1787"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/tags?post=1787"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}