Des pixels et du code #73
Je vous propose cette semaine encore une petite sélection de liens qui traitent d’expérience utilisateur : amélioration pas à pas, perception de rapidité sur mobile, interface sans clique ou encore comment trouver de l’inspiration pour des animations et transitions qui vont apporter une valeur ajoutée à votre interface. Du côté de l’inspiration des couleurs, des effets 80′, du packaging et du paper toy géant. Enfin la sélection de ressources et outils propose des générateurs d’excuses pour designer, intégrateurs et chefs de projet, des menus responsive et de quoi les tester dans différents navigateurs ainsi qu’une solution e-commerce pratique et légère. Bonne lecture :)
Les articles à lire
#UX
Step-by-Step UX Improvement: Screenshot Upload cette semaine l’auteur s’attaque au champs de chargement d’image de son interface et nous montre les étapes d’amélioration
#Mobile UX
Mobile Design Details: Performing Actions Optimistically différentes astuces qui donnent à l’utilisateur une impression de rapidité de l’application ou du site mobile, même si en réalité la connexion au serveur ne s’est pas encore parfois faite.
#Off Canvas, Navigation Responsive
Progressive Viewports David Bushell revient sur son article de navigation Off-Canvas avec une explication illustrée et détaillée sur ce type de navigation qui au final masquent une partie du contenu derrière le “viewport”
#Etude de Cas #Responsive
Case Study: Betting on a fully responsive web application le retour d’expérience sur le passage de l’application kambi.com en responsive, un excellent article sur le processus plein de liens très utiles vers des frameworks, librairies JS, etc.
#Sass #Webdesign
Sass for designers — the talk and the case study les slides de la conférence de Laura Kalbag qui présentent à chaque fois un élément de design et ce qui est faisable en Sass. J’aime beaucoup avoir à la fois le design et le code, ça rendre moins “obscure” les variables et autres mixins du préprocesseur.
#UX #HTML5
Placeholders are not Substitutes for Labels un article clair et concis qui rappelle encore une fois les soucis que peuvent engendrer l’utilisation d’un placeholder à la place d’un label de champ.
#Animation #UX
Animations et transitions d’interface : où trouver l’inspiration ? j’ai rassemblé au même endroits quelques sites et galeries d’inspiration pour des animations et transitions d’interface mais également des librairies et frameworks CSS pour les créer. Article disponible en anglais aussi : Interface Animations and Transitions: where to get inspiration
#Lorem Ipsum
Lorem Ipsum is Killing Your Designs le Lorem Ipsum n’est pas l’idéal pour les clients, les distrait du design ou wireframe à 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é de mettre la quantité de Lorem Ipsum qui nous arrange bien)
#UX #Click
dontclick.it une expérience étrange de site sans un seul clique (une fois passé la page d’explications). Je ne sais pas pour vous, mais j’ai vraiment du mal à m’empêcher de cliquer et l’expérience est vraiment étrange pour moi.
Inspiration
#Dribbble #Codepen
Give ‘n’ Go, un tumblr qui rassemble des shots Dribbble et les transforme en code visible dans un CodePen.
#CMJN
10 creative uses of CMYK des réalisations en Cyan Magenta Jaune et Noir :)
#Neon
Showcase of Vibrant 80s Inspired Neon Artwork kitch, coloré, et totalement génial, des affiches avec des effets “néon” comme dans les années 80
#Hipster
hipsterlogo.com un guide parodique pour créer un logo de “hipster”
#Painting
simonstalenhag.se les superbes concepts uchroniques de Simon Stålenhag
#Packaging
Marou-faiseurs-de-chocolat un superbe packaging de chocolat doré qui me ferais presque regretter d’ouvrir le papier pour le manger :)
#Illustration digitale
artgerm.deviantart.com une superbe gallerie de personnages inspirés des univers des comis mais également des animes et jeux vidéos
#PapierToy
Paper sculpture by Thomas Voillaume ce garçon a réalisé une sculpture en pliages et collages papier de 2m de haut
Les tutoriels de la semaine
#Photoshop
Photoshop Variables: How to Import External PSD Smartly un article pas tout récent au final (2010) qui montre comment se servir des variables d’image de Photoshop pour importer des fichiers .PSD et .PSB externes et donc alléger le poids et mise à jour des éléments récurrents. C’est un peu long mais ça fonctionne.
#SVG
Animated line drawing in SVG un petit tutoriel pour animer une ligne en SVG, un bon début qui ouvre déjà quelques perspectives d’animation.
Des ressources utiles
#Excuse
Developerexcuses.com pour trouver de bonnes excuses si votre code plante et que vous êtes développeur, et la même pour les designers designerexcuses.com. Et en bonus la même pour les gestionnaires de projet accountmanagerexcuses.com
#Android #Fragmenation
Android Fragmentation Visualized une visualisation de la fragmentation du marché sous Android : tailles d’écran, versions d’OS et appareils
#Test #Mobile
Techniques for mobile and responsive cross-browser testing: An Envato case study une mine de ressources. rassemblant différentes techniques pour tester des sites responsive et des liens vers beaucoup d’outils en ligne ou à télécharger
#Responsive #Menu
15 Responsive Navigation jQuery Plugins 15 plugins jQuery pour rendre rendre votre mobile compatible sur mobile, ou tout simplement trouver un peu d’inspiration sur ce qui est techniquement faisable
Des ressources gratuites
#Typographie
BoB Font une police d’écriture gratuite avec des lettres “funs” qui donnent un aspect “blob” à votre texte (attention police angloxone sans accents)
Les outils et plugins pour vous faciliter la vie
#SVG
Svgeneration.com ressemble plusieurs générateurs d’images de fond en SVG qu’il est possible de personnaliser pour récupérer ensuite en image de fond CSS par exemple. Attention cependant à la liée lenteur de l’utilisation des data-uri :)
#E-commerce
Stripe.com une solution pour mettre en place rapidement une page de paiement en ligne pour un produit (démo shop.stripe.com )
Les démos sympas et impressionnantes
#CSS
The humble border-radius, Lea Verou qui nous montre en 45 minutes toutes les possibilités d’une propriété aussi simple que “border-radius”, hallucinante comme à chaque fois. Les slides sont disponibles par ici.
#3D #CSS
3D Effect for a Mobile App Showcase Manoela reproduit pour Codrops en CSS l’effet que l’on voit de plus en plus partout de présentation de sont site dans une vue 3D d’un appareil mobile avec différents calques qui « flottent ».
Et s’il devait n’en rester qu’un ?
#Mobilité
The mobile-first Web en 2015 nous serons 2 Milliards d’internautes à accéder au web sur mobile. Cet article est une superbe analyse sur l’essence et l’essor de la mobilité sur le web, , et pour une fois, j’ai très envie de vous citer un long paragraphe, qui lui même est une citation de Karen McGrane :
“ 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 « real » 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 — it doesn’t deserve to be on the desktop either. Get rid of it.) “
Pour finir, le meilleur site de la semaine qui vous laissez jouer avec l’API drag & drop (c’est l’excuse à donner à votre patron) dressacat.com. Amusez-vous bien :)
