<aside> <img src="/icons/compose_gray.svg" alt="/icons/compose_gray.svg" width="40px" /> 5-6 апреля 2024 г.

</aside>

<aside> <img src="/icons/compose_gray.svg" alt="/icons/compose_gray.svg" width="40px" /> Направление: UX/UI дизайн

</aside>

О чем проект

Экран входа для кроссплатформенного приложения. Тема приложения: маркетплейс компьютерной техники.

Задача проекта

<aside> <img src="/icons/compose_gray.svg" alt="/icons/compose_gray.svg" width="40px" /> Создать дизайн страницы входа для приложения компьютерной техники. Респонсив: Телефон (375x812), Планшет (744х1133), Десктоп (1440х900). Дизайн должен производить впечатление wow-эффекта, а созданный UI-Kit должен быть логичным и техничным.

</aside>

Этапы работ в дизайне

1 этап. Сбор референсов.

Изучение и сравнение приложений в данной нише. Оформление референсов по разным темам: по визуалу и по технике.

2 этап. Поиск исходников и определение дизайна.

В процессе работы над этим этапом, было принято решение взять в использование 3D объекты для того, чтобы показать связь экранов с темой приложения. Помимо наполнения определилась с видом дизайна, он будет простым и понятным для пользователя. Это будет главной особенностью проекта.

3 этап. Создание стилей.

Цветовая палитра будет представлена в монохроме и красный — как технический цвет, появляется в случае ошибки взаимодействия пользователя с интерфейсом. Стили для типографики будут различаться между мобильным экраном и планшетной/декстопной версиях, т. к. размеры текста будут увеличиваться. Для удобства они будут отдельными для каждого блока экранов.

4 этап. Создание дизайна:

• для мобильной версии
• для планшетной версии
• для декстопной версии

Начало работы состояло в работе над первым блоком телефона. Далее планшет и десктоп. Всего было создано по 6 пользовательских сценариев на каждый блок экранов.

5 этап. Оформление библиотеки компонентов.

Из сложившегося дизайна начала компоновать UI-Kit. Он формировался из иконок, кнопок, разных состояний инпутов для телефона и пароля. Всего на каждый блок экранов: 3 иконки, кнопка из 2-х состояний, инпут для ввода телефона из 4-х состояний и еще один инпут для ввода пароля из 5-ти состояний.

6 этап. Окончание работы и наведение порядка в проекте.

Наведение порядка в проекте: чистка от лишних элементов, нейминг слоев, активные компоненты на экранах в автолэйаутах.

Результат работы

Телефон

Первичный экран входа (default)

Пользовательский ввод (активны два поля)

Активный экран (скрыт пароль)

Активный вход (пароль показан)

Неактивный вход (ошибка при вводе пароля)

Неактивный вход (ошибка при вводе телефона)

<aside> <img src="/icons/compose_gray.svg" alt="/icons/compose_gray.svg" width="40px" /> Каждый инпут и кнопка имеют свое состояние. Кнопка не может быть активной для входа, если данные не введены либо же введены неправильно. Можно запросить пароль в случае утери, а также скрывать или показывать его при вводе. Если пароль введен неверно, значит такого номера не существует и необходимо зарегистрировать свою учетную запись.

</aside>