The five best design links, every weekday

Category: Ui

All Categories

web.dev

Building a multi-select component

A foundational overview of how to build a responsive, adaptive, and accessible, multiselect component for sort and filter user experiences.

r3f-gradient.netlify.app

Mesh and Light Gradients - Real Time and Interactive

Create Stripe-like Animated Gradients

uxdesign.cc

Offboarding: Saying goodbye with grace

One of the major deciding factors when it comes to attracting/retaining users is the onboarding process.

smashingmagazine.com

The Autofill Dark Pattern

A “dark pattern” is a deceptive UX pattern that tricks users into doing things they may not really want to do.

future.a16z.com

Why We Crave Software With Style Over “Branding”

Modern software’s uniformity has fueled a craving for more interesting, opinionated tools — turning inanimate pixels into something with soul.

uxdesign.cc

Design detail: crafting better shadows for interaction

Plato gave shadows a bad name. Alright, look, I may be stretching this a little, but bear with me.

marcandrew.me

9 Figma Design System Tips

In this article, I’ve listed a few quick and easy methods to help you speed up your design system workflow in Figma.

kamushken.medium.com

Designing the Accordion. All you need to know

Accordion is a list of options that are stacked vertically and that can be expanded/collapsed to show or hide additional related content.

pimpmytype.com

What’s the right font size in web design?

You want your text to be read, then set it at a sufficient size! Get some practical examples & numbers focused on body text in responsive web design.

storybook.js.org

UI Testing Playbook

A testing workflow that doesn’t slow you down.

nngroup.com

Designing Empty States in Complex Applications: 3 Guidelines

Empty states provide opportunities for designers to communicate system status and increase learnability of the system.

joshwcomeau.com

Designing Beautiful Shadows in CSS

When I look around the web, most of the shadows I see are fuzzy grey boxes. It doesn’t have to be this way, though!

web.dev

Building a split-button component

A foundational overview of how to build an accessible split-button component.

stephaniewalter.design

Enterprise UX: essential resources to design complex data tables

Table patterns, designing tables for enterprise apps & fitting big tables with a lot of content.

nngroup.com

Designing for Long Waits and Interruptions

5 guidelines help users tolerate the long waits and frequent interruptions that are typical of complex workflows.

uxdesign.cc

UI cheat sheet: Spacing friendships

The easiest way for me to see an interface designer’s skill is by how they use spacing in their design.

tympanus.net

UI Interactions & Animations Roundup #18

A new roundup of the most impressive UI interactions and animations we encountered on Dribbble in the past couple of weeks.

uxdesign.cc

Performance Design: Designing for the illusion of speed

Did you know every second Walmart shaves off of their e-commerce website improves its conversion by two percent?

setproduct.com

Avatar UI design exploration

Here is my UI research for the variants to design Avatars (aka Userpics). You will be guided through the States, Sizes, Styles, Usage, and Templates

workos.com

5 Lessons We Learned Adding Dark Mode to Our Platform

In this post, we will share some of the lessons we learned during the implementation of dark mode at WorkOS.