Des pixels et du code #76
Comme chaque semaine, je vous propose un condensé de mes lectures et ma veille Web Design et graphisme, expérience utilisateurs, HTML, CSS, outils, ressources et inspiration. C’est encore le design d’interface utilisateur et la mobilité qui sont à l’honneur cette semaine : mythes sur les utilisateurs mobiles, icônes « non pleines » et problèmes de mémorisation et deux articles sur des bars de chargement et de défilement. Du côté de l’inspiration vous trouverez une jolie animation, du print, du papier et de jolies illustrations. N’oubliez au passage pas de jeter un œil sur les 10 astuces Illustrator, je suis presque certaines que vous y apprendrez quelque chose. Bonne lecture :)
Les articles à lire
[snap url= »http://blog.spoongraphics.co.uk/articles/10-amazing-illustrator-tips-that-changed-how-i-design » alt= »Mobile Design: Where to Get Inspiration » w= »700″ h= »500″]
#Illustrator
10 Amazing Illustrator Tips That Changed How I Design 10 astuces, outils ou panneaux dont vous ignorez peut-être l’existence ou l’utilité dans Illustrator
#Ecommerce #Mobile
What do shoppers need to see on mobile product pages? Que veulent voir les utilisateurs de e-commerce sur mobile ? Concrètement, la même chose que sur grand écran (à quelques exceptions près) :)
#UX #Design
The Spectrum of Visual User Interface Design entre skeuomorphisme et flat design, une jolie analyse sur l’évolution dudesign d’interface
#UX #Icônes
Hollow icons l’article qui semble faire rage cette semaine puisque écrit sans vraiment de données ou de testes pour supporter la thèse selon laquelle les icônes “non pleines” peuvent être plus compliqués à mémoriser et lire pour l’utilisateur. Luke W. a donc proposé un sondage « polar » pour savoir celles qui sont le plus lisibles (mais là encore on ne tient pas compte du contexte, couleur de fond de l’interface, etc.) . Et voici une réponse à cet article Hollow icons? A hollow argument.
#UI
New UI Pattern: Website Loading Bars certains sites comme Medium ou Youtube semblent ajouter une bar de progression de chargement de la page, vous en avez déjà vu une ?
#UX #UI
Stop reinventing the scrollbar un reflexion sur les sites qui proposent une bar de progression horizontal au fur et à mesure où le lecteur avance dans sa lecture, en plus de la barre de défilement verticale
#Mobilité
Pour ceux qui en doutaient encore, oui les utilisateurs de smartphone et mobile utilisent leur appareil également dans le canapé (ou la fin du mythe « utilisateur pressé dans le metro »)
#CSS
Semantic CSS With Intelligent Selectors au delà des classes CSS et des ID, l’utilisation de sélecteurs d’attribut pour styler un document HTML
#NSA
getprsm.com Et si PRISM avait son propre site de promotion ?
#Image responsive
WebKit Has Implemented srcset, And It’s A Good Thing, Webkit implémente “en partie” l’attribut srcset, il vous faudra néanmoins des version Nigthly de navigateur pour le tester, mais c’est là un grand pas en avant vers une solution d’image responsive
Inspiration
[snap url= »http://www.behance.net/gallery/Bicicletas/10428765″ alt= »Mobile Design: Where to Get Inspiration » w= »700″ h= »500″]
#Illustration
Bicicletas des illustrations de vélos pleines de couleurs
wrist.im une expérience mélangeant typographie, illustration et animation
#Mobile
Mobile Design: Where to Get Inspiration, mon dernier article sur Onextrapixel avec une liste de sites et outils pour trouver de l’inspiration pour des interfaces mobiles
#Fun
Boss Patrol un logiciel pour ne plus vous faire attraper en regardant des chatons avec vos collègues
#Animation
What if animals were round ? une bande pour un film d’animation “et si les animaux étaient rond”, c’est adorable et excellent
#Papier
Papercraft by People Too des scènes en collage de papier très impressionnantes par l’artiste russe “People Too”.
#Sons
beyondthebeep.tumblr.com Un tubmlr qui rassemble les sons de certaines applications
24 Clever Print Ads 24 publicités avec des concepts très originaux pour certaines
Les tutoriels de la semaine
[snap url= »http://codepen.io/sol0mka/full/Jsyxq » alt= »Jelly navigation » w= »700″ h= »500″]
#Canva
Introducing Jelly Navigation Menu: When Canvas Meets PaperJS ou comment le menu “Touch Device Jelly Menu” a été créé
#JS #HTML
Introduction to animations in HTML les bases d’animation en JS avec un mélange d’animations CSS pour des effets plus complexes
Des ressources utiles
[snap url= »http://www.colorhexa.com/ » alt= »ColorHexa » w= »700″ h= »500″]
#Couleurs
ColorHexa vous donne toutes les informations dont vous avez besoin sur une couleur : teintes, alternatives, conversion en rgb, hsl, etc. propositions de thèmes de couleur, aperçus avec du texte, couleur de fond ET aperçu dans différentes variantes en daltonisme
#Responsive Carrousel
OWL Carousel un plugin jQuery pour créer un carrousel responsive qui fonctionne au touché
#Clavier #Mobile
Touch Keyboard Types un memo rapide pour utiliser clavier approprié sur mobile en fonction de champs de formulaire HTML5
#UI #Notification
Usability of notifications des exemples de design de notification qui fonctionnent et de ce qu’il vaut mieux éviter de faire
#Accessibilité
The Incredible Accessible Modal Window ou comment faire une modale accessible
Des ressources gratuites
#Freebies
Une collection de plus de 100 brosses Photoshop et textures
Et s’il devait n’en rester qu’un ?
#SVG
SVG Fallbacks car cette semaine il était difficile de ne pas entendre parler de SVG, Chris Coyier a rassemblé différentes techniques pour utiliser du SVG avec un fallback en PNG sur votre site web.
Enfin le lien fun avant de partir, « They’re Using It At Coffee Shops » ou le tumblr qui répertorie des sites utilisant des images hipe de coffee shops pour se donner un air tendance.
Pour plus d’articles au quotidien, vous pouvez me suivre sur twitter (beaucoup de tweets en anglais) ou vous abonnez au compte twitter 100% français du blog.
