{"id":1693,"date":"2013-07-05T08:00:49","date_gmt":"2013-07-05T06:00:49","guid":{"rendered":"http:\/\/blog.stephaniewalter.fr\/?p=1693"},"modified":"2013-07-05T11:27:01","modified_gmt":"2013-07-05T09:27:01","slug":"des-pixels-et-du-code-69","status":"publish","type":"post","link":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-69\/","title":{"rendered":"Des pixels et du code #69"},"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>

Pour la 69e<\/sup> semaine de liens, beaucoup d’inspiration que ce soit du sketch, des logos ou encore des sites d’agence et des illustrations. Les articles de fond que j’ai s\u00e9lectionn\u00e9 cette semaine traitent principalement de wireframe, de design responsive ainsi qu’un avis sur les redesigns non sollicit\u00e9s d’iOS7 et quelques bons conseils pour r\u00e9ussir une conf\u00e9rence web. Du c\u00f4t\u00e9 des ressources vous trouverez de quoi r\u00e9aliser une grille d\u2019ic\u00f4nes en CSS, des conseils pour les mailto dans les emails et une template pour cr\u00e9er facilement vos propres style guides. Bonne lecture :)<\/p>\n

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

#Wireframe \/ mockup<\/p>\n

Du zoning au mockup, itin\u00e9raire d\u2019une maquette web<\/a> en passant par le moodboard, le wireframe, les style tiles et le prototype, l\u2019article de Romy Duhem-Verdi\u00e8re sur la terminologie, consacr\u00e9 \u00e0 ses slides pour la kiwiparty<\/p>\n

#Responsive Webdesign<\/p>\n

Yes, you really can make complex webapps responsive <\/a>un retour d\u2019exp\u00e9rience sur le produit \u201cAdioso\u201d et comment ils ont g\u00e9r\u00e9 la partie responsive de leur site.<\/p>\n

[Lecture] Projet Responsive Web Design<\/a>\u00a0mon retour sur le livre \u00ab\u00a0Projet Responsive\u00a0\u00bb qui est un excellent livre sur la gestion de projet, et va bien au del\u00e0 du responsive<\/p>\n

#Webdesign<\/p>\n

Designing Progress <\/a>un jolie lecture sur l\u2019importance d\u2019avoir toujours en t\u00eate l\u2019image globale lors d\u2019un design puisque nous n\u2019auront que t\u00e8rs rarement un control total sur ce qui va arriver au design \u201cderri\u00e8re l\u2019\u00e9cran\u201d (ajout de contenu dans la base de donn\u00e9e, etc).<\/p>\n

#Design non sollicit\u00e9<\/p>\n

The Two Corners of Unsolicited Redesigns<\/a> les designs non sollicit\u00e9s d’iOS7 avec l’avis de Mike Monteiro ainsi qu’un des designer qui a post\u00e9 son redesign sur Dribbble<\/p>\n

#Conf\u00e9rence<\/p>\n

A few tricks about public speaking and stage technology <\/a>quelques bons conseils avant de monter sur sc\u00e8ne pour une conf\u00e9rence<\/p>\n

#Strat\u00e9gie de produit<\/p>\n

Product strategy is about saying no <\/a>un article qui vous explique comment dire \u201cnon\u201d dans pleins de cas de figure, pour une strat\u00e9gie de produit qui paie, et des r\u00e9ponses pour \u00e9viter les \u201coui mais et si \u2026.\u201d<\/p>\n

Inspiration<\/h2>\n

#Sketch<\/p>\n

34 Detailed UI Concept Sketches <\/a>34 jolis exemples d\u2019esquisses de wireframe \u00e0 la main et au crayon<\/p>\n

www.sketchplanations.com<\/a>\u00a0un jour, une explication illustr\u00e9e par un petit dessin, une bien belle id\u00e9e<\/p>\n

#Portofolio<\/p>\n

nicolasborreil.fr<\/a>\u00a0un petit portfolio fran\u00e7ais qui envoie du lourd :)<\/p>\n

#Webdesign<\/p>\n

