Pixels of the Week – September 6, 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: accordion icons signifiers, CSS reset visually explained, 19,500+ illustrations to win, web inspiration, 226 free icons, CSS gradient gallery, CSS animations inspiration, designing for performance and connectivity, media query-less responsive components, microcopy tips, beyond mobile first design, accessibility and design systems, etc.

#Now – what I’m up to

This week there’s a partnership with Streamline on the blog to win a pack of 19,500 more illustrations.

TL;DNR the one you should not miss

#UX #Mobile
Accordion Icons: Which Signifiers Work Best?” by @NNgroup TLDNR: the caret works best but we should avoid split button since people tend to tap on both the label and the caret and expect the same action

Interesting article

#Mobile #RWD #Capabilities

Don’t design for mobile” an interesting article on mobile being so much more than a small screen and all the complexity of touch, pointers, sensors, etc.

#Performance #Connectivity

Connect, No Matter the Speed” design for slow, intermittent, and offline connectivity, to reduce user frustration

#Accessibility

Scaling accessibility with a design system” interesting case study on learning how to design accessible web components, then scale their impact through a design system.

#VirtualTours #UX

If you are working for museums for instance, this could interest you: “Virtual tours are an occasionally useful secondary tool for checking on specific details, but most users find them to be high effort, slow, and of limited value.

#UX #Microcopy

7 Practical Tips for Better Microcopy

Inspiration, fun experiments and great ideas

#CSS #Animations

#CSS

I love those “CSS basics visually explained” little comics, today: “Visualizing CSS Resets” by Elijah Manor (@elijahmanor)

#Murals #Art #Environment

Those people use special photocatalytic paint to create murals in city that will clean the air (I wonder if this really works thought but the idea is nice)

#Inspiration #Animation

Looking For Something” a surreal small animation journey of a man wondering about the meaning of life and looking for answers within his own consciousness while snoozing at his desk during working hours, by César Pelizer

Tutorials

#CSS #Components

How to Make a Media Query-less Card Component“, a cool tutorial by @geoffreycrofte on how to build that nice little pizza cooking recipe component that adapts to its container I showed you a few weeks ago, without container-queries!

#CSS #Form

Custom Select Styles with Pure CSS

Useful tools and resources that will make your life easy

#Icons

226 hand crafted icons under MIT Licensed for your projects

#CSS

A gallery of really backgrounds you can built only using CSS gradients

#Curation

Sidebar.io created “Web Rings”, a collection of curated blogs and handpicked websites to help you stay up to date in the industry (and this blog is featured there ^^)

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 *