Design Icon

Design

174 Stories
All Topics

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

Thoughtbot Icon Thoughtbot

Designing for failure

Stephen Lindberg takes cues from the level design in Super Mario 3D World and applies it to user experience design:

You may not know what a Conkdor is, but the design problem is universal: “how do we reduce cognitive load without sacrificing interest and fun?” To summarize the video, game designers would approach the problem like this:

  1. Introduce a new concept in a way that the player is not punished for failing.
  2. Build upon that concept in a way that challenges the player.
  3. Combine the concept with other familiar concepts to put a new twist on it.
  4. Give the player a reward!
0:00 / 0:00