Создание схемы и макета сайта: три уровня, этапы, сколько макетов нужно и чем рисовать

Схема сайта — это список страниц и связей между ними. С неё начинается всё остальное: прототип показывает, что лежит на каждой странице, макет — как она выглядит, а вёрстка превращает макет в работающий сайт. Пропустить можно прототип и даже макет, если сайт собирается из готовых блоков. Схему пропустить нельзя никогда. Ниже — инструмент, в котором схему можно собрать прямо на этой странице, этапы создания макета, сколько макетов на самом деле нужно для сайта на 30–40 страниц и чем всё это рисовать в 2026 году.

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

Тридцать страниц поиска: три разных «схемы» под одним запросом

Я разобрал тридцать страниц, которые поиск показывает по запросам о создании схемы и макета сайта. Оказалось, что под словом «схема» авторы понимают три разные вещи — и почти никто не объясняет, как они связаны.

Одиннадцать страниц — гайды по структуре сайта, где «схема» означает дерево разделов. Восемь — страницы сервисов: инструменты для карт сайта и диаграмм, конструкторы прототипов и сайтов, причём пять из восьми — на английском или в переводе. Шесть статей посвящены макету — то есть внешнему виду страниц. Три — обзоры инструментов, одна из них 2020 года. Ещё две — методика проектирования и общая статья о создании сайта.

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

Схема, прототип, макет: три уровня точности

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

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

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

Соберите схему сайта прямо здесь

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

Попробуйте добавить в пример «сайт компании» ещё пять разделов в главное меню или вложить страницу на четвёртый уровень — инструмент сразу подскажет, что не так. Набранный список с отступами — уже готовая схема, которую можно отправить исполнителю. Мне такую присылают в обычном сообщении, и этого достаточно, чтобы назвать цену. Подробнее о структуре и о карте сайта для поисковиков — в статье «Карта для создания сайта: структура, sitemap.xml и карта проезда».

Пошаговое создание макета сайта: восемь этапов

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

1. Схема и цель каждой страницы. Что за страница и какое действие на ней должен совершить посетитель: позвонить, оставить заявку, перейти в каталог.
2. Черновики текстов. Хотя бы заголовки и главные абзацы. Макет, нарисованный на «рыбном» тексте, разваливается, когда приходят настоящие тексты — длиннее или короче придуманных.
3. Прототип ключевых страниц. Главная и по одной странице каждого вида: услуга, товар, статья. Серые блоки, порядок, кнопки.
4. Стиль. Два шрифта, три-четыре цвета, вид кнопок, полей и карточек. Это маленький набор элементов, из которого потом собираются все страницы.
5. Макет главной. Первый полный экран, на котором видно, как стиль работает с настоящим содержанием.
6. Макеты типовых страниц. По одной на каждый вид: страница услуги, карточка товара, статья, контакты. Не нужно рисовать каждую страницу сайта отдельно.
7. Мобильная версия. Как минимум для главной и самой посещаемой типовой страницы. Большинство посетителей увидит сайт именно так.
8. Передача в вёрстку. Файл с понятными слоями, шрифты, изображения в исходном качестве, состояния кнопок и форм.

Порядок важен на втором шаге: тексты до картинок. Это самое частое нарушение, и оно же самое дорогое. Как проверить готовый макет перед вёрсткой — в статье «Дизайн сайта: где рисовать и как сделать сайт по готовому макету», а как принимать макет у дизайнера — в статье «Создание сайта и дизайн».

Создание макета страниц сайта: сколько макетов на самом деле нужно

Самый частый вопрос при заказе дизайна: «У меня 40 страниц, значит, 40 макетов?» Нет. Страницы сайта делятся на виды, и для каждого вида рисуется один макет — шаблон, по которому собираются все страницы этого вида.

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

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

Создание одностраничного макета сайта

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

1. Первый экран: что вы предлагаете, кому и главная кнопка.
2. Боль или задача: почему это нужно именно сейчас.
3. Как это работает: три-четыре шага.
4. Цены или пакеты: хотя бы «от» и что входит.
5. Примеры работ или результаты.
6. Отзывы.
7. Ответы на возражения: сроки, гарантии, оплата.
8. Форма заявки и контакты.

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

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

Онлайн-инструменты для создания макета сайта и схемы удобно делить по уровню, на котором вы работаете. Отдельный нюанс 2026 года — доступность зарубежных сервисов, поэтому привожу и замены.

• Для схемы. Хватает бумаги, списка с отступами или инструмента выше. Если нужна красивая диаграмма — бесплатный редактор draw.io работает в браузере и может работать без интернета, а Mermaid строит схему из текстового описания. Для совместной работы есть российские онлайн-доски, например Яндекс Концепт.
• Для прототипа. Те же доски или любой редактор интерфейсов. Прототипу не нужна точность: важны порядок и состав блоков.
• Для макета. Главный стандарт отрасли — Figma. В России она формально работает на бесплатном тарифе, но оплатить платный российской картой нельзя, а в конце мая 2026 года пользователи массово жаловались на недоступность сервиса. Поэтому держите копии важных макетов у себя. Альтернативы: Pixso — онлайн-сервис для создания макета сайта с русским интерфейсом, Penpot — открытый редактор, который можно развернуть на своём сервере, Lunacy — бесплатная программа для компьютера с русским интерфейсом.
• Сразу на платформе. В конструкторах макет и сайт совпадают: страницу рисуют там же, где она будет работать. Об этом — следующий раздел.

