Design Icon

Design

150 Stories
All Topics

Design github.com

BlurHash – a very compact representation of a placeholder for an image

This is a very cool idea and the use case is described perfectly by the authors:

Does your designer cry every time you load their beautifully designed screen, and it is full of empty boxes because all the images have not loaded yet? Does your database engineer cry when you want to solve this by trying to cram little thumbnail images into your data to show as placeholders?

You give BlurHash an image and it gives you back a short string (20-30 chars) that represents the placeholder image. Store the string and send it along with the other data for the object and your client can decode the string into a placeholder image while the real image is loading over the network.

Design gilli.is

Why designing for open source can be so difficult

After being involved with design and open source projects for many years, I’ve noticed a few common reasons why designing for open source projects can be very difficult. Open source projects (especially FOSS) face a lot of issues that more conventional projects don’t because they lack a clear business model, the structure, and the incentives that for-profit proprietary projects have.

This is a hard problem due to many of the factors outlined in the post, but one worth solving.

Erik Kennedy learnui.design

Designing for iOS and Android

From Erik Kennedy who shared some tactical design advice for developers — this awesome visual guide covers the primary differences between designing for iOS and Android, including navigation, UI controls, typography, app icons, and more.

If you’re designing both an iOS and an Android (Material Design) version of an app, this guide is your new best friend 😎. We’re going to cover the most relevant differences between iOS and Android for UX/UI designers. If you’ve created an app on one platform, this is most of what you need to know to “translate” it for the other platform.

Kyle Stetz Slack Engineering

Building Slack's dark mode on desktop

Following up on designing delightful dark themes, I wanted to share this post from Kyle Stetz on the frontend engineering strategy for building Slack’s dark mode on desktop.

As is usually the case with large codebases, finding an implementation that works is only half the battle; gracefully changing infrastructural code and educating engineers on how to use new tools accounts for much of what we do when working on new capabilities of the product. Working in a large engineering organization — especially within a rapidly growing company — means that every change needs to consider the momentum and roadmaps of many other teams. The overarching question for this project was: how can we build sustainable and maintainable support for themes?

Teresa Man heydesigner.com

How to design delightful dark themes

Everyone loves a good dark theme. But what’s the recipe for getting a dark theme right?

When creating a dark theme, it can be tempting to invert our light theme. However, distant surfaces would become light and near surfaces would become dark. This would break physicality and feel unnatural.

Instead, take only the main surface color of your light theme. Invert this color to produce the main surface color of your dark theme. Lighten this color for nearer surfaces, and darken this color for distant surfaces.

0:00 / 0:00