September 15, 2021

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

приложений

В этой статье разберем основные этапы дизайна приложений. Надо отметить, что этот процесс может различаться у разных команд и фрилансеров. Но перечисленные этапы в статье, встречаются очень часто.
  • 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.
создание user flow

Создание
wireframes

Вайрфрэймы — это низкодетализированные каркасы. Цель создания вайрфрэймов состоит в принятии решений, относительно использования элементов интерфейса, количества контента.
Я знаю команды, которые ушли от этого этапа и сразу создают визуально привлекательные прототипы. Но хочу отметить, что такой подход имеет место быть для опытных специалистов. Начинающие ux/ui дизайнеры должны знать, как создавать вайрфрэймы и уметь это делать.
На этом этапе важно фокусироваться на функционале, используя простые формы и шрифты. Но рекомендовано сразу ставить актуальные текст и главное, его количество.

Создание визуального стиля

Здесь все начинается с подбора референсов и создания мудборда. Они нужны нам для того, чтобы поймать настроение будущего дизайна. Мудборд содержит в себе различные картинки, фотографии, передающие стиль приложения. А референсы это подбор различных визуальных решений.
Дальше мы создаем стиль на примере двух-трех первых экранов. Подбираем формы, цвета и шрифты. Хорошо, если вы вдохновились мудбордами и взяли оттуда цветовую палитру и увидели подходящие формы.
создание визуального стиля приложения

Дизайн всех экранов приложения.

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

Создание интерактивного прототипа.

Мы можем делать прототип в Figma, а можем воспользоваться другими инструментами, например, Protopie, и создать максимально приближенный к реальному приложению прототип. Это позволит протестировать дизайн приложения на реальных пользователях перед разработкой и исправить критические ошибки.
разработка интерактивного прототипа

Передача файлов разработчику

Последний этап в дизайне приложения — это передача рабочего макета. Когда-то мы экспортировали все элементы в ассеты. Сейчас достаточно отправить разработчику ссылку на Фигма файл, либо воспользоваться дополнительной программой Zeplin.
Рабочий файл должен состоять из нескольких страниц: вайрфрэймы, user flow (если делали в фигме), дизайн всех экранов, style guide. На странице с дизайном необходимо корректно подписать каждый экран и корректно расположить их на странице в соответствии со сценариями.
На курсе по дизайну мобильных приложений есть каждый из этих этапов. Кроме этого, есть уроки по проведению исследований и общению с заказчиками. Самое ценное в этом обучении — все этапы практические и с проверкой домашних работ наставником.

«хороший интерфейс — невидимый интерфейс»
Голден Кришна написал такую книгу. Грамотно спроектированный интерфейс мобильного приложения должен помогать пользователю легко достигать своих целей. Только в таком случае он будет возвращаться в приложение снова и снова, и рекомендовать его другим.

Абрамова Марина, UX/UI дизайнер.