served-mcr.com<\/a>\u00a0tons bleus, animations humour et raquettes de ping-pong pour ce site atypique<\/p>\n

#Logo<\/p>\n

The 2013 Logo Trend Report<\/a>, les tendances de design logo pour 2013<\/p>\n

#Site d\u2019agence<\/p>\n

designersfriend.co.uk<\/a>\u00a0\u00a0le site d\u2019une agence web qui fait du d\u00e9veloppement, l\u2019id\u00e9e est tr\u00e8s sympa mais \u00e0 mon avis un peu complexe \u00e0 comprendre pour des clients non initi\u00e9s<\/p>\n

#Illustrations<\/p>\n

edwardcarvalhomonaghan.co.uk<\/a>\u00a0un portfolio d\u2019illustrations TRES color\u00e9es<\/p>\n

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

#CSS<\/p>\n

Sizing (Web) components – by adding a Trojan horse into your CSS rules<\/a> une technique CSS bas\u00e9e sur des px et des em qui permet de redrimensionner un \u00e9l\u00e9ment totalement en changeant simplement la font-size et garder les proportions<\/p>\n

Des ressources utiles<\/h2>\n

#Style Guide<\/p>\n

Style Guide Boiler Template<\/a> une template de \u201cStyle Guides\u201d en HTML et CSS \u00e0 t\u00e9l\u00e9charger pour cr\u00e9er des \u00e9l\u00e9ments qui se r\u00e9p\u00e8tent dans vos webdesigns et au final cr\u00e9er son propre petit framework pour le client?<\/p>\n

#Formulaire<\/p>\n

git.aaronlumsden.com\/progression<\/a>\u00a0un plugin jQuery pour cr\u00e9er une barre de progression qui indique \u00e0 l\u2019utilisateur me taux de remplissage de son formulaire. Pratique pour les tr\u00e8s longs formulaires.<\/p>\n

#Pr\u00e9sentation d\u2019image<\/p>\n

Twentytwenty<\/a> un outil pour montrer la diff\u00e9rence entre deux images en les superposant \u00e0 l\u2019aide d\u2019un curseur qui va en r\u00e9v\u00e9ler l\u2019une ou l\u2019autre pour un effet \u201cavant\/apr\u00e8s\u201d<\/p>\n

Responsive-icon-grid<\/a>\u00a0une grille d\u2019ic\u00f4nes responsive avec un effet au survol tr\u00e8s sympa chez Codrops<\/p>\n

#E-mail<\/p>\n

Tip: Avoid using mailto links in HTML email <\/a>\u00a0apparemment les mailto dans les e-mails sont bloqu\u00e9s dans Outlook, bon \u00e0 savoir<\/p>\n

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

#Specifications<\/p>\n

devdocs.io<\/a> un outil qui rassemble de la documentations sur les sp\u00e9cifications HTML, CSS et jQuery<\/p>\n

<\/h2>\n

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

#UX design<\/p>\n

What Game of Thrones Can Teach Us About UX Design<\/a>\u00a0un tr\u00e8s article que j\u2019ai envie de vous laisser d\u00e9couvrir sans description pour ne pas spoiler la fin (de l\u2019article, vous pouvez le lire sans avoir vu la fin de GoT ne vous inqui\u00e9tez pas)<\/p>\n

