{"id":1662,"date":"2013-06-21T08:43:22","date_gmt":"2013-06-21T06:43:22","guid":{"rendered":"http:\/\/blog.stephaniewalter.fr\/?p=1662"},"modified":"2013-06-21T08:43:22","modified_gmt":"2013-06-21T06:43:22","slug":"des-pixels-et-du-code-67","status":"publish","type":"post","link":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-67\/","title":{"rendered":"Des pixels et du code #67"},"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>

Une semaine de liens tr\u00e8s riches du c\u00f4t\u00e9 de l’exp\u00e9rience utilisateur : labels des formulaires, anticipation de l’utilisateur, ressources pour reste \u00e0 jour dans le domaine et autres astuces, et de l’inspiration en terme d’animation d’interface. Bref vous aurez de quoi vous documenter ce weekend. Si le webdesign en g\u00e9n\u00e9ral vous int\u00e9resse, Brad Frost d\u00e9taille sa technique \u00ab\u00a0Atomic Design\u00a0\u00bb sur son blog, et vous devriez trouver en plus quelques ressources et un peu d’inspiration dans les liens. Enfin au niveau des tutoriels et ressources, beaucoup de CSS3, d’effets au survol et d’animations. Bonne lecture :)<\/p>\n

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

#UX<\/p>\n

Making Infield Form Labels Suck Less <\/a>\u00a0les labels de champs dans le formulaire posent souvent des soucis d\u2019utilisabilit\u00e9 puisqu\u2019il disparaissent une fois que l\u2019utilisateur clique dans le champ, le laissant sans indication sur ce qu\u2019il doit remplir. Jackson Fox dans cet article nous propose 3 solutions pour rem\u00e9dier \u00e0 ce probl\u00e8me.<\/p>\n

Anticipating Intention<\/a> un article qui prend l\u2019exemple du design industriel (de voiture) pour parler du concept de \u201cinvisible interface\u201d et d\u2019anticipation dans l\u2019exp\u00e9rience des utilisateurs avec des objets que l\u2019on peut transposer \u00e0 leur exp\u00e9rience sur un site web<\/p>\n

How to keep up to date on UX Design <\/a>une liste de personnes et blogs \u00e0 suivre ainsi que de livres \u00e0 lire pour progresser et rester \u00e0 la page dans le domaine de l\u2019exp\u00e9rience utilisateur<\/p>\n

How to do UX <\/a>une chouette id\u00e9e d\u2019utiliser les boards Pinterest pour pr\u00e9senter des outils et techniques d\u2019UX<\/p>\n

Nine User-Experience Tips to Rule Them All <\/a>9 astuces d’exp\u00e9rience utilisateur \u00e0 garder en t\u00eate<\/p>\n

Drag & Drop: Think Twice, It\u2019s not a UX panacea<\/a> une jolie lecture sur les interfaces drag & drop qui ne fonctionnent pas dans tous les cas, illustr\u00e9e d’un retour sur un cas concret de design d’application<\/p>\n

#Logo<\/p>\n

X-story 1\/4 : mon logo n\u2019est pas \u00ab hipster \u00bb !<\/a> et 3 autres volets d\u2019un dossier qui revient sur ces logos \u201cvintage\u201d en croix \u00a0(ou en \u201cX\u201d) et aux sources de cette tendance de design<\/p>\n

#SVG #font-icon<\/p>\n

Relief from web icon hell <\/a>un retour d\u2019exp\u00e9rience pas \u00e0 pas sur le choix et l\u2019utilisation de font-icons sur un site<\/p>\n

#Webdesign<\/p>\n

Atomic-web-design<\/a>\u00a0Brad Frost d\u00e9taille sont outil et concept d\u2019\u201cAtomic Webdesign\u201d<\/p>\n

How to become a designer without going to design school<\/a> des conseils et surtout pleins de liens utiles pour apprendre comment devenir un designer sans avoir \u00e0 passer par une \u00e9cole d\u2019art<\/p>\n

#Typographie<\/p>\n

CSS Typography cheat sheet <\/a>quelques morceaux de code tout fait pour faciliter la typographie sur le web<\/p>\n

#Responsive Webdesign<\/p>\n

[Traduction] Adaptive VS Responsive Design : quelle est la diff\u00e9rence ?\u00a0<\/a>\u00a0ces deux notions \u00e9tant souvent floues, j’ai traduit avec son accord l’article de\u00a0Viljami Salminen sur le sujet et vous met \u00e0 disposition l’illustration de l’iceberg<\/p>\n

