Изображения

Стандартные размеры и пропорции для всей интерфейсной графики: иконки, иллюстрации, аватары, фотографии.

Иконки

Пример Название Размер иконочной «площадки»* Размер иконки Применение
$sizeIconUIProductivity 16px 14px Productivity
$sizeIconUIMedia 18px 16px Media
$sizeIconHeader 20px 18px Productivity / Портальное меню
$sizeIconWysiwyg 14px 12px WYSIWYG (Productivity)
Иконочная площадка — невидимый квадрат у каждой иконки, который используется для мелких выносных элементов. Она сохраняет единый размер даже для иконок, которые сильно отличаются визуально (например, вертикальная и горизонтальная).

Иллюстрации

Название Размер Использование
$sizeIllustrationS 48х48 Настройки, попапы (диалоги)
$sizeIllustrationXM /* размер потенциально убирается */ 72х72 Промо-письма (колонка иконок с подписями справа, две колонки с текстом снизу)
$sizeIllustrationM 96х96 Попапы (промо), промо-письма
$sizeIllustrationL 144х144 Промо-письма (большая фича)
$sizeIllustrationXXL 288х288 Промо-письма (врез), промо-сайты (врез)
Возможны также неформатные иллюстрации для промо-сайтов на весь врез.

Аватары

Название Размер Использование
$sizeAvatarXS 24х24
$sizeAvatarS 32х32
$sizeAvatarM 48х48
$sizeAvatarL 96х96
$sizeAvatarXL 128х128

Фото

Размеры фотографий, которые используются в медиапроектах (идёт стандартизация).

Мы используем только три пропорции:

— 4:3.

— 16:9.

— 1:1.