Pixels of the Week – June 21, 2020

Every week I share a list of curated articles, resources and tools about UX, UI and mobile design, HTML, CSS, the web industry, process inspiration and more…

This week’s selection: design systems, improving user interviews, a few talks (UX navel gazing, inclusive design, psychology and decision making, design metrics, cognitive biases), CSS grid, user states we tend to forget about,  Figma resources, PWAs and what you can do with those, dark modes, cool GreenSock animations and 3D models, CSS Z-index, accessible conference tools, colors and gradients, building task flows, etc.

#Now – what I’m up to

I’m currently having a lot of fun with Procreate on the iPad for a little illustration project I have. This is the concept art, next step is to bring that to Illustrator to turn this into SVG illustration. Wish me luck 😀

Also: Wednesday, 1st July 5:30PM WAT (that’s 6:30CEST), I’ll be talking about bringing your website’s mobile user experience almost to the level of a native app experience with HTML5 APIs and PWAs with the Developer Circle: Akure. Feel free to join us!

TL;DNR the one you should not miss

#UXDesign

How to Build a Task Flow Part 2: Combining Modules” in this second article, Laura Klein explains how to create other flows and modules and have them fit in with different flows

Interesting article

#Design System

Design System: 5 Things We Did to Rally People Over The Years a great to get some perspective on building design systems

#BackToBasics #Design

I still really like this illustration from Andy Rutledge’s “Contrast and Meaning” article (2007), it shows in an elegant way the different “tools” we have to convey meaning, hierarchy and contrast in the digital world

#UserInterviews

12 Ways To Improve User Interview Questions by Slava Shestopalov a great read on avoiding the pitfall of user interviews. And yes this is hard and requires practise but the more you interview, the better you get at it.

#Usability #Accessibility

6 Things to consider when doing usability testing with disabled people and some tips and ideas to help you all the way from recruitment to the test

#Inclusion

Building the Woke Web: Web Accessibility, Inclusion & Social Justice

#PWA

Make your #PWA feel more like an app and bring this all to the web: offline support, downloadable content, sharing and interacting with other apps, hardware key controls, multitasking, push notifications, media control widget, launch icon, etc.

#DarkMode

Is Dark Mode Such A Good Idea?” interesting article quoting resources debunking the “dark mode is better for the eyes and battery”. On a personal level I hate dark mode except for multimedia consumption in the Dark (Netflix)

#CSS

CSS :is() and :where() are coming to browsers: use is() to reduce repetition and target specific element, where() to keep specificity low (does the same as is() but doesn’t increase the overall selector’s specificity (to make them easy to override)

#Tools #Accessibility

Which Video Conferencing Tools Are Most Accessible?” that is a good question

#Sketch #Figma

Transitioning our Design System from Sketch to Figma” , interesting feedback if you ever decide (and can) switch from one to the other

Inspiration, fun experiments and great ideas

#Gsap #GreenSock

Airplanes: a really cool demo using the GreenSock scroll trigger with a 3D model plan to explain how “plane work” <3 (by Steve Gardner)

#Typography #Lettering

A cool small 4 steps tips to draw letters (on Instagram)

#Fun #Paint

Here is a nice experiment of co-generated art to procrastinate this morning (it plays sound)

#Color

For my color geek friends: “Perceptually Smooth Multi-Color Linear Gradients

Tutorials

#CSS

Learn Z-Index Using a Visualization Tool: this article embeds a visual tool that lets you play directly with Z-indexes inside the tutorial to better understand how they work

Talks & Podcasts

#Talk #UX

The End of Navel Gazing: Paul Adams, UX London 2018” a great talk about UXD not being the center of the universe and the need to collaborate with other teams like marketing, sales, support who might actually talk to the users more than us UXers

#Talk #InclusiveDesign

Designing for inclusivity” a lot of good tips on how to build a more inclusive product in this 5minutes talk by Ilana Davis (@IlanaDavisHR)

#Talk #Psychology

Psychology of Decision Making: how we make choices using psychology and what happens when it goes wrong. Using Daniel Kanemahs Fast and Slow theory to frame UX and product design.

#UX #Data

Lesson learned: looking at more than one metric to inform your designs” by Stephanie Lawrence, really interesting small 5minutes talk on the story behind the data!

#Biases #UserResearch

Actionable tips to avoid bias in your users’ interviews” a 5 minutes talk by Cristina Crucianu. This talk is part of Hotjar’s virtual event with an interesting concept: “5 days. 5 talks a day. 5-min each”, replays available

#Emotions #LightningTalk

Some people will buy a tone of books they will never read, most of our purchases are about becoming this ideal we have in our brain of who we want to be
I feel seen, I have like 5Go of ebooks I read maybe 1/3 of those?

#Podcast
Another great episode of What is Wrong with UX, this time  @lauraklein
and @katerutter talk about all the different states designers tend to forget in their mockups

Useful tools and resources that will make your life easy

#CSS

A useful CSS grid cheat sheet

#Figma

A newsletter with Figma articles and resources

#Tools

Lunar is nice tool lets you either synchronise the brightness and contrast of your external monitor with your MacBook, use your location or manually adapt it to your needs (helped me a lot since I spend too much time on the screen)

Stéphanie Walter

Senior UX Designer - Mobile Expert

Senior UX Designer. Mobile Expert. Public speaker. Blog writer. Google Dev Expert Web Platform and Product Design (GDE)

Follow on Twitter

Do you want me to give a talk or a workshop for your company or conference? Are you looking for some help with UX research, design and strategy? You can take a look at my work and contact me.

Leave a Reply

Your email address will not be published. Required fields are marked *