«Абсолют Блок»: сайт 2018 года и каким мы сделали бы его сегодня

Сайт завода «Абсолют Блок» мы разработали в 2018 году. Завод стоит в Магнитогорске и производит вибропрессованный стеновой камень: серый и красный лежат на площадке, рубленый мраморный камень и другие цвета делают под заказ. Покупатели звонят, поэтому задача сайта — довести человека до звонка.

Тренды в интернете меняются каждый день. Мы держим руку на пульсе и предлагаем клиентам новые решения. Поэтому показываем «до и после»: каким был сайт 2018 года и каким мы сделали бы его сегодня. Это наше видение, мы собрали его сами.

Рассказываем в том порядке, в каком работали: сначала анализ, потом структура, потом дизайн.

Было: сайт 2018 года

Сайт — одна длинная страница на домене 456123.ru. Адрес — это и есть номер телефона завода: 8 (3519) 456-123.

За восемь лет многое изменилось. У завода появились отзывы на картах — самые ранние оставлены в 2019 году. ГОСТ на стеновой камень заменили новым.

Что работает и сейчас: заголовок называет товар, город и слово «производитель», телефон на виду. У завода 113 собственных фотографий готовых домов.

Чего сайту 2018 года не хватает сегодня:

• Способа узнать цену. В коде сайта 21 форма — заказ, консультация, запрос прайса, — но кнопки, которые их открывают, убраны со страницы, и посетитель не видит ни одной. Цен в каталоге тоже нет: все 19 строк «Цена» скрыты, вместо них — «цену уточняйте по телефону».
• Доказательств. Оценок с карт на сайте нет, а фотографии готовых домов лежат в общей галерее без подписей.
• Карты, которая открывается. Виджет 2ГИС в контактах не загружается: он подключён по незащищённому адресу, и браузеры его блокируют. А в одном из отзывов на картах пишут, что навигатор до завода не довёл.
• Удобной мобильной версии. Зелёная кнопка звонка закрывает подпись логотипа. Плашка про куки появляется при каждой загрузке и занимает около 40 % экрана. Меню нет — только прокрутка. Страница делает 132 запроса и весит около 4,5 МБ: все 110 картинок грузятся сразу.
• Свежих данных. Прайс датирован 12 июня 2024 года. Сайт ссылается на ГОСТ 6133-99, а его в 2020 году заменил ГОСТ 6133-2019.

Сначала анализ

Прежде чем рисовать, мы собрали факты о соседях по рынку, о товаре, покупателях и оценках завода.

Что у соседей. Мы открыли мобильные версии четырёх сайтов производителей. Устроены они похоже: шапка с телефоном, фоновое фото и лозунг «от производителя», длинная лента блоков, каталог в одну колонку, форма внизу. Здесь и место для отличия: не «красивее», а «быстрее доводит до звонка».

Что завод продаёт на самом деле. Сайт говорит «шлакоблок». А в прайсе — две линейки. Гранитная — стеновой камень для стен. Мраморная — рубленый камень: он сразу и несущая стена, и готовый фасад, поэтому облицовочный кирпич и отдельная бригада не нужны.

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

Кто покупает. Покупателей два основных типа, примерно поровну. Частник строит раз в жизни: ему нужно объяснить и посчитать. Прораб покупает поддонами: ему нужны цифры сразу, в начале страницы. Застройщикам и дизайнерам важнее всего цвет и мрамор, организациям — документы.

Есть и третий путь: частник возвращается за фасадом, потом за забором, плиткой и бордюром. Такой путь описан в одном из отзывов на сайте завода.

Оценки мы сверили на двух картах 1 октября 2026 года: в 2ГИС — 5,0 (5 оценок, 4 отзыва), в Яндекс Картах — 4,3 (11 оценок, 8 отзывов). Три отзыва из двенадцати хвалят именно цвет. Оценки хорошие, а на сайте 2018 года их нет.

Потом структура

У страницы одна цель — звонок. Формы заявок целью не считаем: на этом рынке звонят. Поэтому каждый блок проверяли вопросом: приближает ли он человека к кнопке звонка.

Из одних и тех же блоков мы собрали три варианта порядка:

