+375 (29) 390-56-65
Время работы
Пн-Пт: 9:00 - 17:00
Сб-Вс: выходной
Отвечаем в мессенджерах:
Кейсы Кейсы по разработке сайтов Кейс по созданию сайта-каталога для компании по продаже кровли, фасада, забора

Кейс по созданию сайта-каталога для компании по продаже кровли, фасада, забора

Кейс по созданию сайта-каталога для компании по продаже кровли, фасада, забора
Обсудить проект
ООО «Руф Технолоджи» является официальным дилером ведущих производителей кровельных, фасадных и строительных материалов. Основное направление деятельности компании — комплексные поставки продукции для устройства кровли, фасадов, заборов, ограждений и водосточных систем. Предлагая только сертифицированные и проверенные решения, компания обеспечивает высокое качество, надёжность и долгий срок службы каждой единицы реализуемой продукции. Благодаря гибкой системе ценообразования, четко выстроенным логистическим процессам и индивидуальному подходу к каждому клиенту, «Руф Технолоджи» обеспечивает выгодные условия сотрудничества, оперативно адаптируясь под задачи и потребности заказчика.
Дизайн
Дизайн
Индивидуальный
Сайт
Сайт
Каталог
Объём
10 044
Страниц
Скорость
100 / 95
Загрузка сайта
Язык
RU
Русский
Цены
BYN
Конвертер
Лид-форма
Лид-форма
Калькулятор
Корзина
Корзина
Товаров
Маршрут
Маршрут
На картах
Первый экран с УТП

Реализовали первый экран с акцентом на конверсионные элементы.
В верхней части разместили контактные данные, кнопку «Заказать звонок»
и навигационное меню. В центральную зону включили заголовки с уточнением
специализации деятельности компании, фоновое фото металлической кровли, а
также две CTA-кнопки — «Перейти в каталог» и «Рассчитать стоимость».

Первый экран с УТП
Блок «Оказываемые услуги»

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

Блок «Оказываемые услуги»
Карта категорий ассортимента

Разработали блок каталога, объединяющий
структурированный по категориям ассортимент
продукции. Каждая товарная группа представлена
стилизованной карточкой с миниатюрой продукта,
входящими наименованиями и кнопкой «Перейти».

Карта категорий ассортимента
Блок «Популярные товары»

Раздел выполнен в формате адаптивного горизонтального
слайдера с возможностью переключения пользователя
между наиболее востребованными позициями реализуемой
продукции. Каждая карточка содержит изображение материала,
его наименование, цену и кнопку «Заказать в 1 клик».

Блок «Популярные товары»
Блок «Наши работы»

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

Блок «Наши работы»
Калькулятор расчета доставки

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

Калькулятор расчета доставки
Блок «Контакты и навигация»

Реализован информационный блок, в котором объединены контактные
данные компании и интерактивная карта проезда. Раздел содержит
структурированную информацию: адрес, режим работы, актуальные
способы связи с менеджерами компании, а также месторасположение
офиса, дополненное визуальной навигацией.

Блок «Контакты и навигация»
Задача

Разработка интернет-магазина с акцентом на продуманную функциональность, визуальную выразительность, адаптивность пользовательского интерфейса и оптимизацию высокой скорости загрузки сайта. Создание фирменного стилевого решения, выгодно выделяющего бренд на фоне типовых шаблонов конкурентов, с точным соблюдением корпоративной цветовой палитры и визуальной айдентики. Обеспечение комфортного и эффективного пользовательского опыта за счёт интуитивно понятной навигации, логично структурированного каталога с расширенной системой фильтрации и информативных, продающих карточек товаров.

Решение

Реализован современный интернет-магазин с визуально выделяющимся на фоне конкурентов дизайном, полностью соответствующим фирменному стилю и корпоративной цветовой палитре. Оптимизирована высокая скорость загрузки сайта для обеспечения плавного и комфортного пользовательского взаимодействия. Внедрена интуитивно понятная навигация и логичная структура каталога с расширенной системой фильтрации. Созданы информативные  карточки реализуемых товаров с детальными описаниями и высококачественными изображениями. Дополнительно разработан калькулятор кровли, позволяющий клиентам рассчитать необходимое количество материалов для выполнения кровельных работ.

Ниша

Поставка строительных материалов и выполнение работ по обустройству кровли, отделке фасадов и монтажу ограждающих конструкций.

Продолжительность
  • 2 недели – дизайн
  • 2 месяца – разработка
  • 1 месяц – заполнение

Краткий бриф на разработку сайта

