RECOMMENDED

All Tips

Fallback for Transparent Avatars 2
Fallback for Transparent Avatars 2

Fallback for Transparent Avatars 2

avatar
visual effect
ui

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.

←Previous Tip

Fallback for Transparent Avatars 1

Many platforms (like Twitter) allow PNG avatars that can cause UI inconsistencies To avoid this problem add a subtle border and background color to the avatar that is the same as the app's background.

avatar
visual effect
ui

Next Tip β†’

Consistent Border-Radius

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!

card
ui
visual effect

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