La semaine en pixels – 28 octobre 2016

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

Comme chaque semaine,  un condensé de mes lectures et ma veille web design et graphisme, expérience utilisateurs, design d’interface et mobilité, mais aussi des outils et ressources pour le web design et de l’inspiration en tout genre : illustrations, photos, sites web, etc.

Au programme : des progressive web apps, de l’UX e-commerce, un peu de typographie avec de jolis exemples et des patchs soo retroo, une explication des Service Workers, des patterns d’UI et les biais négatifs des utilisateurs. Du côté des tutoriels un peu de lettrage et des tutos CSS pour utiliser des gradients et les variables. Ne manquez également pas le tutoriel sur les notifications sur mobile.

Pour plus de liens chaque matin vous pouvez me suivre sur twitter. Bonne lecture :)

tl;dnr, s’il devait n’en rester qu’un ?

#Mobile

Bye, Bye Burger! les effets du remplacement du burger menu et navigation masquée par une barre en bas sur une application Android

Les articles de la semaine

#PWA

Progressive Web Apps: Bridging the Gap Between Web and Mobile, une petite introduction aux Progressive Web Apps

Trends

Product Sorting UX Trends For eCommerce Websites, des idées de fonctionnalités de tris de produit basées sur des templates e-commerce

#Typography

How the Web Became Unreadable: un article intéressant bien que je nuancerais la conclusion, on n’est pas forcément obligé d’avoir du noir sur du blanc pour avoir du contraste, un gris foncé peut faire l’affaire et être plus sympa à lire.

#Typography

What You Can Do with Different Font Weights, de l’utilité d’avoir différentes graisses dans une police et ce qu’on peut en faire (pas qu’en web)

#Service Worker

The Service Worker Lifecycle, la vie d’un Service Worker expliquée par @jaffathecake

#UI

How To Build Honest UIs And Help Users Make Better Decisions, aider les utilisateurs à faire des choix éclairés

#Publicité

Pourquoi Be a fait une croix sur la pub display. Ravie de voir que d’autres modèles comment à émerger, espérons moins intrusifs pour les utilisateurs :)

#UI

Pull to Refresh UI Pattern, quelques conseils sur l’utilisation du “pull to refresh”

#Mobile #sign up

Stop Making Me Sign Up! pourquoi faudrait-il créer un compte et se connecter pour accéder au contenu de certains services sur leurs applications mobiles alors que le même contenu est accessible sans compte sur le web ?

#UX

The Negativity Bias in User Experience: les utilisateurs ont tendance à se souvenir plus facilement des mauvais que des bons moments de l’interface

De l’inspiration et de jolies idées

#Sticker

labarbudashop.com des stickers trop cool qui rappellent nos séries d’enfance

#Typographie

Positive words, de la jolie typographie, de jolis mots

#Game #mobile browser

paperplanes.world une petite experience mobile bien fun :)

#Motion

Le Motion design expliqué dans un GIF sympa

Les tutoriels de la semaine

#Typography

Hand Lettering Process (iPad Pro+analog), un processus de lettrage papier, crayon, ipad.

#CSS

What is the difference between CSS variables and preprocessor variables? l’utilisation des variables CSS vs les variables de préprocesseurs

#CSS

CSS Gradients and blend mode used for photo toning, ou comment utiliser les filtres et gradients CSS pour changer les couleurs des images sans avoir à passer par Photoshop avant

#HTML #Form

Show my password, please, un petit tutoriel pour ajouter un bouton pour masquer / afficher le mot de passe dans les formulaires

#Notifications

Push Notifications on the Web (Building a PWA, Part 3), les notifications push

Des ressources utiles, outils et plugins pour vous faciliter la vie

#Color

CSS Hexadecimal Colors With Transparency, on outil de conversion rgba vers hexadecimal avec transparence

Pour le fun: jeux et démos sympas et impressionnantes

#Machine Learning

nightmare.mit.edu, des images d’horreur générées par une machine, plutôt impressionant