👋 Heya, Roman’s here.

I am a UI designer converted into an online entrepreneur (without a precise aim to become so). In 2018 I started creating UI kits for Figma releasing Setproduct. This website’s mission is to help designers, developers, and companies to save money and time on a design by releasing their products much faster.

I’ve been in the graphic design realm for more than 20 years. In recent years I dedicated almost every day of my life browsing tens of thousands of individual components, screens, different websites, and applications, studying their structure, layouts, and color solutions. My aim is to create a comprehensive UI guide on designing apps and their components, templates, etc.

So far, this guide is a work-in-progress. Unfortunately, it is not always possible to put on paper everything you’ve learned. So, hopefully, you guys will also make your contribution to the release of this guide. Therefore, share your thoughts. I am always open to a dialogue.

🗣 I have to write more!

🗣 I have to write more!

🗣 I have to write more!

Get ready to explore the states, styles, sizes, usage, and templates in our journey of designing the Avatars.

👇 Here we go!

Avatar UI design exploration

Avatar (also known as Userpic) is a component through which the user identifies himself or herself.

What an Avatar can contain

Here are the following types of content that can be used for Avatar:

• Blank (aka empty state)
• Initials
• User’s photo or image.

Color & Size

Depending on the situation, you can use a variety of options for the color and sizes:

• For better recognition, the color palette can be diversified;
• Headers, Appbars, etc. are the main targets for Avatars with 24–40dp width;
• 40–48dp Avatars are commonly utilized in content blocks or lists;
• If you want to use Avatars in templates, such as Profile, Settings, etc., then you should use 56+dp.

Events & Informing

When we want to inform about something or demonstrate the call to action via Userpic, we can use extra components for this:

• The indicators that show if the user is online or offline
• Information by notifications and visual feedback with a numbered label
• The extra icon can be shown for the user to make an action

Status of a User

The most common practice of showing the status of a user is to place a colored indicator at the bottom right corner of a Userpic.

• The green color indicates online status, gray — offline
• The filled shape is used for online status, empty shape — for offline (alternative choice)

Notification labels

Depending on what priorities you have and in order to catch the user’s attention, the labels of the avatar can be modified.

• For the indication of a high priority, solid and bright colors can be used
• For other situations, go with smooth or light background

Action to call

When Avatar is clicked, it is a common practice to use components like rounded buttons or side-nested icons to show that the upcoming action will take place.

• Change the icon to the result that corresponds user’s expectation
• Usage of colors should be reasonable and need to emphasize the meaning of the event or action

Text-containing avatars

Sided text

When additional information needs to be added, the secondary titles can be used along with Avatar. This feature is used pretty commonly in app bars, lists, tables, and so on.

• Larger titles are used to indicate the name of a persona
• Subtitles for additional details are optional (for instance: status, occupation, last visit, the number of followers, and so on)

Bottom text

When it comes to templates, a larger Avatar can be utilized with the text placed at the bottom. This is a common pattern for in-app sections, such as Social, Profile, Settings, etc.

User Experience patterns of Avatars

Events

To further indicate the events of new users, a border may be added around Avatar. You can also add a counter with a badge, which will also have a powerful design impact.

Progress

The use of a stroke, which serves as an indicator of Avatar’s achievements, remains quite popular and convenient.

Selection

With the selected state, one of the most reliable confirmation methods for the user is a combination of a confirmation icon and a stroke.

Here is how the typical variant of a Selected state looks like:

The group of Avatars

With a Button

At the point when Avatars are grouped, a CTA button can be a solid choice for letting the user know about a certain action from him.

For example, the “Plus” button takes us to a series of interaction-related options (Adding, Editing, Sorting, etc.) that can be performed to a grouped Avatars.

With a Badge

A numeric badge is a great solution to indicate the number of users remaining in the queue.

Badge with onhovered state

One of the most common patterns for a badge when it is onhovered is the expansion of users’ additional info.

Avatar with onhovered state

When the avatar in the stacked group is onhovered, the great way to show the full name of the user is by using a Tooltip component.

Templates

The most popular option for using avatars in applications or websites is to embed a small Userpic in the Header or larger options in the Profile / Settings sections. Thus, the user can make edit actions to the picture.