Знак — это система
Две плетёные рамки и вихрь из восьми лопастей разобраны на детали. Из них собраны иконки, рамки фотографий, загрузка, страница 404 и даже порядок разделов каталога.
← Портфолио
Разработка сайта · Москва и область
Модная Плитка Сайт, который вырос из знака логотипа
Магазин плитки, керамогранита, мозаики, напольных покрытий и сантехники с салоном в Новоивановском: 29 237 товаров, 117 брендов из 13 стран. Команда студии разработала для «Модной Плитки» сайт в развитие её знака — двух квадратных рамок и вихря из восьми лопастей. Знак справа собран из страниц сайта: смотрите, как он раскрывается.
modplitka.ruЗнак в кольце коллекций
- 29 237
- товаров в каталоге
- 3 747
- коллекций
- 117
- брендов
- 13
- стран производства
- 5.0
- оценка салона на Яндекс Картах
Задача
Магазин, который узнают по знаку
«Модная Плитка» продаёт плитку, керамогранит, мозаику, напольные покрытия и сантехнику по Москве и области, а в салоне в Новоивановском всё это можно посмотреть вживую — ежедневно с 9 до 20. Каталог огромный: десятки тысяч товаров и больше сотни брендов. Нужен был современный и дорогой сайт, в котором легко выбрать, — и который с первого экрана говорит языком логотипа.
Ромб раскрывается в квадрат
Фирменное движение сайта: карточка-ромб разворачивается в квадрат, когда на неё наводят курсор. Так открываются разделы, коллекции и фото салона.
Вывеска ночью
Ночная синева, лазурь вывески и тёплая янтарная подсветка. Тёмные экраны чередуются со светлыми, и материал на них выглядит дороже.
Знак по частям
Три детали — весь сайт
Знак «Модной Плитки» — две квадратные рамки, одна повёрнута на 45°, и вихрь из восьми лопастей в центре. Мы разобрали его на детали и каждой дали работу на сайте. Разберите знак сами — и соберите обратно.
- 01Прямая рамкаЛазурь. Рамки карточек, окон и фотографий.
- 02Рамка под 45°Ромб. Отсюда ромбы разделов и их раскрытие в квадрат.
- 03Вихрь из 8 лопастейДвижение. Загрузка, кольцо коллекций, восемь разделов.
Ночная синева#090f1d · Первый экран, шапка, подвал
Лазурь#2f8fe6 · Знак, кнопки, ссылки
Янтарь#f2a65a · Подсветка и акценты
Туман#f4f6fa · Фон страниц
Белый#ffffff · Карточки товаров
- UnboundedЗаголовки — широкие и уверенные, как буквы вывески
- ManropeТекст, цены и кнопки — спокойно и чётко
Первый экран сайта
Знак в кольце коллекций
На первом экране сайта знак логотипа светится в центре, а вокруг него — кольцо из популярных коллекций каталога. Кольцо медленно вращается, коллекции подтягиваются из каталога сами. Наведите курсор на коллекцию — кольцо остановится.
Каталог
Восемь лопастей — восемь разделов
Совпадение, которое стало приёмом: у вихря в знаке восемь лопастей, и разделов в каталоге тоже восемь — от керамогранита до сантехники. На главной они стоят ромбами и раскрываются в квадрат под курсором, в шапке — открываются меню с числом товаров. Выберите лопасть.
Главная
Главная — одиннадцать остановок
Главная ведёт покупателя, как консультант салона: от знака с коллекциями — к разделам, подбору под задачу, брендам, новинкам, фото салона, доставке и ответам на вопросы. Цифры каталога считаются из базы, тексты блоков владелец правит сам. Выберите остановку — окно прокрутится к ней.
Шапка и меню
Весь каталог — из шапки
Одна шапка для компьютера и телефона. На главной она прозрачная поверх тёмного экрана, на остальных страницах — светлая. «Каталог» и «Бренды» раскрываются большими меню, поиск подсказывает подборки и коллекции прямо при наборе. Нажмите на снимок, чтобы увеличить.
Путь покупателя
От раздела — до корзины
Раздел, коллекция, товар. В разделе — тёмная шапка с числом товаров и подразделами, в коллекции — интерьер и все её товары, в карточке товара — расчёт сразу в квадратных метрах, упаковках и штуках. Наведите курсор на окно — страница пролистается.
Панель покупки
У товара длинная страница: характеристики, коллекция, похожие товары. Когда кнопка «В корзину» уходит из виду, внизу экрана выезжает тёмная панель с фото, ценой, «В корзину» и «Купить в 1 клик». Когда на экране похожие товары или подвал — панель уходит, чтобы не мешать.
Бренды
117 брендов — 13 стран
В меню «Бренды» и на их странице бренды стоят по буквам, у каждого — страна. Из тех же данных получается карта ассортимента: откуда везут плитку и сантехнику. Выберите страну — появятся её бренды из меню сайта.
- ABK
- Ariana Ceramica
- Atlas Concorde Италия
- AVA Ceramica
- Casa Dolce Casa
- Fap Ceramiche
- Imola Ceramica
- La Fabbrica
- La Fenice
- Laminam
- Naxos
- Ragno Marazzi
- Rex Ceramiche
- Absolut Keramika
- Aparici
- Ape Ceramica
- Arcana Ceramica
- Argenta
- Azteca
- Baldocer
- Carmen Ceramic Art
- Cifre
- Ecoceramica
- El Molino
- Etile
- Exagres
- Fabresa
- Gayafores
- Gres de Aragon
- Gresmanc
- Halcon Ceramicas
- Ibero
- ITT Ceramic
- Kerlife
- Mainzu
- Monopole
- Nadis Design
- Navarti
- New Tiles
- Pamesa
- Porcelanosa
- Sinfonia Ceramicas
- Stn ceramica
- Urbatek
- ALMA Ceramica
- Alpine Floor
- AltaCera
- Amadei
- Artkera Group
- Atlas Concorde Россия
- Axima
- Azori
- Cersanit
- Coliseumgres
- Creto
- Dako
- Delacora
- Eletto Ceramica
- Estima
- Gracia Ceramica
- Grasaro
- Gresse
- Idalgo
- Italon
- Kerama Marazzi
- Kerranova
- New Trend
- Norland
- ProGRES
- Royce
- Tulesna
- Vitra
- Vizavi Ceramica
- Woodstyle
- Грани Таганая
- Гранитея
- Керами
- Керамика Будущего
- Керамин
- Нефрит-Керамика
- Уральский гранит
- Шахтинская плитка
- Arcadia Ceramica
- Armano
- Belleza
- Bluezone
- Granoland
- Gravita
- Infinity Ceramic Tiles
- Italica
- LCM
- LV Granito
- Maimoon Ceramica
- Motto Ceramic
- Neodom
- Primavera
- Smile Tile
- Staro
- Staro Slim
- StaroSlabs
- StaroWood
- Bonaparte
- Globus Ceramica
- ITC ceramic
- L'Quarzo
- Starmosaic
- Egger
- Lasselsberger Ceramics
- Etili Seramik
- Golden Tile
- Meissen Keramik
- Paradyz
- Realistik
- Tarkett
- Феодал
Страницы
Каждая страница — в одной системе
Каталог, бренды, доставка, «О компании», контакты и новости собраны из тех же деталей: заголовки Unbounded, белые карточки на тумане, лазурные ссылки и ромбы. Тексты владельца остались прежними по смыслу и легли в новую раскладку.
Детали
Такой плитки у нас нет
На странице «не найдено» по экрану рассыпаны плитки, а ноль в «404» — знак логотипа. Рядом поиск, разделы каталога и телефон салона, чтобы сразу вернуться к выбору. Здесь плитки собираются в «404», когда страница появляется на экране, — и рассыпаются снова по кнопке.
На телефоне
Салон — в кармане
На телефоне та же шапка, боковое меню с каталогом и брендами, поиск и нижняя панель: главная, каталог, поиск, избранное и корзина всегда под пальцем. Характеристики товара — в одну колонку, карусели листаются пальцем. Нажмите на телефон, чтобы остановить прокрутку.
Как шла работа
Восемь шагов — одна команда
Над сайтом работала команда студии: разбор, концепция от знака, система деталей, страницы и приёмка с проверкой каждого экрана на компьютере и телефоне. Сайт включали на работающем магазине — каталог, цены, корзина и адреса страниц остались на месте.
- 01РазборПрошли путь покупателя на компьютере и телефоне: каталог на десятки тысяч товаров, коллекции, бренды, корзина и страницы салона.
- 02КонцепцияСайт вырос из знака логотипа: рамки, вихрь, лазурь вывески и янтарная подсветка на ночной синеве.
- 03СистемаРомб, который раскрывается в квадрат, — общее движение для разделов, коллекций и фото. Шрифты Unbounded и Manrope.
- 04Шапка и менюОдна шапка для компьютера и телефона, меню каталога и брендов по буквам, поиск с подсказками, нижняя панель на телефоне.
- 05ГлавнаяЗнак в кольце коллекций, разделы, подбор под задачу, бренды, новинки, салон, доставка, советы и вопросы.
- 06Каталог и товарРазделы с тёмной шапкой, коллекции, карточка товара с панелью покупки, корзина и оформление заказа.
- 07СтраницыДоставка, «О компании», контакты, новости, бренды и страница 404, где плитка рассыпалась.
- 08ПриёмкаКаждую страницу проверили на компьютере и телефоне и довели по замечаниям владельца салона.
Довели на приёмке
- Галерея товара и характеристики — без лишних подложек, характеристики одной карточкой
- Поля количества в м², упаковках и штуках одной ширины, сумма отдельной строкой «Итого»
- Карусели товаров — ровные карточки одной высоты, кнопки прижаты к низу
- Панель покупки прячется, когда на экране похожие товары или подвал
- Бегущие строки брендов и разделов — спокойнее, с одной скоростью
- Нет рамки вокруг кнопок после нажатия мышью
Работает как раньше
- Каталог и цены
- Коллекции и бренды
- Корзина и заказы
- Адреса страниц
- Тексты страниц
Итог
Сайт, собранный из одного знака
Главная с кольцом коллекций, шапка и меню, разделы, коллекции, бренды, карточка товара с панелью покупки, корзина и оформление, доставка, «О компании», контакты, новости и страница 404 — в одной системе из рамок, ромбов и вихря логотипа. Выбирать плитку стало проще, а сайт узнают с первого экрана.