Веб-дизайн пошагово: от макета до публикации | Разработка дизайна сайта

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

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

Как менялся процесс веб-дизайна: от статичных PSD до no-code публикации

До 2016 года стандартный процесс веб-дизайна выглядел так: дизайн в Photoshop → нарезка и передача HTML-вёрсткой разработчику → размещение на хостинге. Сейчас дизайнер может пройти весь путь самостоятельно: дизайн в Figma → публикация через Taptop без участия разработчика. Это изменило роль и ответственность дизайнера.

В 2000-х веб-дизайнер работал в Adobe Photoshop: создавал PSD-макет, нарезал изображения на слои, передавал верстальщику. Верстальщик делал HTML+CSS-вёрстку — часто плохо соответствующую оригиналу. Разрыв между «как нарисовали» и «как получилось» был нормой.

Появление Figma в 2016 году и развитие no-code платформ изменили уравнение. Dev Mode в Figma даёт разработчику прямой доступ к CSS-значениям. Taptop позволяет дизайнеру самому реализовать и опубликовать сайт без написания кода.

Это расширяет ответственность дизайнера. Раньше задача заканчивалась на передаче макета. Сейчас дизайнер может (и часто должен) довести проект до работающего опубликованного сайта. Это увеличивает ценность работы и чек, но требует понимания всего процесса.

Этап 1 — Брифинг и исследование: закладываем фундамент

Брифинг — самый важный этап разработки дизайна сайта. Именно здесь фиксируются цели, аудитория, функциональные требования и ожидания клиента. Дизайн, созданный без структурированного брифа, с высокой вероятностью будет переделываться на всех последующих этапах.

Что делаем: Структурированный бриф — это не список вопросов «какой цвет вам нравится». Это документ, который фиксирует: цель сайта (зачем), целевую аудиторию (для кого), желаемые действия пользователя (конверсионные точки), конкурентов (от чего отстраиваемся), визуальные референсы (какой стиль нравится и не нравится), технические требования (CMS, интеграции), дедлайн и бюджет.

Инструменты: Google Forms или Notion для брифа, FigJam или Miro для визуальных референсов.

Артефакт этапа: заполненный бриф + мудборд с 5–10 референсами + список страниц и функций.

Ориентир по срокам: 1–2 дня для стандартного лендинга, 3–5 дней для многостраничного сайта.

Типичная ошибка: пропустить этап и начать с дизайна «по ощущениям». Результат — правки «а можно вообще всё переделать?» на финальном этапе.

Этап 2 — Вайрфреймы: структура без дизайна

Вайрфрейм — это схематичный набросок страницы, показывающий структуру и расположение элементов без дизайна. Главная функция — согласовать структуру с клиентом до начала визуальной работы. Правки на этапе вайрфреймов занимают часы; те же правки после завершения дизайна — дни.

Что делаем: Вайрфреймы — это серые прямоугольники и линии-заглушки. Цель: показать структуру страницы — что, где, в каком порядке. Без цветов, без конкретных шрифтов, без контента. Только иерархия.

Для каждой страницы: расположение навигации, главный блок (hero), порядок информационных секций, расположение CTA, подвал. Отдельно — состояния: как страница выглядит на мобильном.

Инструменты: Figma (вайрфреймы через Wireframe Kit или вручную), FigJam для совместного обсуждения, Miro для сложных многостраничных структур.

Артефакт этапа: вайрфреймы всех страниц в Figma + согласующая подпись клиента (или письменное «ок» в переписке).

Ориентир по срокам: 1–3 дня на лендинг, 3–7 дней на многостраничный сайт.

Типичная ошибка: показывать красивые вайрфреймы с детальным контентом — это уже концепция дизайна, клиент начинает обсуждать цвета. Держите вайрфреймы серыми и схематичными.

Этап 3 — Дизайн-система: цвета, шрифты, компоненты

Дизайн-система — это набор переменных, стилей и компонентов, которые используются на всём сайте. Даже для небольшого проекта базовая дизайн-система (5–7 цветов, 3–4 варианта шрифта, базовые компоненты кнопки и формы) экономит 30–50% времени на этапе UI-дизайна и делает правки мгновенными.

