La semaine en pixels – 22 avril 2019

Chaque semaine, je publie un condensé de ma veille web design, UX (expérience utilisateurs), design d’interface et mobilité, HTML et CSS, mais aussi des outils et ressources et de l’inspiration en tout genre.

Au programme : accessibilité et contrastes de couleurs, comment construire un design system, guide pour les front-ends, ce qu’est un ingénieur UX, une liste de brevets sur certaines interactions d’interface, rédiger de meilleurs messages d’erreur, quelques réflexions sur l’état actuel du front-end, une photothèque avec des personnes trans et non-binaires, un jeu de combat CSS, des conseils pour le design des écrans Apple Store, et plus.

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

J’ai publié un article cette semaine

#Couleur #Accessibilité

J’ai écrit un article la semaine dernière pour vous aider à démarrer avec les notes de contrats d’accessibilité et des couleurs : Accessibilité et couleurs : outils et ressources pour concevoir des produits accessible

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

#Design System

How to build a Design System from scratch – pour construire un design system il faut comprendre les besoins de ses utilisatrices : équipe de développement, de design, etc. Il faut ensuite faire des recherches et comprendre les composants au niveau atomique et les construire avec l’équipe, c’est un travail de longue haleine. En résumé : si quelqu’un vous vend un « design system » mais qu’il vient avec ses propres composants et y applique simplement les couleurs de votre entreprise, ce n’est pas un design system, c’est juste un joli kit d’interface.

Les articles de la semaine

#UX #Message d’Erreur

Writing clearer error messages. Rédiger des messages d’erreur plus clairs : rappelez-vous que les messages d’erreur ne sont pas des barrières. Ils sont là pour responsabiliser, rassurer et guider vos utilisatrices, les aider à comprendre l’erreur et comment la corriger. Evitez de les blâmer et utilisez le ton approprié.

#Brevets #UI

From Like Buttons to Message Bubbles: The UX Designs You Can’t Use – Cet article énumère les brevets que les entreprises possèdent sur certains modèles et interactions d’interface utilisateur. Tinder a par exemple un brevet sur l’interaction de glisser à droite pour aimer et à gauche pour ne pas aimer. Attention quand vous designez vous ne pouvez donc pas reprendre n’importe quelle interactions !

#Design

The Designer’s Growth Model, de l’exécutant à architecte, au connecteur, au scientifique et enfin au visionnaire, différents modèles de designer

#Front-End

• Front-end Developer Handbook 2019, de nombreuses ressources pour vous aider à démarrer en Front-End en 2019
• Split, Jeremy Keith résume quelques réflexions sur le développement Front-End,  le développement centré sur l’utilisateur et comment une industrie de plus en plus axée sur des méthodes issues de l’ingénierie pourrait nous condamner toutes et tous.

#UX Engineer

lang= »en »What is a UX Engineer? Qu’est ce qu’une « UX Engineer » et en quoi est-elle différente des Front-End classiques ?

#Industrie

Being A Woman On The Internet Is « Fun »: A Scientific Study. être une femme sur Internet est « amusant » , une étude scientifique. (#sarcasme)

#Mobile #Design #Marketing

« Lessons learned from our App Store screenshots redesign » des conseils pour créer des screenshots d’applications pour l’App Store. Je suis peut-être une utilisatrice étrange, mais je préfère les captures d’écran + vidéos. Pour moi, ces images « lifestyle » sont jolies mais ne m’aident pas à décider si je veux télécharger votre application ou la concurrente, toutes vos applications se ressemblent.

De l’inspiration, du fun et de jolies idées

#Couleur

The Colors of Motion,  une exploration de l’utilisation de la couleur dans les films.

#Illustrations

yukaidu.com de belles illustrations et animations

#Photos #Architecture

Si vous aimez la beauté de l’architecture, des couleurs et de la symétrie, voici un joli compte instagram

#CSS

CSSBattle, utiliser vos compétences CSS pour recréer la cible attendue avec aussi peu de lignes CSS que possible

Tutoriels

#CSS

Art Direction For The Web Using CSS Shapes

Des ressources outils et plugins pour vous faciliter la vie

#Photos

The Gender Spectrum Collection: une photothèque d’images de modèles trans et non binaires qui vont au-delà de ce qu’on a l’habitude de voir en termes de stock photos

#UX

UX conferences, des dates de meetups et des ateliers UX dans le monde entier

#Development

illustrated.dev explique le développement web avec des petites illustrations

#Télétravail

Focusmate: J’essaie de savoir si c’est réel ou non : un service qui vous met en binôme avec quelqu’un pour vous regarder à travers la caméra pendant que vous travaillez à distance pendant 50 minutes. Je pensais aussi qu’on avait des chats pour ça.

#Mac #App

One Switch, une petite application mac utile lorsque vous faites une présentation par exemple

#Navigateur

Can I Stop? – Libérez-vous d’Internet Explorer 11 dans des endroits où (presque) personne n’utilise