Интерфейс проектируют до кода. Иначе красивые экраны описывают продукт, которым неудобно пользоваться, а переделки начинаются на самой дорогой стадии.
Многие приходят за разработкой и относят дизайн к «цветам и кнопкам». На практике именно здесь решается, что человек видит первым, куда нажимает и в какой момент бросает сценарий. Слабый код можно улучшить. Слабую логику экранов приходится выбрасывать вместе с уже написанными страницами.
В MakeDifference дизайн — часть создания продукта, а не украшение в конце. Услуга стартует от 150 000 ₽ и от двух недель, если нужен отдельный этап. Ниже — что входит в работу и зачем каждый шаг существует.
Этап 1. Аналитика
Сначала разбираемся, что это за продукт, кто им пользуется и какое действие считается успехом. Смотрим текущий процесс, ограничения и аналоги: что люди уже умеют делать в похожих сервисах и где те сервисы их подводят.
Если технического задания нет, оно появляется здесь. Вместе фиксируем разделы, роли и связи между ними. Без этого макеты рисуют «вообще кабинет», а не ваш кабинет.
На выходе есть общая картина: пользователи, главные сценарии и границы первой версии. Только после этого имеет смысл рисовать экраны.
Этап 2. UX-макеты
UX-макеты — схемы экранов без финальной полиграфии. Они показывают состав блоков, порядок и переходы.
Человек должен понимать путь: что видит на входе, какое действие доступно, куда попадает после него. Мы опираемся на привычные паттерны. Кнопку «добавить» и фильтр не прячут ради оригинальности: люди ищут их там, где находили вчера в других продуктах.
Отдельная проверка — не оборван ли сценарий. Классический провал: корзина без явного следующего шага. Пользователь дошёл до денег и не видит, что делать.
На этом этапе собираем кликабельный прототип. Его можно пройти до разработки и поймать тупик, пока правка стоит часов дизайна, а не дней программирования.
Этап 3. Дизайн-концепция
Когда логика согласована, выбираем визуальный язык: цвет, шрифт, характер кнопок, плотность. Делаем несколько направлений и объясняем, почему они такие.
Если фирменный стиль есть, адаптируем его под интерфейс. Экраны живут иначе, чем презентация: контраст, состояния нажатия, таблицы, длинные названия. Если стиля нет, собираем систему, которой можно пользоваться в продукте, а не только на обложке.
Вы выбираете направление. Дальше рисуем уже его, а не три параллельных продукта.
Этап 4. UI-макеты
UI — финальные экраны: отступы, типографика, иконки, таблицы, пустые и ошибочные состояния. Это то, что увидит пользователь.
Визуальная иерархия ведёт взгляд к главному действию. Одинаковые на вид кнопки не должны делать разное. Цвет ошибки не должен совпадать с цветом успеха. Второстепенное не орёт громче основного.
Параллельно собираем UI-kit: компоненты и правила, а не набор уникальных экранов. Разработчикам так проще собирать одинаковые состояния, а вам — добавлять новые страницы без ощущения другого продукта.
Этап 5. Адаптив и передача в разработку
Для веба готовим версии под большие экраны, планшет и телефон. Это не уменьшенная копия. Таблица может стать карточками, фильтры — компактным меню, второстепенные блоки уходят ниже, чтобы на узком экране осталось главное.
Мобильное приложение сразу проектируется под платформу. Там проверяем, что элементы ведут себя устойчиво на разных размерах, а не «вписываем сайт в телефон».
В Figma к этому моменту порядок: страницы, компоненты, состояния, комментарии. Разработчик не додумывает отступ и не спрашивает, что показать при пустом списке. Макет, в котором это не названо, на разработке превращается в серию уточнений и сдвиг срока.
Этап 6. Интерактив перед кодом
Финальные макеты связываем в сценарий, который можно пройти: кнопки ведут на следующие экраны, а не в пустоту. Такой прототип показывают команде, заказчику и иногда инвесторам. Расхождение «я думал, это работает иначе» всплывает до спринта разработки.
Интерактив не заменяет тест на пользователях, но снимает большую часть внутренних недопониманий. Дизайн в этот момент уже продукт в миниатюре, а не папка картинок.
Что это меняет в бюджете
Экран, переделанный на стадии схемы, стоит недорого. Тот же экран, переделанный после вёрстки и интеграций, тянет за собой фронтенд, тесты и иногда данные. Поэтому мы не начинаем программировать «примерно понятный» интерфейс.
Дизайн можно заказать отдельно и унести в свою разработку. Если продукт делаем мы, команда уже знает решения и не тратит старт на расшифровку чужого файла. Как дальше идёт сборка — в статье про ведение проектов.
Частые вопросы
Можно ли сразу рисовать красивые экраны?
Можно, если сценарий уже доказан и структура не спорит сама с собой. На новом продукте красивый экран раньше логики почти всегда перерисовывают. Мы начинаем со схемы.
Что если брендбука нет?
Соберём визуальную систему под цифровой продукт: цвет, шрифт, компоненты. Это не замена большого ребрендинга компании, но интерфейсу её хватает, чтобы выглядеть цельно.
Вы отдаёте Figma?
Да. Исходник, компоненты и комментарии остаются у вас вместе с остальными материалами проекта.
Сколько длится дизайн?
От двух недель для понятного и ограниченного объёма. Сервис с несколькими ролями и десятками состояний длиннее. Срок называем после аналитики, когда видно число сценариев.
Дизайн входит в разработку?
Может идти отдельным этапом со своей сметой или внутри проекта. Во втором случае он всё равно стоит в плане явным куском, а не растворяется в «ну, программисты нарисуют».
Что сделать дальше
Пришлите, какой продукт нужен и есть ли уже схема или только идея. Скажем, с какого этапа начинать и что вы получите на руки до первой строки кода.
