xwas

Основные элементы сайта, содержащие аватар и фон:

(десктоп; на примере сообщества Новости Пикабу и аккаунта @Moderator9000)

Наблюдения из этой компиляции и опыта использования сайта:

— аватар пользователя всегда обрезан до окружности;

— аватар сообщества обычно квадратный, округлён только в шапке поста;

— при наведении курсора аватар всегда анимируется приближением на ~10%

(изображение остаётся при этом в границах исходного круга или квадрата);

— при наведении курсора на аватар или имя пользователя всегда всплывает карточка пользователя.

Разберём подробнее.

Аватар

Аватар сообщества можно увидеть:

— на странице сообщества в блоке с фоном,

— на странице сообщества в боковом блоке "О сообществе",

— в разделе "Сообщества",

— в блоке "Рекомендуемые сообщества",

— в блоке "Активные сообщества",

— в шапке поста над заголовком, справа от никнейма автора и даты.

Аватар пользователя можно увидеть:

— на странице пользователя

— на всплывающей карточке пользователя

— в блоке "Комментарий дня"

— в шапке поста над заголовком

— в обсуждении поста рядом с комментарием пользователя

Если мы проанализируем поведение на сайте обычного пользователя, то, очевидно, самыми часто отображаемыми для него версиями аватара будут последние 2 пункта из обоих списков. А они у нас относительно общего масштаба и своих собратьев примерно вот таких размеров:

Что из этого следует. В аватарах не стоит:

— размещать текст из более 3-5 символов;

— использовать изображения, где важны мелкие детали.

Рекомендуется:

— проверять читаемость аватара в уменьшенном виде;

— использовать максимально стилистически-простые изображения;

— помнить про обрезку при анимации увеличением;

— помнить про обрезку до окружности.

Так как имя сообщества или пользователя всегда будет рядом с аватаркой, ей достаточно дополнять его тематическим изображением или символом, цветом. Это может быть лаконичная иллюстрация, иконка или логотип. (Исключением являются android и ios приложения: там аватар сообщества не показывается в шапке поста).

Итого:

Фон

В зависмости от того, на каком устройстве и с помощью каких программ просматривается сайт, аватар может быть расположен по-разному относительно фона. В iOS-приложении фон пользователя не показывается.

Универсальные рекомендации:

— располагайте важные элементы в безопасной зоне;

— создавать сквозные элементы дизайна на аватаре и фоне почти нет смысла;
— безопаснее всего использовать абстрактные изображения, паттерны, градиенты или сплошные цвета.

Совместив варианты отображения сайта с разных платформ, получаем такой шаблон. Наибольшая светло-зелёная область — безопасная зона.

• На мой взгляд, использовать в оформлении кексы, печеньки и прочую айдентику не нужно, если тематика страницы напрямую не связана с пикабу;

• Не обязательно использовать в названии "сообщество", "пикабу" и прочее капитанство кроме случаев, когда это оправдано; не забывайте про точки над ё и закорючку в й.

• Несколько ресурсов, где можно взять бесплатные (CC0) изображения: pixabay.com, unsplash.com, pexels.com, stocksnap.io;

• На всякий случай проверьте, как выглядит ваше оформление в "Ночной теме";

Пока всё

Если заметили неточности или есть что дополнить — пишите в комменты.

@SupportCommunity,  если пост пригодится — был рад помочь.

Спасибо, что дочитали.

// информация актуальна на март 2021