Design handoffs are inefficient and painful. They cause frustration, friction and a lot of back and forth. Can we avoid them altogether? Of course we can! Let’s see how to do just that.

The plugin is open source on GitHub. Photoshop is not 😉

The UI of the open source OKLCH Color Picker & Converter was created with community education in mind as the driving design principle. Beyond being a handy tool, there was a secondary goal: speeding up familiarity and adoption of OKLCH and perceptual color spaces.

To that end, this article explains how the underlying reality of the color space itself guided the UI design.

Designers often complain about the quality of feedback they get from senior stakeholders without realizing it’s usually because of the way they initially have framed the request. In this article, Andy Budd shares a better way of requesting feedback: rather than sharing a linear case study that explains every design revision, the first thing to do would be to better frame the problem.

This week we’re back for part 2 with Adam Wiggins — going beyond Heroku and the story of Muse (listen to part 1). After a six-year adrenaline high on Heroku, Adam needed time to recover and refill the creative well. So, he moved to Berlin, did some gig work with companies…dabbled in investing and advising. But he wasn’t satisfied. Adam likes to build things.

Ultimately, he was just waiting for the right time to reconnect with James Lindenbaum and Orion Henry — the same fellas he created Heroku with. Eventually they founded Ink & Switch, an independent research lab which led to innovations that made Muse possible. Muse is a tool for deep work and thinking on iPad and Mac. Today’s show is all about that journey and the details in-between.

Smashing Mag’s Vitaly Friedman puts down some of his recent thoughts on authentication flows:

nobody wakes up in the morning hoping to finally identify crosswalks and fire hydrants that day. Yet every day, we prompt users through hoops and loops to sign up and log in, to set a complex enough password or recover one, to find a way to restore access to locked accounts and logged-out sessions.

Of course security matters, yet too often, it gets in the way of usability. As Jared Spool said once, “If a product isn’t usable, it’s also not secure.” That’s when people start using private email accounts and put passwords on stick-it-notes because they forget them. As usual, Jared hits the nail on the head here. So what can we do to improve the authentication UX?

Vitaly lists seven recommendations. Nothing radical here, but solid advice worth thinking through.

Dracula UI is a dark-first collection of UI patterns and components. Key features:

Built for Dark Mode: Most templates are built using light colors and later on adapted to dark colors. Dark themes shouldn’t be an afterthought, they should be a top priority.

Designer Friendly: Speed up the prototyping phase by using a highly configurable Design System. Collaborate easily by taking advantage of a carefully crafted Figma file.

Great Developer Experience: Don’t worry about class names, just use the Visual Studio Code snippets. You can take advantage of autocomplete and also access the entire documentation right from your code editor.

This essential guide is designed to be useful for pretty much any team member: find out why your project would benefit from a shared set of practices and patterns between designers and frontend engineers.

From Steve Schoger’s announcement tweet:

🤩 All new look! 260 icons redrawn from scratch
🤏 Thinner 1.5px stoke
✨ New 24px solid set

Available as first-party React and Vue libraries and official Figma components.

The React and Vue libraries are cool, but the coolest part about SVG-based icons is how you can simply copy/paste the HTML directly into your code.

The screens in modern cars keep getting bigger. Design teams at most car manufacturers love to ditch physical buttons and switches, although they are far superior safety-wise.

That is the conclusion when Swedish car magazine Vi Bilägare performed a thorough test of the HMI system (Human-Machine Interface) in a total of twelve cars this summer.

Hopefully studies like this will convince car makers to install both a big, sexy touchscreen display and physical buttons for key functions that need to be performed quickly and often. Unfortunately, right now it seems most manufacturers are following Tesla’s lead to a buttonless future. And they pair that move with worse software, too. I’m looking at you, Ford. 👀

System.css is a CSS library for building interfaces that resemble Apple’s System OS which ran from 1984-1991. Design-wise, not much really changed from System 1 to System 6; however this library is based on System 6 as it was the final monochrome version of MacOS.

Ever been working on a design that feels too plain? Let’s look at a few dozen simple ways to spice things up. Get ready to bookmark this page, because you’ll want to reference this list in the future. It’s unbelievable how many incredible pro-level designs feature solid foundations plus a few techniques listed below.

