La semaine en pixels – 10 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 : superposition de texte dynamique sur des images, design de tableaux complexes, travailler efficacement entre designeuses et développeuses, exemples de portfolios d’UX designeur·euses, positions sticky en CSS, animations de texte SVG, filtres SVG, plugins Sketch, réflexions sur les Jobs to be Done, une jolie carte de bonne année interactive, un peu d’aide typographique, la vie sans Google (Fonts), devenir manager quand on est designeur·euse, etc.
Pour plus de liens chaque matin vous pouvez me suivre sur twitter. Bonne lecture :)
tl;dnr, s’il devait n’en rester qu’un ?
#CSS #JS
How to make Dynamic Text Overlays on Images => une technique JS + CSS pour changer la couleur du texte lorsqu’il est utilisé sur une image et avoir un meilleur contraste pour l’accessibilité et la lisibilité
Les articles de la semaine
#UX
Jobs To Be Done: méthode parfois gadget, les raisons pour lesquelles les Jobs to Be Done échouent parfois, par manque de recherche utilisation de cet outil comme raccourci pour éviter de faire de la recherche sur les utilisateurs.
#UX #portfolio #casestudies
Best of UX Design Case Studies 2018, si, comme moi, vous mettez à jour votre portfolio et manquez d’inspiration
#UI Pattern
How To Architect A Complex Web Table – un article très détaillé sur la façon de designer des tableaux en mettant l’accent sur la conception modulaire, les molécules et les composants et la réactivité.
#Design #Relations
“How to work effectively with engineers ” – comment travailler efficacement avec les équipes de développement, je leur dirais d’apporter de la nourriture et de les impliquer dans la conception en amont, mais la nourriture d’abord ?
#CSS #Sticky #Fixed
- “Position: stuck; — and a Way to Fix It” les défauts de position stuck et comment les éviter
- CSS Position Sticky – How It Really Works! – position sticky, comment ça fonctionne vraiment !
“Life without Google (Fonts)”, la vie sans Google Fonts – je suis d’accord avec le message principal, mais pour les polices, si les équipes de dev fournissent un fallback de polices comme ça devrait être le cas, l’écran vide sans texte dans l’article ne devrait pas être possible, ou ai-je manqué quelque chose ?
#Internet
“Why isn’t the internet more fun and weird?” « Pourquoi Internet n’est-il pas plus amusant et bizarre ? » Je regrette ces jours-là ? L’internet a ajouté <canvas />, mais l’internet a cessé d’en être un.
#Management
Becoming the first design manager – parfois vous demandez d’avoir le poste parce que vous avez les qualifications, parfois vous obtenez le poste et faites du mieux que vous pouvez ensuite.
De l’inspiration, du fun et de jolies idées
#Interaction #Illustration
Nomadic Tribe – une jolie experience interactive avec des illustrations
#Animation
This snail progress bar une barre de progression escargot
#inspiration #typographie
Pure CSS lettering, a bad and fun idea, de jolies idées de lettering
Tutoriels
#CSS #SVG
- “Animate a Blob of Text with SVG and Text Clipping” animation CSS et SVG sur du texte
- The Many Ways to Change an SVG Fill on Hover (and When to Use Them) – des techniques CSS pour changer les couleurs d’un SVG
#CSS #Scroll
Applying Styles Based on the User Scroll Position with Smart CSS, un tutoriel de scroll intelligent en utilisation les positions CSS
#UI
Tip when using small text labels ?, astuces pour rendre vos labels plus lisibles
Des ressources outils et plugins pour vous faciliter la vie
#Typographie
Typographical cheatsheet – because it isn’t “the round thing on the bottom left”. – une cheatsheet typographie
#Designer
Blacks Who Design un repertoire de talentueuses personnes de couleurs qui designent
#Sketch
Marie Kondo” your Sketch files with these plugins, une liste de plugins pour ranger votre fichier Sketch
