Клиент
Эльдорадо
Моя роль
Дизайнер продукта
Период работы
2019
Дизайн-система для Эльдорадо
Задача
Задача
В 2019 году заказчик нанял меня для работы над дизайн-системой Эльдорадо. От меня требовалось изучить текущее положение, выявить проблемы, разработать библиотеку компонентов и гайды по использованию.
Задача
В 2019 году заказчик нанял меня для работы над дизайн-системой Эльдорадо. От меня требовалось изучить текущее положение, выявить проблемы, разработать библиотеку компонентов и гайды по использованию.
Проблемы
Проблемы
Проблемы
Нет консистентности
Я насчитал около 6 разных вариантов акцентных кнопок, 4 вариантов инпутов, модальные окна перевалили за десяток. Везде разные расстояния, цвета, скругления.
Нет консистентности
Я насчитал около 6 разных вариантов акцентных кнопок, 4 вариантов инпутов, модальные окна перевалили за десяток. Везде разные расстояния, цвета, скругления.
Проблемы в организации компонентов
Компоненты создавались свои для каждого файла в Figma
Проблемы в организации компонентов
Компоненты создавались свои для каждого файла в Figma
Нет переиспользования
Каждый дизайнер использует только свои наработки
Нет переиспользования
Каждый дизайнер использует только свои наработки
Долгая разработка дизайн-решений
Тратится время на согласование UI по каждому дизайн-решению. Вместо того, чтобы описывать логику, описываются состояния и поведение компонентов в файлах Figma. Отсюда вытекает ещё и лишняя работа разработчиков.
Долгая разработка дизайн-решений
Тратится время на согласование UI по каждому дизайн-решению. Вместо того, чтобы описывать логику, описываются состояния и поведение компонентов в файлах Figma. Отсюда вытекает ещё и лишняя работа разработчиков.
Контекст
Контекст
Контекст
На тот момент в Figma уже были auto layouts, но ещё не было variants у компонентов. Все работали на стилях, до появляния переменных в Figma оставалось 4 года.
На тот момент в Figma уже были auto layouts, но ещё не было variants у компонентов. Все работали на стилях, до появляния переменных в Figma оставалось 4 года.
На тот момент в Figma уже были auto layouts, но ещё не было variants у компонентов. Все работали на стилях, до появляния переменных в Figma оставалось 4 года.
Атомарная система
Атомарная система
Атомарная система
За основу проектирования дизайн-системы я взял методологию атомарного дизайна.
За основу проектирования дизайн-системы я взял методологию атомарного дизайна.
За основу проектирования дизайн-системы я взял методологию атомарного дизайна.
Изучил все компоненты, отступы, цвета и формы, выделил и оставил наиболее повторяющиеся. Из этого собрал систему отступов и скруглений, текстовые и цветовые стили. На этой основе разработал атомы компонентов, описал применение и поведение компонентов.
Изучил все компоненты, отступы, цвета и формы, выделил и оставил наиболее повторяющиеся. Из этого собрал систему отступов и скруглений, текстовые и цветовые стили. На этой основе разработал атомы компонентов, описал применение и поведение компонентов.
Изучил все компоненты, отступы, цвета и формы, выделил и оставил наиболее повторяющиеся. Из этого собрал систему отступов и скруглений, текстовые и цветовые стили. На этой основе разработал атомы компонентов, описал применение и поведение компонентов.
Инпуты и селекты
Инпуты и селекты
Инпуты и селекты
Была особая проблема с полями ввода и выбора. На разных экранах, помимо визуальность составляющей, была разная логика и поведение полей. Поэтому необходимо было утвердить и чётко зафиксировать поведение компонентов.
Была особая проблема с полями ввода и выбора. На разных экранах, помимо визуальность составляющей, была разная логика и поведение полей. Поэтому необходимо было утвердить и чётко зафиксировать поведение компонентов.
Была особая проблема с полями ввода и выбора. На разных экранах, помимо визуальность составляющей, была разная логика и поведение полей. Поэтому необходимо было утвердить и чётко зафиксировать поведение компонентов.
Модальные окна
Модальные окна
Модальные окна
Текущие модалки были очень сильной болью. Поэтому разработал шаблоны, правила и примеры для модальных окон.
Текущие модалки были очень сильной болью. Поэтому разработал шаблоны, правила и примеры для модальных окон.
Текущие модалки были очень сильной болью. Поэтому разработал шаблоны, правила и примеры для модальных окон.
Что было сделано
Что было сделано
Что было сделано
Собрана информации и анализ ситуации в отделе дизайна
Разработаны цветовые и шрифтовые стили, система отступов и скруглений
Разработаны дизайн-компоненты
Подготовлен гайд по использованию компонентов
Регулярные встречи по дизайн-системе
Собрана информации и анализ ситуации в отделе дизайна
Разработаны цветовые и шрифтовые стили, система отступов и скруглений
Разработаны дизайн-компоненты
Подготовлен гайд по использованию компонентов
Регулярные встречи по дизайн-системе
Итоги
Итоги
Итоги
Сократили время разработки дизайн-решений примерно на 30%
Разработчики начали внедрять компоненты
Положено начало работы с дизайн-системой и компонентами
Сократили время разработки дизайн-решений примерно на 30%
Разработчики начали внедрять компоненты
Положено начало работы с дизайн-системой и компонентами