La semaine en pixels – 3 Mars 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 : création d’un jeu de données ouvert et diversifié pour les interfaces à la voix, pertinence des wireframes comme outils de conception, l’histoire du design LGBTQ+, outils d’audits d’accessibilité, inspiration typographique, apprendre le CSS, validation des décisions de design, recréer des boutons avec divs et JS est une mauvaise idée, cheatsheet typography et CSS grid, micro-interactions SVG & CSS, design de footers, PWA, introduction au dessin en CSS, etc.
Pour plus de liens chaque matin vous pouvez me suivre sur twitter. Bonne lecture :)
Ce que j’ai fait cette semaine
- J’ai parlé dans un podcast qui s’appelle Hémisphère droit de mon métier d’UX designer, comment j’en suis arrivée là, ma formation, de tendances dans le design, d’interfaces à la voix, de dessin sur iPad, de comment les films façonnent nos attentes en terme d’interfaces, etc. Ca se passe sur soundcloud et youtube
- J’ai préparé un petit guide d’entretien pour aider durant les interviews utilisateur. Il se base sur les cartes UX de tâche de Geoffrey Crofte et Julie Muller. Il se prépare d’ailleurs un petit truc open source dans les prochains mois ;)
Sur mon blog
#CSS #SVG
Au cas où vous l’auriez manqué, Geoffrey Crofte a fait un article invité sur le blog : Portfolio Rework Part 1: Animation, Micro interaction & SVG. Il y explique la conception des micro-interactions CSS/SVG comme le menu de ce site, une partie des aperçus dans la partie réalisations, etc.
Les liens en français
#UX #Metiers
Ux designer VS ergonome & autres balivernes, une reflexion sur les titres dans nos métiers et les compétences
tl;dnr, s’il devait n’en rester qu’un ?
#Diversité #Opendata #Voix
voice.mozilla.org, vous pouvez aider Mozilla à créer des jeux de données plus diversifiés et ouverts pour les interfaces vocales
Les articles de la semaine
#UX
- « Wireframes are becoming less relevant — and that’s a good thing » les wireframes deviennent de moins en moins pertinents comme outils de conception. Je dirais que ça dépend beaucoup des projets et des capacités de projection des différents acteurs et actrices du projet.
- « Web Page Footers 101: Design Patterns and When to Use Each. » une analyse de ce qu’on peut faire d’un footer. Perso je me suis amusée sur myriamjessier.com à faire un footer qui correspond au ton fun de Myriam
- Petit rappel, des personas sans scenarios ça ne fonctionne pas Personas without scenarios are like characters with no plot
#Design
- « Black, White, and Rainbows: A Brief History of LGBT+ Design » l’histoire du design d’affiches LGBTQ+ c’est pas juste le drapeau arc en ciel
- 10 methods to help you validate design decisions, valider les décisions de design
#Front-end
When Is A Button Not A Button? — c’est l’enfer de recréer le comportement des boutons en JS (clavier, tabindex, focus survolé inactif etc.) tldnr : utilisez un élément <button> au lieu de les re-créer
#HR
« Shields Down » à quel moment les gens décident de partir et pourquoi il est en général trop tard à ce moment là pour les retenir.
De l’inspiration, du fun et de jolies idées
#Typographie
#Diversité
Dear Tech Company une réponse plus diversifié à la video d’IBM
#Webdesite #Whimsical
vakula.co je n’ai aucune idée de ce que fait cette personne (bon ok si j’ai cherché après c’est un modèle) mais le site est juste magique
L’actualité webdesign
#Amazon
Amazon stops selling Dash buttons, goofy forerunners of the connected home
la fin du dash button d’amazon à cause d’Alexa (je résume hein)
Tutoriels
#Front-End #CSS
- CSS Puzzles: a 12 weeks program to help you get better at CSS, apprendre le CSS en 12 semaines
- Theming and currentColor
- If you want to start drawing with CSS, here are the basics. les bases du dessin en CSS parce que c’est fun
- Recreation of Facebook Microinteractions for Feature Discovery, la partie SVG et masque est franchement maline
Des ressources outils et plugins pour vous faciliter la vie
#Text To Speech
Play’s Text to Speech app, une app mobile qui vous lit les articles
#Accessibilité
5 Tools For Automated Accessibility Audits, 5 outils pour vous aider à faire des audit d’accessibilité
#Typographie
Interactive Typography cheatsheet, une anti sèche pour la typographie
#Grid Layout
GRID: A simple visual cheatsheet for CSS Grid Layout une anti sèche pour grid layout
#PWA
appsco.pe une galerie de sites qui sont disponibles en PWA
