Pixels of the Week – September 1, 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 lot of color tools and the origins of CSS color names, atomic categorizer tool, inclusive design checklist, 2 articles on design systems, helping devs make design decisions, form tooltips placement, googly eyes solving robots UX problems, CSS Style guide examples, CSS positions explained, form address design, business case for accessibility, etc.
TL;DNR the one you should not miss
#Colors
🔥🔥 Wow, 58 Color Tools For Designers, you need to bookmark this!!. Check also “Where did CSS named colours come from?” I love this kind of geeky articles 🙂
Interesting article
#Design
- “Well, I’m not a designer…” – 5 Ideas for Devs Making Design Decisions, steal, try, get help
- “Be an Elegant Simplifier” In our modern world, it’s easy to junk things up. Simple is hard. We’re quick to add more questions to research surveys, more buttons to a digital interface, more burdens to people.
- “4 Rules for Intuitive UX” I’m still sceptical about the “Pass the Squint Test” rule but the other ones are basic useful design advice (but like always with rules, be careful sometimes they might not apply ^^)
#Form Design
- Designing address forms for everyone, everywhere – some interesting tips to help you localize email address. I’m not super fan of asking country first then address because this is not the order on letters though, but maybe it could work.
- The problem with tooltips and what to do instead
#Design System
- Everything I Know About Style Guides, Design Systems, and Component Libraries – an interesting article that scratches the surface of the technical part of building a design system
- The ABCs of Design Systems – a long read with all you need to be careful about when building a design system, from A to Z
#UX #Robots
How googly eyes solved one of today’s trickiest UX problems – All robots should have googly eyes. Here’s why, a simple trick that changed the perception of users towards the robot. See, my friend Laurence Vagner was right we need googly eyes on things!!!
#FrontEnd #HTML
Optional HTML: Everything You Need to Know. Reasons to keep optional code around typically boil down to understandability, whereas reasons to leave out optional code converge on performance
#Accessibility
The Business Case for Digital Accessibility, in case you need to convince your boss that accessibility is good for business
#React
“The old Frontend Developer roles, that covered user-focused design and coding, were suddenly forced to crystallize into either Frontend Engineer or Designer/UX roles. “Hybrid” roles were suddenly rare in the 1%.” Yup, that’s me, bye bye code hello full time design :/
#Ethics
Why Ethical Responsibility For Tech Should Extend to Non-Users – In a world where these new AI-driven systems are increasingly ubiquitous, non-adoption becomes equivalent to rejection. It ceases to be neutral.
#CSS
Is CSS a programming language? A 1hour podcast with @heydonworks talking about CSS and beers
Inspiration, fun experiments and great ideas
#Cards #Print
If you like beautiful well designed cards, here’s plenty of them
#inspiration #3D
Some captivating 3D animations (be careful if you suffer from motion sickness)
Tutorials
#CSS
CSS Quickies: position – DEV Community 👩💻👨💻 an explanation of the different types of CSS position and how to use them
Useful tools and plugins that will make your life easy
#Design #InclusiveDesign
Inclusive Design Checklist: Broadening perspectives and building empathy, bringing diversity into teams and processes, building inclusion into designs, I like that list 🙂
#Atomic
Atomic Categorizer: Atom, Molecule or Organism, not sure about it? Answer the following quiz to help you figure out what category a particular component belongs to.
#CSS
CSS Style Guides – a few CSS guides example to help you document and create your own rules to build and maintainable projects
#Design System
“Superposition – Extract design tokens from websites and use them in code and in your design tool.” I tried it quickly it was helpful to extract colors, typography, etc. Quite nice if you don’t have an official identity and want to work on an existing site. I still wonder if this grabs the .css file colors or the version compiled in the DOM (that might be 2 different sites if you are working on a full JS React or Angular site for instance)
