RECOMMENDED

All Tips

Fallback for Transparent Avatars 1
Fallback for Transparent Avatars 1

Fallback for Transparent Avatars 1

avatar
visual effect
ui

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.

←Previous Tip

How to Align Uneven Items

Aligning uneven items can become weird Even if the spacing between them is the same, the visual result seems off sometimes. A super-quick fix is to set the same width for all the elements. Pick the width of the biggest element and apply it to all the other items.

alignment
ui
visual effect

Next 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

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