Pixels of the Week – October 11, 2020

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: a pokemon analogy to explain annoying UI patterns,  the concept of disability dongle, fun animation demos, CSS tutorials, design automation tools, chrome devtools to inspect CSS grids and emulation visual disabilities, mental models, the inclusive Design 24 videos, user task analysis, CSS clamp() responsive typography, beautiful variable fonts, online privacy tracking tool, usability of opening links in new tabs, etc.

#Now – what I’m up to

Sharing is caring: this week I shared my list of 80+ UX related blogs (and people’s blogs) with RSS feed to help you get started an progress in the user research and user experience design field.

I’ll be talking and giving a workshop on designing adaptive components at Open Slava next week. The workshop is sold out but there’s still tickets for the talk.

TL;DNR the one you should not miss

#UserPatterns #Pokemon

This is amazingly fun and instructive: an illustration on how a seemingly harmless pattern can turn into a formidable beast, using the analogy of Pokemon evolutions by @kryshiggins

Cookie peek becomes cookies sheet becomes cookie eat, cooltip becomes prooltips becomes enchoachmarks, caroussel becomes autoplay-lars becomes slideshow

#Accessibility

Did you know you can now emulate different types of color blindness and visual deficiencies with the Chrome Dev Tool? Go to the dots icon in devtool > more tools > rendering. At the bottom of the list use “emulate vision deficiencies” to launch different tests.

My web with 3 differents types of visual disability check

(click to open the image fullscreen)

Interesting article

#Usability #NewTabs

Opening Links in New Browser Windows and Tabs” by @NNgroup Short answer: always open links in the same browser tab or window (especially on mobile) and do some heavy user research to discover if that would actually benefits users.

#Psychology #Design

Design better by avoiding your cognitive biases: seven cognitive biases, how they can mess up your design work and what you can do to avoid that.

#TaskAnalysis

I’ve been using a Task Analysis method on current project and it helped us a lot understand user user tasks and goals, so I’m super glad to see @NNgroup
published a comprehensive article about this method.

#Disability

A community response to a #DisabilityDongle. A Disability Dongle is a well intended elegant, yet useless solution to a problem we never knew we had. Disability Dongles are most often conceived of and created in design schools and at IDEO.

#Trends

The 5 main anti-trends in design” things like illutrations, unsplash photos, rounded corner, neumorphism and transparency might look cool, until everyone follows the same trend and they are not anymore. Don’t blindly follow the latest UI trend ^^

#Harassment

Going Viral as a Woman in Tech the kind of harassment women in tech face

#Touch

Touch, Point, Click: Mouse vs Touch Screen Input” an interesting articles on touch support for drag and drop interfaces and how complex it can quickly become

Inspiration, fun experiments and great ideas

#Animations #Demo

#Comic

OMG I am so glad this still exists: Hello Cthulhu, when Hello Kitty meets my Lord the all mighty Cthulhu

#Typography

Before the Netflix N + Ta Dum sound, I think the most iconic and recognizable typeface + sound combination was the Law and Order one: Dun Dun. It’s 30 years old now, wow, time flies. That’s the power of great branding ^^

#Typography #Variablefonts

A showcase of a few beautiful variable fonts you can play with by @Fontsmith

#Inspiration

I like this fun 3D style of @thedaintyheart’s illustrations, great portfolio

Talks and podcasts

#MentalModel

“When we design for the digital world, the laws of physics are no longer a constraint technically, but are still a constraint mentally for our users”, UX for Lizard Brains a great talk on mental models and designing for the Lizard Brains by Sophia V Prater.

#Inclusive Design

The videos of Inclusive Design 24 (#id24) are all online for free on youtube

#Podcast

With business analysts documenting exactly how this looks and works, product owners doing wireframes, and engineers asking customers “what they want,” do we really need CX/UX specialists at their company? Find out my answer in this podcast I was invited to.

News in the industry

#CSS #Inspect

Did you know the Chrome dev tool has a tool to help you inspect and debug your CSS Grid layouts?

Tutorials

#CSS

An elegant solution to get images bleed outside of the main text container

#CSS #Typography

An interesting elegant solution for responsive typography without media queries that uses the CSS clamp() property and CSS custom properties.

Useful tools and resources that will make your life easy

#UX #Students

If you are a student studying UX design, Uyen Vicky Vo and Julia Fernandez built a community for you. The idea is to connect, share, showcase, inform and provide a platform to support and encourage new designers. There’s also great events

#Automation #Design

Thedesignmagic.com: this is a gold mind if you are trying to automate some parts of your design process in different areas: user search, inspiration, UI design, review, presentation, code and testing.

#Privacy

Blacklight: “Enter the address of any website, and Blacklight will scan it and reveal the specific user-tracking technologies on the site—and who’s getting your data. You may be surprised at what you learn. “

Stéphanie Walter

Senior UX Designer - Mobile Expert

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

Follow on Twitter

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 work and contact me.

Leave a Reply

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