Inspiration<\/h2>\n

#Jeux Videos<\/p>\n

Horizon.venuspatrol.com – games<\/a>\u00a0de l\u2019inspiration de jeux vid\u00e9os aux illustrations absolument fantastiques<\/p>\n

#Typographie<\/p>\n

Josephalessio.com<\/a>\u00a0un tr\u00e8s joli portfolio plein de lettres<\/p>\n

#Webdesign<\/p>\n

Nationallgbtmuseum.org<\/a> le site d\u2019un mus\u00e9 haut en couleurs avec des effets tr\u00e8s sympas sur la navigation<\/p>\n

#UX UI<\/p>\n

Ui-animations.tumblr.com<\/a>\u00a0un joli tumblr d\u00e9di\u00e9 aux animations des interfaces<\/p>\n

#Boutons<\/p>\n

Creative Button Styles<\/a>\u00a0des petits d\u00e9mos de pleins d’effets sympas r\u00e9alisables en CSS3 sur des boutons, tr\u00e8s pratique lorsque l’on manque d’inspiration pour un effet au survol<\/p>\n

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

#CSS3<\/p>\n

Caption-hover-effects<\/a>\u00a0des effets de survol sur des vignettes d\u2019image bien sympathiques comme souvent sur Codrops<\/p>\n

Des ressources utiles<\/h2>\n

#Webdesign<\/p>\n

Web5 \u2013 retour sur ma toute premi\u00e8re conf\u00e9rence\u00a0<\/a>\u00a0 le retour de ma conf\u00e9rence \u00e0 Web5 sur les bonnes pratiques graphiques pour une int\u00e9gration r\u00e9ussie et surtout le lien vers les slides<\/p>\n

#iOS7<\/p>\n

iOS7 GUI PSD<\/a>, le template Photoshop \u00e0 t\u00e9l\u00e9charger gratuitement du nouveau design d\u2019iOS par Teehan+lax<\/p>\n

#CSS3 Animation<\/p>\n

Magic-css3-animations<\/a>\u00a0une liste et demo de diff\u00e9rentes animations CSS3<\/p>\n

#Mobile UI<\/p>\n

PortKit: UX Metaphor Equivalents for iOS & Android<\/a> un outil pour comparer les diff\u00e9rents \u00e9l\u00e9ments d\u2019interface entre iOS7, iOS6 et Android 4<\/p>\n

<\/h2>\n

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

#Jeu<\/p>\n

www.cubeslam.com<\/a>\u00a0Un jeu \u201cpong style\u201d pour jouer contre un ami, ou contre un ourse dans le navigateur<\/p>\n

#Haiiiir<\/p>\n

Sur codepen.io- MathiasPaumgarten<\/a>\u00a0une petit d\u00e9mo les cheveux au vent<\/p>\n

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

#Retour Clients<\/p>\n

Modifs client<\/a> quand Julien Debedout s\u2019amuse \u00e0 faire une parodie de la chute, bas\u00e9e sur les retours client<\/p>\n

