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!
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
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.
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.
“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 :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)
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)