Обновление сайта · Санкт-Петербург
Стиль КерамикиСайт, вырезанный струёй воды
Два салона плитки и керамогранита, 23 тысячи товаров, 307 фабрик и собственная мастерская гидроабразивной резки, где из керамогранита, мрамора и латуни собирают панно и медальоны. Команда студии вдумчиво пересобрала сайт целиком — и сделала резку его главной темой: струя рисует медальон, прорезает орнамент и открывает страницы.
Струя готова
- 25 страниц
- разобрали на аудите — на компьютере и телефоне
- 24 вида
- страниц и окон в новом оформлении
- 4 страницы
- видов резки были пустыми — стали витриной
- 30 работ
- мастерской — в галерее на сайте
Было и стало
Ведите струю —
она режет старый сайт
Прежний сайт держался на стандартной теме: меню заглавными буквами переносилось в две строки, главная была собрана вручную внутри текста страницы, а мастерская резки — одна из трёх одинаковых карточек услуг. Тяните струю: слева прежний сайт, справа новый. Сравните главную, каталог, раздел, резку, «О компании» и контакты.
- Меню в две строкиСемь пунктов заглавными буквами, «О компании» переносилось.
- Главная — внутри текстаБлоки свёрстаны вручную со своими стилями прямо в тексте страницы.
- Резка — одна из карточекГлавное умение салона стояло в одном ряду с другими услугами.
- Пустые страницы«Панно», «Узоры», «Латунь» — только заголовок и блок «Остались вопросы?».
Фирменный язык
Медальон мастерской —
язык всего сайта
Мы не придумывали графику с нуля: взяли то, что салон делает руками. Розетка-медальон, который на первом экране вырезает струя, повторяется в шапках страниц, призывах и подвале. Светящаяся «линия реза» прочерчивается под каждой шапкой и показывает прокрутку страницы, фото работ появляются резом сверху вниз, а у карточек разделов при наведении прорезается контур. Цвета — из логотипа и материалов: красный, тёплый чёрный, латунь и мрамор.
- Тёплый чёрный#141011 · первый экран, шапки, подвал
- Красный логотипа#e0251b · кнопки и линия реза
- Латунь#c79f62 · акценты на тёмном
- Мрамор#f4f0ea · спокойные блоки
- Светлая латунь#ead3a4 · надписи на тёмном
Проведите курсоромструя прорежет узор
Главная
Главная —
одиннадцать глав
От медальона на первом экране до новостей. Каждая глава отвечает на вопрос покупателя: что есть в салонах, что умеет мастерская, сколько это стоит, куда приехать. Выберите главу — окно сайта прокрутится к ней.
Мастерская
Четыре пустые страницы —
стали витриной резки
В меню каталога у резки было четыре вида: панно, уникальные узоры, вставки из латуни и индивидуальные дизайны. Открыв любой, посетитель видел только заголовок. Теперь у каждого вида своя обложка из работы мастерской и описание, рядом — этапы от эскиза до панно, карточка «Что нужно для расчёта» и галерея из 30 работ, где фото появляются резом.
Фото — настоящие работы мастерской салона из галереи услуги на сайте.
Фото разделов
Пять разделов —
одна серия
Прежние картинки разделов были из разных миров: гостиная с люстрой, кирпичный дом, мешки на белом фоне. Новую серию собрали в одном свете — петербургский классический интерьер, мрамор, бордо и латунь, как в салонах. Это иллюстрации, созданные нейросетью по нашему описанию, а не фото салонов. Карточки переворачиваются при появлении, наведите — увидите, как было.
Было
Было
Было
Было
Было
Шапка и меню
Две строки —
вместо трёх
Раньше под шапкой шли серое меню с переносами и строка брендов по алфавиту. Теперь сверху — тёмная строка с обоими салонами, метро и телефонами, а под ней одна светлая закреплённая строка: каталог, поиск, «Резка плитки» и звонок. Каталог открывает меню с картинками разделов и услугами салона.
Живой сайт
Двенадцать страниц —
одним языком
У каждой внутренней страницы тёмная шапка, где медальон прочерчивается при загрузке, а снизу пробегает линия реза. Дальше — своя подача: витрина резки, услуги вперемешку, каталог с подборками, карты салонов. Наведите на окно — страница прокрутится.
На телефоне
Мастерская —
в кармане
Светлая шапка с поиском и красной кнопкой звонка, внизу — каталог, избранное, сравнение, корзина и звонок. Медальон режется и на телефоне, галерея работ складывается в две колонки. Нажмите на телефон, чтобы остановить прокрутку.
Как шла работа
Восемь этапов —
одна команда
Над проектом работала команда студии: разбор старого сайта, концепция, дизайн-система, страницы и приёмка с проверкой каждого экрана на компьютере и телефоне. Обновление шло на работающем сайте — салоны продолжали принимать заказы, а прежний вид сохранён снимками до первой правки.
- 01АудитСняли 25 страниц на компьютере и телефоне, сохранили тексты разделов, данные, фото главной и картинки разделов до первой правки.
- 02КонцепцияУ салона своя мастерская гидроабразивной резки — она и стала темой: медальон, светящаяся линия реза, орнамент.
- 03Дизайн-системаТёплый чёрный, красный из логотипа, латунь и мрамор; Cormorant Garamond и Manrope; кнопки, карточки, сетка.
- 04Главная, шапка, подвалСтруя вырезает медальон на первом экране, мастерская, орнамент, услуги, салоны; шапка с меню каталога.
- 05Мастерская резкиВитрина услуги и четыре страницы видов резки, которые раньше были пустыми; галерея из 30 работ.
- 06Каталог и товарКаталог-оглавление, разделы, коллекции, карточка товара, фабрики и корзина — поверх прежнего кода магазина.
- 07СтраницыУслуги, раковины, дизайн-проект, о компании, контакты с картами, доставка, новости и статьи.
- 08Приёмка и доводкаКаждую страницу проверили на компьютере и телефоне и довели по замечаниям — от цифр до текста услуги.
Довели на приёмке
- Цифры в заголовках — одной высоты, без «прыгающих» старинных
- Струя режет медальон медленнее — его успевают рассмотреть
- Фото медальона на главной больше не повторяется дважды
- Подписи видов резки из меню — по-человечески: «Вставки из латуни»
- Ссылка «Телеграм», которая вела на сам сайт, убрана из подвала
- Картинка «Дизайн-проекта» с надписью «3D» заменена
- Текст услуги резки переписан: без лазерной и плазменной резки
- Вопросы на главной — читаемым шрифтом
Не трогали — работает как раньше
- Каталог и цены
- Фильтры
- Корзина и оформление заказа
- SMS о заказах
- Адреса страниц
- Тексты разделов
Итог
Сайт, который режет —
как сама мастерская
Главная, шапка, подвал, меню каталога, каталог, разделы, коллекции, карточка товара, фабрики, корзина, услуги, резка и четыре вида резки, раковины, дизайн-проект, о компании, контакты, доставка, новости, статьи и окна заявок — единым языком, без остановки продаж. Главное умение салона теперь видно с первого экрана.