# Прототип сайта: что это и зачем он нужен

Обновлено 29 октября 2026 г. · 2 мин чтения · Студия AETHER · https://aether-studio.ru/blog/prototip-sajta

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

## Прототип, макет и сайт

| Этап | Что это | На какой вопрос отвечает |
| --- | --- | --- |
| Прототип | Серые блоки, условный текст, стрелки переходов | Что на странице и в каком порядке |
| Макет | Точный дизайн: цвета, шрифты, фото, настоящие тексты | Как это выглядит |
| Сайт | Свёрстанные и работающие страницы | Как это работает |

О макете — отдельная статья [«Макет сайта: что это и как его согласовать»](https://aether-studio.ru/blog/maket-sajta).

## Зачем нужен прототип

- **Договориться о структуре дёшево.** Переставить блоки в прототипе — минуты, в готовом дизайне — часы.
- **Проверить путь посетителя.** Где он узнаёт цену, где сомневается, где нажимает кнопку — видно на схеме лучше, чем в красивом макете, который отвлекает.
- **Отделить смысл от вкуса.** На прототипе обсуждают, что нужно сказать клиенту, а не какого цвета кнопка.

## Какие бывают

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

## Что проверить в прототипе

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

Порядок блоков продающей страницы подробно разобран в статье [«Структура лендинга»](https://aether-studio.ru/blog/struktura-lendinga).

## Как сделать самому

Если вы готовите задание для подрядчика, простой прототип можно нарисовать и самому: на бумаге или в бесплатной Figma — прямоугольниками с подписями «здесь фото команды», «здесь цены». Это не заменит работу дизайнера, но точно покажет, что вы хотите видеть на странице. Вместе с брифом это лучший старт проекта — о брифе статья [«Бриф на сайт»](https://aether-studio.ru/blog/brif-na-sajt).

## Когда без прототипа можно обойтись

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

## Как это делаем мы

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

**Услуга «Лендинг»:** от 4 рабочих дней, от 30 000 ₽, обычно 30 000–70 000 ₽. Подробнее: https://aether-studio.ru/services/landing

**Обсудим ваш проект.** Ответим в течение рабочего дня, зададим несколько вопросов и назовём вилку по сроку и бюджету. Бесплатно и без обязательств. Написать: [Telegram @aether_agency](https://t.me/aether_agency), почта aether-studio@mail.ru, форма — https://aether-studio.ru/#contact.