Прототип сайта: как нарисовать его самому и не переделывать потом

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

Три слова означают три разные вещи, и на созвоне их путают ежедневно.

• Вайрфрейм (или прототип) — серая схема: какие блоки на странице, в каком порядке, что в них лежит. Без цветов, шрифтов и фотографий.
• Макет сайта — то же самое, но уже в фирменных цветах, с типографикой и картинками. Его делает дизайнер, и по нему верстают.
• Дизайн-система — набор кнопок, полей и отступов, из которых собирают все остальные страницы. Нужна, когда страниц много.

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

Что прототип решает, а что нет

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

Ширина и сетка: цифры, с которых всё начинается

Первое решение — в какой ширине рисуете. Ошибка здесь обесценивает всю дальнейшую работу: то, что красиво разложилось на 1920 px, на ноутбуке 1366 px превращается в кашу.

Про сетку. Классическая сетка веба — 12 колонок: она делится на 2, 3, 4 и 6, поэтому в неё укладываются почти все раскладки. На практике вам достаточно помнить три варианта деления: в одну колонку (текст, заголовки), в две (текст и картинка рядом), в три или четыре (карточки услуг, товаров, кейсов). Всё, что не делится, — повод упростить блок, а не менять сетку.

Про поля. Содержимое не должно упираться в края окна. На десктопе поля 80–120 px, на телефоне 16–20 px. Отсутствие полей — самый быстрый способ сделать прототип, который выглядит дёшево, ещё до всякого дизайна.

Про высоту. Высота окна браузера — примерно 1024 px на десктопе и 844 px на телефоне, и высота страницы к ней никак не привязана: страница длинная, окно короткое. Именно поэтому «первый экран» — не метафора, а конкретный прямоугольник 1440 × 1024, который человек увидит, не сделав ни одного движения. Что в него не влезло — для половины посетителей не существует.

Порядок: восемь шагов

Шаг 1. Одной фразой — зачем эта страница

«Чтобы владелец автосервиса оставил заявку на выезд диагноста». Не «рассказать о компании». Если цель не формулируется одним действием, страница будет про всё сразу, и заявок с неё не будет. У страницы может быть вторая цель (позвонить, скачать прайс), но главная — одна.

Шаг 2. Составьте список блоков сверху вниз. Текстом

До редактора, строчками: «Шапка · Первый экран с заголовком и кнопкой · Что мы делаем · Как проходит работа · Цены · Отзывы · Частые вопросы · Форма заявки · Подвал». Список из 15 блоков — сигнал, что страница пытается заменить весь сайт. Рабочая длина лендинга — 7–10 блоков.

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

Шаг 3. Соберите первый экран честно

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

Шаг 4. Положите настоящие тексты

Особенно заголовки. «Заголовок H1» и «Ремонт промышленных холодильников в Новосибирске за 4 часа» занимают разное место и работают по-разному. Реальные тексты в прототипе — это ещё и способ обнаружить, что сказать по существу нечего: тогда проблема не в дизайне, и хорошо, что вы узнали об этом сейчас.

Шаг 5. Опишите блоки-повторы одним образцом

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

Шаг 6. Нарисуйте форму — и её состояния

Форма заявки — то место, ради которого чаще всего делают сайт, и самое недорисованное место в прототипах. Нужны: перечень полей (каждое лишнее поле стоит вам заявок), что обязательно, текст кнопки — «Оставить заявку», а не «Отправить», — согласие на обработку данных и что человек увидит после нажатия. Последнее нарисуйте отдельным экраном: «Спасибо, перезвоним в течение часа». Без него верстальщик покажет системное окошко браузера, и это будет ваша недоработка, а не его.

Шаг 7. Свяжите страницы переходами

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

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

Шаг 8. Сделайте мобильную версию — до согласования, а не после

Подробности — ниже, но факт простой: больше половины посетителей придут с телефона, и утвердить десктоп, а мобильную версию «отдать на усмотрение верстальщика» — это отдать половину сайта на усмотрение верстальщика.

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

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

Правильно — оставить окно окном, а содержимое сделать прокручиваемым внутри него. В Maketa у любого блока есть кнопка «↕ Сделать прокручиваемым»: складываете все блоки страницы в один столбец, помечаете его прокручиваемым — и в режиме просмотра страница листается ровно так, как будет листаться в браузере. Шапка при этом может остаться на месте — тогда сразу видно, не съедает ли она полэкрана на телефоне.

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

Мобильная версия: не «то же самое, но уже»

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

