Pixels of the Week – September 22, 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, HTML, CSS, the web industry, process inspiration and more…

This week’s selection: video games inspire great UX, dev jokes, advice for new designers, accessibility, CSS Grid Layout, color palette tool, the hover: media query, performance, design system, inconsisten browser behavior with buttons, AI design patterns, email support table, dark theme with CSS variables, etc.

#Now – what I’m up to

It’s autumn, so I changed my hair color (like every year around September). This time it’s dark tulip, orange and yellow, yeah. It doesn’t match the color of this sit anymore but I’m not sure I will update it (the site, not the hair). I’m also preparing my workshop on cognitive biases (in French) we will give at Paris Web with my friend Laurence Vagner in October in Paris. Come and say hi if you are at the event! Last but not least I will take a few days off next week (birthday celebration!!) so there won’t be any links (but I might program something for you)

TL;DNR the one you should not miss

#Video #User Experience

How Video Games Inspire Great UX – a really long but interesting article that for once goes deeper in the details and doesn’t just scratch the surface of gamification

Interesting article

#design #advice

Advice for New Designers – you belong here and you will have time to figure it out, I like positive articles like that, those are not “how to use Sketch” but are nice to read because we all doubt ourselves some days
“When Your Boss Doesn’t Care About Doing the Right Thing” Good designers need to be opinionated. They need to have a voice in the company and that voice needs to speak on behalf of the user.

#design #designsystem

“The Gradual Design System: How We Built Slack Kit” it’s a long process, but just one component, thoroughly documented, was immediately valuable, and created a virtuous cycle for the system.

#UI

Basic Types of Buttons in User Interfaces – some different types of button and some tips to design great buttons

#Accessibility

Accessibility 360 : Web and mobile

#CSS #Browser

Inconsistent behavior among browsers when clicking on buttons, interesting observations on different browser behaviors

#UX

10 bites of UX wisdom every designer should know

Inspiration, fun experiments and great ideas

#Fun

puns.dev – The Worst Computer Puns on the Internet

#Code #Learn

Code Line Daily – a line or code a day 🙂

Tutorials

#CSS #DarkTheme

CSS Quickies: CSS Variables – Or how you create a 🌞white/🌑dark theme easily

#CSS Grid

CSS Grid: illustrated introduction

#CSS

Introducing Hover: progressive enhancement with Interaction media features (the hover: media query)

Useful tools and plugins that will make your life easy

#color #tool

CopyPalette, seamless color palette generation

#Icons

iconsvg.xyz, a collection of icons you can play with to customise them then download them as SVG.

#Image #Performance

Native Lazyload – a WordPress Plugin to boost your image performance!

#AI #Design patterns

Patterns | Smarter Patterns is an interaction pattern library that provides solutions for common AI challenges

#Email #Support

Can I email… Support tables for HTML and CSS in emails (aka the caniuse for emails)

Pixels of the Week – September 22, 2019