Pixels of the Week – December 20, 2020

Every day, I share on twitter and LinkedIn a list of curated articles I read, resources and tools about UX Design, User Research, UI and mobile design, HTML, CSS, the web industry, some process, some inspiration, etc. This is an archive of everything I shared this week.

#Now – what I’m up to

This week was my first “mobile UX and responsive web design” online course of the school year 2020-2021. For people who don’t know I teach for different bachelors and master degree for university of Strasbourg and next year also for “Université Libre de Bruxelles”. I might also add a few online workshops next year out of university curriculums. So stay tune 🙂

TL;DNR the one you should not miss

#Industry

There is No Normal. You belong here. There is no rush to learn everything right now. Breathe. Enjoy what you already know. You are doing well. Welcome to the craft.
Beautiful message by Hugo “Kitty” Giraudel about entering the web industry

Interesting article

#Diversity

#UI History

#CSS

#User Research Method

Contextual Inquiry: Inspire Design by Observing and Interviewing Users in Their Context“, what is it, when to and not to apply such a method, how to apply in during user research phase, and the risks and downsides (by @NNgroup)

#Community

Teisanu Tudo disguised as an Instagram UX influencer for 4 months; this is what he learned about the “Instagram UX community“, from lack of / aversion towards criticism to over positivism and UX having a whole other definition (shiny)

#Roles #UX

How to make UX and business analysis (BA) work together“: business analysis takes one perspective (on an object), but UX takes another (on the user), both are complimentary and are two sides of the same coin. (by Ben Weedon)

#Accessibility

Alt vs Figcaption“, examples on how to use alt and figcaption the right way for both accessibility (alt) and editorial (figcaption) purposes by Elaina Natario (@elainanatario)

Inspiration, fun experiments and great ideas

#Inspiration #Interactions

The mix of photos, patterns and vector illustrations on this website works so well, the animations are delightful yet not overwhelming

#Colors #Eyecandy

albumcolors.com I am biased, I love anything that’s ordered by rainbow colors and the aesthetics of music albums, so of course I love this project: a collection of 150 album covers to celebrate the colors in music in 2020

#Game #Maze

A fun little tilting maze game codepen demo by Hunor Marton Borbely (@HunorBorbely)

#VideoGame #Nike

In this fun video, Nike partnered with League of legends after witnessing millions of gamers riddled with health problems. The aim was to win players hearts by mixing gaming elements with sport, before more serious diabetes destroying initiatives kick in.

#Game #Procrastination

@Mailchimp’s design team created this small meowmart game. I am so bad at those games but it’s a lot of fun.

#MachineLearning #Opera

I created my own little blob opera and it’s amazing and actually quite relaxing

#Sketch #Figma

That love triangle is hilarious

#Pantone

I usually don’t like the pantone colors of the year, but folx, this yellow gives me life. Meet the Ultimate Gray + Illuminating (yellow), pantone colors of 2021.

#Biases #AI

In the documentary Coded Bias Joy Buolamwini explores the racial bias in facial recognition algorithms

News in the industry

#CSS #Animations

YES please: Safari Technology Preview 117 implemented the CSS individual transform properties. It doesn’t sound like much, but trust me as soon as you play with CSS animations you will want to have this ^^

#PWA #Webplateform

Next-level web apps on desktop, a 10 talk by @b1tr0t to show you some of the really cool new stuff coming to the Chrome webplatform (like run on login, window placement, tabbed web applications, badging, notification triggers)

Tutorials

#Video

Overlaying Video With Transparency While Wrangling Cross-Browser Support” I’m half “this is super cool we can do nice things with that” and half “OMG marketing is going to overuse this AGAIN to annoy users with ads” (well I bet they already do)

Useful tools and resources that will make your life easy

#LearnCSS

CSS can be weird sometimes, but you can learn those weird things to be more confident with CSS. Julia Evans (@b0rk) drew a 28 pages zine to help you understand CSS!

#GameUI

You know how UI designers have databases for all the elements of a websites? This is the same, but for game UI: a huuuuge database featuring 327 Games and 11655 Screenshots (by @EddCoates)

#Patterns

An online tool to browse, download but also generate and customize patterns you can then download in SVG and PNG and user for you projects (by @Everypixelcom)