Дизайнерский кейс Аврора

Dec 07 2022

Как известно, к созданию развивающих и сложных проектов в разное время могут быть привлечены несколько дизайнеров. Очень удобно пользоваться организованной системой элементов и правил их использования, продолжая работать над чьим-то проектом.

Это именно тот метод, который был нужен для одного из наших проектов, Авроры. Нашей задачей было создать концепцию базовых элементов, чтобы в дальнейшем построить из них полноценный интерфейс для платформы в сфере управления электронной коммерцией.

В качестве примера клиент предоставил систему Carbon, которая включает в себя Design-Kit, цвета, шрифты, варианты использования и многое другое. А так же аналог их продукта. Кроме того, я сосредоточился на примерах Material Design, поскольку на их веб-сайте есть варианты компонентов, которые могут быть полезны при разработке.
В ходе работы в первую очередь были предложены шрифты, иконки и основные цвета проекта. В то же время я создал образцы кнопок и элементов ввода, чтобы показать, как выбранные шрифты и значки взаимодействуют друг с другом. Исходя из этого, клиент выбирал шрифты, цвета и внешний вид иконок. Так, один из цветов логотипа, розовый, используется как Основной, а второй, серый, как Второстепенный.

Все используемые стили шрифтов с отмеченными ролями сохраняются в стилях проекта Figma и могут быть выбраны из списка.

Цвета сохраняются аналогичным образом. Но они разделены по папкам в разделе Цветовые стили: Основные и Дополнительные. Для расширения цветовой палитры я использовал метод добавления черного и белого к выбранному цвету в разных пропорциях последовательно (20%, 40%, 60% и т.д.). Рамка с цветовой компоновкой также указывает на предполагаемые цветовые роли.

Кроме того, было добавлено несколько вариантов теней на выбор из готового набора, предложенного клиентом.

Далее был выбран внешний вид кнопок, входов, выпадающего списка и кнопки выбора языка. Все кнопки являются компонентами, внешний вид которых можно изменить прямо в проекте в зависимости от назначения. Значок на кнопке также можно изменить в меню Auto Layout.

Внешний вид выпадающей кнопки выбора языка был немного изменен (она стала более компактной) после того, как я создал пробную страницу входа.

Ввод имеет 9 вариантов и может использоваться со значком или без него. Поле ввода пароля имеет больше возможностей, поскольку может использоваться в разных ситуациях и имеет свои специфические свойства. Например, шкала, показывающая надежность пароля и элементы, выделенные зеленым цветом, если пользователь ввел необходимое количество символов. Также я сделал отдельный компонент для поля ввода проверочного кода.

Далее были созданы компоненты для флажка и переключателя, а также компоненты для тех же элементов с текстом. Кроме того, я добавил аватары разных размеров, компоненты с группами, всплывающие подсказки и примеры использования вместе с выпадающим списком.

Чтобы показать, как элементы и текст работают в реальной жизни, я создал экраны входа с учетом пожеланий клиента. Позже была добавлена темная тема, для которой я создал отдельные компоненты.

А для настройки компонентов для тёмной темы я использовал готовый макет входа и подобрал подходящие сочетания цветов и прозрачности. Для некоторых элементов ничего не пришлось менять. Например, для основной кнопки.

Таким образом, в достаточно короткие сроки клиент получает простой UI-кит с возможностью редактирования элементов в Figma. Это отличный способ продемонстрировать основную стилистическую направленность проекта, не тратя много денег.