Содержание
Макет сайта — это полноцветное визуальное представление дизайна, которое отражает внешний вид будущего сайта: цвета, шрифты, отступы, тени, картинки. Прототип — это схема (часто в оттенках серого), которая показывает структуру, расположение блоков и логику навигации, но без детальной стилизации. Прототип отвечает на вопрос «как пользователь будет взаимодействовать с сайтом?», а макет — «как сайт будет выглядеть?». Прототип создаётся на раннем этапе (для согласования логики), макет — позже (для передачи дизайнером разработчику). В идеальном процессе прототип сначала утверждается, затем дизайнер отрисовывает на его основе макет.
Сравнение по ключевым характеристикам
Таблица поможет быстро понять разницу.
| Характеристика | Прототип | Макет |
|---|---|---|
| Цель | Проверить логику, структуру, сценарии | Показать финальный внешний вид, передать в разработку |
| Степень детализации | Низкая / средняя (схема, серые блоки) | Высокая (цвета, шрифты, тени, иконки) |
| Интерактивность | Может быть кликабельным (прототип в Figma) | Статичный (хотя можно добавить анимацию, но это уже прототип+макет) |
| Инструменты | Бумага, Balsamiq, Figma (wireframe mode), Axure | Figma, Adobe XD, Sketch, Photoshop (редко) |
Что такое прототип (детально)
Прототип — это каркас будущего сайта. Он может быть:
- Низкоточный (low-fidelity) — наброски от руки, серые прямоугольники, линии. Используется для быстрого обсуждения концепции с заказчиком. Инструменты: бумага, Balsamiq, Figma (режим wireframe).
- Средне-точный (mid-fidelity) — добавляются реальные заголовки, иногда иконки, но без цвета. В Figma это всё ещё «серые» фреймы.
- Высокоточный (high-fidelity, интерактивный) — кликабельные прототипы, которые почти неотличимы от реального сайта по логике переходов, но без финальной проработки стилей (или с приблизительными стилями).
Что в прототипе не прорабатывается:
- Цветовая схема (всё в градациях серого).
- Шрифты и начертания (используется один системный шрифт).
- Детали (тени, градиенты, иконки).
Главная ценность прототипа: вы можете нажать на кнопку «Купить» и посмотреть, куда она ведёт (в корзину или на страницу оформления). Если переход нелогичный — меняете прототип, а не перерисовываете дизайн.
Что такое макет сайта (детально)
Макет — это «картинка» будущего сайта, обычно цветная, созданная в Figma или Sketch. Он содержит:
- Реальные шрифты (с подобранными размерами и цветами).
- Цветовую палитру бренда.
- Изображения (в идеале — не заглушки, а реальные фото).
- Тени, градиенты, рамки, иконки, hover-эффекты (могут быть в отдельном состоянии).
Макет не обязан быть кликабельным. Чаще всего дизайнер просто рисует отдельные экраны (главная, каталог, карточка товара, контакты). Разработчик уже сам понимает, как связать страницы.
Иногда дизайнер создаёт интерактивный макет (с переходами), но это уже совмещение макета и прототипа. Однако чистый макет — статичен.
Сравнение на примере (главная страница)
Представим, что вы заказываете сайт агентства.
Прототип главной:
[Логотип] [Меню: Услуги, Портфолио, Контакты]
[ЗАГОЛОВОК КРУПНЫЙ]
[Подзаголовок мелкий]
[Кнопка "Оставить заявку"]
[Три преимущества: фото и текст]
[Блок с проектами (три картинки в ряд)]
[Карта и контакты]Всё серое, нет цветов, нет картинок (вместо них прямоугольники с крестиками).
Макет главной:
Логотип синий, меню чёрное, заголовок шрифтом Playfair Display 48px синий,
кнопка с градиентом от синего к фиолетовому, преимущества с реальными фото,
подвал с иконками соцсетей.На макете вы уже видите, как будет выглядеть сайт.
Этапы в типичном веб-проекте
- Аналитика и требования.
- Прототипирование (low/mid fidelity) — согласование структуры с заказчиком. Обычно 1-2 итерации.
- Создание макета (дизайн) — отрисовка всех страниц в цвете.
- Вёрстка и разработка (передача макета верстальщику).
Если заказчик хочет сэкономить, этап прототипа могут пропустить, но тогда правки дизайна обходятся дороже.
Что выбрать конструкторы (Tilda, SitePro.by) и CMS
В конструкторах (SitePro.by, Tilda) вы работаете либо с готовыми блоками (что соответствует макету), либо с Zero Block (что позволяет рисовать как в графическом редакторе). Прототип нужен перед началом работы в конструкторе, чтобы не перетаскивать блоки 100 раз.
В CMS (Joomla) макет передаётся верстальщику, который превращает его в шаблон. Прототип помогает выбрать модули и позиции.
Ошибки в терминологии (что не так)
- Некоторые называют прототипом любой макет в Figma, даже цветной. Это неверно. Цветной макет — это уже дизайн.
- Некоторые путают прототип с техническим заданием. ТЗ описывает функции текстом, прототип — визуально.
- Иногда используют термин «интерактивный макет» — это гибрид, но в идеальном мире прототип отвечает за логику, макет за красоту.
Резюме от эксперта
Прототип и макет — это два разных артефакта, которые создаются на разных этапах. Прототип — для проверки удобства и логики. Макет — для утверждения внешнего вида и передачи в разработку. Прототип — дёшево и быстро, макет — дороже и детальнее. Начинайте проект с прототипа (даже если это набросок на бумаге), иначе будете переделывать макет 20 раз. Если ваш дизайнер сразу показывает цветной макет без утверждённой структуры — это тревожный звоночек.
