Макет сайта: что это, как сделать в Figma и что передать верстальщику

Что такое макет сайта простыми словами

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

В макете заданы:

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

Если чего-то из списка нет, решение за дизайнера примет верстальщик. Иногда он угадывает, но чаще результат потом приходится переделывать, и за эти часы платит заказчик.

Чем макет отличается от прототипа и дизайн-системы

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

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

Из каких этапов состоит работа над макетом

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

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

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

Какие размеры брать для макета сайта

Для макета сайта в 2026 году обычно берут две базовые ширины: 1440 px для компьютера и 360–390 px для телефона, а для планшета 768 px, если на сайте есть сложные таблицы или каталог. Никакого стандарта на эти цифры нет, их выбирают по статистике посещений сайта. Если сайт уже работает, откройте в Метрике отчёт по разрешениям экрана и посмотрите, что преобладает у ваших посетителей.

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

Для кнопок есть внешний ориентир. Стандарт доступности WCAG 2.2 в критерии 2.5.8 требует, чтобы нажимаемая область была не меньше 24×24 CSS-пикселей, с оговорками про ссылки в тексте и элементы с большими промежутками. Это нижняя граница стандарта. В наших макетах кнопки на телефоне заметно крупнее, потому что по ним попадают большим пальцем на ходу.

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

Макет сайта в Figma собирается за девять шагов, если прототип и тексты уже готовы. Базовые приёмы работы с программой есть в уроке Figma для начинающих, здесь только порядок сборки именно макета для вёрстки.

1. Создайте в файле отдельные страницы: «Элементы», «Компьютер», «Телефон», «Черновики». Верстальщик будет смотреть только в первые три.
2. Поставьте фрейм нужной ширины и добавьте направляющие: колонки с промежутками и полями из таблицы выше. В старых материалах эта функция называется layout grid, теперь она называется layout guide.
3. Заведите стили: цвета, размеры текста для заголовков и основного текста. Если цвет кнопки потом изменится, вы поменяете его один раз.
4. Соберите элементы на странице «Элементы»: кнопку, поле ввода, карточку, шапку и подвал. Сделайте их компонентами, тогда правка главного элемента разойдётся по всем копиям.
5. Добавьте состояния через варианты: обычная кнопка, наведение, нажатие, отключённая. У поля ввода сделайте пустое, заполненное и с ошибкой.
6. Включите автолейаут в блоках. Это функция, которая сама держит отступы и подстраивает размер рамки под содержимое. Для верстальщика она ценна тем, что поведение блока в Figma похоже на поведение блока в браузере.
7. Соберите страницы из компонентов. Вставляйте реальные тексты: заголовок на две строки и заголовок на пять слов выглядят по-разному, и лучше увидеть это сейчас.
8. Сделайте версию для телефона: перестройте блоки в колонку, проверьте длину заголовков, откройте меню и форму.
9. Если ваш план это позволяет, отметьте готовые фреймы статусом Ready for dev. Если потом кто-то их изменит, Figma покажет отметку об изменении, и разработчик не пропустит правку. На бесплатном аккаунте просто напишите в названии страницы дату передачи.

На шаге 7 многие вставляют случайный текст-рыбу. Мы так не делаем: страница с настоящими текстами почти всегда требует другой высоты блоков, и все эти различия вылезают при вёрстке.

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

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

Как сделать адаптивный макет для телефона

Адаптивный макет для телефона — это отдельная версия каждого шаблона страницы шириной 360–390 px, где блоки перестроены под узкий экран. Простого уменьшения компьютерной версии здесь мало: текст станет нечитаемым, а кнопки слишком мелкими. Поэтому у каждой страницы проверяют пять вещей.

• Порядок блоков. В компьютерной версии фото стоит справа от текста, на телефоне придётся решить, что идёт первым.
• Первый экран. Заголовок, оффер и кнопка должны помещаться без прокрутки, иначе человек не поймёт, куда попал.
• Таблицы и широкие элементы. Для них нужно решение: прокрутка внутри блока, карточки вместо таблицы или сокращённая версия.
• Меню и формы. Нужно нарисовать открытое меню и продумать форму так, чтобы поле не пряталось под экранной клавиатурой.
• Закреплённые элементы. Шапка и нижняя панель съедают высоту экрана, а она на телефоне и так маленькая.

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

Что входит в готовый макет сайта и что передать верстальщику

Готовый макет сайта включает пять групп материалов: шаблоны страниц, набор элементов, стили, графику и пояснения к поведению. Если одной группы нет, вёрстка начнётся с вопросов. Перед передачей пройдите по этой таблице.