Что делаем: Определяем цветовую палитру: основной цвет бренда, вторичный, акцент, фоновые, текстовые, статусные (success/error/warning). Выбираем шрифты: заголовочный и текстовый, задаём scale (размеры H1–H6, body, small). Создаём базовые компоненты в Figma: кнопки в состояниях (default, hover, active, disabled), поля ввода, бейджи, карточки.

В Figma всё это хранится как Styles (цвета, шрифты, эффекты) и Components (переиспользуемые элементы). В Taptop — как переменные дизайна (Design → Variables) и сохранённые стили.

UI-kit с дизайн-системой для сайта в Figma

Инструменты: Figma (Styles + Components), Taptop (UI-kit на основе классов со стилями).

Артефакт этапа: страница «Design System» в Figma-файле с палитрой, типографикой, компонентами.

Ориентир по срокам: 0.5–1 день для минимальной системы, 2–5 дней для полноценной дизайн-системы.

Этап 4 — UI-дизайн: от вайрфреймов к финальному виду

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

Что делаем: Работаем по согласованным вайрфреймам. Для каждого блока: реальные или репрезентативные изображения (не Lorem Ipsum), финальные тексты (или близкие к финальным), правильные отступы по сетке, все интерактивные состояния (кнопка в hover, поле с ошибкой, карточка в выбранном состоянии).

Обязательно проектируем мобильную версию параллельно. Типичная ошибка — сделать десктопный дизайн, а мобильный «добавить потом». «Потом» растягивается или забывается.

Порядок работы над страницей в Figma: создать Frame с нужными breakpoints → выставить сетку (8px или 4px) → расставить блоки из вайрфрейма → заполнить компонентами из дизайн-системы → добавить реальный контент → проверить отступы и выравнивание.

Инструменты: Figma — основной инструмент. Google Fonts для шрифтов. Unsplash/Pexels для временных изображений. Phosphor Icons / Heroicons для иконок.

Артефакт этапа: финальные макеты всех страниц в Figma для всех breakpoints (десктоп 1440px, планшет 768px, мобильный 375px).

Ориентир по срокам: 2–5 дней на лендинг, 5–14 дней на многостраничный сайт.

Разработка дизайна сайта в Figma — адаптивные макеты

Этап 5 — Прототип и согласование

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

Что делаем: В Figma Prototype режим: соединяем экраны стрелками переходов. Для главного сценария: главная → страница услуги → форма заявки → success-экран. Для сложных элементов: открытие меню, работа фильтров, модальные окна.

Прототип не должен воспроизводить все возможные сценарии. Достаточно ключевого пользовательского пути (happy path) + 2–3 альтернативных сценариев.

Согласование: Показываем клиенту прототип на встрече или через Figma Presentation link. Фиксируем правки письменно (не «скажи на встрече» — письменно). Согласованный дизайн → переходим к реализации.

Артефакт этапа: Figma-прототип + письменное согласование от клиента.

Этап 6 — Реализация: вёрстка или no-code

После согласования дизайна наступает реализация: перенос макета в работающий сайт. Два пути: традиционная вёрстка (HTML+CSS+JS, разработчик) или no-code конструктор (Taptop, Tilda). Taptop позволяет перенести pixel-perfect макет из Figma в работающий сайт без кода, сохраняя полный контроль над дизайном.

Два пути реализации:

Путь 1 — Передача разработчику: Dev Mode в Figma даёт разработчику CSS-значения для каждого элемента: отступы, размеры, цвета, шрифты, тени. Через Figma можно экспортировать иконки как SVG, изображения как PNG/WebP. Разработчик реализует вёрстку — дизайнер проверяет соответствие макету (pixel-perfect review).

Путь 2 — Самостоятельная реализация в Taptop: Taptop — профессиональный no-code конструктор с pixel-perfect редактором. Работает по той же логике, что Figma: числовые поля для отступов, flexbox и grid через интерфейс, компоненты, стили. Дизайнер собирает сайт в Taptop, используя тот же визуальный язык, что в Figma.

Когда выбирать Taptop: Проект для клиента малого/среднего бизнеса, нет разработчика в команде, клиент хочет самостоятельно редактировать контент после запуска, бюджет не предполагает разработку на заказ.

