Pixels of the Week – March 3, 2019
Every week I share a list of curated articles, resources and tools about UX, UI and mobile design, Front-End development, HTML, CSS and more…
This week’s selection: creating a diverse open dataset for voice, relevancy of wireframes, history of LGBTQ+ design, accessibility audits tools, typography inspiration, promoting diversity, learning CSS, validate design decisions, the bad idea of recreating buttons with divs and JS, Interactive Typography cheatsheet, SVG & CSS micro-interactions, Grid layout cheat sheet, footer design, PWAs, CSS drawing basics, etc.
You can follow me on twitter to get a dose of links every days.
What I was up to this week
- I talked in a podcast in French about my job as a UX designer, how I got there, videos games, design trends, voice interfaces, how movies shape the perception we have of interfaces, my drawings on the iPad and a few more things. You can listen on soundcloud and youtube
- I prepared a little user interview guide that helped a lot during the interviews. It’s based on some UX cards by 2 Geoffrey Crofte and Julie Muller. Stay tuned, there might something open source coming in the next months 🙂
On this blog
#CSS #SVG
In case you missed it, I had Geoffrey Crofte as a guest this week on the blog. In the article Portfolio Rework Part 1: Animation, Micro interaction & SVG, he explains you the tips and tricks he used to build the menu of this site and a few of the other super cool micro-interactions.
TL;DNR the one you should not miss
#Diversity #Opendata #Voice
voice.mozilla.org, you can help Mozilla create more diverse and open datasets for voice interfaces
Interesting article
#UX
- “Wireframes are becoming less relevant — and that’s a good thing” I agree for small projects, but on big projects with analysts, wireframes help have everyone on the same page regarding content and functionalities. That being said, a list of content would be perfectly fine for me as a base to start the design and I prefer doing the UI directly with quick paper wireframes. But a lot of stakeholders love this deliverable because it’s visual and easier to understand than an list, they want to “project themselves.
- “Web Page Footers 101: Design Patterns and When to Use Each.” or can also use them to bring some fun and brand identity like I did on myriamjessier.com, wording matching her whole fun and sassy style.
- Reminder: Personas without scenarios are like characters
#Design
- “Black, White, and Rainbows: A Brief History of LGBT+ Design” because queer graphical history is not just the rainbow flag 🙂
- 10 methods to help you validate design decisions
#Front-end
When Is A Button Not A Button? — the complex hell of recreating buttons behavior in JS (keyboard, tabindex, hover focus inactive etc.) tldnr: use a <button> element it was created for that purpose.
#HR
“Shields Down” one of the best article I’ve read on why and when people resign.
Inspiration, fun demos and Great ideas
#Typography
Some typography inspiration 🙂
#Diversity
Dear Tech Company is a collaborative video response to IBM’s Dear Tech Ad, trying to promote ACTUAL diversity in tech
#Webdesite #Whimsical
I’ve no idea what this site is or does (which might be an issue from a marketing point of view), but I find it really visually attractive, fun and whimsical: vakula.co
News in the industry
#Amazon
Amazon stops selling Dash buttons, goofy forerunners of the connected home
. The Dash Button demise was a result of the rapid expansion of Alexa based voice commerce
Tutorials
#Front-End #CSS
- CSS Puzzles: a 12 weeks program to help you get better at CSS
- Theming and currentColor – quick CSS tip
- If you want to start drawing with CSS, here are the basics.(and before you lash out in the comments I’m not saying you should for a project, but it’s nice to have fun with technologies)
- Recreation of Facebook Microinteractions for Feature Discovery, the SVG trick is really cool
Useful tools and plugins that will make your life easy
#Text To Speech
Play’s Text to Speech app, if you want to listen to articles instead of reading them. I find this extremely useful, especially when am I tired. I’m wondering if there’s something similar to read ebooks 🙂
#Accessibility
5 Tools For Automated Accessibility Audits
#Typography
Interactive Typography cheatsheet, to help you get the typography vocabulary 🙂
#Grid Layout
GRID: A simple visual cheatsheet for CSS Grid Layout
#PWA
appsco.pe a nice place to find PWAs
