Дизайн мобильного приложения: цена и что в неё входит

Дизайн мобильного приложения: цена не выражается одной цифрой. Она зависит от количества экранов, ролей пользователей, платформ и того, что именно вы хотите получить. Несколько красивых макетов — одна цена; кликабельный прототип в Figma, дизайн-система и все состояния экранов, готовые для разработчиков, — совсем другая. Поэтому честный ответ на вопрос «сколько стоит дизайн» звучит так: зависит от состава работ.

В статье разберём, из чего складывается стоимость, что обычно входит в дизайн приложения и как его правильно заказать. В конце сравним с тем, как формируется цена дизайна сайта. Если термины UI и UX для вас новые, начните со статьи UI/UX дизайн — это что.

Из чего складывается цена дизайна мобильного приложения

Основная статья расходов — время дизайнера. А время зависит от нескольких факторов.

Количество экранов и уникальных типов экранов

В простом приложении может быть 15–20 экранов, в маркетплейсе или сервисе доставки — больше сотни. Но важнее не общее число, а количество уникальных типов экранов. Карточку товара рисуют один раз, и она работает для всех товаров; оплата, профиль и карта — каждая отдельная работа.

Роли пользователей

Клиент, курьер и администратор — это по сути три разных интерфейса. Например, в проекте goasia трансферы и городские поездки бронируются на сайте и в приложениях для iOS и Android, а для заказов работает система аукциона. У каждой роли свои экраны и состояния, и это заметно увеличивает объём дизайна.

Состояния и пограничные случаи

Профессиональный дизайн включает не только экран «всё хорошо», но и пустой список, загрузку, ошибку, отсутствие интернета, запрос разрешений. Если их не нарисовать, разработчик придумает их сам, и интерфейс получится разнородным.

Дизайн-система

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

Бренд и иллюстрации

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

Дизайн мобильного приложения в Figma: что вы получаете

Сегодня приложения почти всегда проектируют в Figma. Хорошо переданный проект включает:

• user flow — схему переходов пользователя между экранами;
• вайрфреймы — серые схемы ключевых экранов;
• макеты — готовый дизайн всех экранов и их состояний;
• прототип — связанные экраны, по которым можно нажимать на телефоне;
• UI-kit — библиотеку компонентов;
• иконки и изображения, подготовленные к экспорту.

Зачем нужен прототип мобильного приложения

Прототип — самый дешёвый тест. Дайте его 5–7 реальным пользователям и попросите «оформить заказ» или «изменить профиль». Вы увидите, где они застревают. Прототип также сильный инструмент на встрече с инвестором или партнёром: кода ещё нет, а продукт уже можно показать. Подробнее о проверке идеи таким способом — в статье MVP приложения.

Как заказать дизайн мобильного приложения

Перед заказом подготовьте:

1. Цель. Какую задачу решает приложение и как оно будет зарабатывать.
2. Аудиторию. Кто будет пользоваться: возраст, язык, какие телефоны.
3. Список функций. Что обязательно в первой версии, а что можно отложить.
4. Референсы. 3–5 приложений, которые нравятся и не нравятся, и почему.
5. Материалы бренда. Логотип, цвета, шрифты, если они есть.

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

Дизайн — лишь часть бюджета приложения. Полный расчёт смотрите в статье сколько стоит мобильное приложение.

Дизайн сайта: цена и отличия

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

Ключевые отличия:

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

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

Как сэкономить на дизайне без потери качества

Есть несколько честных способов уменьшить бюджет:

• Сократите первую версию. Каждая функция — это новые экраны. Сначала нарисуйте основной сценарий, остальное перенесите во второй этап.
• Используйте стандартные компоненты. Выбор даты, карту, системные окна не обязательно рисовать с нуля.
• Подготовьте контент заранее. С реальными текстами и фото макеты не приходится переделывать по несколько раз.
• Назначьте одного ответственного. Когда правки приходят от пяти человек, этапы растягиваются, а цена растёт.

Как мы оцениваем дизайн в SyncLab

Мы делаем дизайн не как отдельный продукт, а как первый этап работающего приложения или сайта. Дизайнер и разработчики в одной команде, поэтому макеты сразу готовы к реализации. На первой встрече (лично в Ташкенте или онлайн) вместе составляем список функций, затем даём точную смету со списком экранов и этапами.

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

Файл Figma и все исходники в конце проекта полностью передаются вам.

Частые вопросы