Иван Данилов
Middle UX/UI Дизайнер
Масштабируемая система иконок
Создание единого визуального языка для Outline- и Solid-иконок
Icon Design
Design System
Недостатки
01
Несогласованный визуальный вес
Иконки из разных библиотек могут выглядеть слишком тяжёлыми или слишком лёгкими из-за различий в толщине линий, формах и пропорциях.
02
Нужен универсальный набор иконок
В большинстве цифровых продуктов используются одни и те же типовые действия, поэтому дизайнерам нужен универсальный набор иконок для повседневных интерфейсных задач.
Цели
Создать универсальный набор иконок для типовых действий в цифровых продуктах с единым визуальным стилем.
Решения
Спроектировал Outline- и Solid-иконки по единым правилам толщины линий, пропорций, отступов и визуального веса.
Единая сетка 24×24
В основе всех иконок использовал единую сетку 24×24 px. Такой размер подходит для большинства цифровых продуктов и стандартных элементов интерфейса.
Гибкий визуальный стиль
Спроектировал иконки со сбалансированными формами и мягкими скруглениями, чтобы они одинаково хорошо работали как в строгих, так и в более дружелюбных интерфейсах.
Solid-версии для каждой иконки
Для каждой иконки создал Solid-версию. Это даёт дизайнерам больше гибкости и позволяет использовать набор в разных стилях интерфейсов и с разными уровнями визуального акцента.
Система, готовая к масштабированию
Создал единую структуру и общие дизайн-правила для всей библиотеки. Благодаря этому новые иконки можно добавлять без изменения существующей системы и потери визуальной целостности.
Результаты
В результате отдельные иконки превратились в единую масштабируемую систему. Общая сетка 24×24, сбалансированные формы и единые визуальные правила позволяют использовать их вместе в разных цифровых продуктах. Outline- и Solid-версии дают больше гибкости, а единая структура позволяет регулярно добавлять новые иконки без нарушения системы.
24×24
Единая сетка для всех иконок
2 стили
Outline- и Solid-версии для каждой иконки
1 система
Единые правила пропорций, отступов и визуального веса
7 в неделю
Новые иконки добавляются в библиотеку каждую неделю
Хотите так же?
Давайте работать вместе.
Другие кеймы из этого проекта
Редизайн маркетингового сайта
Улучшение структуры, понятности и визуальной консистентности для создания более эффективного пользовательского опыта и повышения конверсии.
Website Redesign
UI Design
UX Structure
Дизайн Back Office платформы для Global Admissions
Внутренняя платформа для сотрудников Global Admissions, которая помогает управлять лидами, абитуриентами, заявками, оплатами, университетами, статьями и доступами пользователей.
Backend UX
UX Optimization
Data-Heavy Interfaces