Декор A ПлюсСайт шоурума плитки, где каждая страница — как плита на стенде
Шоурум керамической плитки, керамогранита, мозаики и клинкера в Екатеринбурге: 68 фабрик из 9 стран и больше шести тысяч товаров. Команда студии разработала для «Декор Плюс» сайт, дорогой, как сам материал: слоновая кость, графит и красный цвет логотипа, буквица от руки и блик полированного керамогранита. Выберите плиту — откроется страница сайта.
ГлавнаяСтена коллекций и блик за курсоромКаталогЧетыре раздела крупными панелямиКерамогранитРаздел с фильтрами и коллекциямиКоллекцияИнтерьер крупно и справка о коллекцииТоварРасчёт по метрам, упаковкам и штукамФабрикиСловарь фабрик по буквамДоставкаУсловия понятными карточкамиКонтактыШоурум, режим работы и картаОшибкаЗдесь плитка не легла
dp-96.ru
6 411
товаров в каталоге
1 070
коллекций
68
фабрик
9
стран производства
2016
шоурум работает с
Задача
Шоурум, который хочется потрогать
«Декор Плюс» — шоурум в ТК «Докер» в Кольцово, работает с 2016 года. Здесь подбирают плитку под интерьер и бесплатно показывают выбранную коллекцию в 3D-проекте помещения. Нужен был сайт, который выглядит как хороший шоурум: материал крупно, спокойный фон, понятный выбор по разделам, коллекциям и фабрикам — и путь до заявки на 3D-проект в одно касание.
1
Галерея материалов
Слоновая кость, графит и красный цвет логотипа. Плитка — крупно, как образец на стенде шоурума, без лишних рамок и подложек.
2
Буква от руки
Рукописная «А» из логотипа стала голосом сайта: первые буквы заголовков пишутся каллиграфией, когда заголовок появляется на экране.
3
Блик керамогранита
Стена коллекций в перспективе, блик за курсором, мягкое появление блоков — сайт движется, как свет по полированной плите.
Буква логотипа
Одна буква — весь стиль
В логотипе «Декор Плюс» между словами стоит рукописная «А». Мы сделали её голосом всего сайта: первая буква заголовка пишется каллиграфией красным цветом логотипа и «проявляется» росчерком, когда заголовок появляется на экране. Попробуйте сами — напишите слово.
Рукописная «А» логотипа — отправная точка: из неё выросли буквица, шрифты и цвета сайта.
Керамогранит
Playfair DisplayЗаголовки — классика, как подпись под образцом
Great VibesБуквица — рукописная «А» логотипа
OnestТекст, цены, кнопки — спокойно и чётко
Слоновая кость#f6f2eb · Фон страниц
Бумага#fffdf9 · Карточки и окна
Песок#ece4d7 · Секции и подложки
Золото#b8976a · Тонкие линии
Красный логотипа#c8102e · Буквица и кнопки
Графит#1a1715 · Текст, шапка, подвал
Первый экран сайта
Стена коллекций — живая
На первом экране сайта — стена из настоящих коллекций каталога. Колонки плывут навстречу друг другу, по плитке идёт блик за курсором, а коллекции подтягиваются из каталога сами: появилась новая — она уже на стене. Наведите курсор на стену.
Главная ведёт по шоуруму, как консультант: от стены коллекций — к разделам, популярным коллекциям, бесплатному 3D-проекту, фабрикам и самому шоуруму. Все цифры на странице считаются из каталога. Выберите часть — окно прокрутится к ней.
dp-96.ru
Каталог
От раздела — до плитки
Путь покупателя короткий: раздел, коллекция, товар. На каждом шаге материал показан крупно, а справка — рядом: фабрика, страна, размер, цена за метр. Наведите курсор на окно — страница пролистается.
dp-96.ru/katalog/keramogranit
1РазделШапка раздела с буквицей, фильтры и коллекции раздела — плиткой крупно.
dp-96.ru/perlato-c12883
2КоллекцияИнтерьер на всю ширину и справка: фабрика, страна, число товаров, цена от — и все товары коллекции.
dp-96.ru/keramogranit-staro-palacio-…
3ТоварГалерея остаётся на месте, пока листается описание; расчёт сразу в метрах, упаковках и штуках.
Панель покупки
Описание товара длинное — характеристики, коллекция, похожие товары. Чтобы не искать кнопку, внизу экрана появляется панель с ценой, «В корзину» и «Купить в 1 клик», как только штатная кнопка уходит из виду. Галерея слева при этом остаётся на месте.
dp-96.ru/keramogranit-staro-palacio-nero…
Фабрики
Словарь фабрик
Вместо длинного списка — словарь: 68 фабрик по буквам, поиск по названию и выбор страны, у каждой фабрики — число товаров в каталоге. Это настоящие данные сайта — попробуйте найти фабрику или выбрать страну.
A
ApariciИспания · 15
Atlas Concorde РоссияРоссия · 80
AzulevИспания · 27
B
BestileИспания · 5
Buono CeramicaКитай · 73
C
Cayyenne CeramicheКитай · 9
CeditИталия · 1
Ceramika KonskieПольша · 17
Cerpa CeramicaИспания · 5
CerradПольша · 30
CifreИспания · 18
CodicerИспания · 3
ColorkerИспания · 32
CristacerИспания · 8
D
Dado CeramicaИталия · 14
DakoРоссия · 38
DecocerИспания · 1
DNA TilesИспания · 56
DO&POИндия · 9
Dual GresИспания · 7
DunaРоссия · 70
E
EcoCeramicИспания · 29
El MolinoИспания · 33
EmigresИспания · 79
Ermes AureliaИталия · 1
ExagresИспания · 41
F
FanalИспания · 36
Foshan CardshuoКитай · 5
G
GeotilesИспания · 87
GranolandИндия · 25
GrasaroРоссия · 21
GravitaИндия · 115
Greco GresИспания · 6
I
IberoИспания · 7
ItalicaИндия · 14
L
La PlateraИспания · 18
Living CeramicsИспания · 175
M
MainzuИспания · 201
MonopoleИспания · 80
Motto CeramicИндия · 146
Mozart TilesИндия · 35
N
Nanda TilesИспания · 30
NatucerИспания · 8
NT CeramicКитай · 230
O
OsetИспания · 2
P
ParadyzПольша · 178
PrimaveraИндия · 383
PrissmacerИспания · 62
ProConceptИспания · 22
R
RealistikИран · 233
RibesalbesИспания · 14
RocaИспания · 8
RocersaИспания · 13
RoyceРоссия · 55
S
Saloni CeramicaИспания · 11
SanchisИспания · 3
Smile TileИндия · 84
StarmosaicКитай · 36
StaroИндия · 183
Staro SlimИндия · 40
StaroSlabsИндия · 114
StaroWoodИндия · 26
Stn ceramicaИспания · 124
V
VelsaaИндия · 14
VidrepurИспания · 80
Vilar AlbaroИспания · 52
W
Westerwälder klinkerГермания · 13
Т
Тянь ШаньКиргизия · 68
Такой фабрики нет — попробуйте другое название.
Детали
Здесь плитка не легла
Страница «не найдено» тоже часть шоурума: цифры 404 выложены плиткой, а несколько красных плиток легли криво. Рядом — поиск и разделы каталога, чтобы сразу вернуться к выбору. Наведите курсор на красную плитку — она встанет на место.
Меню «Каталог»Разделы с иллюстрациями и подразделы — в одном раскрытом меню.Меню «Фабрики»Фабрики по буквам прямо в шапке: наводите на букву — видите фабрики.ПоискПанель поиска на весь экран: коллекция, фабрика или артикул.Панель покупкиКогда кнопка «В корзину» уходит из виду, внизу экрана появляется панель с ценой и покупкой.КорзинаСвоя шапка корзины и понятный состав заказа без лишних подложек.Плашка cookieДаже служебная плашка — в цветах и шрифтах сайта.
Страницы
Каждая страница — из одного материала
Не только главная и каталог: доставка, дизайн-проекты, «О компании», контакты и страницы фабрик собраны из тех же блоков — заголовок с буквицей, карточки на бумаге, тонкие линии и красные акценты. Тексты владельца остались прежними по смыслу, только легли в новую раскладку.
На телефоне — та же шапка, меню каталога и фабрик, поиск и нижняя панель: главная, каталог, поиск, избранное и корзина всегда под пальцем. Стена коллекций, галереи и словарь фабрик перестраиваются под узкий экран. Нажмите на телефон, чтобы остановить прокрутку.
ГлавнаяМенюРазделКоллекцияТоварФабрикиКорзина404
Как шла работа
Восемь шагов — одна команда
Над сайтом работала команда студии: разбор, концепция, буквица и шрифты, страницы и приёмка с проверкой каждого экрана на компьютере и телефоне. Сайт включали на работающем шоуруме — каталог, цены, корзина и адреса страниц остались на месте.
01РазборПрошли путь покупателя на компьютере и телефоне, разобрали каталог, разделы, коллекции, фабрики и тексты страниц шоурума.
02Концепция«Галерея материалов»: плитка крупно, спокойный фон слоновой кости, графит и красный логотипа, блик полированного керамогранита.
03Буква и шрифтыРукописная «А» логотипа — в буквицах заголовков; классические заголовки Playfair Display и спокойный текст Onest.
04Шапка и менюОдна шапка для компьютера и телефона, меню каталога и фабрик по буквам, поиск на весь экран, нижняя панель на телефоне.
05ГлавнаяСтена коллекций, разделы, популярные коллекции, 3D-проект, фабрики, ленты товаров, шоурум и новости — все цифры из каталога.
06Каталог и товарРазделы, коллекции, фабрики, карточка товара с панелью покупки, корзина и оформление заказа.
07СтраницыДоставка, дизайн-проекты, «О компании» с галереей, контакты с картой и страница 404, где плитка не легла.
08ПриёмкаКаждую страницу проверили на компьютере и телефоне и довели по замечаниям владельца шоурума.
Довели на приёмке
Шапка сжимается при прокрутке плавно и больше не вздрагивает у края
Буквицы с росчерками не срезаются и не наезжают на соседние буквы
Своя галерея фотографий шоурума с просмотром на весь экран
Корзина и страница товара — без лишних белых подложек и рамок
Стена коллекций на широком экране доходит до самого края
Нет рамки вокруг кнопок после нажатия мышью
Работает как раньше
Каталог и цены
Коллекции и фабрики
Корзина и заказы
Адреса страниц
Тексты страниц
ДекорAПлюс
Итог
Сайт, дорогой, как материал
Главная со стеной коллекций, шапка и меню, разделы, коллекции, фабрики, карточка товара с панелью покупки, корзина и оформление, доставка, дизайн-проекты, «О компании», контакты и страница 404 — в одном стиле и с одной буквой от руки. Плитка — крупно, выбор — понятный, заявка на 3D-проект — в одно касание.
