Pixels of the Week – August 9, 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: CSS animations and UX, the UX of LEGO interface panels, some smart interface design patterns checklists, making motion accessible on the web, design fiction, some nice free illustrations by icon8, a set of tiny free icons,  90’s video game style tool to hangout online with people, dark mode with prefers-color-scheme, some really cool SVG and CSS animations, different CSS media queries to detect user preferences, etc.

#Now – what I’m up to

Dear readers, this was a supper busy week (well, actually month, since all you see here took a month to prepare). Here are a few cool thinks that went public this week:

#CSS #UX #Animations
My Shiftconf talk on Enhancing User Experience with CSS animations was live this week. I published the transcript, slides and replay video in on the blog

Enhancing User Experience With CSS Animations

#UX #French

This is for my French speaker readers: Geoffrey Crofte an I decided to launch a medium publication dedicated to articles around design, UX design, design and accessibility in French: Design UX — Francophone. Those articles will be curated to insure high quality, and it will also be a place for authors to re-publish articles they wrote on their own blog that are still accurate and interesting for the French speaking UX Design community.

#Talk #LEGO

Aww the meetup #AskTheExpert sent me “Mini LEGO Speaker Stef” and she’s just so many levels of badass awesome, thanks a lot @jefbinomed!! The slides, transcript and videos of “designing adaptive components beyond responsive breakpoints” are here btw.

TL;DNR the one you should not miss

#Checklists

People, if you follow me, you know I LOVE a good checklist. So trust me when I say that you need THIS in your designer and developer lives: “Smart Interface Design Patterns In Your Pocket: Checklist Cards PDF” by Smashing Magazine

Interesting article

#Lego #interface

George Cave (@George_Cave) tried to organise the LEGO interface panels and wrote a fun article about this, if you like geeking out about LEGOs and interface design, it’s a must read!

#CSS

Beyond screen sizes: responsive design in 2020” an interesting article on all the other things you can query to adapt your website: prefers-color-scheme, prefers-reduced-motion, prefers-reduced-transparency, inverted-colors, environment-blending, etc

Inspiration, fun experiments and great ideas

#Virtual

Haan this is a super cool idea, 90’s-style video game to hang out online with friends or during virtual events. Kudos to @ChrisFerdinandifor sharing this ^^

#Fiction #Photos

A visual exploration of possible futures around our relationship with technology and food under the concept of “Design Fiction

#Animations

Toooot tooot, CSS and GreenSock Confirm confetti button by Aaron Iker (@aaroniker_me)

#Animations #SVG

Netlify has now 1 million users and the team, including Sarah Drasner built an amazing interactive SVG animation to celebrate and show the timeline

Podcast and talks

#Talk #Animation #Accessibility

Making Motion Inclusive” by Val Head—An Event Apart video, and amazing talk by @vlh (Val Head) full of practical advice to build accessible and inclusive animations

#Podcast #UX

Time to put on your critical thinking hat and talk about “Empath(et)ic Design Pros and Cons” with Debbie Levitt (@Delta_CX) and David Snodgrass

Tutorials

#CSS

Using CSS to detect and switch website themes to match system preferences by Joe Seifi (@joeseifi), great small tutorial on using prefers-color-scheme: dark/light media query to match your style to user’s preferences

Useful tools and resources that will make your life easy

#Illustrations #Freebies

#Icons

A set of really minimal 1px icons you can user for your project. Bonus point: there’s a Figma set available. Created by Anja van Staden (@rebellenoire)

#UXMyths

Remember the website http://uxmyths.com. You can now get the 16 first myths of that list, including people not reading, not reading and the 3 clicks myth rule in a nice little book (and a free ebook).

#Youtube #Recommendations

TheirTube – this is an interesting tool to understand how algorithm recommendation can build an echo chamber. It shows you what youtube recommended videos of 6 different personas look like

#Framework #Neumorphism

This is a full neumorphism UI kit, and, hum, I feel like this looks really strange and uncanny when applied to a whole page, so interesting visual experiment but, I don’t know, it’s just too much

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 *