Le site inutile de la semaine, jonyfy.me<\/a>\u00a0transforme n\u2019importe quel site en version iOS7.<\/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.Une semaine de liens tr\u00e8s riches du c\u00f4t\u00e9 de l’exp\u00e9rience utilisateur : labels des formulaires, anticipation de l’utilisateur, ressources pour reste \u00e0 jour dans le domaine et autres astuces, et de l’inspiration en terme d’animation d’interface. Bref vous aurez de quoi vous documenter ce weekend. Si le webdesign en g\u00e9n\u00e9ral vous int\u00e9resse, Brad Frost d\u00e9taille sa technique \u00ab\u00a0Atomic Design\u00a0\u00bb sur son blog, …<\/p>\n","protected":false},"author":3,"featured_media":1664,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[105],"tags":[],"class_list":["post-1662","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-veille-liens-utiles"],"yoast_head":"\nDes pixels et du code #67 - par St\u00e9phanie Walter - UX Researcher & Designer<\/title>\n<meta name=\"description\" content=\"Ressources pour apprendre l'UX (exp\u00e9rience utilisateur), se perfectionner, d\u00e9couvrir des animations d'interface, des effets de survol aux boutons, et autres ressources utiles pour graphistes et webdesigner\" \/>\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-67\/\" \/>\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 #67 - par St\u00e9phanie Walter - UX Researcher & Designer\" \/>\n<meta property=\"og:description\" content=\"Ressources pour apprendre l'UX (exp\u00e9rience utilisateur), se perfectionner, d\u00e9couvrir des animations d'interface, des effets de survol aux boutons, et autres ressources utiles pour graphistes et webdesigner\" \/>\n<meta property=\"og:url\" content=\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-67\/\" \/>\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-21T06:43:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2013\/06\/pixelcode67.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=\"@https:\/\/bsky.app\/profile\/stephaniewalter.bsky.social\" \/>\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-67\/\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-67\/\",\"name\":\"Des pixels et du code #67 - 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-67\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-67\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/stephaniewalter.design\/fr\/files\/2013\/06\/pixelcode67.jpg\",\"datePublished\":\"2013-06-21T06:43:22+00:00\",\"author\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf\"},\"description\":\"Ressources pour apprendre l'UX (exp\u00e9rience utilisateur), se perfectionner, d\u00e9couvrir des animations d'interface, des effets de survol aux boutons, et autres ressources utiles pour graphistes et webdesigner\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-67\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-67\/#primaryimage\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/files\/2013\/06\/pixelcode67.jpg\",\"contentUrl\":\"https:\/\/stephaniewalter.design\/fr\/files\/2013\/06\/pixelcode67.jpg\",\"width\":700,\"height\":200,\"caption\":\"Des pixels et du code #67\"},{\"@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\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"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\/3311148a94caa2e5ae146ff1cdf9aaf3a0127a7db0337d8c8cbbfc4a425cab0e?s=96&d=retro&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/3311148a94caa2e5ae146ff1cdf9aaf3a0127a7db0337d8c8cbbfc4a425cab0e?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\/https:\/\/bsky.app\/profile\/stephaniewalter.bsky.social\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Des pixels et du code #67 - par St\u00e9phanie Walter - UX Researcher & Designer","description":"Ressources pour apprendre l'UX (exp\u00e9rience utilisateur), se perfectionner, d\u00e9couvrir des animations d'interface, des effets de survol aux boutons, et autres ressources utiles pour graphistes et webdesigner","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-67\/","og_locale":"fr_FR","og_type":"article","og_title":"Des pixels et du code #67 - par St\u00e9phanie Walter - UX Researcher & Designer","og_description":"Ressources pour apprendre l'UX (exp\u00e9rience utilisateur), se perfectionner, d\u00e9couvrir des animations d'interface, des effets de survol aux boutons, et autres ressources utiles pour graphistes et webdesigner","og_url":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-67\/","og_site_name":"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.","article_published_time":"2013-06-21T06:43:22+00:00","og_image":[{"width":700,"height":200,"url":"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2013\/06\/pixelcode67.jpg","type":"image\/jpeg"}],"author":"St\u00e9phanie Walter","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/bsky.app\/profile\/stephaniewalter.bsky.social","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-67\/","url":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-67\/","name":"Des pixels et du code #67 - 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-67\/#primaryimage"},"image":{"@id":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-67\/#primaryimage"},"thumbnailUrl":"https:\/\/stephaniewalter.design\/fr\/files\/2013\/06\/pixelcode67.jpg","datePublished":"2013-06-21T06:43:22+00:00","author":{"@id":"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf"},"description":"Ressources pour apprendre l'UX (exp\u00e9rience utilisateur), se perfectionner, d\u00e9couvrir des animations d'interface, des effets de survol aux boutons, et autres ressources utiles pour graphistes et webdesigner","inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-67\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-67\/#primaryimage","url":"https:\/\/stephaniewalter.design\/fr\/files\/2013\/06\/pixelcode67.jpg","contentUrl":"https:\/\/stephaniewalter.design\/fr\/files\/2013\/06\/pixelcode67.jpg","width":700,"height":200,"caption":"Des pixels et du code #67"},{"@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":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"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\/3311148a94caa2e5ae146ff1cdf9aaf3a0127a7db0337d8c8cbbfc4a425cab0e?s=96&d=retro&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3311148a94caa2e5ae146ff1cdf9aaf3a0127a7db0337d8c8cbbfc4a425cab0e?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\/https:\/\/bsky.app\/profile\/stephaniewalter.bsky.social"]}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts\/1662","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=1662"}],"version-history":[{"count":0,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts\/1662\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/media\/1664"}],"wp:attachment":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/media?parent=1662"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/categories?post=1662"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/tags?post=1662"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}