Как сделать макет сайта: пошагово в Figma

Макет сайта – это подробный визуальный план страницы с цветами, шрифтами, отступами и состояниями элементов. Чтобы разобраться, как сделать макет сайта, пройдите весь путь: бриф, wireframe, сетка, компоненты, сборка страницы и адаптив. В Figma вы подготовите десктопную и мобильную версии, затем передадите разработчику файл по чек-листу.

Что такое макет сайта и чем он отличается от wireframe и прототипа

Макет сайта показывает, как страница будет выглядеть до верстки. В нем видны реальные тексты, изображения, цвета, размеры блоков, кнопки и поля форм.

Дизайн-макет служит визуальной инструкцией для заказчика и верстальщика.

Макет сайта – это изображение будущей страницы. Разработчик затем переносит ее оформление и поведение в браузер.

Разработка макета сайта дает четыре практических результата:

• Структура. Вы находите лишние или пропущенные блоки до верстки.
• Согласование. Заказчик видит страницу и формулирует правки предметно.
• Ориентиры для верстки. Разработчик получает размеры, стили и состояния элементов.
• Основа для адаптива. Вы заранее решаете, что произойдет с блоками на телефоне.

Wireframe, макет и прототип решают разные задачи на одном проекте.

Прототип может состоять из связанных схематичных экранов без финального оформления.

Для простой промо-страницы часто хватает макета. Личный кабинет с формами и несколькими сценариями лучше дополнить прототипом.

Что подготовить перед макетом

Как делать макет без постоянных переделок? Начните с короткого брифа. Запишите ответы в одном документе и приложите материалы, которыми воспользуется дизайнер.

• Цель. Опишите одно главное действие посетителя: заявка, покупка или подписка.
• Аудитория. Укажите, кто придет на сайт, с каким вопросом и с какого устройства.
• Состав страниц. Запишите главную, каталог, карточку товара, контакты и другие нужные экраны.
• Контент. Подготовьте заголовки, тексты, цены, фотографии и подписи. Реальный текст показывает, выдержит ли блок нужную длину.
• Референсы. Соберите 3–5 примеров и поясните, какие решения вам подходят.

Зафиксируйте результат одной фразой: «Посетитель понимает предложение и отправляет заявку».

Затем нарисуйте wireframe. Возьмите лист бумаги и отметьте шапку, первый экран, контентные блоки, форму и подвал. Подпишите содержание каждого блока до выбора цветов и шрифтов.

В какой программе делать макет сайта

Редактор выбирают под команду и способ передачи готового файла. Для совместной работы подойдет Figma, для собственного сервера – Penpot. Adobe XD находится в режиме обслуживания без развития, поэтому новый проект лучше начинать в другом редакторе.

Figma

Figma объединяет макеты, компоненты и обсуждение страницы в одном файле. Чтобы создать макет сайта вместе с командой, договоритесь об именах страниц и правилах комментариев.

Penpot

Penpot – веб-платформа с открытым исходным кодом. Возможность разместить редактор на собственном сервере пригодится команде, которая управляет своей инфраструктурой.

Sketch

Sketch подходит дизайнеру, который работает на Mac и собирает интерфейсы из компонентов.

Adobe XD

Adobe XD находится в режиме обслуживания, или maintenance mode. Продукт не получает новых функций. Рассматривайте его для продолжения существующих проектов, если команда уже использует XD.

Бумаги и карандаша хватит, чтобы нарисовать макет на уровне структуры.

Создание макета сайта в Figma пошагово

Создание макета сайта проходит от структуры к деталям. Чтобы разобраться, как создать макет, соберите одну страницу целиком. Для упражнения подойдет страница услуги с заявкой на расчет.

Шаг 1. Нарисуйте wireframe

Нарисуйте серые прямоугольники на бумаге или во фрейме Figma. Подпишите шапку, первый экран, преимущества, отзывы, форму и подвал.

Проведите посетителя от вопроса «Что вы предлагаете?» до отправки заявки.

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

Шаг 2. Создайте фреймы и сетку

Выберите инструмент Frame и нарисуйте рабочую область страницы. В правой панели задайте ширину 1440 px. Рядом создайте мобильный фрейм шириной 390 px.

Эти размеры служат отправной точкой учебного макета, а не статистикой устройств.

При выделенном фрейме откройте справа «Layout guide» → «Add layout guide». По умолчанию появится равномерная сетка. Через значок настроек направляющей смените тип на «Column».

Задайте 12 колонок, тип «Stretch», промежуток Gutter 24 px и поля Margin 80 px.

Колонки должны занимать пространство между боковыми полями фрейма. Выравнивайте по ним края заголовков, карточек и изображений. Для мобильного фрейма начните с 4 колонок, полей 16 px и промежутков 16 px.

