Pixels of the Week – February 9, 2020

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: 7 principles of icon design, the Norman doors, design beyond the buttons on the screen, design thinking does not address the complexity of designing a product ready to launch, designing a responsive grid, different opinions about having a “CSS4” marketing flag, Ethical Design book, a few CSS tutorials (line-height, sticky position, etc.), 2 CSS animations tutorials, models of UX Maturity, design system articles, etc.

#Now – what I’m up to

I’m currently teaching mobile usability and responsive web design for a Bachelor and  Master Degrees for the University of Strasbourg and that takes me a LOT of time since I update most of the slides and lesson this year. I’m also preparing my workshop on Mobile Design that will take place in Brussels, March 6, 2020. There’s just a few tickets left if you want to learn how to build a mobile usable and delightful mobile apps.

I’m also redesigning an product and we try to have the color scheme accessible so working with orange is quite challenging 🙂

TL;DNR the one you should not miss#Icons

7 Principles of Icon Design” by Helena Zhang, great wrap up and as she says, pair the icon with a text label or find an alternative if the standalone icon is not the clearest solution (I would ad test your icons with your users)

Interesting article

#UX Design

#DesignSystem

#CSS

Different interesting opinions about having a CSS4 “marketing flag”
CSS4 is a bad idea, CSS4 (on CSS-Tricks) and CSS4 is here! I propose CSS-X to settle it. If it worked for the iPhone it can work for CSS ?

#Grid #Responsive

Designing a Responsive Grid in 2016“, 2016 but still relevant article on building a grid system that works with responsive components

#Ads #Darkpattern

Google backtracks on search results design” they are removing the favicons they added a few days ago

Inspiration, fun experiments and great ideas

#Cute

Booping cute foxes is the real purpose of the twitter finger stickers!

#CSS

CSS Grid Experiment: Cross Stitch

Books

#Design #Ethics

I know which book I will buy next: The Ethical Design Handbook. A practical handbook on ethical design for digital products. With practical techniques to influence a positive change in your company.

Tutorials

#CSS

#CSS #Animation

Useful tools and plugins that will make your life easy

#Shadow

Neumorphism/Soft UI CSS shadow generator” ok it’s looks cute, but before pushing into production a neumorphic interface check the contrasts for accessibility issues and test it with users to make sure they understand what are the fields, buttons, etc?

#Dataviz

Yesterday I discovered observablehq.com, a sandbox for people who play with dataviz and it’s awesome <3

#Curation

Yeah, people from HeyDesigner created “Vincent” and app assistant inbox that will bring design and front end news directly to your phone!!

#Sketch

One of my favorite plugin in Sketch to manage text, layer styles and symbols: sketchmanager.com  (also if you bought individually text style manager, symbol manager and layer style manager you can use your 3 licences to activate them in the all in one plugin!!)

#CSS

A quick reminder of 7 CSS attribute selectors that could be useful to you

#Typography

Shake – The Typeface with Parkinson’s, a nice way to raise awareness towards this disease