La semaine en pixels – 17 février 2019

Chaque semaine,  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 : conception de formulaires, designer pour la densité de données, recherche utilisateur, modèles mentaux, inefficacité d’icônes seules, conversations sur la diversité, conception de produits, designs systems pour applications mobiles et desktop, sélecteurs CSS4, conseils de design mobile, apprendre le HTML et CSS, etc.

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

Les liens en français

Petit rappel sur le BusFactor par Laurence Vagner : n’oubliez jamais que si vous pouvez vous permettre de mourir sans compromettre votre projet, vous pouvez partir en vacances sans qu’on vous appelle en pleine dégustation de votre piña colada en bordure de piscine.

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

#donneées #UX

Parfois, ajouter plus d’espace et avoir un design minimaliste ne fonctionnera pas pour vos utilisatrices. Comment l’espace blanc a tué une application d’entreprise et pourquoi la densité de données est importante :  “How white space killed an enterprise app and why data density matters”

Les articles de la semaine

#UX #Recherche

• How to run a research session if you’re not a design researcher – Comment mener une session de recherche si vous n’êtes pas un UX researcher. L’article propose des « mercredis monde réel », un speed dating comme format de recherche rapide qui est à la fois amusant et informatif. Cela me donne quelques idées pour nos prochaines session utilisateur hebdomadaire
• Leveraging Mental Models in Product Design, Tirer parti des modèles mentaux dans la conception de produits. Les outils UX liés au modèle mental sont très utiles pour comprendre ce que les gens attendent et surtout comment ils l’attendent.

#Design system #Conseils #Design

• Creating a web design system from an app design system: Il n’est jamais facile de traduire un design mobile en design desktop, voici quelques conseils intéressants pour vous aider.
• Don’t be afraid to “think outside the database” — votre interface utilisateur n’a pas besoin d’établir une correspondance 1 à 1 entre champs et valeurs. Voici quelques idées que vous pouvez utiliser pour présenter les données « champ : valeur » d’une manière plus intéressante.

#Produit Design

Principles For Designing Better Products – différents types de formats de réunions pour nourrir et développer des idées pour votre produit

#UX #Formulaires

Don’t Get Clever with Login Forms des exemples de formulaires de connexion ennuyeux et comment faire mieux. TL;DR ; créez des formulaires de connexion qui sont simples, prévisibles, et fonctionnent bien avec les gestionnaires de mots de passe.

#Mobile Design

“Tips for making interactive elements accessible on mobile devices” comment rendre les éléments interactifs accessibles sur les appareils mobiles,  j’ajoute ceci comme une ressource à lire pour mes étudiants en ergonomie mobile <3

#Icones

The ineffectiveness of lonely icons… L’inefficacité des icônes solitaires. Les icônes sont des pictogrammes. Ce sont des hiéroglyphes modernes. Sans le contexte, elles ne sont faciles à mal comprendre voir tout simplement méconnaissables. Il a d’ailleurs fallu des années aux archéologues pour les interpréter parce que le contexte était perdu.

#CSS

• CSS selectors level 4 – Sélecteurs CSS niveau 4, il ya beaucoup à venir et déjà pris en charge pour vous aider à sélectionner presque tout en CSS
•  BEM for everyone else – Utiliser les emojis pour expliquer les principes de BEM

#Navigateur

Paint the Picture, Not the Frame: How Browsers Provide Everything Users Need > comment les navigateurs implémentent déjà tout ce dont on a besoin, pas la peine de prendre le contrôle de ces derniers pour modifier le comportement. Lecture intéressants, j’ajouterais un point sur le fait de ne pas prendre le contrôle sur le comportement des clics.

Vidéos de conférence

#Diversité

Eriol Fox: Diverse representations in design and awkward conversations with colleagues, les discussions parfois complexes sur la diversité qu’on peut avoir avec ses collègues

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

#Game #Pixel

Cute pixelart little fox, un petit renard tout mignon en pixel art

#CSS

CSS puns des blagues CSS illustrée, vous pouvez même commander un tshirt

#Webdesign #Fun

Captain Marvel le retour des années 2000 dans le navigateur :D

Tutoriels

#CSS #HTML

Where Do You Learn HTML & CSS in 2019? une liste pour apprendre le HTML et le CSS en 2019.

Mon cours d’initiation au HTML CSS est également gratuitement en ligne, pas de flexbox mais les bases du HTML, bonnes pratiques d’accessibilités, le CSS, la cascade, etc.