Des pixels et du code #73

Stéphanie Walter

Senior UX Designer - Mobile Expert

Senior UX Designer. Mobile Expert. Public speaker. Blog writer. Google Dev Expert Product Design (GDE)

Follow on Twitter

Ce contenu a été rédigé il y a 6 années. Il se peut qu'il ne soit plus à jour.

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 :)

 

Vous souhaitez des conseils en ergonomie ou en expérience utilisateur ? Un design de site, d’interface ou d’application mobile ? Envie de travailler ensemble ou de m’inviter à donner une conférence ? Consultez mes réalisations ou contactez moi directement.

Les commentaires sont fermés.