Разработка сайта · Новокузнецк
Сайт салона плитки, написанный мазками логотипа
«АртКерамика» — салон керамической плитки и сантехники в Новокузнецке: шоу-рум на улице Кирова, 3, на рынке с 2005 года, доставка по Кузбассу. Команда студии разработала для салона сайт в своём стиле — «Палитра»: четыре мазка кисти из логотипа и четыре плитки с вывески стали языком всего сайта, от стены образцов на первом экране до страницы 404.
Выберите краску — она напишет страницу сайта
Задача
Дорогой и живой сайт — в своём стиле
Салону нужен был современный сайт, который выглядит дорого, удивляет с первого экрана и при этом остаётся удобным магазином: тысячи позиций каталога, коллекции фабрик, корзина. Стиль не брали из шаблонов — его подсказал сам салон: логотип с мазками кисти и словом «Арт», вывеска из четырёх плиток.
- 2005
- на рынке с этого года
- 4 764
- товара в каталоге
- 1 073
- коллекции
- 8
- разделов: от керамогранита до ванн
-
1
Стиль из логотипа
Мазки синего, зелёного, жёлтого и красного прорисовываются под словами, отмечают разделы, шаги и статьи — как кисть художника.
-
2
Плитка — главный герой
Крупные фото коллекций: стена образцов на первом экране, каталог плитками, интерьеры разделов и коллекций.
-
3
Дорого, но удобно
Анимация встречает, но не мешает: каталог, поиск, телефон и корзина всегда под рукой, на телефоне — нижняя панель.
Фирменный язык
Палитра из четырёх мазков
В логотипе за рукописным «Арт» лежат четыре мазка кисти. Мы разобрали его на краски: мазки стали акцентами, вывеска с четырьмя плитками — знаком сайта, а основой — глубокий чернильный синий и тёплый фарфор.
- Синий мазок
#1aa3e0 - Зелёный мазок
#16a352 - Жёлтый мазок
#ffd31a - Красный мазок
#e3262c
#0b1626
#fbf8f3
#f3ece1
#ef7f1b
и в — с первого
Первый экран сайта
Стена образцов едет навстречу
На первом экране главной — не баннер, а сами коллекции салона. Три колонки образцов стоят в перспективе, едут навстречу друг другу и наклоняются за курсором, внизу лежат мазки логотипа. Фото — популярные коллекции каталога: обновится каталог — обновится и стена. Здесь она живая: поводите мышью.
Как появляется главная
Четыре мгновения — и экран готов
Снимки первого экрана сайта в первые секунды после загрузки: поднимаются строки заголовка, под словом «Новокузнецке» прорисовывается жёлтый мазок, цифры салона досчитываются, а снизу по одному выезжают мазки логотипа. Стена образцов всё это время едет.
- 0,3 сПоднимаются строки заголовка
- 0,9 сПод «Новокузнецке» прорисовывается мазок, цифры досчитываются
- 1,6 сСнизу выезжают мазки логотипа
- 3,2 сВсе четыре мазка на месте — экран готов
Главная
Десять глав — по мазку на каждую
Главная ведёт от первого впечатления к делу: каталог, коллекции, как салон подбирает материалы, товары, новости и приглашение в шоу-рум. Выберите главу — окно прокрутит главную до неё.
Каталог
От раздела до плитки — уложено плитками
У каждого раздела — тёмная шапка с мазком в цвете раздела, а картинка раздела укладывается плитками, как на стене. Каталог на тысячи позиций разложен так, чтобы собрать ванную целиком: раздел, коллекция фабрики, товар.
Страница 404
Плитка выпала из раскладки
Даже ошибка говорит на языке салона: цифры «404» выложены плитками, а одной не хватает — она лежит внизу, как упавшая со стены. Рядом поиск, разделы каталога и телефон, чтобы посетитель не ушёл. Попробуйте сами: нажмите на плитку — она выпадет, нажмите на упавшую — встанет на место.
Страницы
Тексты — в той же палитре
«О компании», «Доставка», «Контакты», новости и статьи получили общую тёмную шапку с мозаикой плиток, а под заголовками всех страниц прорисовывается мазок в четыре цвета. Карточки, таблицы, заметки и вопросы в текстах оформлены одинаково. Наведите на окно — страница прокрутится.
Шоу-рум
Сайт зовёт на Кирова, 3
Плитку выбирают глазами и руками, поэтому каждая страница заканчивается приглашением в шоу-рум: настоящее фото входа, карта, часы работы и кнопка маршрута. На «Контактах» отдельной карточкой — склад для самовывоза на Рудокопровой, 10/1.
На телефоне
Палитра — в кармане
На телефоне стена образцов ложится под заголовок, меню открывается шторкой с разделами и контактами, а внизу всегда под пальцем панель: главная, каталог, поиск, избранное и корзина. Нажмите на телефон, чтобы остановить прокрутку.
Как шла работа
Восемь шагов — одна команда
Над сайтом работала команда студии: разбор, концепция, фирменный язык, главная, шапка и подвал, каталог, страницы и проверка каждого экрана на компьютере и телефоне. Новый вид включили на работающем магазине — каталог, цены, корзина и адреса страниц остались на месте.
- 01РазборПрошли путь покупателя на компьютере и телефоне: главная, каталог, коллекция, товар, корзина и страницы салона.
- 02КонцепцияНашли стиль в самом салоне: мазки кисти логотипа и четыре плитки вывески — так родилась «Палитра».
- 03Фирменный языкЧернильный синий и фарфор, оранжевые кнопки как вывеска, шрифты Unbounded и Manrope, мазки и знак «четыре плитки».
- 04ГлавнаяСтена образцов, бегущие ленты, каталог плитками, коллекции, шаги подбора, товары, новости.
- 05Шапка и подвалМеню каталога с картинками, поиск, телефон и корзина; приглашение в шоу-рум с фото входа и картой.
- 06КаталогШапки разделов с мазком и плитками, мозаика разделов, коллекции и товары.
- 07Страницы«О компании», «Доставка», «Контакты», бренды, новости и статьи, корзина, окна, cookie и страница 404.
- 08ПроверкаКаждую страницу проверили на компьютере и телефоне: вид, анимация, ошибки и рамка фокуса для клавиатуры.
Работает как раньше
- Каталог и цены
- Корзина и заказы
- Адреса страниц
- Тексты разделов
- Настройки магазина
Итог
Салон, который узнают с первого мазка
Главная со стеной образцов, каталог с шапками разделов, уложенными плитками, коллекции и товары, «О компании», доставка, контакты с картой и фото входа, бренды, новости и статьи с оглавлением, корзина, окна, cookie и страница 404, где плитка выпала из раскладки, — всё в одном стиле, выросшем из логотипа и вывески салона.