Обновление сайта · Анапа
ВавилонМагазин, который открывается как ворота
Торговый дом с 2008 года: плитка, керамогранит, сантехника, дизайн-проекты, ремонт под ключ и мебель под заказ. Команда студии вдумчиво пересобрала сайт целиком — от фирменного языка и первого экрана до услуг, каталога, статей и поиска. Получился серьёзный современный проект с характером: лазурит и золото Вавилона, «цветок жизни» из логотипа и анимация, которая встречает покупателя.
- С 2008 года
- отделочные материалы и ремонт в Анапе
- 22 984
- товара в каталоге и 264 бренда
- 24 страницы
- разобрали на аудите — на компьютере и телефоне
- 19 иллюстраций
- одной серией в лазурите и золоте
Одна история
Три главы —
одного магазина
«Вавилон» пришёл к нам летом с бедой: сайт на старом движке был заражён. Мы его спасли, потом перевели магазин на платформу SkeekS, а теперь полностью обновили. Каждый шаг готовил следующий.
-
01 · Август
Спасли
Очистили сайт после заражения, восстановили повреждённые файлы и сохранили всю медиатеку магазина. Клиент получил отчёт с результатами и рекомендациями.
Кейс восстановления →
-
02 · Август–сентябрь
Перевезли
Собрали магазин заново на платформе SkeekS: каталоги поставщиков, фильтры, карточки, цели аналитики, статьи. С сентября сайт работает на новой платформе.
-
03 · Октябрь
Обновили
Новый дизайн всего сайта: главная, шапка и подвал, услуги, «О компании», каталог, карточка товара, бренды, блог, контакты и поиск.
Было и стало
Тот же магазин —
за новыми воротами
До обновления сайт работал на стандартной теме: меню заглавными буквами, строка «Бренды: A B C…» под шапкой, одинаковые карточки разделов с длинными описаниями. Тяните золотую колонну — слева прежний сайт, справа новый. Сравните главную, каталог, услуги, товар, «О компании» и контакты.
- Меню заглавнымиВосемь пунктов в синей полосе и маленький логотип на белом.
- Алфавит под шапкойСтрока «Бренды: A B C…» на каждой странице.
- Одинаковые карточкиОдиннадцать разделов — фото из разных миров и длинные тексты.
- Услуги в тениДизайн, ремонт и мебель — после ленты товаров.
Фирменный язык
Лазурит, золото —
и цветок жизни
Название подсказало образ: Вавилон — это Ворота Иштар, синие глазурованные изразцы с золотом. Для магазина плитки лучше метафоры не придумать. Второй мотив взяли из логотипа — «цветок жизни»: на сайте его линии рисуются сами, он вращается в подвале и меню. Третий — ступени зиккурата: так выстроены услуги компании. Шрифты — Forum для заголовков, как надпись на камне, и Manrope для текста.
- Ночь Вавилона#0c1f3a · шапка, первый экран, подвал
- Лазурит#11325a · изразцы и кнопки
- Золото#eeca80 · акценты и цветок
- Тёмное золото#d9ae5c · подписи на светлом
- Жемчуг#f6f2e7 · спокойные блоки
Первый экран
Цветок из семи окон —
вход в каталог
На первом экране главной золотые линии «цветка жизни» рисуются при загрузке, а в его окружностях раскрываются семь разделов каталога. За курсором идёт тёплый свет, цветок слегка поворачивается к посетителю. Наведите на окно — это повтор живого блока.
Главная
Главная —
как прогулка по шоуруму
Девять глав от первого экрана до вопросов. Каждая отвечает на свой вопрос покупателя: что есть, что сейчас выгодно, кто сделает ремонт, где посмотреть вживую. Выберите главу — окно сайта прокрутится к ней.
Серия иллюстраций
Одиннадцать разделов —
одним светом
Раньше разделы каталога иллюстрировали фото из разных интерьеров. Мы подготовили серию в одном стиле: лазурные стены, тёплое золото, мягкий боковой свет, арки и изразцы. Плитки переворачиваются со старой картинки на новую; наведите, чтобы увидеть прежнюю. Это иллюстрации, созданные нейросетью для сайта, а не фото шоурума.
Услуги
От идеи до ключей —
ступень за ступенью
«Вавилон» не только продаёт материалы — компания делает дизайн-проекты, ремонт и мебель. На главной услуги выстроены ступенями зиккурата в порядке работ, а у каждой — своя страница: лазурная шапка с картинкой в арке, навигация по разделу, таблица стоимости, этапы и вопросы.
- 01Дизайн-проектСтиль, планировка и сочетания материалов
02ДемонтажОсвобождаем помещение под ремонт
03СтроительствоОтдельное направление компании
04Ремонт под ключОт черновых работ до чистовой отделки
05Мебель под заказПо размерам и характеру помещения
О компании
Люди —
в арках ворот
Страница «О компании» встречает годом основания внутри золотого цветка и полосой цифр: лет на рынке, товаров, брендов и людей в команде. Шестнадцать сотрудников — руководители, продажи и мастера — стоят в арках, как в нишах ворот: при наведении фото оживает цветом и приподнимается. Дальше — «Наши возможности» лазурными изразцами и реквизиты аккуратной таблицей.
- 18
- лет на рынке
- 16
- человек в команде
- 264
- бренда
Детали
Мелочи —
из которых складывается впечатление
Закреплённая лазурная шапка с двумя мегаменю, карточка товара, которая не уходит при прокрутке, оглавление статьи, отметка «открыто сейчас» в контактах, поиск с большим полем. Каждая деталь — в том же языке лазурита и золота.
Живой сайт
Двенадцать страниц —
одним языком
У каждой страницы своя подача, но язык один: лазурная шапка, золотые акценты, цветок, арки. Наведите на окно — страница прокрутится.
На телефоне
Шоурум —
в кармане
Лазурная шапка с поиском и золотой кнопкой звонка, внизу — каталог, избранное, сравнение, корзина и звонок. Цветок из окон встаёт под заголовком, услуги идут карточками, команда — по двое в ряд. Нажмите на телефон, чтобы остановить прокрутку.
Как шла работа
Восемь этапов —
одна команда
Над проектом работала команда студии: разбор прежнего сайта, концепция, дизайн-система, серия иллюстраций, страницы и приёмка с проверкой каждого экрана на компьютере и телефоне. Обновление шло на работающем сайте — магазин продолжал принимать заказы, а прежний вид сохранён снимками до первой правки.
- 01АудитСняли 24 страницы на компьютере и телефоне, сохранили тексты, данные и исходные картинки разделов — чтобы ничего не потерять и было с чем сравнить.
- 02КонцепцияВавилон — значит Ворота Иштар: лазурные изразцы и золото. Плюс «цветок жизни» из логотипа и ступени зиккурата для услуг.
- 03Дизайн-системаПалитра, шрифты Forum и Manrope, кнопки, карточки, сетка, анимации появления — один язык для всех страниц.
- 04Серия иллюстрацийДевятнадцать картинок в одном стиле для разделов, услуг, первого экрана и текстов — вместо разнородных фото.
- 05Главная, шапка, подвалЦветок из семи окон, акция с отсчётом, мозаика материалов, ступени услуг, изразцы, бренды, шоурум с картой.
- 06Услуги и «О нас»Свои шаблоны: навигация по разделу, портфолио с просмотром фото, шторка «до и после», команда в арках.
- 07Каталог, товар, блог, поискНовый вид поверх прежнего кода магазина, статьи с оглавлением, поиск с большим полем и подсказками.
- 08Приёмка и доводкаКаждую страницу проверили на компьютере и телефоне и довели по замечаниям владельца.
Довели на приёмке
- Убрали рамку у пункта меню после клика
- Ссылку «Все услуги» в мегаменю сделали золотой
- Убрали горизонтальную прокрутку на текстовых страницах
- Поставили новую картинку кухни вместо пустого места в текстах услуг
- Широкие таблицы статей прокручиваются на телефоне внутри рамки
- Вернули большое поле поиска на телефоне
Не трогали — работает как раньше
- Каталог и цены
- Фильтры
- Корзина и оформление заказа
- Каталоги поставщиков
- Адреса страниц
- Тексты для поиска
Итог
Спасли, перевезли —
и открыли новые ворота
Главная, шапка, подвал, два мегаменю, услуги и пять направлений, «О компании», каталог, разделы, карточка товара, бренды, блог и статьи, контакты, доставка и поиск — единым языком, без остановки продаж. Магазин, который этим летом спасали после заражения, теперь встречает покупателя как вход в Вавилон.