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

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

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

Этот важный вопрос, на который нельзя ответить в двух словах, вдохновил нас на публикацию этого цикла статей. В них не будет туманных советов из серии «как сделать приложение: три простых шага». Зато будет опыт, накопленный нами за пять с лишним лет работы на рынке мобильной разработки, примеры из практики и руководство к действию.

В предыдущих материалах мы рассказывали:

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

Здесь наша работа делится на два направления: UX-дизайн, то есть проектирование, и UI-дизайн, то есть дизайн привычном понимании.

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

UI-дизайн определяет то, как будет выглядеть приложение, каким будет его пользовательский интерфейс.

Что в результате:

карта экранов;
статичный или интерактивный прототип приложения;
отрисованные экраны и элементы интерфейса.

Иногда заказчик говорит: «А давайте не будем тратить время на проектирование и сразу займемся дизайном?». Не делайте так. Допустим, мы исключили проектирование и сделали дизайн. Посмотрели его, и у вас появилась куча идей, как все улучшить. Мы вносим правки и перерисовываем дизайн. Трудозатраты и стоимость проекта вырастают в два раза, а скорость работы вдвое снижается. Дизайнер выгорает, а вы как заказчик недовольны, что проект стал дороже. Все в минусе.
Александр Хрущев, технический директор студии Winfox

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

Проектирование особенно важно для проектов с большой долей неопределенности. Например, для стартапов.

UX-дизайн — это непрерывный процесс. При выпуске каждого обновления вы должны помнить, как люди используют ваше приложение. Если после обновления пользователям стало не так удобно совершать покупки или им надо сделать больше кликов, чтобы попасть в личный кабинет, значит, вы отклоняетесь от курса и пора поработать над UX-дизайном.
Рустам Мухамедьянов, руководитель студии Winfox

Лучше делать интерактивный прототип, например, в Figma. Перейдя по ссылке, можно пользоваться приложением так, будто оно уже готово и установлено на ваш смартфон. Вы можете перемещаться по разделам, нажимать на кнопки и выполнять различные действия.

Такой прототип полезен как на этапе проектирования, так и для заказчика. В первом случае он помогает выявить несоответствия в сценариях и быстро их исправить. Во втором случае заказчику не придется на словах объяснять, для чего нужен сервис и как он будет работать. Можно просто показать все на интерактивном прототипе, благодаря чему шансы быстро найти инвестора и реализовать проект возрастают.
Александр Хрущев, технический директор студии Winfox

UI-дизайнер отвечает за внешний вид будущего приложения. Он подбирает шрифты, выбирает цветовое решение, отрисовывает элементы интерфейса: кнопки, иконки, слайдеры, пуш-уведомления.

Если у заказчика есть корпоративный стиль, мы берем гайдлайн и делаем дизайн по нему. Если стиля нет, предлагаем свое видение с учетом трендов, специфики бизнеса и аудитории. В любом случае мы всегда рекомендуем работать по гайдлайнам от Apple и Google.
Валерий Сорокин, менеджер проектов студии Winfox

В зависимости от масштаба проекта дизайн может занять одну неделю или несколько месяцев.

Программирование — один из главных этапов. Написание кода любого приложения делится на фронтенд и бэкенд.

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

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

Что в результате: первый релиз приложения.

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

Нативные приложения написаны для конкретной мобильной платформы: iOS, Android, Windows. Язык программирования, который используется для написания таких сервисов, поддерживается только одной платформой. Например, Swift и Objective-C понимает только iOS, а Java или Kotlin — только Android.

Делайте нативное приложение, если оно должно стать важной частью бизнеса и влиять на продажи.

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

Плюсы нативных приложений:

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

Минусы нативных приложений:

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

При создании таких приложений используются общие наборы средств разработки (SDK). Из-за этого кроссплатформенные сервисы не используют все нативные преимущества каждой платформы. Зато сделать такое приложение дешевле — это оптимальный вариант для проектов с ограниченным бюджетом.

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

Плюсы кроссплатформенных приложений:

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

Минусы кроссплатформенных приложений:

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

Исходите из своих бизнес-целей и ответьте на следующие вопросы:

Насколько быстрое и отзывчивое приложение вам нужно?
Насколько важны бизнес-процессы, которые встроены в приложение?
Насколько сложные функции будет выполнять ваше приложение?

Главное отличие между нативным и кроссплатформенным приложением — в скорости и отзывчивости работы. Это как проехаться на Porsche Cayenne и Hyundai Solaris. Оба авто едут по дороге, разгоняются, маневрируют и входят в повороты. Но разница чувствуется сразу.
Рустам Мухамедьянов, руководитель студии Winfox

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

Любое приложение отображает данные: показывает, какие товары есть в наличии в интернет-магазине, сколько запасов лежит на складе и кто из контрагентов должен вам денег. Все эти данные хранятся на сервере. Чтобы создать сервер, который эффективно обменивается данными с внешним интерфейсом приложения, надо его тщательно продумать.

На этапе бэкенда участие заказчика минимальное. Вам не надо думать, где хранить данные и нужно ли использовать бессерверную архитектуру — это решают разработчики. Мы в WINFOX всегда выбираем оптимальные для клиента решения. Единственное исключение — это когда надо вписать приложение в уже существующую среду. Тогда вы можете сказать: «Делайте на PHP, а не на Java».
Александр Хрущев, технический директор студии Winfox

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

Делайте нативное приложение, если оно должно стать важной частью бизнеса и влиять на продажи.

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

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

Этот цикл статей основан на книге, которую мы недавно сделали для своих клиентов. В этой книге мы постарались ответить на основные вопросы, которые у них возникают:

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

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

О чем рассказываем

Этап 3. Проектирование и дизайн

UX-дизайн

UI-дизайн

Этап 4. Разработка

Фронтенд

Нативная разработка

Кроссплатформенная разработка

Чек-лист: как выбрать тип приложения

Бэкенд

Коротко

Книга