Мы хотим ввести на платформе одну из стандартных продуктовых фич — аватарки. Так сложилось, что до сих пор не было. Договорились, что для тестирования идеи будем рандомно присваивать аватарку пользователю — как у гугл документов. Ручной смены аватарки пока не будет, юзер будет ходить с тем, что ему нагенерирует машина.

Генерация реализована так — берется рандомный цвет из палитры, рандомная иконка из набора и соединяется. Для теста этой идеи я беру опенсорсный набор эмоджи Noto Emoji и фирменные цвета проекта.

Цвета

Из фирменных цветов делаю цветовую растяжку от самого бледного оттенка к самому темному.

Прикидываю на макете какие цвета будут смотреться тухло, а какие хорошо. Слишком темные цвета не беру — будут сливаться с фоном хедера. Слишком бледные не подходят по стилистике.

Оставшиеся цвета собираю в палитру и прописываю хексы для разработчика.

Иконки

Ищу оптимальные размер аватарки для хедера и форму иконок, смотрю цвет иконки в сочетании с фоном. Чтобы сделать форму аватарки четче — делаю обводку.

Пробую прикинуть как будет жить иконка с постоянным цветом на разных фонах.

Выглядит неестественно, тогда решаю красить иконки цветом фона на 2 тона темнее. Заранее определяю эти оттенки

Набор окончательных иконок для аватарки.

Итог

1) Берем готовый набор иконок
2) Набор background-color,
3) Набор icon-color, который задан к каждому фону
4) Генерируем аватарку

Примеры