Макет сайта: что это и как его делают в Фигме
Между «у меня есть идея сайта» и готовым сайтом есть шаг, на котором экономят больше всего денег и нервов, — макет. Разбираю, что это такое, чем макет отличается от прототипа, как его делают в Фигме и как заказчику его принимать.
- Макет — это готовый дизайн сайта в виде картинок: как будет выглядеть каждая страница.
- Прототип — схема блоков и текстов, макет — их оформление, сайт — работающая версия.
- Макеты делают в Фигме: заказчик смотрит их по ссылке и комментирует прямо на экране.
- Согласовывают главную страницу целиком, потом остальные — так меньше кругов правок.
Что такое макет сайта
Макет — это изображение будущего сайта: каждая страница нарисована целиком, с текстами, фотографиями, кнопками и формами. По нему видно, как сайт будет выглядеть, ещё до того, как его соберут. Макет нужен, чтобы утвердить дизайн, пока правки дешёвые: передвинуть блок на макете — минута, на готовом сайте — уже работа верстальщика.
Прототип, макет и сайт: в чём разница
| Прототип | Макет | Сайт | |
|---|---|---|---|
| Что это | Схема блоков и тексты | Готовый дизайн | Работающие страницы |
| Как выглядит | Чёрно-белый, без оформления | Цвета, шрифты, фото | Как макет, но кликается |
| Что утверждают | Структуру и смысл | Внешний вид | Работу форм, скорость, адаптив |
| Цена правки | Минимальная | Небольшая | Самая высокая |
Порядок важен: сначала смысл, потом оформление. Если начать с красивого макета без прототипа, через неделю выяснится, что нужен ещё блок с ценами, и дизайн придётся перекраивать. О прототипе подробно — в статье «Прототип сайта».
Как делают макет в Фигме
От прототипа к макету
- 01СтильЦвета, шрифты, кнопки — на 1–2 экранах
- 02ГлавнаяВся страница в утверждённом стиле
- 03ТелефонКак блоки перестраиваются на узком экране
- 04ОстальныеВнутренние страницы по тем же правилам
- 05ПередачаМакет для вёрстки и доступ заказчику
Фигма работает в браузере, поэтому заказчику не нужно ничего устанавливать: он получает ссылку, листает экраны и оставляет комментарии прямо на нужном месте макета. Для компьютера макет обычно рисуют шириной 1440 пикселей, для телефона — 360–390. Повторяющиеся элементы (кнопки, карточки, шапка) делают компонентами: поменяли один — поменялись все.
Что получает заказчик
- ссылку на макет в Фигме со всеми страницами для компьютера и телефона;
- набор стилей: цвета, шрифты, размеры, кнопки — пригодится для будущих страниц и рекламных материалов;
- картинки и иконки, которые использованы в макете;
- после запуска — права на макет: он должен оставаться у вас, а не у дизайнера. Как это записать — в статье «Договор на разработку сайта».
Как согласовать макет
- Смотрите на телефоне — большинство посетителей увидит сайт именно там.
- Оценивайте задачу, а не вкус: понятно ли, что вы продаёте, где цена, куда нажать.
- Собирайте правки одним списком — от всех, кто участвует в решении, а не по одной в день.
- Пишите, что не так, а не как исправить: «не видно цену» лучше, чем «сделайте кнопку красной».
- Помните про круги правок — у меня их 2 после каждого этапа, этого хватает, если правки собраны вместе. Весь порядок работы — в статье «Этапы разработки сайта».
Частые вопросы
Чем макет сайта отличается от прототипа?
Прототип — чёрно-белая схема: какие блоки, в каком порядке и с каким текстом. Макет — готовый дизайн: цвета, шрифты, фотографии, иконки. Сначала утверждают прототип, потом по нему рисуют макет.
В какой программе делают макет сайта?
Сейчас чаще всего — в Фигме: она работает в браузере, заказчик открывает макет по ссылке и оставляет комментарии прямо на экранах.
Можно ли сделать макет сайта самому?
Можно собрать простой макет из готовых блоков в Фигме или конструкторе, но без опыта сложно выдержать сетку, отступы и иерархию. Обычно заказчик готовит материалы и пожелания, а макет делает дизайнер.
Нужен ли макет мобильной версии?
Да, хотя бы для главных экранов: на телефоне блоки перестраиваются, и это лучше утвердить заранее, чем увидеть только после вёрстки.