1. Меню. Семь пунктов в шапке на 390 px не помещаются. Решение — бургер, или два главных пункта плюс бургер, или вообще ничего, кроме телефона и кнопки. Выбирайте вы, иначе выберет верстальщик.
2. Ряды. Четыре карточки в ряд становятся одной колонкой или лентой, листающейся вбок. Это разные решения: колонка длиннее, лента прячет содержимое. Для цен обычно колонка, для галереи — лента.
3. Порядок блоков. На десктопе картинка и текст стоят рядом, и глаз читает их одновременно. На телефоне они встают друг под друга — и надо решить, что выше. Обычно текст, но не всегда.
4. Наведение мышью. Всё, что на десктопе показывается при наведении — подсказки, выпадающие меню, эффекты на карточках, — на телефоне не существует. Если важная информация видна только при наведении, на телефоне её не видит никто. Это самая тихая и самая частая ошибка веб-прототипов.

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

Чем прототип сайта отличается от прототипа приложения

Инструмент один, привычки разные. Если вы делали прототипы приложений, вот что придётся переучить.

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

Прототип сайта нейросетью: что она правда умеет

Запрос «ии прототип сайта» задают всё чаще, и ответ на него честный, но с оговорками.

Что нейросеть делает хорошо: черновик блока по описанию («блок с ценами: три тарифа, у среднего пометка „популярный“»), разбор присланного скриншота чужого сайта в редактируемые блоки, тексты-заглушки, которые лучше lorem ipsum. В Maketa такой помощник встроен в редактор; он платный, потому что каждый вызов стоит нам денег, а сам редактор — нет.

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

Что она делает опасно: генераторы «сайт целиком по одному запросу» выдают готовую страницу с кодом, и её хочется сразу выложить. Проверьте два места, прежде чем радоваться: тексты (там будут выдуманные цифры и обещания, за которые отвечать вам) и форму заявки (часто она никуда не отправляет). Как рабочий черновик — нормально; как готовый сайт — нет.

Восемь ошибок

1. Рисовать сразу в цвете. Обсуждение мгновенно съезжает на оттенки, и структуру никто не оспаривает. Серый — не бедность, а фокус.
2. Один высокий холст вместо окна со скроллом. Так не видно первого экрана — то есть главного.
3. Забыть про 390 px. Половина посетителей приходит с телефона; утверждать только десктоп — утверждать половину работы.
4. Важное — при наведении мышью. На телефоне наведения нет. Всё, что там спрятано, для мобильного посетителя не существует.
5. Форма без экрана «Спасибо». Не нарисовано — значит, будет системное окошко браузера.
6. Десять полей в форме заявки. Каждое поле сверх трёх стоит вам заявок. Телефон и имя — обычно достаточно.
7. Пятнадцать блоков на лендинге. Страница пытается заменить весь сайт и не отвечает ни на один вопрос до конца.
8. Отдать прототип картинками в мессенджер. Правки прилетят скриншотами без привязки к блоку, и через неделю их не расшифрует никто.

Сколько это занимает

• Цель и список блоков — 20–30 минут, текстом.
• Главная страница на десктопе — 1,5–2,5 часа с настоящими текстами.
• Мобильная версия главной — 40–60 минут, если десктоп уже собран.
• Две-три внутренние страницы — по 30–40 минут.
• Переходы и проверка прокруткой — 20 минут.

Итого лендинг — вечер, небольшой сайт из четырёх страниц — два вечера. Второй заход после правок занимает час.

Как согласовывать, чтобы правки не терялись

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

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

Это заметно дешевле, чем привычный круг «выгрузил PDF → отправил в чат → получил девять скриншотов со стрелками → собрал их в список». И это единственное место, где мы объективно удобнее больших дизайн-инструментов: у них гостевые комментарии без учётной записи не работают до сих пор.

Частые вопросы

Можно сделать прототип сайта онлайн и бесплатно?

Да. В Maketa редактор, переходы, режим просмотра, ссылка и замечания бесплатны и без ограничения на число макетов — платный только ИИ-помощник. Из бесплатного рядом: Figma (бесплатный тариф с лимитом файлов), Excalidraw для быстрых схем от руки, лист бумаги — для первого списка блоков он до сих пор быстрее всего. Инструмент решает меньше, чем кажется: прототип без мобильной версии и без состояний формы плох в любом редакторе.

Нужен ли дизайнер, если прототип есть?

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

Можно ли отдать прототип верстальщику вместо технического задания?

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

Прототип и вайрфрейм — разные вещи?

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

А готовые шаблоны сайтов у вас есть?

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

Прототип превратится в сайт?

Нет, и мы этого не обещаем: в прототипе нет кода. Он превращается в понятную задачу для верстальщика или студии — с точной оценкой вместо вилки «от 100 до 500 тысяч». Если вам нужен именно работающий сайт без разработки, ваш инструмент — конструктор сайтов; прототип пригодится и там, чтобы не собирать страницу наугад.