1) Конкурентный анализ
2) Создание User flow
3) Создание wireframes
4) Разработка стиля приложения
5) Дизайн всех экранов
6) Создание интерактивного прототипа
7) Подготовка файлов для передачи разработчику
Дизайн мобильного приложения состоит из двух основных этапов работы: UX и UI дизайна. Когда мы работаем над UX, то занимаемся проектированием, создавая удобные пользовательские сценарии и обеспечивая легкость взаимодействия с приложением. UI дизайн — это работа над визуальной частью приложения. На этом этапе мы также думаем о пользователях, но уже с точки зрения цвета, формы, шрифта и т. д.
В этой статье я расскажу об основных этапах в разработке дизайна приложения. Важно уточнить, что в разных командах и у разных специалистов, этот процесс отличается. Но каждый дизайнер мобильных приложений должен быть знаком с возможными этапами, даже если не все применяет в своей деятельности.
Итак, поехали.
Конкурентный анализ
Мы проводим его для понимания ситуации на рынке в этой нише и в смежных областях. Надо понять, какие мобильные приложения есть, что их отличает друг от друга. Определить плюсы и минусы.
Работая над конкурентным анализом, мы задаем вопросы:
- понятно ли пользователю, что делать на экране?
- подходит ли цветовое решение целевой аудитории и нише?
- удобно ли использование?
- как быстро можно достигнуть цели?
- есть ли ошибки как с точки зрения ux, так и с точки зрения ui?
Разработка user flow
Этот этап необходим для понимания сценариев внутри приложения. А также для определения типа и количества экранов. На шаге создания user flow мы проектируем удобное взаимодействие пользователя с приложением и обеспечиваем логику в сценариях.
- User flow можно делать в различных программах: Figma, Miro, Overflow и другие. На нашем основном курсе по дизайну мобильных приложений используется Miro.
Создание wireframes
Вайрфрэймы — это низкодетализированные каркасы. Цель создания вайрфрэймов состоит в принятии решений, относительно использования элементов интерфейса, количества контента.
Я знаю команды, которые ушли от этого этапа и сразу создают визуально привлекательные прототипы. Но хочу отметить, что такой подход имеет место быть для опытных специалистов. Начинающие ux/ui дизайнеры должны знать, как создавать вайрфрэймы и уметь это делать.
На этом этапе важно фокусироваться на функционале, используя простые формы и шрифты. Но рекомендовано сразу ставить актуальные текст и главное, его количество.
Создание визуального стиля
Здесь все начинается с подбора референсов и создания мудборда. Они нужны нам для того, чтобы поймать настроение будущего дизайна. Мудборд содержит в себе различные картинки, фотографии, передающие стиль приложения. А референсы это подбор различных визуальных решений.
Дальше мы создаем стиль на примере двух-трех первых экранов. Подбираем формы, цвета и шрифты. Хорошо, если вы вдохновились мудбордами и взяли оттуда цветовую палитру и увидели подходящие формы.
Дизайн всех экранов приложения
После утверждения стиля с клиентом или командой, можно приступать к дизайну всех экранов приложения. Перед этим мы обязательно заносим в стили цвета и шрифты, а также создаем компоненты для элементов и иконок.
Создание интерактивного прототипа
Мы можем делать прототип в Figma, а можем воспользоваться другими инструментами, например, Protopie, и создать максимально приближенный к реальному приложению прототип. Это позволит протестировать дизайн приложения на реальных пользователях перед разработкой и исправить критические ошибки.
Передача файлов разработчику
Последний этап в дизайне приложения — это передача рабочего макета. Когда-то мы экспортировали все элементы в ассеты. Сейчас достаточно отправить разработчику ссылку на Фигма файл, либо воспользоваться дополнительной программой Zeplin.
Рабочий файл должен состоять из нескольких страниц: вайрфрэймы, user flow (если делали в фигме), дизайн всех экранов, style guide. На странице с дизайном необходимо корректно подписать каждый экран и корректно расположить их на странице в соответствии со сценариями.
На курсе по дизайну мобильных приложений есть каждый из этих этапов. Кроме этого, есть уроки по проведению исследований и общению с заказчиками. Самое ценное в этом обучении — все этапы практические и с проверкой домашних работ наставником.
«хороший интерфейс — невидимый интерфейс»
Голден Кришна написал такую книгу. Грамотно спроектированный интерфейс мобильного приложения должен помогать пользователю легко достигать своих целей. Только в таком случае он будет возвращаться в приложение снова и снова, и рекомендовать его другим.
Абрамова Марина, UX/UI дизайнер.
И очень полезное видео на тему этапов в дизайне мобильных приложений, где наглядно показано какой этап за каким следует и как это выглядит в макетах.