Наименование компании
ООО «Руф Технолоджи»
Сфера деятельности
Реализация строительных материалов для кровли, фасадов и заборов, а также оказание услуг по их профессиональному монтажу.
Страна, на которую рассчитан сайт
Беларусь
Основные товары и услуги
Черепица, фасадные панели и сайдинг, облицовочный кирпич, ограждающие и заборные системы, водосточные системы, паро- и гидроизоляционные мембраны, теплоизоляционные материалы, а также комплектующие для устройства кровельных систем.
Домен сайта
roof-tech.by
Целевая аудитория
Частные и корпоративные клиенты, находящиеся на этапе строительства или модернизации объектов недвижимости.
Задачи сайта
Ознакомление пользователей с деятельностью компании, представленным ассортиментом и характеристиками единиц его продукции; обеспечение удобного и быстрого процесса оформления заказов, а также приём заявок на приобретение товаров.
Тип сайта
Тариф
Индивидуальное решение
CMS
WordPress
Хостинг
Пожелания заказчика
Современный и уникальный дизайн в фирменной цветовой гамме; тщательно продуманный и логично структурированный каталог, интуитивно понятная навигация и эргономичная корзина, обеспечивающая быстрый и комфортный процесс оформления заказов.

Выбор цветовой палитры, шрифтов и визуального контента

01
Цвет и типографика
Визуальная концепция сайта гармонично сочетает в себе сдержанные серые оттенки с яркими оранжевыми акцентами. Графитовый серый придаёт дизайну глубину, строгость и профессионализм, выступая надёжным фоном для ключевых элементов. Светлый серый смягчает переходы, облегчая восприятие и формируя чёткую визуальную иерархию. Белый цвет подчёркивает структуру и улучшает читаемость. Яркий оранжевый акцент вносит динамику и энергию, направляет внимание и придаёт дизайну современный технологичный характер. Такое сочетание делает сайт выразительным, запоминающимся и подчёркивает выделяющийся стиль бренда.
В дизайне сайта используется тщательно подобранный шрифт — Futura PT, отличающийся геометрической точностью, лаконичностью и высокой читаемостью. Данный шрифт идеально вписывается в современную визуальную эстетику: он выглядит строго, технологично и актуально. Прямые линии, сбалансированные пропорции и чёткая структура символов создают ощущение профессионализма и упорядоченности. Futura PT используется как в заголовках, так и в основном тексте, формируя визуальную целостность и удобство восприятия пользователем контента на всех устройствах.
#5e5e5e
#ffffff
#ff6b01
#717171
Визуальная концепция сайта гармонично сочетает в себе сдержанные серые оттенки с яркими оранжевыми акцентами. Графитовый серый придаёт дизайну глубину, строгость и профессионализм, выступая надёжным фоном для ключевых элементов. Светлый серый смягчает переходы, облегчая восприятие и формируя чёткую визуальную иерархию. Белый цвет подчёркивает структуру и улучшает читаемость. Яркий оранжевый акцент вносит динамику и энергию, направляет внимание и придаёт дизайну современный технологичный характер. Такое сочетание делает сайт выразительным, запоминающимся и подчёркивает выделяющийся стиль бренда.
#5e5e5e
#ff6b01
#ffffff
#717171
В дизайне сайта используется тщательно подобранный шрифт — Futura PT, отличающийся геометрической точностью, лаконичностью и высокой читаемостью. Данный шрифт идеально вписывается в современную визуальную эстетику: он выглядит строго, технологично и актуально. Прямые линии, сбалансированные пропорции и чёткая структура символов создают ощущение профессионализма и упорядоченности. Futura PT используется как в заголовках, так и в основном тексте, формируя визуальную целостность и удобство восприятия пользователем контента на всех устройствах.

Полезный и для пользователя, и для бизнеса функционал

02
Функционал

Хедер

Шапка сайта — один из ключевых элементов, формирующих первое впечатление о компании. В рамках проекта для ООО «Руф Технолоджи» командой SILVERWEB хедер был реализован в лаконичном, но функционально насыщенном формате. Несмотря на простоту структуры, он современен и полностью соответствует фирменному стилю компании.

Хедер состоит из двух уровней. Верхний включает в себя всю основную контактную информацию: номера телефонов для связи с представителями компании, физический адрес, режим работы, а также кнопки быстрого доступа к калькулятору кровли и форме заказа звонка. Нижний уровень шапки выполняет навигационную функцию: здесь представлены ссылки на основные разделы сайта: «Каталог», «Доставка», «Рассрочка и кредит», «Новости и акции», «О нас» и «Контакты».

Фильтрация и сортировка товарных позиций

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

Калькулятор расчета доставки

