Коротко. Дизайн сайта делается в шесть этапов: бриф и референсы (1-3 дня) → прототип-wireframe (3-7 дней) → UX-логика и путь пользователя (параллельно с прототипом) → визуальный дизайн-UI (7-15 дней) → адаптация под мобильные экраны (3-5 дней) → согласование и правки (5-10 дней). Итого для сайта на 8-10 страниц — 3-5 недель от брифа до готового макета в Figma. Пропуск этапа прототипа — самая частая причина, почему готовый макет приходится переделывать целиком, а не точечно.
Общая схема: шесть этапов и сколько времени занимает каждый
| Этап | Срок для сайта 8-10 страниц | Результат |
|---|---|---|
| Бриф и референсы | 1-3 дня | ТЗ, примеры сайтов-аналогов, список страниц |
| Прототип (wireframe) | 3-7 дней | Чёрно-белая схема блоков по каждой странице |
| UX-логика | идёт вместе с прототипом | Карта пути пользователя, порядок действий |
| Визуальный дизайн (UI) | 7-15 дней | Цветной макет 2-3 ключевых страниц + UI-кит |
| Адаптация под мобильные | 3-5 дней | Версии для экрана 375 px и планшета |
| Согласование и правки | 5-10 дней | Финальный макет, готовый к вёрстке |
Сроки для лендинга короче в 2-3 раза, для интернет-магазина с каталогом — длиннее из-за большего числа уникальных типов страниц (карточка товара, фильтр, корзина — каждая считается отдельным макетом).
Этап 1. Бриф и референсы — без него всё дальше идёт вслепую
На этом шаге фиксируются вещи, которые потом дорого менять: список страниц сайта, их приоритет, три-пять сайтов-конкурентов или аналогов, которые нравятся или не нравятся заказчику и почему именно. Если пропустить этот этап и сразу перейти к макету, дизайнер додумывает недостающие вводные сам — и есть риск, что готовый вариант придётся переделывать не из-за качества работы, а из-за несовпадения ожиданий, которые никто не проговорил вслух.
Практический совет: на брифе стоит явно указать 2-3 сайта-примера с пометкой «нравится/не нравится» и почему — это экономит целый раунд правок на этапе визуального дизайна.
Этап 2. Прототип (wireframe) — самый недооценённый шаг
Прототип — это чёрно-белая схема расположения блоков на странице без цвета, шрифтов и картинок. Выглядит непрезентабельно, поэтому заказчики часто хотят его пропустить и сразу увидеть «красиво». Ошибка: правки в прототипе стоят часы, правки в готовом цветном макете — дни, а правки после вёрстки — уже недели и деньги за передел кода.
На этом этапе решается: сколько блоков на странице, в каком порядке, где именно кнопка заявки — до первого экрана или после, нужен ли блок с отзывами и где. Согласовывать нужно именно прототип, а не откладывать вопросы структуры до просмотра цветного макета — тогда правки по структуре смешиваются с правками по цвету, и процесс растягивается.
Этап 3. UX-логика — путь пользователя от захода до заявки
Параллельно с прототипом прорабатывается сценарий: что видит человек первым, куда смотрит взгляд, через сколько экранов он доходит до формы заявки. Для сайта с одной целью (например, лендинг услуги) путь должен укладываться в 3-4 экрана до кнопки действия. Для сайта с несколькими сценариями (интернет-магазин: и покупка, и консультация, и подбор товара) прорабатывается несколько параллельных путей — это увеличивает время этапа, но экономит время на этапе UI, потому что макет строится сразу под понятную логику, а не «на глаз».
Этап 4. Визуальный дизайн — цвет, шрифт, стиль
Только теперь появляется цвет. Дизайнер собирает 2-3 варианта стилистики (mood board) на основе брифа, заказчик выбирает направление, и по нему делаются 2-3 ключевые страницы полностью — обычно главная и одна внутренняя. После утверждения стиля остальные страницы досогласовываются быстрее, потому что визуальные правила (UI-кит: кнопки, отступы, типографика) уже заданы и просто применяются к новым блокам.
Частая ошибка на этом этапе — смотреть макет только на экране ноутбука дизайнера. Стоит сразу проверять, как выглядит текст и кнопки на реальном телефоне — то, что смотрится органично на широком мониторе, на маленьком экране может превратиться в мелкий нечитаемый текст.
Этап 5. Адаптация под мобильные экраны
Больше половины трафика на большинство сайтов приходит с телефонов, поэтому мобильная версия — не «бонус», а обязательный этап. Здесь блоки не просто сжимаются, а часто перестраиваются: то, что на десктопе стоит в три колонки, на телефоне становится вертикальным списком, и порядок элементов может меняться, если это улучшает путь к кнопке заявки. Экономить на этом этапе рискованно — сайт с красивым десктопным макетом и плохо адаптированной мобильной версией теряет заявки именно там, где сегодня основной трафик.
Этап 6. Согласование и правки — сколько раундов нормально
Реалистичный процесс — 2-3 раунда правок по 3-5 рабочих дней каждый, итого 1,5-2 недели поверх времени на саму разработку макета. Затягивается процесс обычно не по вине дизайнера, а когда решение со стороны заказчика принимает несколько человек с разными и не согласованными между собой мнениями — тогда правки от одного согласующего отменяются правками другого, и раундов становится 5-7 вместо 2-3.
Практический совет: назначить одного человека, который принимает финальное решение по дизайну, до старта работы — это единственный надёжный способ уложиться в 2-3 раунда.
Можно ли сделать дизайн самостоятельно, без студии
Для лендинга или сайта-визитки на конструкторе (Tilda, Readymag) все шесть этапов можно пройти самостоятельно за несколько дней, используя готовые блоки и шаблоны — прототип в этом случае заменяет черновая раскладка блоков конструктора. Для сайта с уникальной структурой, интернет-магазина или проекта, где важна конверсия, а не просто присутствие в сети, самостоятельная работа рискует пропустить именно этап осознанной UX-логики — конструктор позволяет расставить блоки красиво, но не подсказывает, правильный ли это порядок для конкретной аудитории.
Частые вопросы
Можно ли пропустить этап прототипа, если бюджет ограничен?
Можно для простого одностраничника с типовой структурой (оффер — преимущества — форма). Для сайта с несколькими страницами и разными сценариями пользователей пропуск прототипа почти всегда приводит к переделкам на более дорогом этапе визуального макета.
Сколько стоит дизайн сайта целиком с учётом всех этапов?
Для сайта на 8-10 страниц — 80 000-250 000 ₽ за все шесть этапов, для лендинга — 40 000-90 000 ₽. Разброс внутри диапазона зависит от числа уникальных макетов страниц и того, делается ли UI-кит с нуля или на основе готовой библиотеки компонентов.
Что делать, если макет не нравится уже после утверждения прототипа?
Значит, на этапе прототипа согласование прошло формально, без реального разбора структуры. Возврат к прототипу на этом этапе — нормальная практика, дороже, чем правка на раннем шаге, но дешевле, чем переделка после вёрстки.
Нужен ли брендбук до того, как заказывать дизайн сайта?
Не обязательно, но полезно — если уже есть логотип и фирменные цвета, дизайнер сайта использует их, а не придумывает стиль заново. Если бренда ещё нет, стиль сайта можно разработать с нуля вместе с макетом, это входит в этап визуального дизайна.
Кто делает адаптивную версию — дизайнер или верстальщик?
Макет мобильной версии — задача дизайнера, он определяет, как перестраиваются блоки. Верстальщик реализует это в коде и следит за промежуточными размерами экрана (планшеты, широкие телефоны), которые дизайнер обычно не прорисовывает вручную для каждого пикселя.
Пройти путь от прототипа до готового макета без лишних раундов правок
Соберём структуру сайта под вашу аудиторию и доведём дизайн до макета, готового к вёрстке.