Robb Owen:

Why let JS have all the fun? With mix-blend-mode finally gaining wide browser-support, we now have access to many of most common shading techniques in CSS. With some choice images and a bit of careful layering it’s possible to build some surprisingly high-quality effects without the need for introducing any JS dependencies.

If you’ve ever used Photoshop’s Blend Modes… you can basically do that in CSS now. So cool! Check out Robb’s entire article. He includes a lot of great examples.

When you’re building a habit tracker app, you better have a good checkbox. The team at (Not Boring) set out to build such an app:

In trying to get a particularly tricky habit to stick, I tried dozens of apps and nothing worked for me. Recording an action felt like yet another chore. None could approach the most basic satisfaction of simply crossing out an item on a list.

Could you design a simple action that felt as satisfying and infuse it with as much symbolism? Were we about to redesign the checkbox?

I think you know where this is headed.

The end result is quite satisfying, but the journey through their design process is just 🤌

Just copy/paste these SVGs into your HTML and you’re good to go!

Pretty much any developer or engineer uses professional tools at work: code editors, graphic designers, word processors, and so on. But designing UIs for these kinds of tools is quite a different beast from the UI design involved with software and applications intended for “everyday” audiences.

In this article, we undertake a high-level analysis on some of those differences, and examine some do’s and don’t’s for designing developer tool interfaces.

Josh Comeau writing for Smashing Mag:

Developers often reach for UI frameworks like Bootstrap or Material UI, hoping that they’ll save a bunch of time and quickly build a professional-looking app. Unfortunately, things rarely work out this way. Let’s talk about it.

Stick around for the rebuttals section, too.

Ever wanted to identify what font was being used o a website, PDF, mobile app, or image file? Here’s the resource you need to get you there in as few steps as possible.

Here’s one of the 15 language-agnostic, actionable tips on REST API design:

Use conventional HTTP status codes to indicate the success or failure of a request. Don’t use too many, and use the same status codes for the same outcomes across the API.

Smile Egbai had a solid rant about this on Go Time recently.

Almond.CSS helps in two ways: it normalizes the CSS styles to provide similar experience cross-browser, and it spices things a little by adding custom styles (that can be personalized!)

Use the different HTML5 semantic tags on your website, include the library in your project, and let CSS and the browser work their magic. Just combine your HTML and Almond CSS (no JavaScript needed.)

Demo here. Looks like a great starter for simple side projects and the like.

A Svelte app that helps you mix, blend, modify, or just get the info on every color under the rainbow. 🌈

Adrien Griveau makes the case for settings as a feature, not a design bug. He build the argument from a simple (and perhaps controversial) point: “users love settings”

There certainly are moments where I find myself on the settings page of a product because it failed to deliver the experience I really wanted. But not all settings are created equal.

There’s a difference between product settings that a product needs to get right by default and preferences that designers deliberately shouldn’t have a strong opinion on.

An interesting exploration of Tesla’s recent update to their in-car control screen that resulted from the author not being able to find the defogger control. Here’s an example of the kind of analysis he provides:

Edward Tufte has this visual rule that 1+1=3. With a single line on the screen, you have just that single object, but adding a second line does something interesting, it adds a third ‘object’ on the screen, the negative space between the two. All good visual designers deeply understand this effect.

In UX design we have a cognitive equivalent. If you have two buttons, there is a third ‘object’ created, the decision a user must make on which button to tap. This cognitive load is invisible and rarely discussed but it can be a real source of confusion.

Smashing Mag always delivers on these epic reference-style posts packed with knowledge:

Writing CSS has probably never been more fun and exciting than it is today. In this post we’ll take a look at common problems and use cases we all have to face in our work and how to solve them with modern CSS.

We’ve had some excellent discussions about API design over the years. Add to the list this piece by Joël Quenneville at Thoughtbot where he borrows a mental model from the world of MOBA games:

In gaming, MOBA (multiplayer online battle arena) players have a mental framework for describing just what kind of player is empowered by different characters. This framework describes all characters in terms of two statistics: their skill floor and their skill ceiling.