Ориентир по срокам (на Taptop): лендинг — 1–3 дня. Многостраничный сайт — 5–14 дней.

Реализация дизайна сайта в Taptop

Этап 7 — Тестирование и QA перед публикацией

Перед публикацией сайт проходит обязательный QA-чек: мобильная версия на реальных устройствах, кроссбраузерность (Chrome, Safari, Firefox), работоспособность форм, скорость загрузки в Google PageSpeed Insights, заполненность SEO-метатегов. Пропуск QA-этапа — главная причина «сломанных» сайтов после запуска.

Чек-лист перед публикацией: Мобильная версия — реальный телефон (не только DevTools). Кнопки кликабельны, нет горизонтального скролла, текст читаем без масштабирования.

Кроссбраузерность — проверьте Chrome, Safari (особенно на iOS), Firefox. Safari на macOS/iOS имеет ряд отличий в рендеринге CSS.

Формы — заполните и отправьте тестовую заявку. Убедитесь, что уведомление пришло на почту. Проверьте сообщение после отправки.

Скорость — Google PageSpeed Insights: целевой показатель 70+ на мобильных. Основные проблемы: неоптимизированные изображения (конвертируйте в WebP), лишние шрифты, неиспользуемый CSS.

SEO — для каждой страницы: заполнен Title (до 60 символов), Description (до 160), OG-изображение, alt-тексты для всех изображений.

Контент — нет Lorem Ipsum, нет плейсхолдеров [ТЕКСТ], нет битых ссылок.

Этап 8 — Публикация и передача клиенту

Публикация сайта в Taptop — одна кнопка после подключения домена. После публикации: подключите Яндекс.Метрику и Google Analytics, добавьте сайт в Яндекс.Вебмастер и Google Search Console для индексации. Передайте клиенту доступы и проведите краткий инструктаж по редактированию контента.

Публикация в Taptop: Настройки сайта → Общие → Домен — подключить собственный домен (или опубликовать на поддомене для теста). Далее в редакторе нажать «Опубликовать».

После публикации: Добавить код счётчиков аналитики (Яндекс.Метрика) — через Настройки сайта → Интеграции. Добавить сайт в Яндекс.Вебмастер: подтвердить права, отправить Sitemap. Аналогично в Google Search Console.

Передача клиенту: В Taptop — передать проект в команду клиента (предварительно сделав копию для себя). Провести 30-минутный инструктаж: как обновлять тексты, изображения, добавлять новые страницы.

Мини-кейс:

Ситуация: Фрилансер-дизайнер взял заказ на сайт для стоматологической клиники. Без опыта использования Taptop, только Figma.
Решение: Неделя на дизайн в Figma по описанному процессу (бриф → вайрфреймы → UI → прототип). Неделя на реализацию в Taptop по Figma-макету. Один день на тестирование и публикацию.
Результат: Сайт запущен через 13 рабочих дней. Клиент получил доступ к редактору. Дизайнер выставил счёт на 30% выше обычного, так как передал клиенту опубликованный работающий сайт, а не просто макет.

Малоизвестные факты о разработке дизайна сайта

Исследование Nielsen Norman Group (2020) показало: дизайнеры, которые создают вайрфреймы и согласовывают их до начала UI-дизайна, завершают проекты в срок на 40% чаще, чем те, кто начинает сразу с финального дизайна.

Факт 1. В опросе Figma «State of Design» 2024 года 61% дизайнеров назвали «согласование с клиентом» главным источником задержек в проекте. Вайрфреймы как инструмент раннего согласования снижают этот риск в 2–3 раза.

Факт 2. Google исследовал 1000 посадочных страниц в 2021 году и выявил: страницы, следующие строгой 8px-сетке, в среднем показывают на 16% более высокое доверие пользователей по сравнению со страницами без сетки. Сетка не заметна пользователю, но создаёт ощущение порядка.

Факт 3. Число дизайнеров, которые самостоятельно публикуют сайты через no-code инструменты (без разработчиков), растёт на 35% в год с 2021 года (данные Product Hunt и No-Code Alliance, 2024). Это изменяет рынок труда: «дизайнер, который публикует» стоит дороже «дизайнера, который только рисует».

