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

• 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