Многие хотят сразу «красивый дизайн», пропуская прототип. Это как строить дом без чертежа: вроде быстрее, но потом стены двигать дорого. Прототип это тот самый чертёж сайта, и он экономит деньги и нервы. Ниже разберём, чем прототип отличается от макета сайта, из каких этапов состоит создание макета, в чём его делать и какие ошибки встречаются чаще всего.
Что такое прототип
Это схема страниц без цвета и картинок: серые блоки с подписями, которые показывают, что где будет. Первый экран, оффер, каталог, блок доверия, форма, в каком порядке и с какой логикой. Прототип отвечает на вопрос «что и в какой последовательности мы говорим клиенту», ещё до вопроса «как это выглядит».
Прототип и макет веб-сайта: в чём разница
Слова «прототип» и «макет» часто путают, а в поиске их используют как синонимы. В работе это два разных шага. Прототип, или вайрфрейм, это схема: серые блоки, подписи, порядок экранов. Макет веб-сайта это уже дизайн: цвета, шрифты, фотографии, кнопки в том виде, в каком их увидит посетитель. Прототип отвечает на вопрос «что и где», макет сайта на вопрос «как это выглядит».
Между ними бывает промежуточная ступень, кликабельный прототип: по нему можно пройти как по сайту, нажать кнопку, открыть каталог, заполнить форму. Он нужен, когда важно проверить путь пользователя до дизайна, например на сложном каталоге с фильтрами или в личном кабинете дилера.
«Дизайн это не только то, как вещь выглядит и ощущается. Дизайн это то, как она работает». Прототип как раз про вторую половину фразы: сначала решаем, как сайт работает, и только потом, как выглядит.
Зачем он нужен
- Согласовать логику до дизайна. Спорить о структуре на схеме дёшево, на готовом сайте дорого
- Заложить продажи и SEO. Правильный порядок блоков и структура продумываются здесь
- Сэкономить. Переставить блок на прототипе минуты, на свёрстанном сайте часы работы дизайнера и верстальщика
- Общий язык. Клиент и команда видят одно и то же и договариваются заранее
Чем прототип отличается от дизайна
| Прототип | Дизайн |
|---|---|
| Что и где (логика) | Как выглядит (стиль) |
| Серые блоки, схема | Цвета, шрифты, картинки |
| Быстро менять | Дорого переделывать |
Этапы создания макета сайта
Создание макета сайта идёт от смысла к картинке, и этапы стоит проходить по порядку:
- Цели и аудиторияКто приходит на сайт, какую задачу решает, какое действие должен совершить. Без этого макет рисуется «на вкус».
- СтруктураСписок страниц и разделов, план макета сайта: что в меню, какие категории каталога, где блог и кейсы.
- Прототип ключевых страницГлавная, каталог, карточка товара, контакты. Порядок блоков и тексты хотя бы черновиком.
- Согласование и проверкаПрототип показывают заказчику и нескольким людям из целевой аудитории, правят логику.
- Дизайн-макетНа согласованную схему накладывают фирменный стиль: цвета, шрифты, фото, иконки.
- Адаптив и передача в вёрсткуМакет для телефона и планшета, описание макета сайта для верстальщика: состояния кнопок, отступы, анимации.
Когда мы делаем макет сайта для производственной компании, больше всего времени уходит на первые три шага: разобраться в продукте, в том, как ищет закупщик, и какие вопросы он задаёт до заявки. Структуру макета сайта мы собираем по правилам из статьи Структура сайта: как организовать разделы под продажи и SEO.
Как сделать прототип сайта: инструменты
Сделать прототип сайта можно чем угодно, от листа бумаги до профессиональных программ. Выбор зависит от того, кто делает и насколько детальным должен быть результат:
| Инструмент | Для чего подходит |
|---|---|
| Бумага и маркер | Первый набросок на совещании, 15 минут на страницу |
| Онлайн-доски (Miro и аналоги) | Структура сайта и схемы страниц, совместная работа |
| Figma, Pixso | Прототипы и дизайн-макеты, кликабельные сценарии |
| Axure | Сложные интерактивные прототипы с логикой и условиями |
| Конструкторы сайтов | Быстрая сборка из готовых блоков, если дизайн не уникальный |
Где сделать макет сайта, если своих дизайнеров нет: у фрилансера, в студии или в агентстве. Разница в том, кто отвечает за смысл. Фрилансер нарисует то, что Вы опишете. Агентство, которое потом будет продвигать сайт, заложит в прототип SEO-структуру и путь к заявке. Сколько это стоит в разных вариантах, разобрали в статье Сколько стоит сайт для производственной компании в 2026 году.
Как создать макет сайта в Figma и Photoshop
Раньше дизайн-макеты сайтов рисовали в Photoshop, и в ТОПе поиска до сих пор много инструкций «как создать макет сайта в фотошопе». Сейчас стандарт индустрии Figma и её аналоги: они работают в браузере, позволяют нескольким людям править макет одновременно, хранят компоненты и сразу дают верстальщику размеры и отступы. Photoshop остаётся инструментом для обработки фотографий, а не для макетов страниц.
Порядок работы в Figma простой. Создают рамку под ширину экрана, например 1440 пикселей для десктопа и 375 для телефона. Задают сетку колонок. Собирают блоки из компонентов: шапка, кнопки, карточки, формы. Сначала серым, это и есть прототип, потом применяют стили. Главное правило: одинаковые элементы делают компонентами, чтобы правка кнопки менялась сразу на всех страницах. Разработку дизайна сайта с нуля мы ведём именно так, подробнее на странице услуги разработка дизайна сайта.
Макет главной страницы и макет страницы сайта
Главная страница сайта макет требует самый проработанный, но для производства она не всегда главная по трафику. Закупщик часто приходит из поиска сразу в каталог или карточку продукта. Поэтому прототип страницы сайта делают для каждого типа страниц: главная, категория каталога, карточка товара, услуга, кейс, контакты.
Элементы макета сайта для производителя почти всегда одни и те же:
- Первый экран: что производите, для кого, главное преимущество и кнопка
- Каталог или направления: крупные категории с фото продукции
- Доказательства: объекты, клиенты, сертификаты, цифры производства
- Как работаем: этапы от заявки до отгрузки
- Отзывы: от реальных клиентов с именами и компаниями, как их собрать, в статье Как получить отзывы от клиентов в B2B
- Форма и контакты: короткая форма и мессенджеры на каждом экране
Создание макета страницы сайта для внутренних разделов проще: там один шаблон на сотни страниц, но он должен выдержать и короткое, и длинное описание, таблицу характеристик и документы для скачивания.
Типичные ошибки при создании макета сайта
- Дизайн без прототипа. Логику обсуждают на цветном макете и спорят о цвете кнопки вместо порядка блоков
- Рыба вместо текста. Блоки рисуют под «Lorem ipsum», а реальный текст потом не помещается или не существует
- Только десктоп. Мобильный макет делают в последний момент, хотя много трафика идёт с телефонов
- Нет проверки на людях. Макет согласовывает только руководитель, а не те, кто будет покупать
- Главная вместо системы. Всё внимание главной, а каталог и карточки остаются шаблонными
Проверять прототип на людях дешевле, чем кажется. Якоб Нильсен ещё в 2000 году показал, что тестирование на 5 пользователях находит около 85% проблем удобства. Его совет: «Лучший результат дают тесты не больше чем на 5 пользователях и столько маленьких тестов, сколько Вы можете себе позволить». А первое впечатление о сайте, по исследованию Линдгаард и соавторов 2006 года, складывается примерно за 50 миллисекунд, поэтому первый экран на прототипе стоит проверить отдельно.
Перед обновлением главной страницы своего сайта в сентябре 2026 года мы собрали превью и прошли его блок за блоком: по каждому из 21 блока было решение «берём, оставить или переделать». Все споры закрыли на превью, до выкатки. Главная стала короче, и все решения были приняты до того, как на боевом сайте что-то поменялось.
Почему нельзя пропускать
Пропустив прототип, Вы обсуждаете логику уже на дорогом этапе дизайна или вёрстки, и каждая правка стоит дороже. Сначала договориться о структуре на схеме, потом рисовать. Это часть здорового процесса разработки, о котором в статье про ошибки создания сайта.
Планируете сайт? Поможем спроектировать его правильно, с прототипа: от структуры до дизайн-макета сайта и вёрстки. Первый разбор бесплатно.
