La semaine en pixels – 23 décembre 2018

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 : cohérence et design, le HTML c’est bien plus que des spans et de divs, concevoir pour l’accessibilité, design systems, diagrammes UX, utilisabilité des formulaires, outil de gradients CSS, frameworks, CSS est inconfortable, outils pour les designers UX, conseils d’illustrations et astuces pour les couleurs, mises à jours de Safari et Firefox, une police gratuite, un petit jeu de devinette d’icônes, etc.

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

J’ai publié deux articles cette semaine

#Frameworks #UX

Cette semaine j’ai publié une suite de deux articles sur les templates / frameworks UI et l’experience utilisateur, ou pourquoi utiliser un framework UI ne rendra pas forcément votre site utilisable pour autant si vous oubliez la partie expérience utilisateur.

• Expérience utilisateur Templates / Frameworks UI – partie 1, le constat – dans cette première partie, je dresse un constat à travers l’exemple d’un projet, de mon questionnaire en ligne sur les Framework UI sur l’état du marché des frameworks en 2018 et l’implication des équipes de design sur des projets utilisant des Framework UI.
• Expérience utilisateur Templates / Frameworks UI – partie 2 : remettre l’humain au centre du processus de conception. – comment est-ce que je remets les utilisatrices et utilisateurs au cœur de mon processus de conception tout en continuant d’utiliser des thèmes et des frameworks UI pour des questions de gain de temps et de budget ?

Les liens en français

#UX

Sur 24 jours de web – La recherche utilisateur : tour d’horizon des objectifs et des méthodes

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

#Front-End

« The practical value of semantic HTML » par Bruce Lawson. Je n’étais pas le seul à lever les yeux au ciel en lisant qu’il suffit d’apprendre les divs et les spans pour devenir développeur JavaScript. Bruce nous rappelle pourquoi la sémantique est importante, et que le HTML ce n’est pas que des divs et des spans.

Les articles de la semaine

#Accessibilité

Designing for accessibility is not that hard – concevoir pour l’accessibilité n’est pas si difficile, quelques conseils de base pour vous aider à démarrer, puis demander à un expert pour un audit :)

#UX

• How To Improve UX of Web Forms, comment faire pour améliorer l’expérience utilisateur de vos formulaires Web. Pour aller plus loins sur du formulaire mobile, j’ai publié deux articles partie 1 et partie 2
• Il est parfois difficile d’analyser toutes les données recueillies au cours de la recherche utilisateurs, voilà de quoi vous aider : 10 diagrams based on 2×2 4 quadrants matrix that will help you see straight about it.
• « Consistency in Design is the Wrong Approach » la cohérence n’est pas toujours pas bonne approche, par Jared M. Spool. J’ai aussi l’impression que ça empire avec l’utilisation intensive des frameworks, on ne pose même plus de questions de design et copie colle des composants par habite sans réellement se poser la question de leur utilisation

#Design

• State of Design Systems 2018, une étude sur la maturité des entreprises face au design système. Je dirais que nous en sommes au stade 0,5 pour l’instant sur la plupart des projets : créer les composants et le guide de style, en essayant de travailler pour mieux documenter et aller tout doucement vers le code
• Basics of Creating Vector Images, excellente lecture sur les lumières, les couleurs, la perspective, etc. pour vous aider à créer des illustrations impressionnantes.
• My struggle with colors, part II – utiliser la teinte et les nuances pour construire une palette de couleurs accessible
• Signified Icon Game – un jeu qui est censé tester à quel point vous reconnaissez les icônes des réseaux sociaux. Ca montre surtout est que la plupart des icônes sont difficiles à comprendre sans contexte et / ou étiquettes, expérience intéressante.

#Front-End

• Stop Learning Frameworks – votre temps est précieux, arrêtez d’apprendre un framework, investissez votre temps dans des compétences transférables.
• Handling broken images with the service worker
• Lecture obligatoire pour toutes celles qui ont besoin de styliser des boutons en CSS. Ce n’est pas super difficile, il suffit de comprendre comment ces pseudo-classes sont déclenchées à la souris, au clavier et au toucher : « When do the :hover, :focus, and :active pseudo-classes apply?« 

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

#Police

J’aime beaucoup les ligatures de cette police 

#Code Demo

Une démo très sympa d’animation de Touch ID : « Creating an Animated Login Form for TouchID »

#Paillettes

« Package Thief vs. Glitter Bomb Trap« , ce mec a créée une bombe qui lance des paillettes aux voleurs de colis :o

#Origami

Satisfaction utile de petits pliages en papier « Spiked Sculptures by Matthew Shlian Create Angular Geometry from Folded Paper »

Vidéo de conférence

#CSS

Si vous vous demandez pourquoi le monde du développement web semble divisé entre « CSS est cassé » et « CSS est génial »,  Natalya Shelburne explique l’inconfort de la dissonance cognitive dans toutes les expériences d’apprentissage : CSS at the Intersection

News Webdesign

#Navigateurs

• Release Notes for Safari Technology Preview 71 -> Safari a ajouté Web Authentication  avec un support  pour les appareils « USB-based CTAP2 »
• Firefox 64 – ajout du support de CSS lvl4/5 media queries pour prefers-reduced-motion, any-pointer et any-hover. Le « accessibility inspector » est vraiment cool.

Des ressources outils et plugins pour vous faciliter la vie

#Design systems

Design Systems Digest – des ressources et articles sur le design system

#Gradient

shapy.app, un outil pour vous aider à construire des gradients CSS, et encore un autre : smart little CSS gradient tool generator

#Police gratuite

Extra Cheese, une police display plutôt sympa

#UX

uxstore.com, si vous cherchez des idées cadeaux pour une UX designeuse, pas mal de ressources physiques et numériques sur ce site.