Дизайн приложений и веб-сервисов
Прототип приложения
Собираем кликабельный прототип приложения: он открывается на телефоне, по нему можно пройти главный сценарий от первого экрана до результата, а на ошибках он ведёт себя так же, как будет вести готовый продукт. Прототип мобильного приложения помогает проверить идею на людях и показать её инвестору до того, как вы платите за разработку.
Живой прототип. Нажмите на жёлтую плашку с адресом, введите номер и пройдите оплату до кассового чека. Сценарии переключаются плашкой в видоискателе камеры.
Из работы «Стоянка»
Кому подходит
- Основателям с идеей
- Нужно понять, работает ли идея, и показать её людям, а не презентацию со схемами.
- Командам перед питчем или грантом
- Инвестору проще поверить в продукт, который можно потрогать на телефоне, чем в описание.
- Заказчикам перед выбором подрядчика
- С прототипом разработчики оценивают объём точнее, а ТЗ превращается из текста в понятную модель.
- Продуктовым командам
- Новую функцию дешевле проверить прототипом, чем выпустить и переделывать после отзывов.
Что делаем, сколько стоит и сколько длится
Цены — нижняя граница, сроки — ориентировочные, для понимания порядка. Точную сумму и график с датами этапов фиксируем в смете после брифа, до начала работы.
- Кликабельный прототипот 30 000 ₽от 1 недели
- Прототип, который открывается на телефоне и ведёт себя как приложение: его можно показать пользователям или инвесторам до разработки. Как «Стоянка», которую можно попробовать на этой странице.
- Мобильное приложениеот 90 000 ₽от 6 недель
- Сценарии, навигация и экраны для iOS и Android с учётом привычных жестов платформ и всех состояний: загрузки, ошибки, пустого экрана, нет связи.
Как мы это делаем
- Прототипируем сценарий, а не всё приложение
- Прототип не обязан содержать все экраны будущего продукта. Выбираем главный сценарий — ради чего человек открывает приложение — и проводим его целиком, от входа до результата. Добавляем развилки, которые важны для проверки: другой способ оплаты, повторную попытку, отказ. Остальные разделы обозначаем, но не прорабатываем. Так прототип собирается за недели, а не месяцы, и отвечает на главный вопрос: поймёт ли человек, что делать.
- Ошибки в прототипе тоже нужны
- Если прототип показывает только идеальный путь, он проверяет презентацию, а не продукт. Мы добавляем сценарии, где что-то идёт не так: нет сети, ничего не найдено, банк не подтвердил оплату. В прототипе «Стоянки» восемь сценариев, и половина из них — именно такие случаи. Это помогает заранее увидеть, где пользователь застрянет, и заложить выход из каждой ситуации в дизайн, а не чинить её после запуска.
- Детализация под задачу
- Для проверки логики хватает простого прототипа: схемы экранов, настоящие тексты, работающие переходы. Для инвестора или теста с пользователями лучше прототип в визуальном стиле продукта — люди реагируют на него как на настоящее приложение и меньше отвлекаются на «это же черновик». Уровень детализации выбираем на брифе, а тексты пишем настоящие с самого начала: на заглушках вроде «текст кнопки» сценарий проверить нельзя: человек спотыкается как раз о слова.
- Прототип становится основой дизайна
- После проверки прототип не выбрасывается. Карта сценариев, структура экранов и формулировки уже согласованы и проверены, поэтому полный дизайн начинается с готового фундамента. Дальше дорисовываем остальные разделы, все состояния и UI-кит для разработчиков. Если по итогам проверки идея меняется, правим прототип — это намного быстрее и дешевле, чем переделывать готовый дизайн или уже написанный код. Поэтому прототип полезен даже тогда, когда вы уверены в идее: он снимает споры внутри команды до старта разработки.
Как это было в проекте «Стоянка»
«Стоянка» — собственный концепт студии: оплата парковки в Уфе по QR-коду на табличке зоны. Нужно было показать не набор экранов, а сервис, который можно попробовать: навести камеру, ввести номер, увидеть живой чек и пройти оплату до кассового чека, в том числе в ситуациях, когда что-то идёт не так.
- Собрали прототип одним лёгким файлом, который встраивается в страницу кейса в рамке телефона: его можно пройти прямо на сайте.
- Сделали четыре экрана внутри телефона: камера с QR-кодом, зона и номер, живой чек, оплачено с кассовым чеком.
- Заложили восемь сценариев с переключателем в видоискателе камеры: от обычной оплаты до «банк не подтвердил».
- Добавили семь шторок и наложений, включая имитацию приложения банка, чтобы путь оплаты был полным.
- Проверили на телефонах шириной от 298 до 390 px и на десктопе: работают клавиатура, Enter и Escape.
Работы
Что влияет на стоимость
- Число сценариев
- Один главный сценарий — минимальный объём, от 30 000 ₽. Каждый дополнительный сценарий и развилка добавляют экраны.
- Детализация
- Схематичный прототип для проверки логики быстрее, чем прототип в визуальном стиле продукта.
- Сложные взаимодействия
- Жесты, шторки, анимация переходов, ввод данных с проверкой — то, что делает прототип похожим на настоящее приложение, требует отдельной проработки.
- Платформа
- Прототип под телефон, под веб или под оба формата — разный объём адаптации.
- Сроки
- Ориентировочно от 1 недели на кликабельный прототип. Полный дизайн мобильного приложения на его основе — от 6 недель.
Что вы получите
- Карта сценариев для прототипа
- Кликабельный прототип, который открывается по ссылке на телефоне
- Главный сценарий и важные развилки, включая ошибки
- Настоящие тексты экранов вместо заглушек
- Файлы прототипа, которые становятся основой полного дизайна
Как идёт работа
- 01
Бриф и смета
Созваниваемся или переписываемся: цель, клиенты, конкуренты, примеры, которые нравятся, и сроки. После этого присылаем смету: состав работ, этапы, стоимость и даты.
- 02
Структура и прототип
Собираем структуру и прототип ключевых экранов: какие блоки, в каком порядке и что делает человек на каждом шаге. Согласуем логику до визуала, пока правки почти ничего не стоят.
- 03
Дизайн
Показываем концепцию на главном экране, после согласования рисуем остальные страницы и состояния для десктопа и телефона и собираем UI-кит. Правки — на каждом этапе, так переделки не копятся к концу.
- 04
Передача и сопровождение
Отдаём Figma с компонентами, экспорт графики и спецификации разработчикам или файлы в типографию. Отвечаем на вопросы во время сборки и проверяем, что результат совпадает с макетами.
Вопросы
Сколько стоит прототип приложения?
Кликабельный прототип — от 30 000 ₽. Итог зависит от числа сценариев и развилок, детализации и сложности взаимодействий. Полный дизайн мобильного приложения на основе прототипа — от 90 000 ₽. Точную сумму называем после брифа, когда понятно, какой сценарий и для какой проверки нужен.
Сколько времени занимает прототип?
Ориентировочно от 1 недели на кликабельный прототип одного главного сценария. Чем больше сценариев, развилок и визуальной проработки, тем больше времени. Точный график фиксируем в смете после брифа; если прототип нужен к конкретной дате, например к питчу, скажите об этом на брифе.
Чем кликабельный прототип отличается от дизайна?
Прототип отвечает на вопрос «понятно ли», дизайн — ещё и «как это выглядит во всех деталях». В прототипе проработан главный сценарий и работают переходы; в полном дизайне — все экраны, состояния, UI-кит и спецификации для разработчиков. Прототип быстрее и дешевле, поэтому с него удобно начинать.
На чём делаете прототип?
Обычно в Figma: прототип открывается по ссылке на телефоне и компьютере, и его можно показать кому угодно. Когда важно живое поведение — ввод номера, жесты, анимация чека, — как в «Стоянке», формат обсуждаем отдельно. На брифе подскажем, какой вариант подходит вашей задаче.
Можно протестировать прототип на пользователях?
Да, для этого он и нужен. Дайте нескольким людям из вашей аудитории задачу — например, оплатить или записаться — и смотрите, где они сомневаются. Подскажем, какие задачи дать и на что смотреть. Выводы вносим в прототип до того, как начинается полный дизайн и разработка.
Подойдёт ли прототип разработчикам для оценки?
Да. По прототипу видно, какие экраны есть, как они связаны и что происходит в ошибках, поэтому оценка точнее, чем по текстовому ТЗ. Для самой разработки нужен полный дизайн со всеми состояниями и UI-китом — его делаем на основе прототипа, ничего не начиная заново.
Кто будет работать над проектом?
Команда студии под руководством Кирилла Ефимова, главного дизайнера «Школы 21» от Сбера. Кирилл ведёт каждый проект и отвечает за результат, дизайнеры студии работают над макетами.
Работаете только в Уфе?
Нет. Работаем удалённо с заказчиками из любых городов, обсуждаем всё по видеосвязи и в Telegram. В Уфе можно встретиться лично.
Обсудить проект
Расскажите, что нужно сделать: ответим и предложим, с чего начать.
Смотрите также
Другие услуги
Разработка дизайна сайтов
Разрабатываем дизайн сайтов для бизнеса: лендинги, корпоративные сайты, интернет-магазины и редизайн. Начинаем со структуры и прототипа, заканчиваем макетами для десктопа и телефона и UI-китом, по которым разработчик соберёт сайт без догадок. Студия в Уфе, работаем удалённо по всей России.
от 40 000 ₽ · Работы: Нова.Маркет, Halo Agency, Нова Сервис, НоваКлаб
Отдельно: Дизайн интернет-магазина
ПодробнееДизайн приложений и веб-сервисов
Проектируем интерфейсы мобильных приложений для iOS и Android, веб-сервисов, CRM, дашбордов и личных кабинетов. Продумываем сценарии, собираем кликабельный прототип и рисуем все экраны и состояния, чтобы интерфейс был понятен с первого раза, а разработчики не додумывали за дизайнера.
от 30 000 ₽ · Работы: Стоянка, Нова Сервис
Отдельно: Дизайн мобильного приложения, Прототип приложения, Дизайн личного кабинета, CRM и веб-сервисов, UX-аудит сайта и приложения
ПодробнееДизайн рекламы и баннеров
Делаем дизайн баннеров и рекламных креативов для РСЯ, других сетей и соцсетей, а ещё презентации. Одно сообщение собираем в серию всех нужных размеров — от квадрата до растяжки 728×90 — так, чтобы серия оставалась узнаваемой, а в каждом формате читалось главное: ситуация, выгода и одно действие.
от 15 000 ₽ за серию · Работы: Реклама НоваКлаб
Отдельно: Баннеры для РСЯ и креативы для рекламы
ПодробнееГрафический дизайн и фирменный стиль
Разрабатываем фирменный стиль и делаем графический дизайн на заказ: брендбуки, плакаты и графику для событий, полиграфию, навигацию и иллюстрации. Собираем не набор картинок, а систему, которая держится от визитки до экрана в холле и по которой ваша команда сама выпускает новые носители.
от 20 000 ₽ · Работы: Школа 21, Нова
Отдельно: Разработка брендбука
ПодробнееДизайн карточек для маркетплейсов
Делаем карточки для ВБ, Ozon и Яндекс Маркета на заказ: обложку, инфографику и рич-контент — всё, что называют упаковкой карточки товара. Разбираем нишу и конкурентов, строим слайды под вопросы покупателя и проверяем обложку в размере превью на телефоне, где и решается, кликнут ли по ней.
от 2 000 ₽ · Работы: Карточки для маркетплейсов
Подробнее