Обновление сайта · Пятигорск
АкваторияСайт, в котором поднимаются пузырьки
Сеть магазинов керамической плитки и сантехники в Пятигорске: два магазина со складом, больше 8 тысяч товаров и 110 фабрик. Команда студии вдумчиво пересобрала сайт целиком — от фирменного языка и первого экрана до каталога, карточки товара, корзины и страницы ошибки. Язык нашли в самом знаке: буква «А», сложенная из пузырьков минеральной воды, стала водой, в которой живёт весь сайт.
Плитка
Керамогранит
Клинкер
Мозаика
Сантехника
- 22 страницы
- разобрали на аудите — на компьютере и телефоне
- 23 вида
- страниц и окон в новом оформлении — до корзины, 404 и окон заявок
- 5 разделов
- каталога — одной серией иллюстраций
- 8 100+
- товаров — каталог и цены работают как раньше
Было и стало
Новый сайт —
поднимается, как вода
Прежний сайт стоял на стандартной теме: бирюзово-голубой градиент шапки, алфавит брендов над слайдером, пять карточек разделов с пустым местом и длинный текст. Тяните уровень воды вверх и вниз — над ним прежний сайт, под ним новый. Сравните главную, раздел каталога, товар, доставку, страницу о компании и контакты.
- Алфавит над слайдеромСтрока букв брендов стояла выше всего остального и ни о чём не говорила покупателю.
- Разделы с дыройПять карточек разделов в сетке на шесть — на месте последней оставалось пустое место.
- Новость 2022 годаВнизу главной висела одна старая акция, а текст о магазине шёл сплошной простынёй.
- Пустая формаКорзина без товаров показывала всю форму заказа, а у контактов не было даже заголовка.
Фирменный язык
Буква из пузырьков —
весь сайт
У «Акватории» уже был сильный знак: буква «А», сложенная из пузырьков, как газ в минеральной воде Пятигорска. Мы не стали рисовать новую графику — мы пустили эти пузырьки по сайту. Они поднимаются со дна на первом экране и в шапках страниц, курсор их расталкивает, разделы каталога плавают в пузырях, а каждую секцию отделяет волна. Палитра взята из логотипа и глубины: тёмная вода, бирюза знака и белая пена. Поводите курсором — пузырьки разойдутся.
- Глубина#052328 · первый экран, обложки, подвал
- Бирюза знака#6ec1bd · главные кнопки и акценты
- Мята#c6ece7 · подсветка и надписи на тёмном
- Пена#eef8f6 · фон секций
- Тёмный текст#11292c · заголовки и текст
Главная
Главная —
десять ответов
Каждая глава отвечает на вопрос покупателя, который собирает ванную: что есть, какие коллекции, что выбирают другие, чьё производство, почему здесь, где магазин, куда привезут. Выберите главу — окно сайта прокрутится к ней.
Фото разделов
Пять разделов —
в одной воде
Прежние фото разделов были из разных миров: плитка с одного сайта, ванная с другого. Новая серия снята в одном свете — блики воды бегут по плитке, мозаике и керамограниту, как солнце сквозь бассейн, а цвет держится на бирюзе и тёплом песке. Это иллюстрации, созданные нейросетью по нашему описанию, а не фото магазина. Пузыри переворачиваются при появлении, наведите — увидите, как было.
Было
Было
Было
Было
БылоВнутренние страницы
Одна обложка —
для каждой страницы
Каталог, фильтры, коллекции и фабрики работают на прежнем коде магазина, и ломать его ради красоты мы не стали. Вместо этого сверху каждой страницы встала одна обложка — тёмная вода с пузырьками и волной внизу, — а заголовок, хлебные крошки и описание страницы сами переезжают в неё. Под обложкой всё работает как раньше, только в новом цвете. Выберите страницу.
- Заголовок, крошки и описание — в обложке
- Картинка раздела — в пузыре, интерьер коллекции — на весь экран
- Фильтры, сортировка и коллекции — прежние, в новом цвете
- Ни одного переписанного шаблона магазина
Шапка и меню
Всё важное —
на поверхности
Сверху — адреса обоих магазинов, режим работы и меню. Ниже закреплённая стеклянная строка: логотип, кнопка «Каталог» с пузырьками, поиск, телефон с «Заказать звонок», сравнение, избранное и корзина. Меню каталога раскрывается при наведении — пять колонок с картинками разделов в кругах, числом товаров и готовыми подборками.
«Заказать звонок», «Купить в 1 клик» и заявка с товара — в одном стиле: тёмная шапка окна с пузырьками, крупные поля, бирюзовая кнопка и круглая кнопка закрытия. В окне звонка — номер магазина, чтобы можно было сразу позвонить самому.
Мелочи, которые видят все
Даже пустота —
в стиле
Пустую корзину и страницу «не найдено» видит почти каждый покупатель, поэтому они получили свои экраны. Корзина без товаров больше не показывает пустую форму заказа — она предлагает разделы каталога и звонок. А потерянная страница «ушла под воду»: крупное «404» с пузырём вместо нуля, поиск и разделы, чтобы вернуться к покупкам.
Живой сайт
Двенадцать страниц —
одной водой
Каталог, коллекции, товар и фабрики работают на прежнем коде магазина — изменился только вид. Текстовые страницы получили свои шаблоны: доставка — карточками по способам, контакты — карточками и картой, новости — крупной первой записью. Наведите на окно — страница прокрутится.
На телефоне
Магазин —
в кармане
Стеклянная шапка с поиском и бирюзовой кнопкой звонка, внизу — каталог, избранное, сравнение, корзина и звонок. Пузыри разделов на первом экране собираются в гроздь, панели каталога встают друг под другом и сразу ведут в раздел. Нажмите на телефон, чтобы остановить прокрутку.
Как шла работа
Восемь этапов —
одна команда
Над проектом работала команда студии: разбор прежнего сайта, концепция, дизайн-система, страницы и приёмка с проверкой каждого экрана на компьютере и телефоне. Обновление шло на работающем сайте — магазин продолжал принимать заказы, а прежний вид сохранён снимками до первой правки.
- 01АудитСняли 22 страницы на компьютере и телефоне, выгрузили данные сайта, текст главной и исходные фото разделов, чтобы ничего не потерять и было с чем сравнить.
- 02КонцепцияНашли язык в самом знаке: буква «А» из пузырьков и Кавказские Минеральные Воды — глубокая бирюза, пузырьки и волна.
- 03Дизайн-системаПалитра из логотипа, Unbounded и Manrope, кнопки-«таблетки», пузырь и волна как знаки — одни правила для всех страниц.
- 04Главная, шапка, подвалПузырьки на первом экране, разделы в пузырях, раскрывающиеся панели каталога, магазины на карте; шапка с меню из пяти колонок.
- 05Серия фото разделовПять иллюстраций в одном свете: блики воды на плитке, мозаике и керамограните, глубокая бирюза и тёплый песок.
- 06Внутренние страницыОдна обложка для разделов, коллекций, фабрик, текстовых страниц и поиска; свои шаблоны для доставки, контактов и новостей.
- 07Каталог, товар, корзинаНовый вид каталога, карточки товара, корзины и оформления заказа поверх прежнего кода магазина.
- 08Приёмка и доводкаПроверили каждую страницу на компьютере и телефоне и довели всё, что мешало: от карты до отступа под шапкой.
Довели на приёмке
- Карта магазинов открывалась не на Пятигорске — теперь по центру между двумя магазинами
- Лента коллекций при загрузке сдвигалась — теперь начинается ровно
- На телефоне вернулся логотип в шапке
- Длинные названия разделов на телефоне больше не обрезаются
- Убран лишний отступ под шапкой на телефоне
- Строка поиска на телефоне перестала наезжать на заголовок
- Пустые абзацы в описаниях фабрик больше не оставляют дыр
- Оранжевые ссылки из старых настроек темы стали бирюзовыми
Не трогали — работает как раньше
- Каталог и цены
- Фильтры
- Корзина и оформление заказа
- Калькулятор плитки
- Адреса страниц
- Тексты в админке
Итог
Минеральная вода —
теперь и онлайн
Главная, шапка, подвал, меню каталога, каталог, разделы, фильтры, коллекции, карточка товара, фабрики, доставка, о компании, контакты, новости, поиск, корзина и оформление заказа, окна заявок, страница «не найдено» — единым языком, без остановки продаж. Сайт выглядит как сам знак магазина: свежо, глубоко и с пузырьками.