Pixels of the Week – December 15, 2019

This content is 4 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: Heydon’s book on inclusive components, Accessibility Tips for Web Developers, an accessible palette color tool, Font variables, a few articles on design systems, design ethics (deceptive patterns and social impact), SVG dark mode favicon, AI drawing experiment, cool illustrations, Fontsninja new version, overlapping images in CSS and more.

#Now – what I’m up to

This week Laurence Vagner and I organised our last UX in Lux workshop of the year. We had Annabelle as guest facilitator for a workshop on Sketchnoting. I sketchnoted my day which was maybe not a good idea since it was a really shitty day, but yet, fin exercice. If you’re interested in coming to the next event you can subscribe to our mailling list.

On the blog, don’t miss Myriam’s SEO, SXO and everything in between Links for Winter 2019

TL;DNR the one you should not miss

#Books

Meet “Inclusive Components”: Accessible, Bulletproof Front-End Patterns by Heydon Pickering on Smashing Magazine.  It’s a detailed, practical handbook for building fully accessible interfaces, perfect Xmas gift for your dev team!

#Colors #Accessibility

Leonardo, an online tool to generate color palettes based on color ratios and accessibility guidelines

Interesting article

#DesignSystem

#Ethics

  • “The objective of the Impact Canvas is to help design practitioners to identify the possible consequences of a new proposition as its being developed, to surface and mitigate any potential ethical issues it might create.” Interesting tool
  • WTF is deceptive pattern design? An interesting and long article about deceptive design patterns, data privacy, consent and maybe the hope of light patterns at some point?

#Collaboration

Brad Frost and Dan Mall: Rethinking designer-developer collaboration, a nice podcast

#Accessibility

Accessibility Tips for Web Developers” those are basics tips but it would already be amazing if a lot of devs and sites would just start following those. It doesn’t have to be perfect just better than yesterday!!!

#UX

Move over, Pornhub: This new site rethinks the UX of porn” the challenges of 100% user-generated content on audio is quite interesting I wonder if at some point this could also be moderated with AIs and how

#FrontEnd

Dealing with Ads in 2020, an interesting read on how the author made the ads responsive, performant and a little bit less annoying for when users scoll

#Semantics

The future is now, so what about tomorrow?

Inspiration, fun experiments and great ideas

#Drawing #AI

autodraw.com start drawing and the AI will propose some drawings that are close

#Shoes

Nike Releases A New Shoe Designed Specifically For Doctors And Nurses For Long Hospital Shifts

#Illustrations

If you are looking for cool illustrated avatar inspiration: People with Cool Avatars

Tutorials

#CSS

#SVG

Ooh this is a super cool trick I need that on my site hehe “Dark Mode Favicons

#Fonts

An Introduction to Variable Fonts

Useful tools and plugins that will make your life easy

#Images

Interesting economic model for Unplash, let’s see how this goes: Introducing Unsplash for Brands

#ResponsiveTool

Easily generate the optimal responsive image dimensions using srcset and you can even play with art direction options: Responsive Image Breakpoints Generator

#CSS

csslayout.io A collection of popular layouts and patterns made with CSS

#Font

FontsNinja got a really cool update: now you can not only check what font is used on a website, you can also (for some fonts) try it on your computer (and buy it later to use it if you like it).