Создание макетов сайта: лёгкий макет своими руками, блочная структура и файл дизайнера

Создание макетов сайта не обязательно начинается с Figma и дизайнера. Большинству сайтов малого бизнеса для старта хватает лёгкого макета, который владелец может сделать сам за вечер: эскиза страницы на бумаге и блочной структуры — списка блоков по пунктам, сверху вниз. Тяжёлый дизайн-макет со слоями, линейками и сеткой нужен, когда дизайн рисуется с нуля. Ниже — как сделать оба, конструктор блочной структуры прямо в статье, как устроен файл дизайн-макета изнутри и что делать с GIF, бесшовными фонами, метками и картами.

Тридцать страниц поиска: Figma, Photoshop и четыре студии из Нижнего Новгорода

Я разобрал тридцать страниц, которые поиск показывает по запросам о создании макетов сайта. Одиннадцать — статьи о том, что такое макет и как его сделать. Пять — уроки по конкретным программам: три по Figma, два по Photoshop. Пять — страницы конструкторов и сервисов прототипов, две — подборки инструментов, одна — о вёрстке макета. Ещё одна — статья на общую тему, ещё одна вообще не открылась. И четыре — страницы веб-студий Нижнего Новгорода: в запросах кластера есть «создание сайта в Нижнем», и поиск подмешал их сюда.

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

Лёгкие и тяжёлые макеты: кому какой

В работе я делю макеты на два вида — по тому, сколько решений в них уже принято.

Лёгкий макет не заменяет тяжёлый, а предшествует ему. Но для многих сайтов дальше лёгкого макета идти не нужно: блоки конструктора или готового шаблона уже нарисованы дизайнером, остаётся выбрать нужные и расставить их. Про три уровня — схему всего сайта, прототип и дизайн-макет — подробно написано в статье «Создание схемы сайта: схема, прототип, макет по порядку». Здесь — практика: как сделать лёгкий макет самому и как устроен тяжёлый изнутри.

Эскизы для создания сайта: восемь вариантов за восемь минут

Эскиз — самый быстрый способ увидеть страницу. Хорошо работает у владельцев без опыта дизайна приём из методики дизайн-спринтов под названием Crazy 8s: восемь эскизов за восемь минут.

1. Сложите лист А4 трижды — получится восемь прямоугольников.
2. Поставьте таймер на восемь минут и рисуйте по одному варианту первого экрана в каждом прямоугольнике — минута на вариант.
3. Рисуйте прямоугольниками и подписями. Картинка — прямоугольник с крестом, текст — волнистые линии, кнопка — овал со словом.
4. Выберите один-два варианта и дорисуйте страницу целиком, вниз, блок за блоком.
5. Сфотографируйте и отправьте исполнителю вместе с двумя-тремя словами о каждом блоке.

Ограничение по времени здесь главное: оно не даёт застрять на первой идее и вылизывать её. Из восьми вариантов два-три обычно оказываются неожиданно удачными. А нарисовать главную страницу целиком на одном листе — самая честная проверка того, понимаете ли вы, что должен увидеть посетитель.

Создание блочной структуры сайта по пунктам

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

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

Тяжёлый макет изнутри: слои, линейки и сетка

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

• Слои с понятными именами. Каждый блок страницы — отдельная группа, названная так же, как в блочной структуре: «Шапка», «Первый экран», «Цены». Слои «Rectangle 247» и «Group 18 copy» — первый признак того, что верстальщику придётся разбираться вслепую.
• Отдельные кадры под ширины экрана. Минимум компьютер и телефон, для сложных сайтов — ещё планшет. Каждая ширина — своя страница в файле, а не «мобильную потом сами придумаете».
• Сетка. Обычно двенадцать колонок с одинаковыми промежутками для компьютера и четыре для телефона. Блоки встают по колонкам, и страница выглядит аккуратной без лишних усилий.
• Линейки и направляющие. Линейки — шкалы по краям холста; в Figma они включаются сочетанием Shift+R, в Photoshop — Ctrl+R. Из них вытягивают направляющие — тонкие линии, по которым выравнивают края контейнера, заголовки и кнопки.
• Шаг отступов. Все расстояния кратны одному числу, чаще всего 8 пикселям: 8, 16, 24, 32, 48. Это незаметно глазу, но именно из-за этого макет выглядит собранным.
• Компоненты и состояния. Кнопка, поле ввода, карточка нарисованы один раз и переиспользуются. У кнопки есть вид при наведении, у поля — вид с ошибкой. Без этого верстальщик придумает их сам.

Как проверить готовый макет перед вёрсткой — по ширинам, контрасту и шрифтам — разобрано в статье «Дизайн сайта: где рисовать и как сделать сайт по готовому макету».

Макет для вёрстки или вёрстка без макета

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

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

GIF, видео и бесшовные фоны в макете

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

GIF. Создание гифки для сайта кажется простым решением для анимации, но формат GIF старый и тяжёлый. Тот же ролик в формате MP4 или WebM, без звука и с автоповтором, весит в разы меньше и выглядит так же.

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

Бесшовные фоны. Бесшовный узор — небольшая картинка, которая повторяется по фону без видимых стыков. Для сайта его рисуют плиткой 200–400 пикселей, проверяют стыки, выложив четыре копии квадратом, и подключают как повторяющийся фон. Лёгкие узоры из линий и точек удобно делать в формате SVG — они весят несколько килобайт и остаются чёткими на любом экране. Главное правило: узор не должен мешать читать текст, поэтому под текстом его делают почти прозрачным.

Создание горизонтального сайта

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

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

