RECOMMENDED

All Tips

Consistent Border-Radius
Consistent Border-Radius

Consistent Border-Radius

card
ui
visual effect

Round images usually look weird when they're included in a card with a small border-radius.

Use the simple rule of thumb:

π™Šπ™ͺπ™©π™šπ™§ π™π™–π™™π™žπ™ͺ𝙨 = 2 * π™„π™£π™£π™šπ™§ π™π™–π™™π™žπ™ͺ𝙨

  • The precise formula is more complicated since you need to take into account the spacing between the two borders, so let's it simple!

←Previous Tip

Fallback for Transparent Avatars 2

Another visual hack to ensure consistency for transparent avatars is by adding a subtle border around them, the same color as the background. The border looks like it's part of the background and distinguishes it from the cover section.

avatar
visual effect
ui

Next Tip β†’

How to Apply the Brand Color

Colors are a core element for any user interface. One of the most common mistakes in UI design is the over usage of the brand color. Avoid it by highlighting only the most important elements of your interface with your primary color. For the rest of the elements, combine tints & shades of your main color.

color
ui
visual effect
hierarchy

Become a Better Designer.
The Fun way.

Join 100s of developers, entrepreneurs & junior designers who strive to become better in UI & UX design with byte-sized, practical tips & examples!

Get notified about new tips & articles before anyone else!

  • "

    I love these little tips. It’s like Dribbble but actually useful.

    Martin LeBlanc

    CEO of Iconfinder

  • "

    I love UX & UI tips. Especially, when they are practical and presented in a very good way. Yours are meeting both criteria.

    Lisa Dziuba

    Head of Marketing at Abstract