Et le WTF de la semaine est attribu\u00e9 \u00e0 l\u2019article The 15 Weirdest, Most Awkward Stock Photos You\u2019ll Ever See<\/a> qui pr\u00e9sente des images de stock photo totalement invressemblables<\/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.Pour la 69e semaine de liens, beaucoup d’inspiration que ce soit du sketch, des logos ou encore des sites d’agence et des illustrations. Les articles de fond que j’ai s\u00e9lectionn\u00e9 cette semaine traitent principalement de wireframe, de design responsive ainsi qu’un avis sur les redesigns non sollicit\u00e9s d’iOS7 et quelques bons conseils pour r\u00e9ussir une conf\u00e9rence web. Du c\u00f4t\u00e9 des ressources vous …<\/p>\n","protected":false},"author":3,"featured_media":1694,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[105],"tags":[],"class_list":["post-1693","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-veille-liens-utiles"],"yoast_head":"\nDes pixels et du code #69 - par St\u00e9phanie Walter - UX Researcher & Designer<\/title>\n<meta name=\"description\" content=\"Inspirations de portfolio et tendances de logos, redesigns non sollicit\u00e9s d'iOS7, tutoriaux de grilles CSS et ressources utiles pour webdesigner et 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-69\/\" \/>\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 #69 - par St\u00e9phanie Walter - UX Researcher & Designer\" \/>\n<meta property=\"og:description\" content=\"Inspirations de portfolio et tendances de logos, redesigns non sollicit\u00e9s d'iOS7, tutoriaux de grilles CSS et ressources utiles pour webdesigner et graphistes\" \/>\n<meta property=\"og:url\" content=\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-69\/\" \/>\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-07-05T06:00:49+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2013-07-05T09:27:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2013\/07\/pixelcode69.png\" \/>\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\/png\" \/>\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-69\/\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-69\/\",\"name\":\"Des pixels et du code #69 - 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-69\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-69\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/stephaniewalter.design\/fr\/files\/2013\/07\/pixelcode69.png\",\"datePublished\":\"2013-07-05T06:00:49+00:00\",\"dateModified\":\"2013-07-05T09:27:01+00:00\",\"author\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf\"},\"description\":\"Inspirations de portfolio et tendances de logos, redesigns non sollicit\u00e9s d'iOS7, tutoriaux de grilles CSS et ressources utiles pour webdesigner et graphistes\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-69\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-69\/#primaryimage\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/files\/2013\/07\/pixelcode69.png\",\"contentUrl\":\"https:\/\/stephaniewalter.design\/fr\/files\/2013\/07\/pixelcode69.png\",\"width\":700,\"height\":200,\"caption\":\"Des pixels et du code #69\"},{\"@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 #69 - par St\u00e9phanie Walter - UX Researcher & Designer","description":"Inspirations de portfolio et tendances de logos, redesigns non sollicit\u00e9s d'iOS7, tutoriaux de grilles CSS et ressources utiles pour webdesigner et 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-69\/","og_locale":"fr_FR","og_type":"article","og_title":"Des pixels et du code #69 - par St\u00e9phanie Walter - UX Researcher & Designer","og_description":"Inspirations de portfolio et tendances de logos, redesigns non sollicit\u00e9s d'iOS7, tutoriaux de grilles CSS et ressources utiles pour webdesigner et graphistes","og_url":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-69\/","og_site_name":"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.","article_published_time":"2013-07-05T06:00:49+00:00","article_modified_time":"2013-07-05T09:27:01+00:00","og_image":[{"width":700,"height":200,"url":"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2013\/07\/pixelcode69.png","type":"image\/png"}],"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-69\/","url":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-69\/","name":"Des pixels et du code #69 - 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-69\/#primaryimage"},"image":{"@id":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-69\/#primaryimage"},"thumbnailUrl":"https:\/\/stephaniewalter.design\/fr\/files\/2013\/07\/pixelcode69.png","datePublished":"2013-07-05T06:00:49+00:00","dateModified":"2013-07-05T09:27:01+00:00","author":{"@id":"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf"},"description":"Inspirations de portfolio et tendances de logos, redesigns non sollicit\u00e9s d'iOS7, tutoriaux de grilles CSS et ressources utiles pour webdesigner et graphistes","inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-69\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-69\/#primaryimage","url":"https:\/\/stephaniewalter.design\/fr\/files\/2013\/07\/pixelcode69.png","contentUrl":"https:\/\/stephaniewalter.design\/fr\/files\/2013\/07\/pixelcode69.png","width":700,"height":200,"caption":"Des pixels et du code #69"},{"@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\/1693","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=1693"}],"version-history":[{"count":0,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts\/1693\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/media\/1694"}],"wp:attachment":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/media?parent=1693"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/categories?post=1693"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/tags?post=1693"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}