Этапы дизайна сайта: от брифа до передачи макетов в разработку

Клиент говорит «сделайте красиво» — дизайнер открывает Figma. Через три недели показывают макеты, клиент говорит «не то». Начинают заново. Это не провал дизайнера и не каприз клиента — это пропущенные первые три этапа из семи. Вот что на самом деле стоит между брифом и готовым макетом, если делать всё правильно.

Почему «сделать дизайн» — это не одно действие

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

По порядку.

Этап 1. Бриф и исследование — На выходе: ТЗ и карта целей

Дизайн начинается не с Figma, а с понимания задачи. На этом этапе выясняют:

• Бизнес-цель сайта. Что должен сделать пользователь? Оставить заявку, купить, позвонить, записаться, скачать материал?
• Аудитория. Кто приходит на сайт и с каким запросом? B2B или B2C? Мобильный или десктоп? Молодёжь или 40+?
• Конкуренты. Что уже есть на рынке? Что делаем не хуже, а что — лучше?
• Ограничения. Бренд-гайдлайн, фирменные цвета, технические требования к передаче макетов.

На выходе: бриф-документ + карта целей + список конкурентов для анализа. Без этого дизайнер рисует «свою интерпретацию», а не решение задачи.

Этап 2. Анализ конкурентов и поведения — На выходе: инсайты и рекомендации

Анализ конкурентов — не для копирования, а чтобы не повторять чужих ошибок и найти незаполненные ниши в UX.

Параллельно — если сайт уже существует — анализ поведения текущих пользователей: тепловые карты, записи сессий, аналитика Google. Где люди останавливаются? Где уходят? Какую кнопку никто не нажимает?

На выходе: отчёт с конкретными выводами. «Конкуренты показывают цены на первом экране — значит, либо показываем и мы, либо имеем вескую причину этого не делать». «80% сессий — с мобильного, а текущий сайт не адаптирован» — это не предположения, а данные.

Этап 3. Информационная архитектура (IA) — На выходе: карта страниц и навигация

IA — структура сайта: сколько страниц, как они связаны, какая навигация, что где лежит. Звучит скучно, но ошибка на этом этапе дорогая: если структура неправильная, переделывать придётся уже готовые макеты.

На выходе: системная карта страниц (sitemap), схема навигации, иерархия контента. Это то, что подписывает клиент перед тем, как начинать прототип.

Этап 4. Прототип (wireframe) — На выходе: скелет каждой страницы

Прототип — чёрно-белый каркас: где заголовок, где блок с преимуществами, где форма, где кнопка. Без цветов, без картинок, без реальных текстов. Только логика и расположение элементов.

Зачем он нужен до того, как рисовать UI? Чтобы проверить логику, не тратя время на красоту. Переставить блоки в wireframe — 5 минут. Переставить их в готовом UI-макете — полдня.

На выходе: wireframe каждой ключевой страницы в Figma. Это то, что согласовывается с клиентом перед переходом к UI.

Этап 5. UI-дизайн — На выходе: готовые макеты страниц

Только теперь открывается палитра. UI-дизайн — цвета, типографика, иллюстрации, иконки, фото, анимации. Это то, что большинство клиентов представляет под словом «дизайн».

Правило: если прототип согласован, UI-правки касаются визуальной стороны, а не перемещения блоков. Так сохраняется предсказуемость сроков.

На выходе: макеты всех ключевых страниц в Figma для desktop (1440px), tablet (768px), mobile (375px) — минимум три breakpoints.

Этап 6. Дизайн-система — На выходе: компонентная библиотека и гайдлайн

Дизайн-система — набор повторяющихся компонентов (кнопки, карточки, формы, иконки, типографическая шкала, цветовые токены), описанных в одном месте.

Зачем она нужна? Без неё разработчик тратит время на то, чтобы угадать, каким должен быть отступ между полем и подписью, и придумывает свой вариант. С дизайн-системой — берёт готовый компонент и реализует точно так, как нарисовано.

На выходе: Figma-библиотека компонентов + документ «Как это использовать».

Этап 7. Передача в разработку — На выходе: ассеты и спецификация

Финальный этап — не «отправить ссылку на Figma», а структурированная передача. В неё входит:

• подготовленные иллюстрации и иконки (SVG, PNG в нужных размерах);
• анимационный протокол (если есть анимации — описать их словами или через Principle/After Effects);
• Figma Dev Mode с настроенными токенами для разработчика;
• спецификация отступов, размеров и поведения компонентов в разных состояниях.

На выходе: пакет, с которым разработчик идёт и делает без постоянных вопросов к дизайнеру.

Сколько времени занимает каждый этап

Сроки зависят от сложности проекта, количества страниц и скорости согласования с клиентом. Самый долгий «незапланированный» этап — согласование: если ответ приходит через неделю вместо дня, сроки сдвигаются.

LongRead: дизайн сайта в Украине в 2026 году

Процесс дизайна сайта в Украине в 2026 году существенно отличается от того, что было пять лет назад. Во-первых, мобильный трафик доминирует: для большинства ниш 60-80% сессий — с телефона. Это значит, что дизайн должен начинаться с mobile-first, а не портироваться на мобильный постфактум. Во-вторых, AI-инструменты изменили подготовительный этап: анализ конкурентов, черновики текстов для wireframe, работа с иллюстрациями — всё это теперь заметно быстрее.

Но главное не изменилось, и скажу честно — вряд ли изменится: качество UI-дизайна по-прежнему определяется качеством работы на первых четырёх этапах. Пропустишь исследование — рисуешь красоту, которая не продаёт. Пропустишь IA — переделываешь структуру после того, как разработчик написал половину кода.

Мы строим дизайн именно по этим семи этапам — от брифа до передачи ассетов. Подробнее о том, как устроен наш процесс веб-дизайна и какие инструменты мы используем — на странице услуги. Если планируете новый сайт или редизайн — поговорим. Первый шаг: бриф-звонок на 30 минут.

Что дальше

• UI/UX-дизайн — что это: разница между UI и UX
• Кто такой UX/UI-дизайнер и за что ему платят
• Тренды UI/UX-дизайна 2026: что работает, а что нет
• Фирменный стиль — что это и зачем бизнесу
• Дизайн сайтов и UI/UX — услуга

FAQ

Q: Можно ли пропустить прототип и сразу рисовать UI? A: Технически — да. Но тогда правки логики (перемещение блоков, изменение структуры) будут делаться на полноценных макетах — и обойдутся в 5-10 раз дороже по времени. Прототип — страховка от «ой, я не то имел в виду» после трёх недель работы.

Q: Сколько раундов правок входит в работу? A: Зависит от условий контракта. Стандартная практика — 2-3 раунда правок на каждом ключевом этапе (прототип, UI). Дальше — почасовая тарификация или отдельная смета.

Q: Что такое дизайн-система и нужна ли она для простого лендинга? A: Для одного лендинга — скорее нет, дорого. Для сайта с 5+ страницами или при планировании масштабирования — да, сэкономит время при разработке и будущих изменениях.

Q: Получу ли я исходники Figma? A: Зависит от условий договора. Большинство студий передают исходный Figma-файл — уточняйте при заключении. Важно: файл без дизайн-системы и правильной организации слоёв сложно передавать другому дизайнеру.

Q: Сколько вариантов дизайна вы предлагаете? A: На практике: 2 визуальных направления в начале UI-этапа (разные tone и стилистика), затем детализируется одно выбранное. Больше вариантов = больше времени = выше стоимость.

SELL

HOOK

SEO