Кейс: верстка и дизайн для интернет-магазина светильников Stilfort

Кейс: верстка и дизайн для интернет-магазина светильников Stilfort — советы в блоге

24 июня 2025


Автор: Команда Аспро
Фото 1: «Кейс: верстка и дизайн для интернет-магазина светильников Stilfort»

Компания Stilfort продает светильники и люстры. Команда хотела улучшать сайт, но не знала, с чего начать. Поэтому мы предложили услугу поддержки и развития, в которой осуществляем комплексное развитие сайта. Главные преимущества услуги — наличие разных специалистов в одной подписке и гибкое распределение часов на работы.

Благодаря поддержке и развитию сайта бизнес получает команду экспертов разного профиля: разработчиков, дизайнеров, seo-специалистов и маркетологов. В зависимости от выбранного тарифа дается разное количество часов на работу команды. Можно самостоятельно выбирать каждый месяц, какой специалист, что будет делать для проекта. Все процессы регулирует проектный менеджер, который всегда поможет выстроить вектор развития в зависимости от потребностей бизнеса.

Александр Абрамзон
Менеджер проектов Аспро

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

Сайт Stilfort запущен на готовом решении Аспро: Максимум. Команде хотелось выделиться среди конкурентов и показать индивидуальность, поэтому уделили внимание дизайну элементов и изменению верстки.

Анастасия Смирнова
Генеральный директор Stilfort

Я считаю, что развитием сайта должны заниматься профессионалы. Тогда легко получится добиться желаемого результата. Уверена, мы сделали правильный выбор! Отдельное спасибо нашему менеджеру Александру Абрамзону. Он оперативно и качественно выполнял свою работу. Мы остались довольны получившимся результатом.

Давайте посмотрим, какой результат мы получили за 4 месяца.

Главный баннер

Сайт должен привлекать внимание посетителя с первого взгляда, в случае Stilfort — с помощью видео. Мы доработали контейнер для главного баннера: изменили размеры и сделали адаптивным, чтобы ролик отлично смотрелся на разных устройствах. При добавлении видео важно подобрать нужный размер, чтобы баннер быстро загружался и не зависал.

Фото 2: «Кейс: верстка и дизайн для интернет-магазина светильников Stilfort»Главный баннер в интернет-магазине светильников Stilfort

Разделы каталога

Для разделов каталога мы изменили верстку: сократили количество блоков в ряду с 5 до 3. При этом сами блоки стали немного больше. Также команда Stilfort самостоятельно добавила баннер над категориями товаров.

Отсюда посетители могут не только перейти к товарам, но и скачать каталог одним файлом в PDF или 3D модели.

Фото 3: «Кейс: верстка и дизайн для интернет-магазина светильников Stilfort»Разделы каталога в интернет-магазине светильников Stilfort

Нижний баннер

На главной мы кастомизировали блок с баннерами коллекций. Сделали его адаптивным, чтобы изображения не обрезались ни на одном из устройств.

Фото 4: «Кейс: верстка и дизайн для интернет-магазина светильников Stilfort»Нижний баннер в интернет-магазине светильников Stilfort

Дизайн

В рамках услуги мы также отрисовываем графические материалы. Stilfort попросили реализовать иконки для разных мест на сайте.

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

На основе логотипа компании нас попросили создать иконки, которые отображаются в поисковой выдаче: favicon и web clip icon (для iPhone и iPad). Для блока обратной связи на странице «О компании» нарисовали и разместили 3 новые иконки.

Фото 5: «Кейс: верстка и дизайн для интернет-магазина светильников Stilfort»Новые иконки в интернет-магазине светильников Stilfort

Страница «О компании»

Для раздела с информацией о компании мы подготовили новую верстку. Основные изменения заключаются в добавлении блока для фото и видео в формате слайдера. Также визуал стал адаптивным и подстраивается под любой размер окна без обрезки.

Фото 6: «Кейс: верстка и дизайн для интернет-магазина светильников Stilfort»Раздел «О компании» в интернет-магазине светильников Stilfort

Видео в анонсе акций

Команде Stilfort важно, чтобы товары не только красиво смотрелись, но и были выгодными. Реализацию этого принципа видим в разделе «Акции», где при наведении на анонсную картинку добавили воспроизведение видео.

Изначально была проблема: при наведении курсора ролик расширялся, из-за чего картинка частично обрезалась. Мы изменили код и убрали эффект приближения.

Фото 7: «Кейс: верстка и дизайн для интернет-магазина светильников Stilfort»Раздел «Акции» в интернет-магазине светильников Stilfort

Боковой баннер

По просьбе Stilfort мы доработали функционал решения и добавили возможность вставлять боковые баннеры на любой странице. Для этого заменили ненужный команде блок подписки на рассылку. Теперь можно самостоятельно выбирать страницы, на которых выводить тот или иной баннер.

Фото 8: «Кейс: верстка и дизайн для интернет-магазина светильников Stilfort»
Боковой баннер в интернет-магазине светильников Stilfort

Итог

Мы продемонстрировали результат работы за 4 месяца. На этом наше сотрудничество не прекращается, совместными усилиями продолжаем развивать сайт. Также мы сейчас направили внимание на развитие SEO, надеемся через несколько месяцев получить первые ощутимые результаты.

Александр Абрамзон
Менеджер проектов

Услуга поддержки и развития сайта отлично подходит, если вы еще не сформулировали четкое представление о том, что нужно сайту. С командой Stilfort основное внимание мы уделили изменению верстки и дизайна, благодаря чему сайт стал выглядеть свежо. Теперь проект сильно отличается от других интернет-магазинов на решении Аспро: Максимум.