Создание меток для сайта и ГИС на сайте

Под словом «метки» в запросах о сайтах скрываются три разные вещи, и в макете под каждую нужно своё место.

• Метки на карте. Адреса офисов, пунктов выдачи, объектов. Для небольшого числа точек хватает бесплатного конструктора карт: точки отмечают на карте и вставляют её на сайт готовым кодом. В макете под карту обычно отводят блок «Контакты».
• Метки в ссылках. UTM-метки — подписи в адресе ссылки, по которым статистика понимает, откуда пришёл посетитель: из какой рекламы, рассылки или поста. Их ставят при запуске рекламы, в макете они не видны, но о них важно договориться заранее.
• Метки записей. Теги в блоге или каталоге, по которым материалы группируются. В макете — облако или список тегов и страница тега.

Создание ГИС на сайте — следующий уровень после меток на карте. Геоинформационная система — это карта со слоями и фильтрами: участки, объекты недвижимости, маршруты, зоны доставки, у каждого объекта — карточка с данными. Такую карту строят на картографическом API или на открытой карте OpenStreetMap с библиотеками вроде Leaflet. Это уже отдельная разработка с базой данных, и в макете под неё рисуют не блок, а целый экран со своими состояниями: фильтры, карточка объекта, список. О видах карт на сайте — в статье «Сайты создания карт: навигатор по восьми видам карт».

Утилиты для создания сайта, которые нужны при макетировании

Кроме редактора макетов, пригодится несколько мелких утилит для создания сайта. Все они бесплатные и работают в браузере:

• Пипетка цвета — встроена в инструменты разработчика браузера: снимает цвет с любого сайта или картинки.
• Проверка контраста — показывает, читается ли текст на выбранном фоне.
• Сжатие изображений — уменьшает вес картинок для сайта без видимой потери качества и переводит их в современные форматы.
• Генератор иконки сайта — делает favicon всех нужных размеров из одной картинки.
• Режим устройства в браузере — показывает страницу так, как её увидят на телефоне конкретного размера. Это и есть самая точная «линейка» для проверки мобильной версии.
• Генератор текста-рыбы — для прототипа. Но помните: в итоговый макет нужны настоящие тексты.

Создание сайта из закладок: референсы и мудборд

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

1. Отберите пять-десять сайтов из закладок, не больше.
2. Сделайте скриншоты именно тех мест, которые нравятся, а не страниц целиком.
3. Подпишите каждый: «нравится крупный шрифт», «нравится, как показаны цены», «нравится фото команды».
4. Добавьте один антиреференс — сайт, который точно не нравится, и почему.

Такой мудборд вместе с эскизом и блочной структурой — полный лёгкий макет. По нему можно собрать сайт из блоков или поставить задачу дизайнеру так, что первый вариант попадёт в цель.

Создание сайта на Тильде пошагово, если лёгкий макет готов

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

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

Подробно о порядке блоков, настройках и договоре на сайт на Тильде — в статье «Tilda: создание сайта — порядок блоков, настройки и договор».

Создание сайта в Нижнем Новгороде и других городах

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

Случай из практики: ателье, эскиз на тетрадном листе и сайт за шесть дней

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

Через вечер пришла фотография тетрадного листа: сверху крупно «Ремонт одежды за 1 день», под ним — прайс на самые частые работы, фото «до и после», адрес с картой и кнопка «Записаться на примерку». На полях — подписи: «как на сайте конкурента, только цены сразу». Мы переложили эскиз в блочную структуру из девяти пунктов, добавили отзывы и блок с вопросами о сроках и подобрали готовые блоки конструктора под каждый пункт.

Отдельного дизайн-макета не понадобилось: сайт собрали за шесть дней, на работу ушло около 22 часов, стоимость — 28 000 рублей. Самым популярным блоком оказался прайс в первом экране: по словам владелицы, звонков с вопросом «сколько стоит подшить брюки» стало заметно меньше, а записей через сайт за первые два месяца — 57.

Как это ищут

«Создания макетов сайта» — вся статья: лёгкие и тяжёлые макеты. «Эскизы для создания сайта» и «легкие макеты для создания сайта» — восемь эскизов за восемь минут. «Создание блочной структуры сайта» и «создание сайта по пунктам» — конструктор блоков. «Создание сайта слои», «создание линеек для сайта» — устройство тяжёлого макета: слои, линейки, направляющие и сетка. «Создание макетов верстки сайта» и «создание сайта с верстки» — макет для верстальщика или вёрстка без макета. «Создание гиф для сайта» и «создание бесшовных для сайта» — GIF против видео и бесшовные фоны. «Создание горизонтального сайта» — когда горизонтальная прокрутка уместна. «Создание меток сайта», «создание меток для сайта», «создание гис сайта» и «создание гис на сайте» — метки на карте, UTM-метки, теги и геоинформационные карты. «Утилиты для создания сайта» — шесть бесплатных инструментов. «Создание сайта из закладок» — мудборд из референсов. «Создание сайта на тильде пошагово» — семь шагов от блочной структуры. А «создание сайта в нижнем» — про работу с клиентами из Нижнего Новгорода.

Итог

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

Пришлите эскиз или список блоков — соберу сайт по лёгкому макету или подскажу, где нужен дизайн. Подробнее — на странице создания сайтов.

Александр Рожков

Вебмастер · SEO-специалист · 15+ лет · 200+ проектов

Частный вебмастер в Москве. 200+ сайтов под ключ, 15+ лет опыта. Создаю сайты, настраиваю SEO и рекламу лично — без субподрядчиков.

О себе