Шаг 3. Создайте стили цвета и текста

Создайте текстовый объект и задайте основной шрифт проекта. Для учебного примера используйте размер 16 px и межстрочный интервал 24 px. Проверьте, что выбранный шрифт содержит кириллицу.

В настройках текста справа откройте выбор стилей через значок четырех точек. Кнопкой с плюсом сохраните оформление под именем «Text/Body».

Отдельно сохраните стили заголовков «Heading/H1» и «Heading/H2».

Для цветов создайте прямоугольники с нужными заливками. В настройках заливки откройте выбор стилей и сохраните каждый цвет. Назовите их по роли: «Primary», «Text/Default», «Surface/Light», «State/Error».

Примените «Text/Body» к новому абзацу через список стилей. Изменение сохраненного стиля должно обновить оба связанных текстовых объекта.

Шаг 4. Соберите компоненты

Напишите текст кнопки, например «Заказать расчет», и включите для него Auto Layout. Задайте контейнеру заливку, скругление и внутренние отступы. Начните с 16 px по горизонтали и 12 px по вертикали.

Для ширины кнопки выберите «Hug contents», чтобы контейнер подстраивался под надпись.

Выделите кнопку и вызовите «Create component» через контекстное меню. Перетащите экземпляр из панели компонентов на страницу. Замените надпись на более длинную: ширина должна увеличиться с сохранением отступов.

Подготовьте отдельные варианты кнопки для обычного состояния, наведения, нажатия, фокуса и отключения. Выделите компоненты этих состояний и объедините командой «Combine as variants». Назовите свойство состояния «State».

Для поля формы добавьте подпись, введенный текст и сообщение об ошибке.

Соберите карточку из изображения, заголовка и описания по тому же принципу. Меняйте содержание в экземплярах, сохраняя общую структуру компонента.

Шаг 5. Соберите страницу по блокам

Разложите готовые компоненты по wireframe и привяжите края к колонкам сетки.

1. Шапка. Поставьте логотип, меню и кнопку действия. Проверьте, что элементы не выходят за поля.
2. Первый экран. Добавьте заголовок, короткое пояснение и CTA-кнопку «Заказать расчет».
3. Контентные блоки. Раскройте услугу, покажите преимущества, примеры и отзывы. Каждый блок должен отвечать на конкретный вопрос посетителя.
4. Форма. Оставьте поля, которые нужны для обработки заявки, и покажите результат отправки.
5. Подвал. Добавьте контакты и ссылки на документы проекта.

Замените тестовый текст материалами из брифа. Если заголовок занимает слишком много строк, измените ширину блока или формулировку. Не уменьшайте весь текст ради одного длинного заголовка.

Шаг 6. Сделайте мобильную версию

Перенесите содержимое страницы во фрейм шириной 390 px. Соберите блоки в одну колонку и настройте перенос текста. Изображение разместите до или после описания с учетом смысла блока.

Храните десктопную и мобильную версии в одном файле.

После каждого этапа проверяйте результат на реальном контенте. Если изменение ломает композицию, отмените его через Undo. Перед крупной перестройкой сохраните отдельную копию фрейма.

Как сетка, композиция и CTA влияют на дизайн макета

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

12-колоночная сетка

12 колонок удобно делить на 2, 3, 4 или 6 частей. Так вы соберете две колонки по 6, три по 4 или четыре по 3.

Выравнивайте основные края по сетке, а отступы задавайте кратными 4 или 8 px.

Внутри карточки задайте собственные отступы. Сетка страницы определяет положение карточки, но не заменяет ее внутреннюю компоновку.

Z- и F-паттерны

Z-паттерн используют как ориентир для страниц с небольшим количеством текста. Верхний ряд связывает логотип и навигацию, нижний – предложение и действие. Между ними располагают главный визуальный акцент.

F-паттерн описывает сканирование текстовых страниц с повторными возвратами к левому краю.

Для такого просмотра полезны содержательные подзаголовки и понятные начала абзацев. Не считайте паттерны гарантированным маршрутом взгляда: содержание и визуальная иерархия меняют поведение посетителя.

Кнопка призыва к действию

Выделите главную CTA-кнопку акцентным цветом и короткой надписью из глагола. На одном экране оставьте одно главное действие, а вторичную ссылку оформите спокойнее.

Надпись «Заказать расчет» точнее объясняет результат, чем «Нажмите здесь».

Адаптив: как сделать мобильную версию макета

Адаптив перестраивает одну страницу под разные ширины. Для учебного макета используйте фреймы 1440, 768 и 390 px. Дополнительно проверьте узкую ширину 375 px и промежуточные размеры.

Брейкпоинт выбирают там, где текущая компоновка перестает вмещать контент.

Auto Layout внутри фрейма