Факт 4. Средний проект веб-дизайна на фриланс-рынке России в 2026 году включает 1.8 итерации правок после согласования. Проекты с зафиксированным и подписанным брифом — 0.9 итерации (в 2 раза меньше). Источник: Kwork Research, 2024.

Факт 5. Auto Layout в Figma (аналог flexbox) используют только 44% дизайнеров регулярно, хотя он доступен с 2019 года (State of Design Tools 2024). Те, кто использует Auto Layout, сокращают время на правки адаптивных версий на 50–70%.

Взгляд с другой стороны: нужны ли все 8 этапов для каждого проекта

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

Обоснованный аргумент за упрощение: для лендинга из 5 блоков с одной формой — расписывать полную дизайн-систему с 40 компонентами избыточно. Достаточно минимального набора: цвета, шрифты, одна кнопка, одна карточка.

Правило, которое работает: масштаб процесса = масштаб проекта. Простой лендинг — упрощённый процесс (бриф + вайрфрейм + дизайн + публикация). Сложный SaaS-продукт с 20 экранами — полный процесс с дизайн-системой, всеми состояниями и интерактивным прототипом.

Что сокращать нельзя никогда: брифинг (пропустите — получите переделку всего), мобильная версия (пропустите — потеряете 60% пользователей), QA перед публикацией (пропустите — опубликуете «сломанный» сайт).

Тимофей Коннов, веб-дизайнер Taptop: «Самая дорогая правка — та, которую вносят после публикации. Самая дешёвая — та, которую вносят в вайрфрейм. Каждый этап процесса — это попытка сделать правку дешевле. Пропускайте этапы только когда точно знаете, что платите за это.»

Итог

Разработка дизайна сайта — это восемь последовательных этапов: брифинг, вайрфреймы, дизайн-система, UI-дизайн, прототип, реализация, QA, публикация. Каждый этап производит артефакт и создаёт точку согласования.

Для дизайнеров, которые хотят довести проект от макета до работающего сайта самостоятельно — Taptop закрывает разрыв между Figma и публикацией. Pixel-perfect редактор, экспорт кода, управление контентом клиентом. Попробуйте бесплатно на taptop.pro.

FAQ

Вопрос: С чего начать разработку дизайна сайта?

Ответ: С брифинга: зафиксировать цели сайта, целевую аудиторию, конверсионные точки, технические требования и визуальные референсы. Только после структурированного брифа — переходить к вайрфреймам. Дизайн без зафиксированных требований приводит к бесконечным правкам.

Вопрос: Сколько времени занимает разработка дизайна сайта?

Ответ: Для простого лендинга: брифинг + вайрфреймы (1–2 дня), UI-дизайн (2–3 дня), реализация и QA (2–3 дня). Итого: 5–8 рабочих дней. Для многостраничного корпоративного сайта: 15–30 рабочих дней. Сроки увеличиваются при сложных согласованиях с несколькими стейкхолдерами.

Вопрос: Как создать мобильную версию дизайна?

Ответ: В Figma создайте отдельные фреймы для каждого breakpoint: 1440px (десктоп), 768px (планшет), 375px (мобильный). Проектируйте мобильный дизайн параллельно с десктопным — не «добавляйте мобильный потом». В Taptop для каждого элемента доступна отдельная настройка на мобильных breakpoints.

Вопрос: Как передать дизайн разработчику из Figma?

Ответ: Используйте Figma Dev Mode: разработчик получает CSS-значения для каждого элемента, может экспортировать иконки и изображения. Убедитесь, что все слои и компоненты правильно именованы, все переменные стилей применены, экспортируемые ресурсы помечены. Альтернатива — реализовать сайт самостоятельно через Taptop без разработчика.

Вопрос: Можно ли сделать дизайн сайта без опыта?

Ответ: Базовый дизайн по готовому шаблону в Taptop доступен без опыта. Профессиональный UI/UX-дизайн требует освоения Figma, понимания сетки и типографики, знания UX-принципов. Для начала рекомендуется: выбрать шаблон в Taptop, изучить Auto Layout в Figma, а также освоить основы Taptop на бесплатном курсе, а дальше практиковаться на реальных проектах с небольшим бюджетом.