Pixels of the Week – September 1, 2019

Stéphanie Walter

Senior UX Designer - Mobile Expert

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

Follow on Twitter

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

#Design System

#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)

Are you looking for a UX or UI designer, for a site or mobile application? Do you want me to give a talk at your conference, or simply want to know more about me? You can take a look at my portfolio and contact me.

Leave a Reply

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