Pixels of the Week – December 17, 2023

On Twitter, LinkedIn, and Mastodon, I share curated articles I read, resources and tools about UX Design, User Research, UI and mobile design, HTML, CSS, the web industry, some processes, some inspiration, etc. This is an archive of everything I shared this week. And some extra links that I decided to only share for the blog readers. Also, subscribe to the newsletter to get notified when those are published!

Now: what I’m currently up to

For the French speaking folks around: I’ve been reading and prefacing Geoffrey Crofte’s new book “Formulaire Web – Les erreurs à éviter qui vous coûtent cher“. It’s a very nice book that will help you design better forms, from the HTML part to the whole user experience, including how to treat the data in your company. There should be an English version available at some point.

On the craft side, I got myself a foil quill for the cameo 4 and run some first tests. It was, surprisingly, easy. I’m saying surprisingly because I kind of got used to having issues with every single technique on silhouette and getting better with trial and error, but, this time, the first usage was smooth. I also got a pen holder and created some metallic gel pen Winter solstice cards.

TL; DNR: the one you should not miss

The UX of HTML (8min) we need more “talks about what HTML does, and much less about what it means in theory. Let’s talk about user experience, and let’s stop talking about semantics and shit.” Agreed. By Vasilis van Gemert

Interesting articles that caught my attention

• The surprising connection between after-hours work and decreased productivity (10min) according to this survey, not surprisingly, it’s about quality, not quantity. Working extra hours will not increase productivity, instead often lead to burn out. And taking breaks is important. For the human operating system, downtime is not a bug, it’s a feature, and you need this downtime to recharge.
• Building Accessibility Checklists That Are Actually Useful. (7min) Great tips to help you tailor accessibility checklists to your needs: remove items you don’t understand, review ones you do and break it down, assign responsibilities, etc.
• How to get started with data visualization (23min) great ideas and exercises to help get started and progress if you want to do data visualization. By Lisa Charlotte Muth

Curiosity cabinet: non-design/tech rabbit holes I enjoyed

‘We’re sedating women with self-care’: how we became obsessed with wellness “Running alongside this imbalance are the familiar pressures to enhance the body, radiate poise, master impulses (hunger, rage) and perfect the contortions required of the double standard. It is no wonder, in this field of outsized expectations, that wellness has found a ready market among women. Raphael (…) argues that wellness has become a new form of faith. As organized religion has retreated from everyday life, she argues, wellness has rushed in to fill the void. “It’s providing belonging, identity, meaning, community. These are all the things that people used to find in their neighborhood church or synagogue. Wellness offers some sort of salvation on the horizon. It also offers the illusion of control and empowerment (…) Joining a union would arguably deliver greater benefit than downloading another meditation app, but the wellness market presents the latter as a logical solution to work-related stress and deteriorating mental health.” Damn, that’s, well, hard to deny.

Inspiration: fun experiments, beautiful art, and great ideas

• Flexible Variable Font, a contemporary variable sans serif all caps, inspired by late 19th century’s gothic typefaces from broadsides. Damn, this one is beautiful.
• YAY UK 2023 Winner the animation of Euan Garbut, 16 years old, winner of the young animation UK contest. This is amazing.
• Oculi Mundi explore antique maps of the earth and skies in the history of human exploration. Old maps lovers, this is for you!
• Periodic Table of Tools, a fun discovery, at the intersection of data visualization and DIY (by Theodore Gray)

Useful tools & resources

• CSS Peeps one <div>, 5 million of open peeps combinations for this avatar (notion style) generator created by Jane Ori
• CUX Design Toolkit a Figma toolkit, from Microsoft, to help you design conversational interfaces and experiences (bots, virtual agents, digital assistants etc.)
• Noise & Texture: a cool Figma plugin to create all sorts of noise and textures for your mockups
• Malleable Systems Collective a catalog of malleable systems experiments: systems that are easy to change for the user, can be recombined, be modified in the context of use and empower user’s own experience. The concept is quite interesting.
• thewebshowcase.withgoogle.com the cool things you can on the web with native code, local files, seamless authentication and more
• The free online Planning Poker game a cool online tool with cards for your pocket planning, with different voting system options
• UX Ideas if you can’t find a real project with real problem to solves, this tool will generate 1000+ different ideas for you (also, could be useful for teachers who give fake projects to students)
• Architecture Antipatterns sometimes it’s good to understand things you want to avoid doing too, and most of those antipattern apply outside the field of architecture (via Jorge Arango)

Books

You Deserve a Tech Union not sure what to offer a friend working in Tech? I think Ethan’s book would be great (especially with current end of the year layoffs and all)

Tutorials

• An Interactive Guide to CSS Grid a very cool tutorial by Josh Comeau to help you get started with CSS grid layout and all the nice things you can do with it
• Drawing Raindrops with CSS Gradients and Masks a cool tutorial by Michelle Barker, this time you will learn how to draw little raindrops in CSS as a repeating pattern.
• Web Chat accessibility considerations in depth tutorial on how to make a web chat accessible. It starts by asking yourself a couple of questions, to know exactly how it’s supposed to work by Craig Abbott
• Using Figma variables for breakpoints: very interesting step by step on how to set up local variables and use them to test your responsive components directly in Figma by Allie Paschal
• Making noisy SVGs a very cool tutorial to achieve some noisy effect on SVGs using the turbulence filter (by Daniel Immke)

Latest news in the industry

• Introducing Spectrum 2: Adobe released a new design system, with a focus on accessibility. It’s nice they are talking about it, I hope it will help others become more inclusive too.
• ISS astronauts find tomato that was lost in space for 8 months very important space news, right? I love that astronauts have trivial issues like that
• Designing the Mammoth Icon (Again). RAAAH, my brain went “this is an upside down Walt Disney W” and now it’s all I can see. Sorry sorry sorry
• Accessibility Insights now supports WCAG 2.2 AA: very good news!