{"id":1286,"date":"2013-02-22T08:42:33","date_gmt":"2013-02-22T07:42:33","guid":{"rendered":"http:\/\/blog.stephaniewalter.fr\/?p=1286"},"modified":"2013-02-22T09:53:26","modified_gmt":"2013-02-22T08:53:26","slug":"des-pixels-et-du-code-50","status":"publish","type":"post","link":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-50\/","title":{"rendered":"Des pixels et du code #50"},"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>

Ma petite s\u00e9lection de liens de la semaine \u00e0 ne pas manquer va tout particuli\u00e8rement plaire aux graphistes qui s\u2019int\u00e9ressent \u00e0 la typographie et\u00a0 l’exp\u00e9rience utilisateur avec beaucoup d’articles de fond et d’outils et d’astuces, au design mobile et \u00e0 l’accessibilit\u00e9. Et pour les int\u00e9grateurs quelques liens sur l’utilisation de Bootstrap, Sublime Text et le support des s\u00e9lecteurs CSS sur mobile.<\/p>\n

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

#Illustrator #Typographie<\/p>\n

How to Create Calligraphic Ampersand Symbols in Illustrator<\/a> un petit tutoriel pour cr\u00e9er des \u201cAmpersands\u201d (le sigle &) sur Illustrator<\/p>\n

#Android<\/p>\n

How To Design For Android Devices<\/a> un petit r\u00e9sum\u00e9 de quelques bonnes pratiques pour commencer le design Android, m\u00eame si l\u2019utilisation d\u2019un bouton \u201cretour en arri\u00e8re\u201d<\/a> reste assez flou m\u00eame dans les guidelines officielles<\/p>\n

#Ic\u00f4nes<\/p>\n

This is how I’m creating web font icon fonts<\/a> une vid\u00e9o rapide de tutoriel sur comment cr\u00e9er des font-icons avec IcoMoon en quelques cliques<\/p>\n

Des ressources utiles<\/h2>\n

#Typographie<\/p>\n

25 Free Comic Fonts to Use Instead of Comic Sans<\/a>, car oui on peut avoir besoin d\u2019utiliser une font \u201ccomic\u201d sans passer par la comic sans, 25 polices \u201ccomic\u201d pour la remplacer<\/p>\n

ifontyou.com <\/a>un site qui rassemble des combinaisons de police d\u2019\u00e9criture qui fonctionnent bien, si jamais vous manquez d\u2019id\u00e9es<\/p>\n

#UX<\/p>\n

http:\/\/darkpatterns.org\/<\/a> un site consacr\u00e9 aux \u201cdark patterns\u201d ou ces \u00e9l\u00e9ments de l\u2019interface qui forcent les utilisateurs \u00e0 faire des actions qu\u2019ils ne veulent pas faire (comme \u00a0les publicit\u00e9s d\u00e9guis\u00e9es, les frais cach\u00e9s, etc)<\/p>\n

#SublimeText<\/p>\n

colorsublime.com<\/a> un petit site qui vous permet d\u2019avoir un aper\u00e7u d\u2019un th\u00e8me Sublime Text pour diff\u00e9rents langages avant de l\u2019installer chez vous<\/p>\n

#CSS
\nMobile.html<\/a> un petit tableau de compatibilit\u00e9 des s\u00e9lecteurs CSS sur mobile<\/p>\n

#CV<\/p>\n

represent.io<\/a> un service en ligne qui vous permet de monter rapidement un petit CV en ligne<\/p>\n

#Photoshop<\/p>\n

Pixel Perfect Precision\u2122<\/a> \u00a0(PDF) un condens\u00e9 de bonnes pratiques de graphisme dans Photoshop<\/p>\n

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

#Sublime Text #WordPress<\/p>\n

WordPress Extensions for Sublime Text 2<\/a> un article qui listes quelques plugins utiles pour travailler avec WordPress dans Sublime Text 2<\/p>\n

#Touch<\/p>\n

touchSwipe<\/a> un plugin jQuery pour r\u00e9cup\u00e9rer les events de touch et swipe sur mobile<\/p>\n

#A11Y<\/p>\n

Correcteur d’accessibilit\u00e9 de tableaux<\/a> un outil en ligne qui vous permet de corriger l\u2019accessibilit\u00e9 de vos tableaux HTML en copiant\/ collant le code directement<\/p>\n

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

#Design mobile<\/p>\n

Design decisions: Projects on Basecamp for iPhone <\/a>un retour d\u2019exp\u00e9rience et analyse sur les d\u00e9cisions prises pour le design de l\u2019application de Basecamp pour iPhone<\/p>\n

Mobile-design-information-architecture<\/a> plusieurs gabarits d\u2019agencement des informations sur mobile\/ tablette expliqu\u00e9s<\/p>\n

Native Mobile Apps are the New Flash <\/a>avec les avanc\u00e9es en terme de HTML et CSS des sites web, l\u2019auteur \u00e9met la th\u00e9orie qu\u2019\u00e0 terme les applications seront comme pour le Flash, uniquement utilis\u00e9es pour des jeux qui requi\u00e8rent ce type de technologies<\/p>\n

#Ergonomie<\/p>\n

Choisir la taille de police<\/a> : px ? cm ? em ? rem ? En situation de mobilit\u00e9 ? Sur navigateur de bureau ? \u00a0Au final le choix n\u2019est pas aussi simple que l\u2019on pourrait le croire.<\/p>\n

Pimkie, une page d\u2019accueil\u2026 surprenante<\/a> une analyse d\u2019un point de vue ergonomie de la nouvelle page d\u2019accueil de Pimkie avec du carrousel automatique qui d\u00e9file trop vite et un menu d\u00e9roulant d\u00e9roul\u00e9 au chargement de la page.<\/p>\n

Mobile Form Usability: Avoid Splitting Single Input Entities<\/a> un article sur l\u2019ergonomie des formulaires et les champs qui sont s\u00e9par\u00e9s, la partie sur la s\u00e9paration nom \/\/ pr\u00e9nom est particuli\u00e8rement int\u00e9ressante. Apparemment s\u00e9parer nom et pr\u00e9nom en deux champs perturberait beaucoup d\u2019utilisateurs.<\/p>\n

#Design<\/p>\n

So God Made a Designer Parody Video <\/a>un vid\u00e9o parodique de \u201cSo God made a farmer\u201d qui explique pourquoi Dieu aurait cr\u00e9\u00e9s les designers. Quelques jolies v\u00e9rit\u00e9s dedans.<\/p>\n

#A11Y<\/p>\n

Pour lire la suite, cliquez ici <\/a>un excellent article de Victor Brito sur l\u2019accessibilit\u00e9 des liens \u201clire la suite\u201d, cliquez ici\u201d. La partie particuli\u00e8rement int\u00e9ressante concerne l\u2019explication tr\u00e8s d\u00e9taill\u00e9e du contexte des liens dans diff\u00e9rents cas d\u2019utilisation.<\/p>\n

#Boutons<\/p>\n

Principles for Successful Button Design <\/a>10 principe de base pour cr\u00e9er des boutons facilement utilisables sur votre site web<\/p>\n

#Bootstrap<\/p>\n

Please stop using Twitter Bootstrap <\/a>un article qui r\u00e9sum\u00e9 tr\u00e8s bien le fond de ma pens\u00e9e, la lassitude de voir encore et encore les m\u00eames designs bootstrap sans originalit\u00e9\u00a0et remet Bootstrap \u00e0 sa place qui du proptotype rapide et du dashboard d\u2019administration de site.<\/p>\n

#UX<\/p>\n

How To Sell Your UX Design Solution To Clients <\/a>ou comment vendre des prestations d\u2019ergonomie et d\u2019analyse d\u2019exp\u00e9rience aux clients qui de prime abord ne comprennent pas forcement pourquoi ils devraient payer pour quelques wireframes tout gris qui ne sont m\u00eame pas \u201cdu design\u201d<\/p>\n

Baymardcom<\/a> ,\u00a0 des articles d\u00e9di\u00e9s \u00e0 l\u2019ergonomie, exp\u00e9rience utilisateur et au e-commerce<\/p>\n

Inspiration<\/h2>\n

#Typographie<\/p>\n

9 amazing type designers to inspire you<\/a> 9 designers de polices et de typographie \u00e0 suivre si vous manquez d\u2019inspiration<\/p>\n

#Couleurs<\/p>\n

Guidelinecolours<\/a> Ce petit site rassemble des guidelines des principaux r\u00e9seaux sociaux, grosses marques et services en ligne class\u00e9s par couleur<\/p>\n

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

#Parallaxe<\/p>\n

Channel experience <\/a>un site en parallaxe uniquement pour pr\u00e9senter quelques mod\u00e8les de montre Chanel<\/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.Ma petite s\u00e9lection de liens de la semaine \u00e0 ne pas manquer va tout particuli\u00e8rement plaire aux graphistes qui s\u2019int\u00e9ressent \u00e0 la typographie et\u00a0 l’exp\u00e9rience utilisateur avec beaucoup d’articles de fond et d’outils et d’astuces, au design mobile et \u00e0 l’accessibilit\u00e9. Et pour les int\u00e9grateurs quelques liens sur l’utilisation de Bootstrap, Sublime Text et le support des s\u00e9lecteurs CSS sur mobile. Les …<\/p>\n","protected":false},"author":3,"featured_media":1287,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[105],"tags":[],"yoast_head":"\nDes pixels et du code #50 - par St\u00e9phanie Walter - UX Researcher & Designer<\/title>\n<meta name=\"description\" content=\"Choisir la taille de police, utilisabilit\u00e9 des formulaires et accessibilit\u00e9 des liens lire la suite, vendre de l'ergonomie \u00e0 un client et architecture d'information sur mobile\" \/>\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-50\/\" \/>\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 #50 - par St\u00e9phanie Walter - UX Researcher & Designer\" \/>\n<meta property=\"og:description\" content=\"Choisir la taille de police, utilisabilit\u00e9 des formulaires et accessibilit\u00e9 des liens lire la suite, vendre de l'ergonomie \u00e0 un client et architecture d'information sur mobile\" \/>\n<meta property=\"og:url\" content=\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-50\/\" \/>\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-02-22T07:42:33+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2013-02-22T08:53:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2013\/02\/pixelcode50.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-50\/\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-50\/\",\"name\":\"Des pixels et du code #50 - 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-50\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-50\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/stephaniewalter.design\/fr\/files\/2013\/02\/pixelcode50.jpg\",\"datePublished\":\"2013-02-22T07:42:33+00:00\",\"dateModified\":\"2013-02-22T08:53:26+00:00\",\"author\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf\"},\"description\":\"Choisir la taille de police, utilisabilit\u00e9 des formulaires et accessibilit\u00e9 des liens lire la suite, vendre de l'ergonomie \u00e0 un client et architecture d'information sur mobile\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-50\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-50\/#primaryimage\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/files\/2013\/02\/pixelcode50.jpg\",\"contentUrl\":\"https:\/\/stephaniewalter.design\/fr\/files\/2013\/02\/pixelcode50.jpg\",\"width\":700,\"height\":200,\"caption\":\"Des pixels et du code #50\"},{\"@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:\/\/twitter.com\/walterstephanie\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Des pixels et du code #50 - par St\u00e9phanie Walter - UX Researcher & Designer","description":"Choisir la taille de police, utilisabilit\u00e9 des formulaires et accessibilit\u00e9 des liens lire la suite, vendre de l'ergonomie \u00e0 un client et architecture d'information sur mobile","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-50\/","og_locale":"fr_FR","og_type":"article","og_title":"Des pixels et du code #50 - par St\u00e9phanie Walter - UX Researcher & Designer","og_description":"Choisir la taille de police, utilisabilit\u00e9 des formulaires et accessibilit\u00e9 des liens lire la suite, vendre de l'ergonomie \u00e0 un client et architecture d'information sur mobile","og_url":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-50\/","og_site_name":"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.","article_published_time":"2013-02-22T07:42:33+00:00","article_modified_time":"2013-02-22T08:53:26+00:00","og_image":[{"width":700,"height":200,"url":"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2013\/02\/pixelcode50.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-50\/","url":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-50\/","name":"Des pixels et du code #50 - 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-50\/#primaryimage"},"image":{"@id":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-50\/#primaryimage"},"thumbnailUrl":"https:\/\/stephaniewalter.design\/fr\/files\/2013\/02\/pixelcode50.jpg","datePublished":"2013-02-22T07:42:33+00:00","dateModified":"2013-02-22T08:53:26+00:00","author":{"@id":"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf"},"description":"Choisir la taille de police, utilisabilit\u00e9 des formulaires et accessibilit\u00e9 des liens lire la suite, vendre de l'ergonomie \u00e0 un client et architecture d'information sur mobile","inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-50\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-50\/#primaryimage","url":"https:\/\/stephaniewalter.design\/fr\/files\/2013\/02\/pixelcode50.jpg","contentUrl":"https:\/\/stephaniewalter.design\/fr\/files\/2013\/02\/pixelcode50.jpg","width":700,"height":200,"caption":"Des pixels et du code #50"},{"@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:\/\/twitter.com\/walterstephanie"]}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts\/1286"}],"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=1286"}],"version-history":[{"count":0,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts\/1286\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/media\/1287"}],"wp:attachment":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/media?parent=1286"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/categories?post=1286"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/tags?post=1286"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}