В рамках проекта был реализован интерактивный калькулятор, позволяющий пользователям оперативно рассчитать стоимость доставки материалов от г. Полоцка до любого населённого пункта Республики Беларусь. Расчёт производится автоматически: достаточно задать расстояние в километрах с помощью удобных кнопок, и система мгновенно отображает итоговую сумму. Функционал адаптирован под реальные логистические условия компании: в блок интегрированы актуальные тарифы, зоны доставки, условия по весу, минимальной сумме заказа и действующим скидкам. Такой инструмент не только делает расчёт прозрачным и наглядным, но и снижает количество уточняющих вопросов, способствуя более быстрому принятию решения о покупке.

Блок «Акции и скидки»

На сайте реализован раздел «Скидки и бонусы», направленный на повышение покупательской активности и формирование лояльности к бренду. В рамках блока представлены актуальные предложения для категорий «Кровля», «Фасад» и «Забор», каждое из которых сопровождается кнопкой «Получить» для мгновенной активации. Среди доступных преимуществ — автоматическая скидка, которая применяется при выборе определённых позиций; бонус за оставленный отзыв, позволяющий получить дополнительную выгоду; а также подарок за первый заказ, стимулирующий новых клиентов.

Каталог товаров

Одним из ключевых решений проекта стал продуманный и визуально структурированный каталог товаров. Основной акцент сделан на удобстве навигации и сокращении количества действий, необходимых для поиска нужной продукции. Уже на главной странице пользователь получает доступ к основным товарным категориям, каждая из которых представлена в виде стилизованной карточки с изображением продукта, кратким перечнем позиций и кнопкой «Перейти». Каталог охватывает такие группы, как кровельные материалы, фасады, заборы, водосточные системы и элементы обустройства кровли. Каждая карточка чётко структурирована, визуально выверена и интуитивно понятна, что позволяет моментально определить содержание раздела и перейти к нужному ассортименту без лишних шагов.

Страница товара

Карточка товара на сайте реализована как полнофункциональная информационная единица, где собраны все ключевые данные, необходимые для принятия решения о покупке. Основной акцент сделан на визуализацию, удобство восприятия и быстродействие интерфейса. Каждая карточка включает качественное изображение материала с чёткой демонстрацией профиля, актуальную цену с возможностью мгновенного переключения между валютами (BYN, USD, EUR, RUB), а также набор интерактивных кнопок призыва пользователя к действию.

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

Лид-квиз

В рамках проекта разработан лид-квиз — эффективный инструмент предварительной квалификации клиента и сбора контактных данных. Его основная задача — помочь пользователю, не обладающему профильными знаниями, сориентироваться в выборе кровельного решения. Форма включает пять ключевых вопросов: тип крыши, ее ориентировочная площадь, наличие доборных элементов, формат строительного объекта а также необходимость включение монтажа в стоимость. Ответы сопровождаются визуальными подсказками и отображаются в процессе прохождения по вопросам, формируя понятную картину потребностей пользователя. Результаты квиза позволяют менеджеру сразу определить релевантное предложение, ускоряя коммуникацию и повышая вероятность успешной конверсии.

Хедер

Шапка сайта — один из ключевых элементов, формирующих первое впечатление о компании. В рамках проекта для ООО «Руф Технолоджи» командой SILVERWEB хедер был реализован в лаконичном, но функционально насыщенном формате. Несмотря на простоту структуры, он современен и полностью соответствует фирменному стилю компании.

Хедер состоит из двух уровней. Верхний включает в себя всю основную контактную информацию: номера телефонов для связи с представителями компании, физический адрес, режим работы, а также кнопки быстрого доступа к калькулятору кровли и форме заказа звонка. Нижний уровень шапки выполняет навигационную функцию: здесь представлены ссылки на основные разделы сайта: «Каталог», «Доставка», «Рассрочка и кредит», «Новости и акции», «О нас» и «Контакты».

Каталог товаров

Одним из ключевых решений проекта стал продуманный и визуально структурированный каталог товаров. Основной акцент сделан на удобстве навигации и сокращении количества действий, необходимых для поиска нужной продукции. Уже на главной странице пользователь получает доступ к основным товарным категориям, каждая из которых представлена в виде стилизованной карточки с изображением продукта, кратким перечнем позиций и кнопкой «Перейти». Каталог охватывает такие группы, как кровельные материалы, фасады, заборы, водосточные системы и элементы обустройства кровли. Каждая карточка чётко структурирована, визуально выверена и интуитивно понятна, что позволяет моментально определить содержание раздела и перейти к нужному ассортименту без лишних шагов.

Фильтрация и сортировка товарных позиций

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

Страница товара

