Pixels of the Week – December 15, 2019
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
- We have a Design System: let’s fire our designers: debunking the whole “now that we have a Design System we can skip the design phase and our developers can just implement new features directly” myth (same for using a framework, you still need designer)
- “How we scaled our design system to unleash Skyscanner’s new brand” really interesting to see how they handled the redesign and how a strong design system helped them switch smoothly towards the new identity!
#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).
