Ромб из логотипа
Красный ромб с волнами — главный знак сайта. Он стоит у каждого заголовка, раскрывается в интерьер на первом экране, плывёт за курсором по фактурам и становится нулём в «404».
← Портфолио
Разработка сайта · Воронеж
Сайт, раскрытый как мрамор
Керамогранит, плитка и мозаика итальянской и российской фабрик Atlas Concorde и шоурум с живыми образцами на Пушкинской, 8. Команда студии разработала для магазина сайт в развитие его логотипа — красного ромба с волнами-прожилками. Справа плита раскрывается книжным разворотом, как укладывают мрамор: прожилки сходятся в ромб, а ромб открывает страницы сайта.
atlasconcorde-vrn.ruРомб с интерьером на первом экране
- 3 953
- позиций двух фабрик в каталоге
- 53
- коллекций Atlas Concorde Италия
- 14
- коллекций Atlas Concorde Россия
- 1
- шоурум с живыми образцами в Воронеже
Задача
Дорогой материал — дорогой сайт
Фирменный магазин Atlas Concorde в Воронеже продаёт керамогранит, плитку и мозаику двух фабрик — итальянской и российской. Шоурум на Пушкинской, 8, в ТЦ «Аксиома Home», склад самовывоза — на Волгоградской, 30/1. Нужен был современный сайт, который с первого экрана передаёт уровень бренда, а выбирать в нём так же удобно, как в шоуруме с консультантом.
Прожилка вместо линейки
Волны логотипа — это прожилки камня. Они прорисовываются в подвале, бегут по первому экрану и разделяют блоки вместо привычных линий.
Камень и тёплый свет
Графит, тёплый белый камень и один красный акцент. Материал на таком фоне выглядит как в шоуруме при живом освещении.
Фирменный язык
Ромб и пять прожилок
Знак Atlas Concorde — плитка, повёрнутая на 45°, с пятью волнами внутри. Мы прочитали волны как прожилки мрамора, и из этого вырос весь язык сайта: ромб — окно и метка, прожилка — линия и движение. Наведите курсор на знак — прожилки прорисуются заново.
Графит#141312 · Первый экран, подвал, тёмные блоки
Красный Atlas#c31431 · Ромб, кнопки, один акцент на экран
Латунь#b79b70 · Тонкие линии и подписи
Кремовый камень#efe9e0 · Подложки и карточки
Тёплый белый#f7f4ef · Фон страниц
- ManropeЗаголовки, текст, цены и цифры — плотно и чётко, как шов плитки
- Cormorant GaramondОдно слово курсивом в заголовке — как подпись на образце камня
Первый экран сайта
Ромб, который впускает в интерьер
Главная открывается окном-ромбом из логотипа: внутри — интерьер с керамогранитом Atlas Concorde. Посетитель листает страницу, и ромб раскрывается на весь экран, надпись уходит, а прожилки вокруг гаснут. Здесь то же самое делает ваша прокрутка — это настоящие кадры сайта.
Главная
Главная — прогулка по шоуруму
После первого экрана главная ведёт, как консультант: материалы, две фабрики, выбор по фактуре и по помещению, новые коллекции, популярные товары, шоурум и ответы на вопросы. Цифры каталога и коллекции подтягиваются из базы сами, тексты владелец правит в админке. Выберите главу — окно прокрутится к ней.
Выбор по фактуре
Ромб плывёт за курсором
Покупатель часто начинает не с коллекции, а с настроения: мрамор, бетон, дерево. На главной фактуры стоят списком, а за курсором плывёт ромб-превью с интерьером. Попробуйте здесь — проведите курсором по списку или нажмите на строку на телефоне. Интерьеры в ромбах — иллюстрации, нарисованные для сайта в одном стиле.
Две фабрики — одна эстетика
Италия и Россия
У магазина две фабрики одного бренда. На главной они стоят двумя панелями: наведите курсор — панель раскрывается, показывает число позиций и коллекций и ведёт в подборки керамогранита, плитки и мозаики своей фабрики. Здесь панели живые — попробуйте. Фоны панелей — иллюстрации, нарисованные для сайта.
Atlas Concorde Италия
2 788 позиций · 53 коллекции
Флагманские коллекции итальянской фабрики: крупные форматы, книжная раскладка мрамора, сложные поверхности и дизайнерские серии.
Atlas Concorde Россия
1 165 позиций · 14 коллекций
Та же эстетика бренда с российского производства: практичные решения для дома и коммерческих объектов, понятные сроки и комплектация.
Шапка и окна
Весь каталог — из шапки
На главной шапка прозрачная поверх тёмного первого экрана, на остальных страницах — светлая. «Каталог» раскрывается мегаменю с плитками разделов, поиск подсказывает при наборе, корзина выезжает сбоку, окна заявок оформлены в стиле сайта. Нажмите на снимок, чтобы увеличить.
Путь покупателя
От каталога — до плиты
Каталог, раздел, подборка, коллекция, товар — пять шагов, связанных одной прожилкой. Картинка раздела стоит ромбом у заголовка, фильтры — светлыми «чипсами», карточки товаров одной высоты, а в товаре количество считается сразу в нескольких единицах. Наведите курсор на окно — страница пролистается.
Коллекции
Новое в шоуруме
Свежие коллекции на главной идут лентой, которую тянут мышью или пальцем, с полосой прогресса внизу. Лента собирается из каталога сама — по дате появления коллекции. Здесь те же коллекции и фото из каталога магазина: потяните ленту.
Италия
Arkshade
1 позиция
Италия
Blaze
1 позиция
Италия
Lims
50 позиций
Италия
Марвел 3Д / Marvel 3D
15 позиций
Италия
Энтайс / Entice
20 позиций
Италия
Вест / Vest
9 позиций
Италия
План / Plan
62 позиции
Россия
Cliff
2 позиции
Италия
3Д Волл Карве / 3D Wall Carve
18 позиций
Италия
Апломб / Aplomb
28 позиций
Россия
Forte dei Marmi Rock
122 позиции
Италия
Boost Natural Pro
75 позиций
Страницы
Каждая страница — из того же камня
Фабрика, «О компании», контакты, доставка, новости и корзина собраны из тех же деталей: заголовок с курсивным словом, ромб с картинкой раздела у заголовка, тёплый белый фон и один красный акцент. Адреса, телефоны и часы работы берутся из настроек сайта — их владелец меняет в одном месте.
Детали
Эту плитку ещё не уложили
Страница «не найдено» — тёмная стена из плиток, которые вспыхивают за курсором, а ноль в «404» — ромб логотипа. Рядом поиск и ссылки в каталог, чтобы сразу вернуться к выбору. Проведите курсором по этому блоку — плитки загораются так же, как на сайте; на телефоне они вспыхивают сами.
44
На телефоне
Шоурум — в кармане
На телефоне ромб первого экрана раскрывается так же, меню выезжает сбоку с разделами, фактурами и телефонами магазина, а поиск, каталог и корзина всегда под пальцем. Карточки и характеристики — в одну колонку, ленты листаются пальцем. Нажмите на телефон, чтобы остановить прокрутку.
Как шла работа
Восемь шагов — одна команда
Над сайтом работала команда студии: разбор, концепция от логотипа, система деталей, страницы и приёмка с проверкой каждого экрана на компьютере и телефоне. Новый дизайн включали этап за этапом на работающем магазине — каталог, цены, корзина и адреса страниц остались на месте.
- 01РазборПрошли путь покупателя на компьютере и телефоне: от главной и каталога до коллекции, товара, корзины и страниц магазина.
- 02КонцепцияСайт вырос из логотипа: красный ромб и волны-прожилки, графит и тёплый белый камень, как в шоуруме.
- 03СистемаРомб у заголовков, прожилки вместо линеек, шрифты Manrope и Cormorant Garamond, один красный акцент на экран.
- 04ГлавнаяРомб с интерьером, бегущая строка коллекций, фабрики, фактуры, лента коллекций, помещения, шоурум и вопросы.
- 05Шапка и подвалМегаменю с плитками разделов, поиск, боковое меню на телефоне, тёмный подвал с прорисовывающимися волнами.
- 06Каталог и товарРазделы, подборки, коллекции, фабрики, карточка товара, корзина и оформление заказа — в одной системе.
- 07Страницы«О компании», контакты с картой, доставка, новости, статьи, поиск и страница 404 с сеткой плиток.
- 08ПриёмкаКаждую страницу проверили на компьютере и телефоне, на широких невысоких окнах — и довели по замечаниям владельца.
Довели на приёмке
- Заголовок первого экрана не уходит под логотип на широких невысоких окнах
- Боковая корзина и её затемнение — поверх шапки
- Поля количества в нескольких единицах одной ширины, сумма строкой «Итого»
- Карточки товаров одной высоты, фото — в квадратном поле
- На телефоне значки «сравнить» и «избранное» не наезжают на цену
- Окно согласия на cookie на компьютере — справа, не закрывает кнопки
Работает как раньше
- Каталог и цены
- Коллекции и фабрики
- Корзина и заказы
- Адреса страниц
- Тексты владельца
Итог
Сайт, сложенный из одного знака
Главная с ромбом, который раскрывается в интерьер, мегаменю, каталог, подборки, коллекции, две фабрики, карточка товара, корзина и оформление, «О компании», контакты, доставка, новости, поиск и страница 404 — в одной системе из ромба и прожилок логотипа Atlas Concorde. Сайт выглядит так же дорого, как материал, который он продаёт.