Новый сайт · производитель малых архитектурных форм
ХозМаркетСайт, изготовленный по чертежу
«ХозМаркет» делает скамейки, урны, контейнерные площадки, навесы и ограждения для дворов и парков — на двух своих производствах, в Мытищах и под Калугой. Команда студии разработала ему новый сайт, который говорит языком завода: чертёж, размеры, цвет по RAL и заявка с любой страницы.
- 353
- изделия в каталоге — от урны до беседки
- 9
- разделов каталога и палитра цветов RAL
- 2
- собственных производства — Мытищи и Калужская область
- 8 RAL
- цветов каркаса в чертеже скамьи на главной
Операция 010Задание
Три пункта —
технического задания
«ХозМаркет» хотел современный «дорогой» сайт с эффектами и анимацией — и не одну главную, а все типовые страницы: каталог, товар, корзину, окна, плашку cookie, 404, статьи. Без лишних библиотек и тяжёлых стилей. Мы разобрали каталог, переписку с клиентом и свели задачу к трём пунктам — каждый принимали отдельно.
- 01 От производителя Главный аргумент сайта: у «ХозМаркета» два своих производства — в Мытищах и под Калугой. Значит, размеры, комплектацию и цвет можно изменить под объект, а за результат отвечает сам изготовитель. Принято
- 02 Чертёж вместо витрины Сквозной мотив — техническая документация: сетка, размерные линии, моноширинные подписи и цвета RAL. Галочка из логотипа стала маркером списков, знаком подвала и кнопкой заявки на телефоне. Принято
- 03 Заявка — с любой страницы Многие заказывают не через корзину, а звонком или письмом, юрлица просят счёт. Поэтому на каждой странице — «Оставить заявку», на товаре — «Запросить КП или счёт» с выбором цвета, а каждое действие считается в Метрике. Принято
Операция 020Стиль
Цвета — с асфальта
и сигнальной ленты
Палитра сайта — это улица, для которой «ХозМаркет» делает изделия: тёмный графит асфальта, сигнальный оранжевый из галочки логотипа, солнечный жёлтый на её конце и зелёный «в работе». Каталог лежит на тёплой бумаге, как чертёж на столе. Заголовки и текст — Manrope, подписи, размеры и номера — моноширинный JetBrains Mono, как на чертеже. Раскройте веер — так клиенты выбирают цвет RAL.
Операция 030Чертёж
Скамья, которую можно перечертить
На первом экране сайта — не баннер, а рабочий чертёж парковой скамьи. Посетитель тянет ползунок — скамья удлиняется от 1 200 до 3 000 мм, размеры пересчитываются, а с 2 400 мм появляется третья опора. Клик по цвету — каркас перекрашивается в один из восьми цветов RAL. Кнопка «Хочу такую» открывает заявку, в которой уже написаны длина и цвет. Попробуйте здесь — это наша копия того же чертежа.
Текст заявки
Операция 040Площадки
Две площадки —
один производитель
Чтобы «от производителя» не было просто словами, на главной стоит схема: два производства — в Мытищах и в Калужской области — и маршруты, по которым изделия едут в Москву. Точки стоят по настоящим координатам, линии доставки пульсируют, вокруг — города области. Нажмите на площадку — схема покажет её маршрут.
Операция 050Обложки
Склад готовых изделий —
одной серией
Фото в каталоге были разными — с улицы, со склада, с белого фона. Для разделов мы сделали обложки одной серией: изделие в студии на графитовом фоне, бетонный пол и тонкая оранжевая световая линия — та же, что в стиле сайта. Это иллюстрации нейросети по нашему описанию, а не фото производства: настоящие фотографии остались в карточках товаров. Обложки проявляются из чертежа по очереди — наведите, чтобы увидеть контур.
Операция 060Главная
Главная — одиннадцать узлов
Главная собрана как изделие из узлов: каждый отвечает на один вопрос покупателя — что делаете, где производство, как заказать, кому уже делали. Тексты узлов — в шаблоне, текст о компании — из админки, а число изделий, разделы, хиты и статьи подтягиваются из каталога сами. Выберите узел — окно сайта прокрутится к нему.
Операция 070Конвейер
Конвейер — двенадцать страниц
Каждая страница сайта прошла один и тот же путь: чертёж — сборка — покраска в общий стиль. Здесь они едут по конвейеру: до камеры — контур, после — готовая страница. Каталог, разделы, товар, беседка, палитра RAL, о компании, доставка, контакты, статья и корзина — в одной шапке и одной системе. Наведите на окно — страница прокрутится.
Операция 080Детали
Мелкие детали — тоже по ГОСТу
Мегаменю каталога открывается с короткой задержкой — не мелькает, если курсор просто прошёл мимо, — и показывает обложки разделов. На товаре — блок «Нужен счёт, другой размер или цвет?» с образцами RAL. Плашка cookie — тёмная карточка с галочкой. А на странице 404 цифру ноль заменяет урна: «Похоже, эта страница отправилась в урну». Попробуйте сами.
Похоже, эта страница отправилась в урну
В урне: 0 страниц
Операция 090Телефон
На объекте — с телефона
Прорабы и управляющие часто смотрят сайт прямо во дворе. На телефоне меню открывается на весь экран с обложками разделов и поиском, а внизу всегда есть панель: каталог, избранное, корзина, звонок — и оранжевая кнопка-галочка «Заявка» посередине. Сетки складываются в колонки без горизонтальной прокрутки. Нажмите на телефон, чтобы остановить прокрутку.
Операция 100ОТК
Маршрут изделия —
и приёмка ОТК
Над сайтом работала команда студии, и шла работа как в цеху — по маршрутной карте: каждая операция заканчивалась приёмкой, следующая начиналась с готового. Сайт работает на платформе SkeekS по тарифу «Всё включено»: изделия, разделы, цены, тексты и картинки «ХозМаркет» правит сам.
- 010Разбор задачиПрошли старый каталог и записали задачу: современный «дорогой» сайт с эффектами, все типовые страницы, минимум лишнего кода.
- 020Концепция«От производителя»: не магазин-перекупщик, а завод, который делает изделие по чертежу и красит в нужный цвет.
- 030Дизайн-системаГрафит и сигнальный оранжевый из логотипа, мотив чертежа, Manrope и JetBrains Mono вместо прежних шести семейств шрифтов.
- 040ГлавнаяЧертёж-конфигуратор скамьи, разделы, схема двух производств, этапы, клиенты, хиты, заявка, статьи.
- 050Шапка и подвалМегаменю с обложками разделов, меню телефона на весь экран с нижней панелью, подвал с огромным «ХозМаркет».
- 060Каталог и магазинПолоса разделов, карточки, товар с заявкой на КП и выбором цвета, корзина, «Купить в 1 клик», палитра RAL.
- 070Обложки разделовОдиннадцать иллюстраций одной серией: изделие на графитовом фоне и оранжевая световая линия.
- 080Заявки и целиОкно заявки с подстановкой текста, пять целей Метрики: открыть и отправить заявку, звонок, письмо, корзина.
- 090Страницы и окнаДоставка, о компании, статьи, контакты, аренда, дилерам, 404 «страница отправилась в урну», плашка cookie.
- 100ПроверкаВсе типовые страницы проверили на компьютере и телефоне и довели по замечаниям.
Проверили
- 26 типовых страниц — на компьютере и телефоне
- Ни одной горизонтальной прокрутки на телефоне
- Без ошибок в консоли браузера
- Пять целей Метрики на заявки, звонки, письма и корзину
- Два шрифта вместо шести — страницы грузят только свои стили
Сохранили
- Все изделия каталога
- Разделы
- Адреса страниц
- Тексты из админки
- Корзина и оформление заказа
- Статьи и новости
Итог
Изделие принято — сайт в работе
Главная с чертежом скамьи и схемой производств, шапка с мегаменю, подвал с огромным «ХозМаркет», каталог и разделы с обложками одной серией, товар с запросом КП или счёта, палитра RAL, корзина и «Купить в 1 клик», доставка, о компании, статьи, контакты, 404 с урной, окно заявки, плашка cookie и меню телефона — по одному чертежу. Сайт производителя, который выглядит как его изделия: крепко, аккуратно и в нужном цвете.