Design Icon

Design

180 Stories
All Topics

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 🤌

Travis Turner 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.

Una Kravets web.dev

Web design in a component-driven world

Responsive design is evolving. Una Kravets:

Today, when using the term: “responsive design”, you are most likely thinking about using media queries to change layout when resizing a design from mobile size, to tablet size, through to desktop size.

But soon, this perception of responsive design may be considered as outdated as using tables for page layout.

“Responsive” used to mean a web design would respond based on the size of the device accessing it. In the not-so-distant future, it will mean a web design responds to the preferences of the person, the container its placed in, and to the many form factors (including folding screens) it encounters. Exciting times!

Web design in a component-driven world
0:00 / 0:00