La semaine en pixels – 23 février 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 (illustrations, photos, sites web, etc.)
Au programme : quelques astuces en UI design, l’éthique du designer et la fin de l’amateurisme, de la facilitation pour vos design sprints et brand design sprints, handlebar UI, notifications, onboarding framework, progress tracking UI, les variables CSS, CSS margin collapse, de l’animation SVG dans un formulaire, des breakpoints en CSS, travailler l’UI prototyping avec des outils pour Sketch, du SVG codé à la main, etc.
Pour plus de liens chaque matin vous pouvez me suivre sur twitter. Bonne lecture :) Et merci Geoffrey pour l’aide à la traduction.
tl;dnr, s’il devait n’en rester qu’un ?
#Design
Un excellent article pleins de conseils d’UI pour les étudiants et débutant en design: 7 Practical UI tips (shadows, borders, backgrounds, etc.) to help you achieve visual hierarchy in your design.
#Éthique #Design
Je voudrais citer la moitié de cet article sur le sujet de l’éthique et de la responsabilité des designers au monde, lisez-le s’il vous plait : « Design’s Lost Generation » par Mike Monteiro. L’heure de l’amateurisme est terminée, le design n’est pas de l’art. YES Yes et YES.
Les articles de la semaine
#UI #UX #Design
- J’ai trouvé un très bon article sur le progress tracking UI
- « Designing A Perfect Responsive Configurator« , article détaillé avec plein d’exemples cool.
- Introducing C.A.R.E. – a simple framework for user onboarding. Convertir, Activer, Retenir et Étendre, un framework d’unboarding
- Handlebars in UI Design, un article intéressant sur les handlebar sur comment et quand les utiliser. Je n’ai découvert que récemment le multitâche sur Android et j’ai d’abord pensé à un bug. :D
- The Tamagotchi Trap, du design pour des valeurs humaines.
#Design Sprint
- The Facilitator’s Handbook: 24 Design Sprint Tips, de l’aide pour faciliter des design sprints
- The Three-Hour Brand Sprint – La recette simple de Google Venture pour bien démarrer avec votre marque.
#CSS
#Conference
« My Talk Writing Process » par Val Head. Je suis tellement heureuse de lire que je ne suis pas la seule à regrouper une masse d’articles, vidéos et bouts de livres dans un énorme Google Document. Ma dernière conférence de 45 minutes représentait 30 pages de notes. Et je maintiens encore aujourd’hui ces notes à jour au cas où je devais la présenter à nouveau.
#Notifications
How To Build A Notification That You Won’t Hate, réduire le bruit et les notifications en installant une ampoule ^^ Bonne idée.
De l’inspiration et de jolies idées
#Form
SVG animated login avatar, avec l’aide d’un peu de trigonométrie et GSAP.
L’actualité webdesign
#Invision #Design tools
« InVision Studio is out—but are designers migrating to a new tool again? » Invision studio est bientôt disponibles; mais les designers vont-ils encore accepter de changer d’outil ?
#AMP
AMP gets stories as well (not quite sure about that one)
Tutoriels
#CSS
- Stunning hover effects with CSS variables. J’aime le fonctionnement en symbiose des variables CSS et JS. Cela offre plein de nouvelles possibilités bien cool.
- Everything you need to know about CSS Variables, un long et très détaillé article avec 3 exercices pour vous aider à comprendre le pouvoir des Variables CSS.
- Eric’s Archived Thoughts: Displaying CSS Breakpoint Information with Generated Content
- Rappelez-vous, la troncature n’est pas une stratégie de con…. (Karen McGrane) mais si vraiment vous en avez besoin de raccourcir vos titres, voici quelques codes CSS/JS pour vous aider.
#SVG
How to Hand Code SVG, si vous aimez le challenge.
Des ressources utiles, outils et plugins pour vous faciliter la vie
#Design tools
- Une liste de collections d’éléments UI sur CodePen, pour inspiration.
- Protowire, un outil de prototypage intéressant pour Sketch.
- Sketch Isometric Plugin, si vous voulez facilement construire des rectangles isometriques dans Sketch.
- “Sketch Plugins I Can’t Live Without” par @ry_stephen J’aime aussi Sketch Runner, il représente 90% de mon Workflow. Ça m’ennuie de retenir les menus et raccourcis, je tape juste ce que je veux dans Runner et voilà.
