Design Icon

Design

183 Stories
All Topics

The Changelog The Changelog #514

Beyond Heroku to Muse

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.

Vitaly Friedman Smashing Magazine

Rethinking authentication UX

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.

React Twitter

Dracula UI is now free and open source

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.

Design vibilagare.se

Physical buttons outperform touchscreens in new cars, test finds

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. 👀

Robb Owen robbowen.digital

Holograms, light-leaks and how to build CSS-only shaders

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.

Design andy.works

The world's most satisfying checkbox

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 🤌

Evil Martians Icon Evil Martians

Designing interfaces for developer tools

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.

CSS github.com

A collection of class-less CSS styles to make simple websites look better

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.

Design linear.app

Settings are not a design failure

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.

Design jenson.org

A UX designer walks into a Tesla bar

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.

A UX designer walks into a Tesla bar

Thoughtbot Icon Thoughtbot

Who is empowered by your API design?

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.

Design openmoji.org

OpenMoji – open source emojis for the rest of us

At the moment, there is only a dozen emoji sets, most of them from big tech companies. These emoji are visually adapted to the respective appearance of their software platforms. In addition, the usage rights are often very restrictive (e.g. the terms of use of Apple’s emoji).

That is why we have developed OpenMoji as the first open source and independent emoji system to date. When designing the OpenMoji system, we have developed visual guidelines that are not linked to a specific branding. In addition, our goal was to design emojis that integrate well in combination with text.

A collaboration of 60+ students and 3 professors from HfG Schwäbisch Gmünd.

OpenMoji – open source emojis for the rest of us

Slack Engineering Icon Slack Engineering

How we design our APIs at Slack

This is quite a resource coming from a team whose API has always impressed me.

If APIs are designed well, developers will love them, and can become the most creative innovators using your APIs. They will invest heavily, and sometimes even become evangelists for your APIs. We also value a developer’s time and the resource they risk by building on our platform. Bad API design leads to a bare minimum adoption, and even frustration. Bad APIs become a liability for a company.

They share their six design principles as well as the process they follow through to implementation. A must-read for anyone who designs and builds APIs for fun and profit.

Vue.js primefaces.org

PrimeVue – the ultimate Vue UI component library

Thanks to Lars-Erik Roald for submitting this. Here’s Lars:

It is the most comprehensive suite I have ever seen. Especially the datatable component is really impressive. Personally, I have absolutely no relations with Primetek. I just think it is a pity that PrimeVue goes off the radar.

He also provided this getting started video for you to check out.

  0:00 / 0:00