Article may be outdated

This article is 68 days old. Some details may have changed since publication.

Hacker News·4 min read·hard

Rauno's Field Notes #2

A
acmnrs
Rauno's Field Notes #2
✦AI Summary

A developer shares insights into UI/UX design improvements for Vercel project cards, focusing on space optimization and context menu implementation. The piece explores the balance between information density and user discoverability.

Why it matters

Design decisions in developer tools significantly impact workflow efficiency and the usability of complex dashboards.

✦Dive DeeperCreate a free account to unlock

Vercel Project Cards I started by tweaking the padding and co-located information to reduce the vertical space occupied by each card. Some data was also omitted, for example we realised that we don't need to show the project branch on the card which is generally always "main".

It's important to understand that these cards occupy a lot of space on the screen on this view. It's easier to digest cards when there are less rows on the card and information is tight and terse.

Here's a before & after of the changes. We even gained an extra row in the grid.

Another change we made was to the project card shortcut menu. We're still testing this change behind a feature flag. At first it seemed like it would simply clean up the card since the ··· button repeats a lot.

Continue reading on Headlinne

Create a free account to read the full article.

Read full article →
technologydesign
✦

Get smarter about the news

Sign up free for a feed built around what you actually care about, Dive Deeper research on any story, and the full text of every article.

Create free account

Already have an account? Sign in