• «Магазин». Товар сразу, убеждение потом. Для прораба. Риск: частник не успеет поверить и уйдёт.
• «Доверие». Сначала преимущества, потом товар. Для частника. Риск: прораб листает лишнее, прежде чем доберётся до цены.
• «Витрина». Товар сразу под первым экраном, категории всегда под рукой, доказательства собраны в одном блоке. Для обоих. Страница заметно короче.

Мы рекомендуем «Витрину» — на ней собраны все четыре направления дизайна. Порядок блоков:

1. Шапка, всегда на виду: логотип, город, кнопка «Прайс», значок звонка.
2. Первый экран: товар, две цены, оценки с карт, кнопка «Позвонить».
3. Категории — прилипают к верхнему краю при прокрутке.
4. Товары и цены: переключатель «Плитка / Список», фильтр по цвету.
5. Калькулятор: сколько блоков нужно на дом.
6. Почему нам верят: вкладки «Отзывы», «Объекты», «Преимущества».
7. Как доехать: две кнопки маршрута — в Яндексе и в 2ГИС.
8. ГОСТ и документы: одной строкой, остальное по кнопке.
9. Подвал.
10. Нижняя панель с кнопкой «Позвонить 8 (3519) 456-123»: прилипает к низу экрана, и позвонить можно с любого места страницы.

Потом дизайн: четыре направления

Структура у всех четырёх одна, чтобы сравнивать было честно. Различаются характер и устройство экрана.

Во всех четырёх на первом экране появилось то, чего не было:

• заголовок «Шлакоблок от производителя», а под ним — серый и красный в наличии, рубленый фасад и ещё шесть цветов под заказ;
• оценки 2ГИС и Яндекс Карт, 5,0 и 4,3, — в фирменных цветах площадок и со ссылкой на оригинал;
• две цены: за штуку для прораба и за квадратный метр фасада для частника;
• одна кнопка с номером внутри и часы работы: ежедневно 9:00–18:00;
• кнопка «Прайс» в шапке: прораб доходит до цифр с любого места страницы.

В первых трёх направлениях мы проверили контраст текста и фона: все 24 пары проходят с запасом, самая слабая — 6,09 к 1 при норме 4,5. Сайт должен читаться и на улице, на солнце. Четвёртое направление не загружает ничего со сторонних сайтов, даже шрифт в нём системный.

Почему решили так

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

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

Две цены на первом экране. Прораб пробегает страницу глазами и ищет цифру — для него цена за штуку. Частник думает о доме — для него цена за квадратный метр фасада. Вторая цифра заодно показывает, что стена и фасад здесь — один камень.

Оценки с карт — плашками и со ссылкой. Доверие здесь — это возможность проверить: человек нажимает на плашку и попадает на карточку завода на карте. В разметку для поисковиков чужие оценки мы не кладём — правила Гугла и Яндекса это запрещают. А показать их на странице со ссылкой на источник можно.

Отзывы раньше слов о себе. Во вкладках «Почему нам верят» первыми идут отзывы, потом объекты, потом преимущества. То, что компания говорит о себе, весит меньше, чем отзыв покупателя на картах. Авторов отзывов мы не называем: подпись «Покупатель», площадка и месяц.

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

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

Калькулятор заканчивается звонком. Три поля: периметр, высота стен, окна и двери. Результат считается сразу, без кнопки, а сумма идёт со словом «примерно». Под ней — кнопка «Позвонить и уточнить расчёт». В одном из отзывов завод хвалят за помощь с расчётом — значит, этот вопрос ему уже задают.

Две кнопки маршрута. Нажал — и Яндекс или 2ГИС строят маршрут от того места, где стоит человек. Рядом — словесные ориентиры проезда: в отзыве пишут, что навигатор до завода не довёл. Вместо живой карты — картинка: живая карта тянет чужие скрипты ради одного блока.

Что на страницу не попало:

• слайдер и автопрокрутка на первом экране — они уводят от кнопки звонка;
• форма заявки как главная кнопка;
• таймеры и «осталось три поддона» без настоящих данных;
• онлайн-чат поверх кнопки звонка;
• сравнение с конкурентами: статья 5 закона «О рекламе» запрещает некорректное сравнение. Вместо него — свои факты: цвет, мрамор, оценки.

Посмотреть вживую

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

Витрина макетов

Проверьте свой сайт

Если у вас завод или склад стройматериалов и сайту несколько лет, ответьте на четыре вопроса:

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