Become an affiliate and earn up to 35%
You can participate in Setproduct partnership program and earn up to 35% from every sale you made. We provide promo materials and detailed instructions how to boost the conversion
We used to reply ASAP
Hire Setproduct professionals for your project
We'll take any of our Figma design systems, adjust with your brand guidelines, create all the additional custom templates, and code a web application based on React, Angular, Vue or etc.
How to reach you out?
Type of job
Select design system
Whats your approximate budget?
URL (optional)
We used to reply ASAP
Looking for a custom design based on our Figma templates? We are ready to customize any of our UI kit personally for you and create custom design based on your brief, wireframes, outdated UI or online call. Please, fill the form below or drop us a line at hello@setproduct.com
Your e-mail
Pick a design system for your project
Pick a project size
Describe in a few words (optional)
For browser-based applications
For iOS & Android mobile apps
Whats your budget, USD
Please, provide the approximate number. The total price depends on the amount of templates in your order
1000
10000
Product of the Week ❤️ 40% off for Figma Charts Templates
Close

The Design of Avatar

Userpic, Initials or Empty state. Colors & UI design. Events, States and Actions. Including layout samples for inspiration.

August 2021 · 5 mins to read

by Roman Kamushken

Heya! Roman's here.

I am a UI designer, maker, and seller. It's been already 3+ years passed since I started to make templates for Figma and founded Setproduct.com to help startups and individuals save on design and release faster.

Handling 20+ years in graphic design, last years I've been browsing thousands of apps, screens, components, and layouts almost DAILY to assemble the most complete handbook of how to design components, templates, and entire apps.

But this guide is not there yet. I've faced a challenge trying to pull out everything I've learned, and I hope you'll help me to get a handbook started. I truly need to take off of my brain lay it down on paper…

Here is my exploration and research for the variants to design Avatars also known as Userpics. You will be guided through the States, Sizes, Styles, Usage, and Templates containing avatars in order to have all the keys for your design mission.

Prepare for the tiny UI details, you won't notice till you get too close.
THE STATE OF COMPONENT
Designing Avatar. Styles, states, actions and UI exploration

Avatar UI design

Avatar (aka Userpic) — is a component used to represent a user's profile picture.


Content

The default content for Avatar is:

  • empty state
  • initials
  • user's picture.
Avatar UI design exploration
Size & Color

The size and color of the Avatar may vary, depending on a use case:

  • 24–40dp width is mostly used for Appbars, Headers, etc.
  • 40–48dp for Avatars used in lists, or content blocks
  • 56+ when used in templates: Profile, Settings, etc.
  • Colors may vary for a better recognition
Avatar UI design exploration
Events / Informing

Additional elements for Avatar may be nested to indicate, notify, or call to action.

  • You may indicate whether a user is online, or not
  • You may notify and provide visual feedback with a numbered badge
  • You may show up an additional icon to encourage into action
Avatar UI design exploration
User status

The common pattern of displaying the user's status is to nest a round indicator at the bottom right.

  • Use green for online, gray for offline status
  • Use filled shape when online, empty when offline (alt. variant)
Avatar UI design exploration
Notification badges

Avatar's badges could be stylized according to a priority to catch the user's attention.

  • Use solid and bright colors for high priority to notify
  • Use smooth or light background for other cases
Avatar UI design exploration
Call to action

Use side-nested icons / rounded buttons to clarify upcoming action when Avatar is clicked.

  • Swap the icon according to a result the user is about to expect
  • Apply the colors wisely to intense the meaning of the action
Avatar UI design exploration

Avatars with text

Sided text

In order to provide additional details, Avatar may be used with supportive titles. Mostly used in lists, application bars, tables, etc.

  • The larger caption to specify the persona's name
  • The subtitle is optional for additional info (e.g. status, last visit, role, followers amount, etc.)
Avatar UI design exploration
Bottom text

In templates, you may apply a larger Avatar with bottom-placed text. Mostly used in-app sections, like Profile, Settings, Social.
Avatar UI design exploration

Avatar UX patterns

Events

You may additionally indicate new user's events by adding a slightly distanced outline border around Avatar. The combination with badged counter is a strong engaging solution.
Avatar UI design exploration
Progress

There is an extra case for applying the stroke as a progress bar to represent Avatar's achievements ergonomically.
Avatar UI design exploration
Selection

The combination of stroke with confirming icon is solid user feedback of the selected state.
Avatar UI design exploration
The classic variant of Selected state performed:
Avatar UI design exploration
Want to have our next post delivered to you?
Setproduct newsletter with updates, ideas, inspiration and special offers — once per month

Grouped avatars

Nested Button

When Avatars are stacked into a group, call to action button could be used in case of user's action is required.

e.g. "Plus" button leads to the flow related to interaction with a group of Avatars — Adding, Sorting, Editing, etc.
Avatar UI design exploration
Nested Badge

Use a numeric badge to represent how many users are left behind the stack.
Avatar UI design exploration
Onhovered Badge

The frequent pattern for a badge when onhovered is to expand users' details.
Avatar UI design exploration
Onhovered Avatar

In a stack, you can show up the full name using Tooltip, when each userpic is onhovered.
Avatar UI design exploration
Templates

The most common use cases for Avatar is nesting into the application Header, or use a larger version in the Profile / Settings section, in order to be able to utilize edits for the user's picture.
Avatar UI design exploration
Avatar UI design exploration
This is all you need to know to design better Avatars.

If you looking for those Avatar cards - Duplicate for Figma

Hope my research will help you to improve your in-app UX. Next chapter is for the Accordions, probably. Stay tuned!

Have I missed something? Please, shoot me out at kamushken@gmail.com
Help us improve the blog
Was this article useful?
Your vote has been accepted. Thank you for participating!

More to ☕ read

Show more