Обновление сайта · Москва и Подольск
АнейСайт, собранный из знака
Официальный дистрибьютор плитки, керамогранита и мозаики: 25 фабрик из шести стран, склад и собственный цех резки «ТехноАрт» в Подольске. Команда студии вдумчиво пересобрала сайт целиком — от фирменного языка и первого экрана до страниц цеха, условий для дилеров и контактов. Знак нашли в самом логотипе: четыре «плитки», одна из них терракотовая, стали формой фото, кнопок и меток по всему сайту.
Керамогранит
Свой цех резкиступени, столешницы, раковины, мозаика
Керамическая плитка
Мозаика
- 30 страниц
- разобрали на аудите — на компьютере и телефоне
- 20+ видов
- страниц и окон в новом оформлении
- 18 услуг
- цеха резки — на одном новом шаблоне
- 25 фабрик
- каталог, цены и корзина работают как раньше
Было и стало
Тот же дистрибьютор —
другой сайт
Прежний сайт стоял на стандартной теме: синие кнопки, оранжевое меню заглавными буквами, а главная, резка плитки и страницы для партнёров были свёрстаны прямо в текстах разделов со своими цветами. Тяните линию — слева прежний сайт, справа новый. Сравните главную, раздел каталога, резку плитки, страницу для дилеров, «О нас» и контакты.
- Чужие цветаСиние кнопки темы и оранжевое меню не имели отношения к логотипу.
- Вёрстка в текстахГлавная, резка и партнёрские страницы были собраны прямо в текстах разделов со своими стилями.
- Красное и синееБлоки в текстах красили кнопки и метки в красный и синий — мимо цветов логотипа.
- Восемнадцать лендинговКаждая услуга цеха была свёрстана по-своему — свои блоки, свои цвета, своя шапка.
Фирменный язык
Четыре плитки логотипа —
язык всего сайта
У компании уже был сильный знак: четыре скруглённые «плитки», одна — терракотовая. Мы не стали придумывать новую графику — мы сделали знак системой. Лепесток с одним острым углом стал формой фото разделов, меток, номеров шагов и даже кнопки «вопрос / ответ». Знак собирается из фото на главной, а в блоке цеха его обводит линия реза — как струя гидроабразива. Наведите на знак справа.
- Серо-синий логотипа#626d8a · знак, акценты заголовков
- Терракота логотипа#cc8a5a · главные кнопки и метки
- Чернила#1d2233 · текст, тёмные блоки, подвал
- Камень#f1ede6 · фон разделов
- Бумага#faf8f4 · фон страниц
Главная
Главная —
двенадцать ответов
Каждая глава отвечает на вопрос закупщика: для кого компания, что есть на складе, какие коллекции выбирают, умеют ли резать и изготавливать изделия, с какими фабриками работают, как проходит заказ и куда привезут. Выберите главу — окно сайта прокрутится к ней.
Иллюстрации
Разделы и услуги —
в одном свете
Прежние картинки разделов были разными по стилю. Новую серию сделали в цветах логотипа: светлые интерьеры, мягкий дневной свет, серо-синие и терракотовые акценты. Это иллюстрации, созданные нейросетью по нашему описанию, а не фото склада или объектов. Лепестки переворачиваются при появлении — наведите, чтобы увидеть, как было.
Было
Было
Было
Было
У пяти услуг цеха в текстах не было ни одного фото работ — для их карточек сделали иллюстрации той же серии. Если появятся настоящие фото, шаблон сам возьмёт их вместо иллюстраций.
Резка и услуги
Тексты остались —
страницы новые
Страницу цеха и восемнадцать услуг — ступени, столешницы, раковины, гидроабразивную резку — менеджеры собирали сами, каждую со своей вёрсткой прямо в тексте раздела. Переписывать их не стали. Новый шаблон сам находит в тексте заголовок, подзаголовок, «что прислать для расчёта», факты, фото работ и видео цеха и раскладывает их по новым блокам, а остальное перекрашивает в единый стиль. Менеджеры правят тексты в админке, как привыкли.
- Видео цеха из текста — фоном первого экрана
- Фото работ из галерей — в карточки направлений и коллаж услуги
- Лента всех 18 услуг и карточка расчёта на каждой странице
- Ни одного переписанного слова в админке
Шапка и меню
Каталог и цех —
в одно наведение
Сверху — офис и склад с адресами, режим работы, почта и Telegram. Ниже закреплённая строка: логотип, меню, поиск по кнопке, сравнение, избранное, корзина и терракотовая «Заявка». «Каталог» раскрывает разделы с фото и счётчиками, «Резка плитки» — все услуги цеха и его телефон.
Живой сайт
Двенадцать страниц —
одним языком
Каталог, товар и фабрики работают на прежнем коде магазина — изменился только вид. Партнёрские страницы, «О компании», каталоги фабрик, проекты, новости и контакты получили свои шаблоны, а тексты из админки встали в них без переписывания. Наведите на окно — страница прокрутится.
На телефоне
Склад и цех —
в кармане
Шапка с поиском и терракотовой кнопкой звонка, внизу — каталог, избранное, сравнение, корзина и звонок. Знак из фото собирается над заголовком, лента услуг цеха листается пальцем, контакты — карточками с кнопкой маршрута. Нажмите на телефон, чтобы остановить прокрутку.
Как шла работа
Восемь этапов —
одна команда
Над проектом работала команда студии: разбор прежнего сайта, концепция, дизайн-система, страницы и приёмка с проверкой каждого экрана на компьютере и телефоне. Обновление шло на работающем сайте — компания продолжала принимать заявки, а прежний вид сохранён снимками до первой правки.
- 01АудитСняли 30 страниц на компьютере и телефоне, выгрузили данные сайта, тексты всех разделов и исходные картинки, чтобы ничего не потерять и было с чем сравнить.
- 02КонцепцияНашли язык в самом логотипе: знак из четырёх «плиток», одна из них терракотовая. Он стал формой фото, кнопок, меток и линии реза.
- 03Дизайн-системаПалитра из логотипа, Unbounded и Manrope, кнопки-«таблетки», лепесток как знак — одни правила для всех страниц и окон.
- 04Главная, шапка, подвалЗнак из фото разделов, панели аудиторий, каталог, цех резки, фабрики по странам, шаги работы; шапка с двумя выпадающими меню.
- 05Серия иллюстрацийТринадцать картинок в одном свете: разделы каталога, услуги цеха без своих фото и тематические фото для главной.
- 06Резка и услугиСтраница цеха и 18 услуг на одном шаблоне: он сам читает тексты из админки и раскладывает их по новым блокам.
- 07Внутренние страницыДилерам и дизайнерам, о компании, каталоги фабрик, проекты, новости и статьи, контакты, каталог и карточка товара.
- 08Приёмка и доводкаПроверили каждую страницу на компьютере и телефоне, автопроверкой — ошибки, картинки и ширину, и довели всё, что заметил заказчик.
Довели на приёмке
- Меню «Каталог» перестало выходить за левый край экрана
- Текст на кнопках карточек товара встал по центру
- Плавная прокрутка к якорям — с отступом на закреплённую шапку
- Длинные кнопки в карточках «Дилерам и дизайнерам» переносятся, а не вылезают
- Фото галерей услуг больше не растягивают страницу на телефоне
- Карта контактов сразу показывает обе площадки и переключается между ними
Не трогали — работает как раньше
- Каталог и цены
- Фильтры
- Корзина и оформление заказа
- Калькулятор плитки
- Формы заявок дилеров и дизайнеров
- Адреса страниц
- Тексты страниц в админке
- Выгрузка остатков из 1С
Итог
Знак из логотипа —
теперь целый сайт
Главная, шапка и подвал, меню каталога и резки, каталог, разделы, коллекции, карточка товара, фабрики, корзина, резка плитки и восемнадцать услуг цеха, страницы для дилеров и дизайнеров с формами, о компании, каталоги фабрик, проекты, новости и статьи, контакты с картой — единым языком, без остановки заявок и продаж.