Pixels of the Week – March 3, 2019 by Stéphanie Walter

This content is 5 years old. Remember that the following content might be outdated.

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

Pixels of the Week – March 3, 2019