Отдельно решите вопрос доступа. Режим разработчика (Dev Mode) показывает свойства, код и файлы для скачивания, но он работает только на платных планах. По справке Figma просмотр свойств и экспорт доступны и при доступе только на чтение, так что обычно верстальщику достаточно ссылки с таким доступом. Проверьте это до начала работ: откройте файл из другого аккаунта и попробуйте скачать иконку.

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

Как принять макет у дизайнера: пошагово

Принимать макет сайта лучше по заданию и проверочному списку, потому что вкусовая оценка не находит пропущенных страниц и состояний. На проверку небольшого сайта обычно уходит час-два. Работайте в таком порядке.

1. Откройте техническое задание и отметьте каждую страницу из него в файле. Если страницы нет, спросите, из какого шаблона она собирается.
2. Пройдите путь клиента: зашёл на главную, открыл услугу, нажал кнопку, заполнил форму, увидел сообщение об успехе. На каждом шаге должен быть экран.
3. Откройте мобильные версии на настоящем телефоне. Figma умеет показывать прототип на устройстве, а можно просто отправить себе картинку. Текст, читаемый на большом мониторе, на телефоне часто оказывается мелким.
4. Проверьте самые длинные значения: длинное название услуги, цена из шести цифр, фамилия на всю строку.
5. Проверьте контактные места: телефон, мессенджеры, форма заявки видны там, где человек принимает решение.
6. Покажите файл верстальщику до финальной оплаты дизайнера. Он за полчаса скажет, что нельзя сделать в рамках бюджета или на выбранной платформе.
7. Зафиксируйте решение письменно и только после этого отдавайте макет в вёрстку. Правка после вёрстки стоит дороже, потому что её делают два человека.

Шаг 6 экономит больше всего нервов. Если вы собираете сайт на конструкторе, у него есть свои ограничения, и эффектная анимация из макета может оказаться недостижимой за разумные деньги.

Что видите в макете и что это значит

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

Сколько стоит макет сайта: расчёт по экранам

Цена макета сайта зависит от числа уникальных шаблонов страниц, наличия адаптивных версий и количества кругов правок. Поэтому считать лучше по шаблонам: 30 страниц услуг из одного шаблона будут стоить как один шаблон плюс наполнение. По нашей оценке рынка, дизайн лендинга у фрилансера обычно обходится в 15–60 тысяч рублей, сайта услуг на 5–10 шаблонов в 40–150 тысяч рублей, у студии вилки выше. Откуда такой разброс, подробно разобрано в статье сколько стоит дизайн сайта. Официальных расценок на эту работу нет, цифры ориентировочные.

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

Теперь посмотрим на тот же сайт с другими вводными. Если заказчик решает обойтись без мобильных версий, цена падает на 23 500 ₽, но решения для телефона придётся принимать верстальщику, а он, скорее всего, выставит за них часы. Если заказчик хочет ещё третий круг правок по всем страницам, подрядчик добавит примерно столько часов, сколько на него уйдёт, и итог вырастет.

Что сильнее всего двигает цену вверх:

• сложные интерактивные блоки: калькуляторы, фильтры, конфигураторы;
• съёмка, ретушь и отрисовка иллюстраций;
• анимации, которые надо показать в прототипе;
• написание текстов, если их делает дизайнер или копирайтер студии.

Мифы и ошибки при работе с макетом

Самый дорогой миф про макет сайта звучит так: «макет готов, значит, сайт почти готов». На деле впереди вёрстка, подключение форм, наполнение, проверка, и этот объём часто сравним с работой над дизайном или больше её. Разберём остальные заблуждения.

«Хватит PDF или картинки». Картинка показывает вид, но из неё нельзя точно взять отступы, цвета и шрифты. Верстальщику придётся измерять всё на глаз, а иконки вырезать из скриншота. В Figma он видит свойства каждого слоя.

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

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

«Сначала красиво, тексты потом». Когда приходят реальные тексты, заголовки не влезают в дизайн. Дальше приходится либо резать смысл, либо перерисовывать блоки.

«Экспортируем из Figma, и будет сайт». В линейке Figma есть продукт Figma Sites, а для конструкторов существуют импортёры, например в Zero Block Тильды. Для рабочего сайта с заявками, аналитикой и своим доменом всё равно приходится проверять, как работают формы, скорость и адаптив. Считайте такой перенос отправной точкой.

Кто должен делать макет сайта: сравнение вариантов

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

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

Если хотите проверить, подходит ли выбранный подход вашему проекту, пришлите ссылку на текущий сайт или короткое описание задачи: мы посмотрим и скажем, какой объём макета вам действительно нужен.