--- title: "Этапы дизайна сайта: от брифа до передачи макетов в разработку" description: "Этапы дизайна сайта от брифа до передачи в разработку: 7 шагов, артефакт на выходе каждого и реальные сроки. Разбираем на примерах." url: https://apri-code.com/ru/blog/etapy-dyzaynu-saytu/ language: ru published: 2026-04-26 updated: 2026-09-23 author: "Богдан Кононенко" publisher: Apricode --- # Этапы дизайна сайта: от брифа до передачи макетов в разработку Клиент говорит «сделайте красиво» — дизайнер открывает 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. --- ![Веер бумажных образцов, один янтарный — выбор UI-дизайна](https://apri-code.com/api/media/file/etapy-dyzaynu-saytu-inline5-1783092506289.png) ## Этап 6. Дизайн-система — На выходе: компонентная библиотека и гайдлайн Дизайн-система — набор повторяющихся компонентов (кнопки, карточки, формы, иконки, типографическая шкала, цветовые токены), описанных в одном месте. Зачем она нужна? Без неё разработчик тратит время на то, чтобы угадать, каким должен быть отступ между полем и подписью, и придумывает свой вариант. С дизайн-системой — берёт готовый компонент и реализует точно так, как нарисовано. На выходе: Figma-библиотека компонентов + документ «Как это использовать». --- ## Этап 7. Передача в разработку — На выходе: ассеты и спецификация Финальный этап — не «отправить ссылку на Figma», а структурированная передача. В неё входит: - подготовленные иллюстрации и иконки (SVG, PNG в нужных размерах); - анимационный протокол (если есть анимации — описать их словами или через Principle/After Effects); - Figma Dev Mode с настроенными токенами для разработчика; - спецификация отступов, размеров и поведения компонентов в разных состояниях. На выходе: пакет, с которым разработчик идёт и делает без постоянных вопросов к дизайнеру. --- ## Сколько времени занимает каждый этап | Этап | Сроки (примерно) | | --- | --- | | Бриф и исследование | 2-5 дней | | Анализ конкурентов и поведения | 3-5 дней | | Информационная архитектура | 2-3 дня | | Прототип | 5-10 дней | | UI-дизайн | 10-20 дней | | Дизайн-система | 3-7 дней | | Передача в разработку | 2-3 дня | | **Итого** | **4-8 недель** | Сроки зависят от сложности проекта, количества страниц и скорости согласования с клиентом. Самый долгий «незапланированный» этап — согласование: если ответ приходит через неделю вместо дня, сроки сдвигаются. --- ## LongRead: дизайн сайта в Украине в 2026 году Процесс дизайна сайта в Украине в 2026 году существенно отличается от того, что было пять лет назад. Во-первых, мобильный трафик доминирует: для большинства ниш 60-80% сессий — с телефона. Это значит, что дизайн должен начинаться с mobile-first, а не портироваться на мобильный постфактум. Во-вторых, AI-инструменты изменили подготовительный этап: анализ конкурентов, черновики текстов для wireframe, работа с иллюстрациями — всё это теперь заметно быстрее. Но главное не изменилось, и скажу честно — вряд ли изменится: качество UI-дизайна по-прежнему определяется качеством работы на первых четырёх этапах. Пропустишь исследование — рисуешь красоту, которая не продаёт. Пропустишь IA — переделываешь структуру после того, как разработчик написал половину кода. Мы строим дизайн именно по этим семи этапам — от брифа до передачи ассетов. Подробнее о том, как устроен наш [процесс веб-дизайна](https://apri-code.com/ru/poslugy/dyzayn/) и какие инструменты мы используем — на странице услуги. Если планируете новый сайт или редизайн — [поговорим](https://apri-code.com/ru/kontakty/). Первый шаг: бриф-звонок на 30 минут. --- ## Что дальше - [UI/UX-дизайн — что это: разница между UI и UX](https://apri-code.com/ru/blog/ui-ux-dyzayn-shcho-ce/) - [Кто такой UX/UI-дизайнер и за что ему платят](https://apri-code.com/ru/blog/hto-takyy-ux-ui-dyzayner/) - [Тренды UI/UX-дизайна 2026: что работает, а что нет](https://apri-code.com/ru/blog/trendy-ui-ux-2026/) - [Фирменный стиль — что это и зачем бизнесу](https://apri-code.com/ru/blog/firmovyy-styl-ce/) - [Дизайн сайтов и UI/UX](https://apri-code.com/ru/poslugy/dyzayn/) — услуга --- ## 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** --- Source: https://apri-code.com/ru/blog/etapy-dyzaynu-saytu/