---
url: https://floriankiem.com/writing/tips-to-improve-your-product
title: "Tips to improve your product ‹ Florian Kiem"
description: "Unpopular tips that help to make the web a better, more fun place to be in."
crawled_at: 2026-10-19T13:03:36Z
lastmod: 2026-08-30
ask: https://floriankiem-com.ora.run/ask
docs: https://floriankiem-com.ora.run/docs
lang: en
---
# Tips to improve your product

August 30, 2026

# Helpful tips for webdesign

This article bullet-point-lists a bunch of tips I personally found helpful when I learned them. Most of these come from practical work, where we encountered edge cases. I believe continuous refactoring of the elements used in your app, even when you use an existing design system, leads to a better user experience in the long run.

## Avatar Groups, done right

- Makes the "empty" space between them work with gradients or background images

- Easy to maintain, and scalable

- Helps to keep initials readable

Try to avoid using borders or outlines , they need to have the exact color of the background which makes it impossible to scale beyond solid colors.

## Avoid z-index as much as possible

Sort by · Command palette UI · Spring presets Motion · Color scales Tokens

- A good element order makes you be able to avoid most z-index classes

- If using z-index, try to make agents able to know why

- Don't overcomplicate or nest absolute classes if not necessary

## Don't skip the active state

- Active states make it immidately clear if an element is pressed

- The more playful the brand, the more elements would move

- I tend to use more subtle versions for this if an UI is used professionally

- Always keep in mind: Users will click your buttons hundreds, sometimes thausands of times a day

## Stretch your switches while they are held

- Elements that move fast in reallife appear longer, therefore stretches feel more natural

- Combined with different methods of animating the thumb, the switch will feel playful, heavy, soft, etc.

- Try to use this to align with how your brand looks and feels

## Ease your gradients

Alpine pasture

Midday

- Helps to create better readability while taking up less space

- Generally leads to a more polished look and feel, i.e. when used in cards

- Mostly to be used with background imagery, leading to more of the natural light of the image being visible

## Cheat sheet

```
Please check the UI details of our app:

Avatar groups

- Overlapping avatars are separated by clipping each one against its neighbour, not by a border
- Borders and outlines need the exact background colour, which breaks on gradients and images
- Keep initials readable inside the visible part of each avatar

Stacking

- Order elements in the DOM so that z-index is rarely needed
- Where z-index is unavoidable, leave a comment saying why
- Don't nest absolute positioning without a reason

Active states

- Every pressable element has a visible pressed state, not just hover
- Hover and press are ranked: the press is stronger than the hover
- Playful brands can move (scale down slightly), professional ones shift tone instead
- Users press these buttons hundreds of times a day, so keep it subtle and fast

Switches

- While held, stretch the thumb toward the side it will travel to
- Snap back quickly on release
- Match the weight of the motion to the brand

Gradients

- Ease gradients instead of using linear stops
- Use them over imagery so more of the image stays visible
- Eased gradients need less space to keep text readable
```

## Stay in touch

I write here every now and then. Leave your email and I'll send a short note when something new is up.

# Footer

Pages · Work · About · Writing · More · Colophon · Experiments · Legal · Imprint · Privacy Policy · © 2026 Florian Kiem

All rights reserved. No reproduction or AI training.