Знак — в каждой детали
Плитка с красной звездой из логотипа стала полом первого экрана, медальоном каталога, маркерами магазинов на карте и цифрами страницы 404.
← Портфолио
Разработка сайта · Казань
Наша Плитка Сайт сети магазинов плитки, собранный из одного знака
Четыре магазина керамической плитки и керамогранита в Казани, больше 100 выставочных экспозиций и 7 893 товара в каталоге. Команда студии разработала для «Нашей Плитки» сайт, который вырос из логотипа: квадратная плитка с красной восьмилепестковой звездой стала полом первого экрана, цветом, шрифтом и движением всего сайта. Каждый лепесток звезды — страница сайта.
nashaplitka-kzn.ru
- 7 893
- товара в каталоге
- 100+
- выставочных экспозиций
- 4
- магазина в Казани
- 8
- лепестков звезды — основа стиля
Задача
Сеть магазинов, которую узнают по знаку
«Наша Плитка» — четыре магазина керамической плитки, керамогранита, затирок и клея в Казани: на Сибирском тракте, проспекте Ямашева, улице Братьев Касимовых и проспекте Победы. В магазинах больше 100 выставочных экспозиций, помогают выбрать коллекцию, считают материалы и привозят по Казани и Татарстану. Нужен был современный, «дорогой» сайт, который продолжает логотип сети — и в котором плитку удобно выбрать и посчитать с телефона.
Движение укладки
Плитки ложатся при загрузке и загораются под курсором, звезда собирается из лепестков и поворачивается при прокрутке, образцы качаются на стенде.
Покупка без лишних шагов
Количество — сразу в метрах, упаковках и штуках, панель покупки всегда под рукой, заказ звонка — в одно касание.
Фирменный язык
Одна плитка — весь стиль
Знак логотипа мы собрали заново: рамка-шов, белые углы и восемь красных лепестков. Его цвета на сайте задаются одной настройкой, поэтому та же плитка становится и медальоном каталога, и маркером магазина на карте, и цифрами страницы 404. Соберите свою плитку — пол рядом сложится из неё.
Швы и рамка
Лепестки
Углы
Чёрный#121212 · Швы, шапка, подвал
Красный логотипа#ff3e2f · Звезда и кнопки
Известь#f4f1ec · Фон страниц
Белый#fffdfa · Карточки и окна
Песок#e9e4dc · Секции и подложки
Камень#6f6a64 · Подписи и линии
- OswaldЗаголовки — узкие заглавные, как буквы логотипа «НАША ПЛИТКА»
- Golos TextТекст, цены и кнопки — спокойно и чётко, с хорошей кириллицей
Первый экран сайта
Пол, который откликается
Первый экран сайта — пол из плиток-орнаментов в перспективе. При загрузке плитки ложатся рядами, как при укладке, а плитки под курсором загораются красным. Над полом звезда логотипа собирается из лепестков и поворачивается, когда страницу прокручивают. Проведите курсором по полу ниже.
Главная
Главная — как зал магазина
Главная ведёт покупателя, как продавец-консультант: от пола со звездой — к разделам каталога, образцам популярных коллекций, преимуществам сети, новинкам, магазинам на карте и брендам. Все цифры и списки на странице берутся из каталога и настроек сайта. Выберите часть — окно прокрутится к ней.
Каталог
Четыре раздела — одна плитка
Разделы каталога на главной сложены в квадрат со швами, как плитка логотипа. Раздел под курсором растёт, остальные уступают место, а медальон со звездой в центре едет к шву. Картинки разделов — иллюстрации, нарисованные для сайта в одном стиле. Наведите курсор или нажмите на раздел.
Популярные коллекции
Образцы на стенде
Популярные коллекции на главной висят на стенде, как образцы в магазине: на петле, с биркой бренда и страны. Ленту тянут мышью или пальцем, образец наклоняется за курсором. Здесь — настоящие коллекции с сайта: потяните ленту.
Каталог
От раздела — до плитки
Путь покупателя короткий: раздел, коллекция, товар. Плитку видно крупно, а рядом — бренд, страна, размер и цена за метр. Наведите курсор на окно — страница пролистается.
Метры, упаковки и штуки
Плитку продают упаковками, а считают метрами. В карточке товара количество задаётся сразу в трёх единицах: поменяли метры — пересчитались упаковки и штуки, и наоборот. Здесь тот же расчёт на настоящем товаре сайта: Керамогранит Global Tile Onda 60×60, 1 970 ₽ за м², в упаковке 1,44 м² — 4 плитки.
- —
- м² к покупке
- —
- упаковок
- —
- штук
- —
- стоимость
Панель покупки
Карточка товара длинная: характеристики, коллекция, похожие товары. Когда кнопка «В корзину» уходит из виду, внизу экрана появляется панель с фото, ценой и покупкой. На телефоне кнопка чата поднимается над панелью и не закрывает её.
Магазины
Четыре магазина — одна карта
Магазины сети стоят на одной карте Казани, а маркеры на ней — те же плитки со звездой. Карта простая и быстрая, без лишних рекламных карточек. Адреса берутся из настроек сайта: появится пятый магазин — он сам встанет на карту, в шапку и в подвал.
- 01улица Сибирский Тракт, 47
- 02проспект Ямашева, 15
- 03улица Братьев Касимовых, 35
- 04проспект Победы, 230
Детали
Даже мелочи — из той же плитки
Меню каталога, поиск, окно заказа звонка, галерея с просмотром на весь экран, страница 404 и плашка cookie оформлены тем же языком: чёрные швы, красная звезда, узкие заглавные. Для окна «Заказать звонок» сделали форму заявки — она приходит на почту магазина. Нажмите на снимок, чтобы увеличить.
Страницы
Каждая страница — одна укладка
Бренды, страница бренда, «О нас», доставка, контакты и корзина собраны из тех же блоков: у страниц сети и корзины шапка — чёрная плита с красной звездой, дальше карточки на белом, тонкие швы и красные акценты. Тексты «Доставки» и «О нас» остались прежними по смыслу — они легли в новые блоки. Наведите курсор на окно.
На телефоне
Магазин — в кармане
На телефоне — меню с разделами и всеми магазинами, поиск и нижняя панель: главная, каталог, поиск, избранное и корзина всегда под пальцем. Пол из плиток, образцы, квадрат каталога и галереи перестраиваются под узкий экран. Нажмите на телефон, чтобы остановить прокрутку.
Как шла работа
Восемь шагов — одна команда
Над сайтом работала команда студии: разбор, концепция, знак и шрифты, шапка и подвал, главная, каталог, страницы и проверка каждого экрана на компьютере и телефоне. Новый вид включили на работающем магазине — каталог, цены, корзина и адреса страниц остались на месте.
- 01РазборПрошли путь покупателя на компьютере и телефоне: каталог, разделы, коллекции, бренды, карточку товара, корзину и страницы сети.
- 02Концепция«Орнамент»: продолжение логотипа — квадратная плитка с красной восьмилепестковой звездой и чёрными швами.
- 03Знак и шрифтыЗнак собран заново и перекрашивается одной настройкой; узкие заглавные Oswald, как буквы логотипа, и спокойный Golos Text.
- 04Шапка и подвалШапка с меню каталога и поиском, нижняя панель на телефоне, подвал с лентой плиток и всеми магазинами.
- 05ГлавнаяПол из плиток, звезда, магазины, квадрат каталога, образцы на стенде, преимущества, новинки, карта, бренды и новости.
- 06Каталог и товарРазделы, коллекции, бренды, карточка товара с расчётом в метрах, упаковках и штуках и панелью покупки.
- 07Страницы«О нас» и «Доставка» блоками, контакты, корзина, новости, окно заказа звонка и страница 404 из плиток.
- 08ПроверкаКаждую страницу проверили на компьютере и телефоне: отображение, движение и работу всех кнопок.
Довели при проверке
- Нет рамки вокруг ссылок и кнопок после нажатия мышью — а при работе с клавиатуры она видна
- Панель покупки находит кнопку «В корзину» и на телефоне, где кнопки перерисовываются после загрузки
- Кнопка чата на телефоне поднимается над панелью покупки и не закрывает её
- Новые коллекции на главной — сначала по одной от каждого бренда, без пустых ячеек
- Петли образцов на стенде не обрезаются краем ленты
- Цифра в счётчике корзины стоит ровно по центру кружка
Работает как раньше
- Каталог и цены
- Корзина и заказы
- Адреса страниц
- Тексты страниц
- Настройки магазина
Итог
Сайт, который складывается, как плитка
Главная с полом из плиток и звездой, шапка и меню, разделы, коллекции, бренды, карточка товара с расчётом в метрах, упаковках и штуках и панелью покупки, корзина, «О нас», доставка, контакты, новости, окно заказа звонка и страница 404 — в одном стиле, выросшем из логотипа. Сеть узнают по знаку, а плитку легко выбрать и посчитать.