Pixels of the Week – April 28, 2024
Cognitive accessibility, CSS container queries and the come back of "should designers code"
My curated weekly-ish online newsletter, where I share interesting articles, tools, and resources I found during the week. You can expect content about UX, design, user research, accessibility & tech, but also some processes, some inspiration, sometimes books, and a couple of videos and podcasts. Also, don’t forget to, subscribe to the newsletter to get notified, you will get the weekly links directly in your mailbox, and be notified when I publish other articles.
Now: what I’m currently up to
Interested in learning and designing for cognitive accessibility? I put together a list of resources and guidelines to understand and design for Dyslexia, Dyscalculia, ADHD, and Autism. So here we go, new article on the blog: Neurodiversity and UX: Essential Resources for Cognitive Accessibility. If you find it interesting, consider sharing the LinkedIn, TwitterX and Mastodon post.
Most popular content this week
Should designers code? (3min) apparently we are back on this, I share Brad Frost’s opinion in here: “Designers need to understand and work with the grain of the medium for which they’re designing.” Doesn’t mean they need to know how to implement designs in code?. Yup.
Interesting articles that caught my attention
UX and product design
- 3 Models for Framing Software Complexity (6min) the layer cake, the backend iceberg and the front end iceberg, 3 models to help you surface complexity of a project to allocate resources and guide design teams properly.
- Effective user research meetings need a template (12min) some templates to make meeting with your team, meeting about research and meeting about your career more efficient. Even if you are not the one leading the meeting, this can help.
- Are you boring your interviewer by over-explaining context? (9min) Many junior designers over-explain context and make it hard for recruiters and interviewers to understand their work. What can they do instead? Focus on simplifying the problem, use a compelling hook (like journalists do), and highlight their problem-solving skills and relevant experience.
- How to design AI interfaces to improve user choices (9min) Tips for Improving user Decision-Making Processes in AI apps by Edward Chechique: have a redo option, decide between one result and various depending on what users expect, even better let user decide how many choices they prefer, or have an option to pick one but le the user switch if they want.
- Don’t make “data-driven product decisions” (10min) being data-driven isn’t about relying on data to validate existing beliefs, but rather building a data driven environment where people synthesize raw data into meaningful actionable insights that help them take decisions.
DEI and neurodiversity
- This one’s for the white guys (4min) dear privileged people in tech, it’s easy to sit back and benefit from the rules of the game. But, if you are an ally, we need you to stand up when DEI initiatives are being dismantled.
- The ADHD temporal dead zone (2min), yes, to all of this, it’s a giant mess, you want to start something but there’s a meeting soon so you can’t start it because you might go into hyperfocus and miss the meeting.
Curiosity cabinet: non-design/tech rabbit holes I enjoyed
A Hairsplitter’s Odyssey Charmingly illustrated by cartoonist Liana Finck, peer into the world of the ultra-subtle and—at long last—parse the meaning of thrice removed.
Books
The 7 best books for design in the real world (5min) another nice list of books!
Useful tools & resources
- Developer Handoff Checklist: a very useful little interactive checklist that walks you through the steps to prepare a Figma files for final handoff to development.
- Colors Palette Visualizer a tool that lets you visualize what a color palette could look like on mobile and web design, pattern, branding, illustration. I would use this to randomize colors and spark inspiration.
- Cascade: a nice new blog about the past, present, and future of CSS by @fonts.
- LookAway: I found my new “take 1min break, stretch and look away from your screen” app for mac. I like how smooth this one is, and, the fact you can pay ONCE for it (growing tired of yearly subscriptions for almost anything).
- Tokenbase is a free tool for creating, managing and distributing Design Tokens. Easily create your Design Systems and export them to code in a few clicks.
Tutorials
- Reveal an image with smart padding (8min) fun small CSS trick for a nice animation using object-fit.
- An Interactive Guide to CSS Container Queries (20min) Ahmad Shadeed did an amazing job here to help you understand what container queries are, but also common pitfalls, how they work, including a deep dive into query units, and use cases for both container queries and style queries.
- Learn how to create advanced prototypes with Figma variables in 30 min (video) I really like his example of when to use variants vs variables
- When to use tabindex=’0′ – TetraLogical (10min) when you should not use a tabindex 0 to get something focusable (most of the time) and a few exceptions where you should.
- Everything You Need to Know About Captioned Videos (15min) 7 reasons why you want to caption videos and 10 guidelines on how to do this properly, with a list of software to help you.
- A complete guide for content creators to start making accessible content (20min), that covers alternative text on images, contrast for images or text, heading structure, tables, links, text writing and formatting, videos. I also recommend you check out the work of Alexa (Alex) Heinrich on Accessible Social. She curates resources and guidebooks on the accessibility of social media platforms
Latest news in the industry
What Could Go Wrong? Company Selling Robot Dog With Attached Flamethrower “Who’s a good flame throwing boi? Who will burn things into crisps? Yes, it’s you my little doggy”. Damn it, seriously, people?