Pixels of the Week – March 8, 2020

Stéphanie Walter

Senior UX Designer - Mobile Expert

Senior UX Designer. Mobile Expert. Public speaker. Blog writer. Google Dev Expert Product Design (GDE)

Follow on Twitter

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: stop using material design text fields, CSS fixed header and slide out tutorials, deciding between modal vs page, CSS selectors explanation tool, UX workshop activities, more ethical design patterns, 5 visual design principles, testing other people’s sites, designing for edge cases, etc.

#Now – what I’m up to

This Friday I gave a 8 hours introduction to mobile UX to 15 people in Brussels. We went from user interviews to building user journeys, user flows, ideation, paper prototype and user testing. I thought them about mobile usability best practises, information architecture, content strategy. It was a dense but really great day.

people in the workshop woking on paper mobile prototypes

TL;DNR the one you should not miss


Stop using Material Design text fields!” By Matsuko Friedland, YES YES and YES.
May I add

  • The inconsistency gets worse then you have selects with inputs
  • As soon as you want to icons (errors, tooltips) again you are quite limited with floating labels
  • They might look nice on mobile with a few fields but try to build a complex dashboard with a lot of data to input and you will quickly see that labels into fields becomes a usability nightmare

For those saying “stop using material design”, I think it’s not that simple. Many projects now start with a Material UI react or angular base. Stop using material design either means create your own components (and hire designers to design them) or switch to another UI framework. Don’t get me wrong, as a design I would LOVE to not have all the contraints of those Framework, but I’m pragmatic and see how much time/money they help gain. Plus not all teams are ready/have the budget to get a designer.
So it’s not that easy to say “don’t use it”.

Interesting article



#Content Hierarchy

5 Principles of Visual-Design in UX: The principles of scale, visual hierarchy, balance, contrast, and Gestalt not only create beautiful designs, but also increase usability when applied correctly


Why the  GOV.UK Design System team changed the input type for numbers” what are the problems with input type = number and why they switched to <input type=”text” inputmode=”numeric” pattern=”[0-9]*”>


Why is CSS Frustrating?” One of the main reasons is because CSS forces you to face the webishness of the web, the responsiveness. Great read to start the week


Nevertheless, Ali Coded – Ali Spittel  published a few screenshots of all the shitty messages she got this year from the web community. Welcome to women in tech 101s


“More accessible defaults, please!” Browsers still have a lot to do to make some default HTML elements accessible. It’s a collective effort!

Inspiration, fun experiments and great ideas

#Machine Learning

Do Not Touch Your Face, a fun experience with machine learning and camera (not working on mobile)



Useful tools and plugins that will make your life easy


Selectors Explained – a nice cool tool by Hugo Giraudel to translate CSS selectors into plain English.


Booklets.io  – Bite Sized Learning: you can browse small “booklets” which are like “reading cards” on specific topics, books, etc. I like this small digestable format then if you are interested in one topic you dig more!

#Conferences #Virus

Is it canceled yet?” A site to let you know if a lot of big conferences are cancelled yet. Hahah the Pacific Rim reference in here

#Design Systems

Design System: Great Tools for building your System

Do you want me to give a talk or a workshop for your company or conference? Are you looking for some help with UX research, design and strategy? You can take a look at my portfolio and contact me.

Leave a Reply

Your email address will not be published. Required fields are marked *