Прототип интернет-магазина «Центр паркета»
Низкодетализированный интерактивный прототип (wireframe) для согласования структуры страниц Mobile-First: брейкпоинты 360–767 / 768–1199 / 1200–1920 px — меняйте ширину окна браузера Все ссылки между страницами рабочие — прототип кликабелен
Страницы прототипа
| № | Страница / файл | Что показано на странице |
|---|---|---|
| 1 | home.html Главная |
Широкий слайдер до 1920px; 4 блока УТП (бесплатное хранение до конца ремонта, образцы на вынос, укладка собственными бригадами, шеф-монтаж и выезд технолога); блоки «Акции», «Новости», «Популярные статьи». Шапка: переключатель города, поиск с акцентом на артикулы, иконки без текстовых подписей. Главное меню: супер-меню каталога (3 группы без ссылок + подразделы) и выпадающее меню услуг; на мобильной — аккордеоны в off-canvas |
| 2 | category.html Каталог «Ламинат» |
4–5 приоритетных фильтров (Бренд, Класс, Цена, Толщина) + «Показать все фильтры»; сетка 4 колонки; гибридная пагинация («Показать ещё» + номера). На мобильной: sticky-кнопка «Фильтры» с off-canvas панелью, sticky-корзина, сетка 2 колонки. |
| 3 | product.html Карточка товара |
Галерея с полноэкранным режимом, слот видео VK/Rutube, артикул с кнопкой «Копировать артикул» (tooltip «Скопировано»), калькулятор м² ⇄ упаковок с запасом на подрезку (Прямая 5% / Диагональ 10% / Ёлочка 15% + ручной ввод), характеристики 3 группами, отзывы с полями «Тип комнаты» и «Тёплый пол», блок «Этот товар уложен на объектах». На мобильной — sticky-панель с ценой и кнопкой «В корзину». |
| 4 | services.html Раздел «Услуги» |
Сетка 2 колонки с крупными фото-заглушками — визуально отличается от товарной сетки; цены «от … ₽/м²»; мини-УТП раздела. |
| 5 | service-detail.html Страница услуги |
Лонгрид «Укладка ламината по прямой на подложку»: описание процесса по шагам, цена за м², фотогалерея процесса, блок «Материалы в работе» со ссылками на карточки товаров, расчёт стоимости, выполненные объекты. |
| 6 | portfolio.html Фото объектов (список) |
Список объектов портфолио: карточки с фото-заглушками, городом, типом работ; фильтр-чипы по типу покрытия; пагинация. Переход в карточку объекта — portfolio-detail.html. |
| 7 | portfolio-detail.html Страница объекта |
Формат «Объект — Задача — Результат»: галерея «до/процесс/после», список использованных артикулов со ссылками на карточку товара, ссылка на услугу, CTA-блок, «Другие объекты». Перекрёстная навигация товар ↔ объект. |
| 8 | articles.html Статьи (список) |
Список статей экспертного медиа: карточки с фото-заглушками, рубриками, датами и временем чтения; чипы-рубрики; пагинация. |
| 9 | article-detail.html Статья — вариант 1 |
Текстоцентричный шаблон высокой читаемости (аналог Яндекс.Дзен): узкая колонка, авторский блок с фото-заглушкой эксперта и стажем («Опыт работы с паркетом — 15 лет»), обложка, врезка товарной подборки в тексте, «Читайте также». |
| 10 | article-detail2.html Статья — вариант 2 |
Альтернативный шаблон статьи: галерея и товарная врезка убраны; фото между абзацами с подписями («Рис. 1…»), блок «Цитата» эксперта, блок «Содержание» с якорными ссылками, чек-лист рекомендаций. Авторский блок сохранён. |
| 11 | news.html Новости (список) |
Раздел «Новости»: плитка анонсов (фото-заглушка, дата, заголовок, 2 строки скелетона), чипы-фильтры по годам и темам, пагинация. Переход в детальную новость — news-detail.html. |
| 12 | news-detail.html Страница новости |
Детальная новость «Новый адрес салона в Тольятти»: дата, обложка, текст-скелетоны, инфоблок «Адрес и режим работы», фото в тексте с подписью, CTA, «Другие новости». |
| 13 | promo.html Акции (список) |
Раздел «Акции»: плитка анонсов с плашкой выгоды (−11%, подарок) и сроками; чипы «Активные / Архив»; архивные карточки приглушены. Переход в детальную акцию — promo-detail.html. |
| 14 | promo-detail.html Страница акции |
Детальная акция «Vinilam: горячий ноябрь −11%»: обложка с плашкой, блок «Условия акции» (чек-лист), подборка «Товары по акции» со старой/новой ценой и переходом в карточки, CTA, «Другие акции». |
| 15 | cart.html Корзина |
Таблица товаров на десктопе превращается в карточки на мобильной; блок итогов (sticky), промокод, кнопка «Оформить заказ», блок «Не забудьте докупить». |
| 16 | contacts.html Контакты |
Карта-заглушка с метками магазинов, адреса и телефоны по городам, реквизиты, форма обратной связи. |
Как читать прототип
- серый текст 11px в пунктирной рамке — аннотации проектировщика: поведение элементов (sticky, off-canvas, выпадающие списки).
- Серые прямоугольники с крестом — заглушки фото и видео (подписан целевой размер).
- Серые горизонтальные полосы — заглушки текстовых абзацев («скелетоны»).
- Реальным текстом даны: заголовки, кнопки, меню, фильтры, хлебные крошки, примеры товаров и цен.
- Интерактивные элементы на мобильной имеют touch-зону не менее 44px — показано размерами в макете.
Ключевые сценарии для проверки
- Смартфон (360–767px): меню-«гамбургер»; на странице каталога — sticky-кнопка «Фильтры» + sticky-корзина; в карточке товара — липкая нижняя панель покупки и заметная кнопка «Копировать артикул».
- Десктоп (1200–1920px): фильтры каталога в первом–втором экране (сайдбар слева); сетка товаров 4 колонки; слайдер главной во всю ширину.
- Связность: из листинга → в карточку товара (product.html); из карточки → в объект (portfolio-detail.html) → обратно в товар; из услуги (service-detail.html) → «Материалы в работе» → товар; статья вариант 1 (article-detail.html) ↔ статья вариант 2 (article-detail2.html); новости (news.html → news-detail.html) и акции (promo.html → promo-detail.html → товары по акции).