Библиотеки и шаблоны
Стили иконок
Цветные иконки категорий
Оранжевые иконки
Черные иконки
Серые неактивные иконки
Цветные иконки состояний
Логотипы компаний
Иллюстрации
Библиотеки и шаблоны
Библиотека иконок General Resources
Библиотека логотипов провайдеров
Скачать шаблон для подготовки логотипов
Стили иконок
![](https://qiwiguide.ru/wp-content/uploads/2019/05/Icons-Styles-1024x737.png)
![]() | #FF8C00 rgb (255, 140, 0) | Активные иконки, иконки в табах |
![]() | #000 rgb (0, 0, 0) | Навигация, иконки внутри кнопок |
![]() | #999 rgb (153, 153, 153) | Неактивные элементы |
Для интерфейсов QIWI предусмотрено 4 стиля иконок:
1. Цветные иконки категорий.
2. Оранжевые иконки для акцентных и выбранных элементов.
3. Черные иконки навигации, иконки внутри кнопок.
4. Серые неактивные иконки.
Цветные иконки категорий
![](https://qiwiguide.ru/wp-content/uploads/2019/05/Icons-Cathegory@2x-1024x600.png)
![]() | Зеленый | #DAF9C5 rgb (218, 249, 197) |
![]() | Желтый | #FFF6DA rgb(255, 246, 218) |
![]() | Оранжевый | #FFEEDF rgb(255, 238, 223) |
![]() | Красный | #FFEAEB rgb(255, 234, 235) |
![]() | Фиолетовый | #F8F1FF rgb(248, 241, 255) |
![]() | Голубой | #DAEAFF rgb(218, 234, 255) |
![]() | Серый | #E8EBF3 rgb(232, 235, 243) |
Используйте цветные иконки категорий в каталоге провайдеров и в других вертикальных карточках.
Оранжевые иконки
![](https://qiwiguide.ru/wp-content/uploads/2018/05/Табы-с-оранжевыми-и-черными-иконками-1024x521.png)
Оранжевые иконки без обводки используются в табах в размере 24×24px.
Черные иконки
Используются в двух размерах — 24×24px или 32×32px.
![](https://qiwiguide.ru/wp-content/uploads/2018/05/Пример-с-меню-1024x322.png)
Пример использования иконок в размере 32×32px — список с иконками. Пример — меню неавторизованной зоны.
![](https://qiwiguide.ru/wp-content/uploads/2018/05/Icons-Navigation-1024x354.png)
Самостоятельные навигационные иконки используются без обводки и сопроводительного текста в одном размере — 24×24px.
![](https://qiwiguide.ru/wp-content/uploads/2018/05/Simply-ButtonBlack-Ic-1024x214.png)
Используются только в размере 24×24px внутри Simple Button.
![](https://qiwiguide.ru/wp-content/uploads/2018/06/Иконка-и-текст-1024x339.png)
Важно! Когда иконка располагается слева от текста, она наследует его цвет. Не рекомендуется использовать серые или оранжевые иконки в сочетании с черным текстом.
Серые неактивные иконки
![](https://qiwiguide.ru/wp-content/uploads/2019/01/Gray-Icons@2x-1024x359.png)
Неактивные или заблокированные иконки рекомендуется окрашивать в серый цвет — #999, rgb (153, 153, 153).
Цветные иконки состояний
![](https://qiwiguide.ru/wp-content/uploads/2019/01/Icons-Statuses@2x-1024x359.png)
![]() | Иконка | #FFF rgb (255, 255, 255) |
![]() | Успешное действие | #4BBD5C rgb (75, 189, 92) |
![]() | Обработка данных | #FFB800 rgb (255, 184, 0) |
![]() | Предупреждение | #FF8C00 rgb (255, 140, 0) |
![]() | Ошибка | #D0021B rgb (208, 2, 27) |
Для отображения статуса объекта или процесса, используйте белые иконки на цветной круглой плашке.
Логотипы компаний
![](https://qiwiguide.ru/wp-content/uploads/2017/11/Colorful-Logos-1024x198.png)
Требования к логотипам:
1. Используйте логотипы, которые пользователи хорошо узнают.
2. Следите за тем, как логотип провайдера используется в других финансовых сервисах.
3. Размещайте логотипы на цветных круглых плашках.
4. Выбирайте упрощенную версию логотипа, если она узнаваема.
![](https://qiwiguide.ru/wp-content/uploads/2019/01/Logo-Sovest@2x-1024x555.png)
Важно! В случаях, когда пользователи почти не знакомы с версией на цветном фоне или плохо узнают её, выбирайте самую известную версию логотипа и располагайте на фоне #F5F5F5. Пример: логотип Совести.
![](https://qiwiguide.ru/wp-content/uploads/2019/01/Providers-Logos-Gray@2x-1024x397.png)
Если для логотипа не предусмотрена версия на цветном фоне, размещайте его на круглой плашке с заливкой #F5F5F5.
Подготовка логотипов
![](https://qiwiguide.ru/wp-content/uploads/2019/01/size-of-artboard-1024x524.png)
Подготавливайте исходники логотипов на артбордах 100×100px. Задавайте каждому логотипу охранные поля — 16px с каждой стороны. Размер логотипа без учета отступов — 68×68px.
![](https://qiwiguide.ru/wp-content/uploads/2019/01/Logo-Zones-1024x466.png)
Квадратные логотипы размещайте на круглой плашке, наследующей цвет квадратной плашки.
Экспорт
![](https://qiwiguide.ru/wp-content/uploads/2018/11/Names_Of_Logos.png)
Экспортируйте логотипы в 6 размерах в формате png:
— 160×160px (1,6х);
— 120×120px (1,2х);
— 100×100px (1х);
— 80×80px (0,8х);
— 60×60px (0,6х);
— 40×40px (0,4х).
Для веба логотипы нужны в одном размере — 100×100px. Остальные пять размеров подготавливаются для мобильных устройств. В итоге должно получиться 6 папок с логотипами под каждое разрешение.
Названия
![](https://qiwiguide.ru/wp-content/uploads/2019/01/Logos-Names.png)
Названия логотипов строятся следующим образом:
1. В начале идет название папки — Logos.
2. Затем название категории — например, Mobile.
3. В конце — название провайдера латинскими буквами — MTS.
Все 3 части названия разделяются косой чертой.
Пример: Logos / Wallets / QIWI.
Скачать шаблон для подготовки
Скачать библиотеку логотипов
Иллюстрации
Во всех продуктах QIWI Кошелька используйте иллюстрации в едином стиле, выполненные в фирменных цветах бренда.