Онлайн-сервисы для создания макета сайта различаются в деталях, но для одного сайта на 10–30 страниц хватит возможностей любого из них. Важнее не сервис, а последовательность: схема, тексты, прототип, макет.

Макет для создания сайта на Тильде

С Тильдой есть два пути, и макет нужен не всегда.

• Стандартные блоки. Если сайт собирается из готовых блоков Тильды, отдельный макет не нужен. Нужны схема и прототип — список блоков на каждой странице в нужном порядке, — а дальше блоки настраиваются под фирменные цвета и шрифты прямо в редакторе.
• Zero Block. Для нестандартных экранов в Тильде есть редактор Zero Block, в котором страницу рисуют почти как в графическом редакторе. Рисовать можно прямо в нём, а можно перенести макет из Figma: у Тильды есть плагин «Figma to Tilda», который копирует выбранные слои в буфер обмена, а в Zero Block они вставляются обычной командой вставки.

Если макет для создания сайта на Тильде рисует внешний дизайнер, попросите его заранее учесть, что Zero Block настраивается отдельно под несколько ширин экрана — от компьютера до телефона. Макет только для компьютера при переносе превратится в несколько часов ручной подгонки. О том, сколько времени уходит на сборку сайта в конструкторе, — в статье «Создание сайта на конструкторе: часы и порядок».

ИИ для создания макета сайта: где помогает

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

Иначе говоря, ИИ для создания макета сайта хорошо работает на уровне прототипа и плохо — на уровне финального макета. Подробнее о том, что отдать нейросети при создании сайта, — в статье «ИИ для создания сайта: 18 задач».

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

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

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

Создание макета сайта самому: советы для новичков

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

• Начните с бумаги. Схема и прототип главной на листе за полчаса дадут больше, чем день в редакторе.
• Возьмите сетку. Двенадцать колонок для компьютера, четыре для телефона — блоки выравниваются сами, и макет выглядит аккуратно.
• Ограничьте стиль. Два шрифта, три-четыре цвета, один вид кнопки. Чем меньше вариантов, тем цельнее выглядит сайт.
• Используйте настоящие тексты. Хотя бы черновые. Так сразу видно, где не помещается заголовок и где пусто.
• Смотрите на телефоне. Откройте макет с телефона или нарисуйте мобильную версию главной сразу, а не в конце.
• Сравните с двумя-тремя сайтами конкурентов. Не чтобы копировать, а чтобы понять, какие блоки посетители вашей ниши ожидают увидеть.

Отчёт о создании макета сайта

Отчёт о создании макета пишут студенты по учебной практике и дизайнеры при сдаче работы. Структура в обоих случаях похожа:

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

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

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

Бюро переводов из Москвы пришло ко мне с коммерческим предложением от дизайнера: «макет каждой страницы сайта», 34 страницы, около 60 часов работы. Владелец сомневался — сумма была больше, чем он рассчитывал потратить на весь сайт.

Мы начали со схемы. За один созвон составили дерево: главная, 14 страниц языков, 8 страниц услуг — письменный перевод, нотариальное заверение, апостиль и другие, — 5 статей с ответами на частые вопросы и 6 служебных страниц. Сразу стало видно, что страницы языков устроены одинаково, страницы услуг — тоже. Вместо 34 макетов понадобилось пять, плюс мобильные версии главной и страницы языка.

Прототипы ключевых страниц я сделал за вечер, после чего дизайнер нарисовал пять макетов примерно за 18 часов вместо 60. Сайт собрали на WordPress за четыре недели, вся работа обошлась в 62 000 рублей. Через четыре месяца на страницы языков приходило больше половины заявок с сайта: люди искали перевод с конкретного языка, а не «бюро переводов вообще». Именно поэтому эти страницы стоило делать отдельными — а рисовать их по отдельности не стоило.

Как это ищут

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

Итог

Создание макета веб-сайта — третий шаг, а не первый. Сначала схема: какие страницы и как связаны, — её можно набрать списком за десять минут. Потом прототип ключевых страниц: что и в каком порядке на них лежит. И только потом макет: как это выглядит. Макетов нужно столько, сколько видов страниц, а не столько, сколько страниц: для сайта на 30–40 страниц обычно хватает пяти-шести. Сайт из стандартных блоков конструктора можно собрать вообще без макета, а вот без схемы не получится ни один. Из инструментов в 2026 году надёжнее те, что работают без ограничений: бумага, draw.io, российские доски, Pixso и Penpot, а Figma — с оговоркой о доступе.

Схема и прототип для вашего сайта — первый шаг работы со мной. Подробнее — на странице создания сайтов.

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

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

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

О себе