Разработка сайта · оптовые продажи дверной фурнитуры
Сайт, на котором металл ловит свет
Vantage — оптовые продажи дверной фурнитуры: ручки, накладки, замки, петли и раздвижные системы со складов в Химках и Екатеринбурге для магазинов, строителей и производителей дверей. Команда студии разработала для компании сайт в своём стиле — «Латунь в темноте»: тёмный зал, луч света, латунь с бегущим бликом и золотой росчерк логотипа.
Ведите курсором — луч выхватит страницу из темноты
Задача
Дорогой сайт для оптовика — в своём стиле
Компании нужен был современный сайт, который выглядит так же дорого, как её фурнитура, удивляет с первого экрана и при этом остаётся удобным оптовым магазином: сотни позиций, восемнадцать разделов, корзина и понятные условия для партнёров. Стиль не брали из шаблонов — его подсказали сами ручки: полированная латунь, сатин-золото, матовый никель, чёрный с патиной — и золотой каллиграфический росчерк логотипа.
- 694
- позиции в каталоге
- 18
- разделов фурнитуры
- 2
- склада: Химки и Екатеринбург
- 14
- дней отсрочки партнёрам
-
I
Металл ловит свет
Тёмный зал, а в нём — луч, латунь с бегущим бликом и фото фурнитуры, которые хочется рассмотреть. Ручка на сайте выглядит так же дорого, как в руке.
-
II
Стиль — из логотипа
Золотой каллиграфический росчерк Vantage прописывается под заголовками, а латунная розетка дверной ручки стала знаком внутренних страниц.
-
III
Оптовику — без лишних шагов
Каталог из 18 разделов, поиск, корзина и условия сотрудничества под рукой; на телефоне — нижняя панель и меню-шторка.
Материал
Палитра из металла
Цвета сайта — это покрытия самой фурнитуры. Пять образцов металла ловят блик под курсором, как ручка на свету; основа — тёплый чёрный и слоновая кость, акцент — латунь.
Cormorant Garamond
Заголовки; курсив — золотые акценты: «пять настроений»Manrope
Текст, цены, кнопки и подписи — чётко и спокойноРосчерк логотипа — прописывается под заголовками и в подвалеВитрина покрытий
Один дизайн — пять настроений
Главная показывает, что одну модель ручки можно взять в нескольких цветах: выберите покрытие — луч переходит на ручку этого цвета, а ниже появляются товары из каталога. Поверните розетку и посмотрите, как это работает на сайте.
Главная
Сверху вниз — под лучом
- Первый экранТёмная дверь с латунной ручкой: луч света идёт за курсором, в воздухе висят пылинки, цифры каталога досчитываются.
- Пять настроенийВитрина покрытий: луч выхватывает ручку выбранного цвета, ниже — товары этого покрытия из каталога.
- Каталог карточкамиВосемнадцать разделов с фото фурнитуры, номерами и числом позиций; по карточке пробегает блик.
- Бегущая лентаМатериалы и покрытия: сплав ЦАМ, алюминий, нержавеющая сталь, латунь — и пять цветов.
- Популярные и новыеЛенты товаров с ценой за штуку и кнопкой «В корзину».
- Условия для оптовиковОтсрочка, доставка до склада или ТК, минимальный заказ и счёт с НДС — четыре карточки на тёмном.
- О компанииТекст главной рядом с золотым росчерком Vantage.
- Два складаХимки и Екатеринбург на одной карте, телефоны, часы и маршрут.
- ПодвалМеню каталога и компании, а внизу — крупный росчерк Vantage, по которому идёт блик.
Каталог
От раздела — до ручки
Фурнитура снята на белом, поэтому каталог светлый: фото вписаны целиком, без обрезки. Тёмные шапки разделов держат стиль сайта — фото раздела лежит в белом «колодце» на латунной розетке.
-
01КаталогВсе разделы фурнитуры с фото и числом позиций.
-
02РазделТёмная шапка: фото раздела в белом «колодце» на латунной розетке, ниже фильтры и товары.
-
03ТоварФото, цена за штуку, покрытие и характеристики; на телефоне — панель покупки внизу.
Оптовикам
Условия — на виду
Оптовому покупателю важно сразу понять, на каких условиях работать. Поэтому главное собрано на главной четырьмя короткими карточками, а на страницах «Сотрудничество» и «Доставка» условия вынесены прямо в шапку.
отсрочки платежа для партнёров
минимальный заказ
доставка по Москве до вашего склада или ТК
счёт с НДС или наличные
Подвал
Два склада — одна карта
Склады в Химках и Екатеринбурге показаны на одной карте с телефонами, часами и маршрутом. А в самом низу каждой страницы — крупный золотой росчерк Vantage, по которому идёт блик: им сайт прощается с посетителем.
-
ХимкиМолодёжная улица, 70+7 (495) 970-20-03
-
ЕкатеринбургВосточная улица, 11В+7 (343) 378-66-86
Росчерк Vantage внизу каждой страницы сайта — по нему идёт блик. Здесь он прописывается, пока вы листаете.
Страницы
Латунная розетка — знак страниц
У внутренних страниц своя тёмная шапка: заголовок, прописанный росчерк и вращающаяся латунная розетка дверной ручки — кольца крутятся навстречу друг другу. Потяните ленту или прокрутите её.
Страница 404
Эта дверь никуда не ведёт
Даже ошибку адреса мы сделали частью истории: на странице 404 — закрытая дверь с латунной ручкой и вежливое предложение вернуться в каталог. Нажмите на дверь, чтобы открыть её.
На телефоне
Латунь — в кармане
Оптовику удобно заказать и с телефона — прямо со склада или объекта. Меню открывается шторкой с разделами, складами и телефонами, внизу всегда под пальцем панель: главная, каталог, поиск, избранное и корзина. Нажмите на телефон, чтобы остановить прокрутку.
Как шла работа
Восемь шагов — одна команда
Над сайтом работала команда студии: разбор, концепция, фирменный язык, главная, шапка и подвал, каталог, страницы и проверка каждого экрана на компьютере и телефоне. Новый вид включили на работающем магазине — каталог, цены, корзина и адреса страниц остались на месте.
- 01РазборПрошли путь оптового покупателя на компьютере и телефоне: каталог, раздел, товар, корзина, условия и контакты.
- 02КонцепцияНашли стиль в самом продукте: полированный металл фурнитуры и золотой росчерк логотипа — так появилась «Латунь в темноте».
- 03Фирменный языкТёплый чёрный и слоновая кость, латунь с бликом, шрифты Cormorant Garamond и Manrope, росчерк и розетка ручки.
- 04ГлавнаяДверь с лучом света, витрина пяти покрытий, каталог карточками, лента материалов, товары, условия для оптовиков.
- 05Шапка и подвалМеню каталога с фото, поиск, телефон и корзина; два склада на одной карте и крупный росчерк Vantage.
- 06КаталогШапки разделов с фото в латунной оправе, списки и карточки товаров, панель покупки на телефоне.
- 07СтраницыСотрудничество, доставка, контакты, о компании, новости, корзина, окна, cookie и страница 404.
- 08ПроверкаКаждую страницу проверили на компьютере и телефоне: вид, анимация, ошибки и рамка фокуса для клавиатуры.
Работает как раньше
- Каталог и цены
- Корзина и заказы
- Адреса страниц
- Тексты разделов
- Настройки магазина
Итог
Фурнитура, которую видно в темноте
Главная с лучом света и витриной покрытий, каталог из восемнадцати разделов, товары, условия для оптовиков, сотрудничество, доставка, контакты с двумя складами, о компании, новости, корзина, окна, cookie и страница 404 с дверью, которая никуда не ведёт, — всё в одном стиле, выросшем из металла фурнитуры и росчерка логотипа.