Выделите элементы блока и включите Auto Layout через контекстное меню. Для вертикального списка задайте направление сверху вниз и промежуток 24 px. Контейнеру добавьте внутренние поля 24 px.

Если блок вложен в другой Auto Layout, задайте ему ширину «Fill container». Абзацу также задайте заполнение доступной ширины, а высоте – «Hug contents». Тогда текст будет переноситься и увеличивать высоту блока.

Измените заголовок на более длинный: соседние элементы должны сдвинуться без наложений.

Constraints и изменение размера фрейма

Constraints задают привязку объекта к краям родительского фрейма. Для упражнения поместите логотип и кнопку внутрь обычного фрейма без Auto Layout.

Выделите логотип и в настройках привязок задайте «Left» и «Top». Кнопке справа задайте «Right» и «Top». Измените ширину родителя: элементы должны остаться у соответствующих краев.

Для растягиваемой полосы задайте горизонтальную привязку «Left» и «Right».

Auto Layout управляет потоком и промежутками между элементами. Constraints управляют привязкой объектов при изменении родительского фрейма. Эти настройки сами не превращают десктопную страницу в мобильную.

Что скрыть и что переставить

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

Сохраняйте цены, условия и другие сведения, от которых зависит решение посетителя.

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

Зоны касания

Для учебного веб-макета задайте интерактивной области минимум 44×44 CSS-пикселя. Видимая иконка может быть меньше, но область нажатия должна сохранять выбранный размер.

Apple рекомендует область 44×44 pt, а Material Design – 48×48 dp. Это платформенные единицы; не подменяйте ими CSS-пиксели веб-страницы.

Оставьте расстояния между соседними кнопками и покажите их реальные границы.

Как передать макет разработчику

Передача макета включает доступ, порядок в файле и экспорт ресурсов. Пройдите чек-лист после финальной правки страницы.

• Страницы. Разделите финальные экраны, компоненты и рабочие черновики. Назовите разделы файла понятными словами.
• Слои. Замените имена вроде «Rectangle 238» на «Header/Logo» или «Button/Primary».
• Компоненты. Подготовьте состояния hover, active, disabled, focus и ошибки формы. Покажите успешную отправку заявки.
• Стили. Привяжите цвета и текст к сохраненным стилям. Удалите случайные дубли оттенков.
• Брейкпоинты. Передайте десктопную, промежуточную и мобильную версии. Опишите правила между ними.
• Ресурсы. Подготовьте иконки в SVG, фотографии в PNG или JPG. Укажите обрезку и поведение изображений.
• Шрифты. Запишите семейства и начертания, приложите сведения о лицензиях и разрешенном использовании.
• Поведение. Подпишите переходы, раскрытие меню, проверки полей и сообщения пользователю.
• Доступ. Передайте ссылку на финальный файл с правами просмотра.

Чтобы выдать доступ, откройте файл и нажмите «Share». Выберите просмотр вместо редактирования, добавьте адрес разработчика и скопируйте ссылку. Получатель должен открывать финальные экраны без запроса дополнительных прав.

Если ссылка привязана к приглашенному аккаунту, проверяйте доступ именно с него.

Для экспорта выделите ресурс и откройте блок экспорта справа. Выберите SVG, PNG или JPG, затем нажмите кнопку экспорта. Откройте скачанный файл и убедитесь, что изображение не обрезано случайными границами.

Для Dev Mode включите переключатель в панели инструментов или нажмите Shift+D. Если режим недоступен, передайте ссылку на просмотр и отдельную папку с экспортированными ресурсами.

Макет для сайта готов к передаче, когда разработчик может найти каждый ресурс и состояние без догадок.

Ошибки при создании макета сайта

Ошибки видны еще до верстки, если проверить страницу по шести пунктам. У каждой проблемы есть простое исправление.

1. Перегруз элементами. Уберите второстепенный блок и оставьте один главный акцент на экране.
2. Цвета вне палитры. Замените случайные оттенки сохраненными стилями «Primary», «Text» и «Surface».
3. Нечитаемый текст. Добейтесь контраста не ниже 4,5:1 для обычного текста и 3:1 для крупного по WCAG. Крупный текст – от 18 pt обычного начертания или от 14 pt полужирного. Сравните цвета текста и фона в WebAIM Contrast Checker: введите оба HEX-кода и посмотрите рассчитанное отношение контраста. Для текста поверх фотографии проверьте самый светлый и самый темный участки фона либо добавьте однотонную подложку.
4. Нет мобильной версии. Соберите фрейм 390 px до передачи файла и проверьте ширину 375 px.
5. Нет состояний элементов. Добавьте варианты hover, active, focus, disabled и error в компоненты.
6. «Рыба» вместо реального текста. Подставьте настоящие заголовки, цены и подписи: они меняют высоту блоков.