Карточка товара на сайте реализована как полнофункциональная информационная единица, где собраны все ключевые данные, необходимые для принятия решения о покупке. Основной акцент сделан на визуализацию, удобство восприятия и быстродействие интерфейса. Каждая карточка включает качественное изображение материала с чёткой демонстрацией профиля, актуальную цену с возможностью мгновенного переключения между валютами (BYN, USD, EUR, RUB), а также набор интерактивных кнопок призыва пользователя к действию.

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

Блок «Акции и скидки»

На сайте реализован раздел «Скидки и бонусы», направленный на повышение покупательской активности и формирование лояльности к бренду. В рамках блока представлены актуальные предложения для категорий «Кровля», «Фасад» и «Забор», каждое из которых сопровождается кнопкой «Получить» для мгновенной активации. Среди доступных преимуществ — автоматическая скидка, которая применяется при выборе определённых позиций; бонус за оставленный отзыв, позволяющий получить дополнительную выгоду; а также подарок за первый заказ, стимулирующий новых клиентов.

Калькулятор расчета доставки

В рамках проекта был реализован интерактивный калькулятор, позволяющий пользователям оперативно рассчитать стоимость доставки материалов от г. Полоцка до любого населённого пункта Республики Беларусь. Расчёт производится автоматически: достаточно задать расстояние в километрах с помощью удобных кнопок, и система мгновенно отображает итоговую сумму. Функционал адаптирован под реальные логистические условия компании: в блок интегрированы актуальные тарифы, зоны доставки, условия по весу, минимальной сумме заказа и действующим скидкам. Такой инструмент не только делает расчёт прозрачным и наглядным, но и снижает количество уточняющих вопросов, способствуя более быстрому принятию решения о покупке.

Лид-квиз

В рамках проекта разработан лид-квиз — эффективный инструмент предварительной квалификации клиента и сбора контактных данных. Его основная задача — помочь пользователю, не обладающему профильными знаниями, сориентироваться в выборе кровельного решения. Форма включает пять ключевых вопросов: тип крыши, ее ориентировочная площадь, наличие доборных элементов, формат строительного объекта а также необходимость включение монтажа в стоимость. Ответы сопровождаются визуальными подсказками и отображаются в процессе прохождения по вопросам, формируя понятную картину потребностей пользователя. Результаты квиза позволяют менеджеру сразу определить релевантное предложение, ускоряя коммуникацию и повышая вероятность успешной конверсии.

Какие инструменты и технологии мы использовали

03
Инструменты
Figma
Figma
Photoshop
Photoshop
Illustrator
Illustrator
WordPress
WordPress
PHP
PHP
JavaScript
JavaScript
JQuery
JQuery
Swiper
Swiper
WPBakery
WPBakery
FancyBox
FancyBox
Bootstrap
Bootstrap

Скорость загрузки сайта

04
Скорость
https://roof-tech.by/
Анализировать
Мобильные устройства
Компьютер
95
https://roof-tech.by/
0-49
50-89
90-100
Мобильные устройства
Компьютер
100
https://roof-tech.by/
0-49
50-89
90-100
Показания сервиса
Google PageSpeed Insights

Скорость загрузки сайта — одно из приоритетных направлений в работе маркетингового агентства SILVERWEB. В рамках разрабатываемого веб-ресурса высококвалифицированная команда специалистов провела глубокую техническую оптимизацию, обеспечив выдающиеся показатели производительности: 100 баллов на десктопах и 95 баллов на мобильных устройствах по независимым метрикам Google PageSpeed Insights. Такая скорость гарантирует пользователю мгновенный доступ к контенту и повышает общий уровень вовлечённости. Итоговые значения могут незначительно отличаться в зависимости от качества интернет-соединения и характеристик устройства.

Результаты по проекту

05
Результат
1. Успели точно в срок
Разработали сайт в согласованный срок — 3 месяца, с учётом объёма загружаемых товарных позиций и внедрения дополнительных модификаций по запросу заказчика.
2. Разработали дизайн-концепцию
Реализовали индивидуальный дизайн-проект в фирменной стилистике, полностью соответствующий ценностям и концепции бренда.
3. Осуществили парсинг и импорт товарных позиций
Было заполнено более 9 000 товарных позиций.
4. Реализовали лид-форму с калькулятором расчёта стоимости
Калькулятор предназначен для расчёта необходимого количества и стоимости материалов для монтажа кровли с учётом параметров объекта.
5. Учли все пожелания клиента
Адаптировали проект под задачи клиента, тщательно проработав каждый аспект: от дизайна и сроков до нестандартных требований.
Хотите так же?
Давайте обсудим проект!
+

Обсудить проект

+

Заявка на обратный звонок

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