Pixels of the Week – May 26, 2019
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 podcast episode on accessibility and design, accessible SVG buttons, usability of Tesla’s touchscreens, designing mass market products, understanding Kano Model, help to switch from Sketch to Figma, voice assistants responding to harassement, some CSS tricks, SVG and CSS guide, an animations handbook, HTML input mode, food and climat change questions, a nice micro blogging platform, design naming convention, and beautiful poster and concept art inspiration
You can follow me on twitter to get a dose of links every days.
What I was up to this week
#Accessibility
I participated in a podcast interview about accessibility: for me, it’s also part of the designer’s job to make sure products and services are accessible. Part 1 is online (part 2 will be next week), have fun 🙂
TL;DNR the one you should not miss
#CSS
CSS can do that? Some cool and useful things CSS can do you maybe didn’t know about
Interesting article
#UX #TouchScreens #Cars
- Tesla’s Touchscreen UI: A Case Study of Car-Dashboard User Interface: Vehicle controls should be easily accessible and require minimum attention from drivers, while driving-related information should be displayed clearly and understandably.
- Understanding the Kano Model — A Tool for Sophisticated Designers
- “Our Users Are Everyone”: Designing for Anyone Is like Packing for a Trip to Anywhere, even if your target demographics are very broad, you should still identify specific groups of users within that audience to use for UX research and design.
#Design
- 12 Visual Hierarchy Principles Every Designer Should Know a nice and useful infographics
- Stack mirroring: Designing for code and coding for design – An interesting article on mirroring the structure of your design with the structure of the code. It’s nice, it’s also an interesting way to launch the old “should designer learn code” debate again. TBH, I tend to do that as well but I used to write HTML
- If you are a Sketch user switching towards Figma, this should help: Figma for Sketch users
#HTML
- Everything You Ever Wanted to Know About inputmode. Unlike changing the type of the form, inputmode doesn’t change the way the browser interprets the input — it instructs the browser which keyboard to display, and this is really useful!!
- “I charged $18,000 for a Static HTML Page… and got away with it.” the joy of being a freelance contractor for big corporate companies
#Voice Assistant
An interesting infographie on how voice assistants, which are made to sound female by default, respond to sexual harassment
#Ecommerce #Cognitive Biases
Fight your cognitive biases, aka think before you buy or as Shopify phrases it: 13 Cognitive Biases in Ecommerce (and How to Use Them to Sell More)
#Hobbies #Productivity
The Modern Trap of Turning Hobbies Into Hustles, also known as the “Hooo you should sell that on Etsy” syndrom. had a lot of people asking me to sell my foxy stickers on Etsy as well, nope, I prefer to offer them 🙂
Inspiration, fun demos and Great ideas
#Food #Climat
An interesting interactive article: “Your Questions About Food and Climate Change, Answered – How to shop, cook and eat in a warming world.”
#Posters #Data
50 States Race for Utopia, an interesting open source collection of posters on the the race for new technologies and inventions to boost economy of each of the US state
#Concept art
Hello, good morning here is a Daniel Liang’s concept artist portfolio for your inspiration
Tutorials
#SVG #Accessibility
Accessible Icon Buttons, an interesting tutorial on building accessible SVG buttons
#CSS
- cssfx.dev Really cool hover effects you can copy paste (the ones on inputs only working in Firefox for me though)
- Create a responsive grid layout with no media queries, using CSS Grid minmax
Useful tools and plugins that will make your life easy
#SVG #CSS
A useful guide of SVG Properties and CSS
#Animations
Animation Handbook, Learn how you can use animation to demonstrate abstract concepts, make products feel more life-like, and instill more emotion into digital experiences
#Blog
blot.im a micro blogging platform that turns your files and folders into a blog, sounds like a small easy solution if you want to quickly publish something. (supports markdown, HTML, JS, CSS, etc.)
#CSS
TIL (Today I learned) some tips and tricks about CSS, code editors and more.
