{"id":1766,"date":"2013-08-02T08:27:10","date_gmt":"2013-08-02T06:27:10","guid":{"rendered":"http:\/\/blog.stephaniewalter.fr\/?p=1766"},"modified":"2013-08-03T12:14:32","modified_gmt":"2013-08-03T10:14:32","slug":"des-pixels-et-du-code-73","status":"publish","type":"post","link":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-73\/","title":{"rendered":"Des pixels et du code #73"},"content":{"rendered":"
Je vous propose cette semaine encore une petite s\u00e9lection de liens qui traitent d’exp\u00e9rience utilisateur : am\u00e9lioration pas \u00e0 pas, perception de rapidit\u00e9 sur mobile, interface sans clique ou encore comment trouver de l’inspiration pour des animations et transitions qui vont apporter une valeur ajout\u00e9e \u00e0 votre interface. Du c\u00f4t\u00e9 de l’inspiration des couleurs, des effets 80′, du packaging et du paper toy g\u00e9ant. Enfin la s\u00e9lection de ressources et outils propose des g\u00e9n\u00e9rateurs d’excuses pour designer, int\u00e9grateurs et chefs de projet, des menus responsive et de quoi les tester dans diff\u00e9rents navigateurs ainsi qu’une solution e-commerce pratique et l\u00e9g\u00e8re. Bonne lecture :)<\/p>\n
#UX<\/p>\n
Step-by-Step UX Improvement: Screenshot Upload<\/a>\u00a0cette semaine l\u2019auteur s\u2019attaque au champs de chargement d\u2019image de son interface et nous montre les \u00e9tapes d\u2019am\u00e9lioration<\/p>\n #Mobile UX<\/p>\n Mobile Design Details: Performing Actions Optimistically <\/a>diff\u00e9rentes astuces qui donnent \u00e0 l\u2019utilisateur une impression de rapidit\u00e9 de l\u2019application ou du site mobile, m\u00eame si en r\u00e9alit\u00e9 la connexion au serveur ne s\u2019est pas encore parfois faite.<\/p>\n #Off Canvas, Navigation Responsive<\/p>\n Progressive Viewports <\/a>\u00a0David Bushell revient sur son article de navigation Off-Canvas<\/a> \u00a0avec une explication illustr\u00e9e et d\u00e9taill\u00e9e sur ce type de navigation qui au final masquent une partie du contenu derri\u00e8re le \u201cviewport\u201d<\/p>\n #Etude de Cas #Responsive<\/p>\n Case Study: Betting on a fully responsive web application<\/a> le retour d\u2019exp\u00e9rience sur le passage de l\u2019application kambi.com<\/a>\u00a0en responsive, un excellent article sur le processus plein de liens tr\u00e8s utiles vers des frameworks, librairies JS, etc.<\/p>\n #Sass #Webdesign<\/p>\n Sass for designers \u2014 the talk and the case study<\/a> les slides de la conf\u00e9rence de Laura Kalbag qui pr\u00e9sentent \u00e0 chaque fois un \u00e9l\u00e9ment de design et ce qui est faisable en Sass. J\u2019aime beaucoup avoir \u00e0 la fois le design et le code, \u00e7a rendre moins \u201cobscure\u201d les variables et autres mixins du pr\u00e9processeur.<\/p>\n #UX #HTML5<\/p>\n Placeholders are not Substitutes for Labels<\/a> un article clair et concis qui rappelle encore une fois les soucis que peuvent engendrer l\u2019utilisation d\u2019un placeholder \u00e0 la place d\u2019un label de champ.<\/p>\n #Animation #UX<\/p>\n Animations et transitions d\u2019interface : o\u00f9 trouver l\u2019inspiration ?<\/a> j\u2019ai rassembl\u00e9 au m\u00eame endroits quelques sites et galeries d\u2019inspiration pour des animations et transitions d\u2019interface mais \u00e9galement des librairies et frameworks CSS pour les cr\u00e9er. Article disponible en anglais aussi : Interface Animations and Transitions: where to get inspiration<\/a><\/p>\n #Lorem Ipsum<\/p>\n Lorem Ipsum is Killing Your Designs <\/a>\u00a0le Lorem Ipsum n’est pas l’id\u00e9al pour les clients, les distrait du design ou wireframe \u00e0 valider (pouuurquoi le texte il est en latin ?!) et ne permet au final pas de vraiment tester les limites du design (puisqu’au final on est tent\u00e9 de mettre la quantit\u00e9 de Lorem Ipsum qui nous arrange bien)<\/p>\n #UX #Click<\/p>\n dontclick.it<\/a>\u00a0une exp\u00e9rience \u00e9trange de site sans un seul clique (une fois pass\u00e9 la page d\u2019explications). Je ne sais pas pour vous, mais j\u2019ai vraiment du mal \u00e0 m\u2019emp\u00eacher de cliquer et l\u2019exp\u00e9rience est vraiment \u00e9trange pour moi.<\/p>\n #Dribbble #Codepen<\/p>\n Give ‘n’ Go<\/a>, un tumblr qui rassemble des shots Dribbble et les transforme en code visible dans un CodePen.<\/p>\n #CMJN<\/p>\n 10 creative uses of CMYK <\/a>des r\u00e9alisations en Cyan Magenta Jaune et Noir :)<\/p>\n #Neon<\/p>\n Showcase of Vibrant 80s Inspired Neon Artwork<\/a> kitch, color\u00e9, et totalement g\u00e9nial, des affiches avec des effets \u201cn\u00e9on\u201d comme dans les ann\u00e9es 80<\/p>\n #Hipster<\/p>\n hipsterlogo.com<\/a>\u00a0un guide parodique pour cr\u00e9er un logo de \u201chipster\u201d<\/p>\n #Painting<\/p>\n simonstalenhag.se<\/a>\u00a0les superbes concepts uchroniques de Simon St\u00e5lenhag<\/p>\n #Packaging<\/p>\n Marou-faiseurs-de-chocolat<\/a> un superbe packaging de chocolat dor\u00e9 qui me ferais presque regretter d\u2019ouvrir le papier pour le manger :)<\/p>\n #Illustration digitale<\/p>\n artgerm.deviantart.com<\/a>\u00a0une superbe gallerie de personnages inspir\u00e9s des univers des comis mais \u00e9galement des animes et jeux vid\u00e9os<\/p>\n #PapierToy<\/p>\n Paper sculpture by Thomas Voillaume<\/a> ce gar\u00e7on a r\u00e9alis\u00e9 une sculpture en pliages et collages papier de 2m de haut<\/p>\n #Photoshop<\/p>\n Photoshop Variables: How to Import External PSD Smartly<\/a> un article pas tout r\u00e9cent au final (2010) qui montre comment se servir des variables d\u2019image de Photoshop pour importer des fichiers .PSD et .PSB externes et donc all\u00e9ger le poids et mise \u00e0 jour des \u00e9l\u00e9ments r\u00e9currents. C\u2019est un peu long mais \u00e7a fonctionne.<\/p>\n #SVG<\/p>\n Animated line drawing in SVG <\/a>un petit tutoriel pour animer une ligne en SVG, un bon d\u00e9but qui ouvre d\u00e9j\u00e0 quelques perspectives d\u2019animation.<\/p>\n #Excuse<\/p>\n Developerexcuses.com<\/a>\u00a0pour trouver de bonnes excuses si votre code plante et que vous \u00eates d\u00e9veloppeur, et la m\u00eame pour les designers designerexcuses.com<\/a>. Et en bonus la m\u00eame pour les gestionnaires de projet accountmanagerexcuses.com<\/a><\/p>\n #Android #Fragmenation<\/p>\n Android Fragmentation Visualized \u00a0<\/a>une visualisation de la fragmentation du march\u00e9 sous Android : tailles d\u2019\u00e9cran, versions d\u2019OS et appareils<\/p>\n #Test #Mobile<\/p>\n Techniques for mobile and responsive cross-browser testing: An Envato case study <\/a>une mine de ressources.<\/a> rassemblant diff\u00e9rentes techniques pour tester des sites responsive et des liens vers beaucoup d\u2019outils en ligne ou \u00e0 t\u00e9l\u00e9charger<\/p>\n #Responsive #Menu<\/p>\n 15 Responsive Navigation jQuery Plugins<\/a> 15 plugins jQuery pour rendre rendre votre mobile compatible sur mobile, ou tout simplement trouver un peu d\u2019inspiration sur ce qui est techniquement faisable<\/p>\n #Typographie<\/p>\n BoB Font <\/a>une police d\u2019\u00e9criture gratuite avec des lettres \u201cfuns\u201d qui donnent un aspect \u201cblob\u201d \u00e0 votre texte (attention police angloxone sans accents)<\/p>\n #SVG<\/p>\n Svgeneration.com<\/a>\u00a0ressemble plusieurs g\u00e9n\u00e9rateurs d\u2019images de fond en SVG qu\u2019il est possible de personnaliser pour r\u00e9cup\u00e9rer ensuite en image de fond CSS par exemple. Attention cependant \u00e0 la li\u00e9e lenteur de l\u2019utilisation des data-uri <\/a>:)<\/p>\n \u00a0#E-commerce<\/p>\n Stripe.com<\/a>\u00a0une solution pour mettre en place rapidement une page de paiement en ligne pour un produit (d\u00e9mo shop.stripe.com<\/a>\u00a0)<\/p>\n #CSS<\/p>\n The humble border-radius<\/a>, Lea Verou qui nous montre en 45 minutes toutes les possibilit\u00e9s d\u2019une propri\u00e9t\u00e9 aussi simple que \u201cborder-radius\u201d, hallucinante comme \u00e0 chaque fois. Les slides sont disponibles par ici.<\/a><\/p>\n #3D #CSS<\/p>\n 3D Effect for a Mobile App Showcase<\/a>\u00a0Manoela reproduit pour Codrops en CSS l’effet que l’on voit de plus en plus partout de pr\u00e9sentation de sont site dans une vue 3D d’un appareil mobile avec diff\u00e9rents calques qui \u00ab\u00a0flottent\u00a0\u00bb.<\/p>\n #Mobilit\u00e9<\/p>\n The mobile-first Web<\/a> en 2015 nous serons 2 Milliards d\u2019internautes \u00e0 acc\u00e9der au web sur mobile. Cet article est une superbe analyse sur l’essence et l’essor de la mobilit\u00e9 sur le web, , et pour une fois, j\u2019ai tr\u00e8s envie de vous citer un long paragraphe, qui lui m\u00eame est une citation de Karen \u00a0McGrane :<\/p>\n \u201c Mobile users should get the same content. It’s frustrating and confusing for them if you only give them a little bit of what you offer on your \u00ab\u00a0real\u00a0\u00bb website. If you try to guess which subset of your content the mobile user needs, you’re going to guess wrong. Deliver the same content as your desktop user sees. (If you think some of your content doesn’t deserve to be on mobile, guess what \u2014 it doesn’t deserve to be on the desktop either. Get rid of it.) \u201c<\/p>\n<\/blockquote>\n Pour finir, le meilleur site de la semaine qui vous laissez jouer avec l\u2019API drag & drop (c’est l’excuse \u00e0 donner \u00e0 votre patron)\u00a0dressacat.com<\/a>. Amusez-vous bien :)<\/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.Je vous propose cette semaine encore une petite s\u00e9lection de liens qui traitent d’exp\u00e9rience utilisateur : am\u00e9lioration pas \u00e0 pas, perception de rapidit\u00e9 sur mobile, interface sans clique ou encore comment trouver de l’inspiration pour des animations et transitions qui vont apporter une valeur ajout\u00e9e \u00e0 votre interface. Du c\u00f4t\u00e9 de l’inspiration des couleurs, des effets 80′, du packaging et du paper …<\/p>\n","protected":false},"author":3,"featured_media":1768,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"link","meta":{"_acf_changed":false,"footnotes":""},"categories":[105],"tags":[],"class_list":["post-1766","post","type-post","status-publish","format-link","has-post-thumbnail","hentry","category-veille-liens-utiles","post_format-post-format-link"],"yoast_head":"\nInspiration<\/h2>\n
Les tutoriels de la semaine<\/h2>\n
Des ressources utiles<\/h2>\n
Des ressources gratuites<\/h2>\n
Les outils \u00a0et plugins pour vous faciliter la vie<\/h2>\n
Les d\u00e9mos sympas et impressionnantes<\/h2>\n
Et s’il devait n’en rester qu’un ?<\/h2>\n
\n