Сайт ювелирного салона Ambassad

Cоздать сайт, который будет передавать эстетику бренда, подчеркивать статус и уникальность. Ориентированный на клиентов.

Идея: Шкатулка, в которую мы собираем самые красивые украшения.

Мы отправились в бутик, чтобы лучше понять аудиторию и продукт. И своими глазами увидели салон, примерили ювелирные товары. 

Дизайн 

Задача была не из простых. Нам удалось достичь взаимопонимания и отобразить задумку в полной мере. В итоге концепт и прототип приняли с первого раза. 

— Бархатная шкатулка с элементами золота. В таких хранят ценное и дорогое сердцу. 

— Выразительные шрифты, гармонично сочетающиеся со стилистикой и подчеркивающие ключевые раздел.

— Контрастные фотографии показывают красоту и статусность изделий. 

— Запоминающиеся эскизы передают историю бренда.

— Hover - длинный и вытянутый, что побуждает покупателя нажать и рассмотреть изделие больше. 

— Лупа - в детальной карточке товара при наведении на украшение появляется лупа, которая позволяет рассмотреть ближе каждую деталь. Для того чтобы реализовать эту идею, в админ-панель мы дополнительно добавляем фотографии очень высокого разрешения.

Нам предоставили качественный контент, который помог создать визуал. Фото помещения. Небольшие и комфортные диваны, полки с книгами и статуэтками. Мы в приятной домашней атмосфере. Не хочется никуда торопиться, взять вкусный напиток и в спокойном режиме осматриваться. 

Разработка

Изначально на сайте планировалось добавлять видео и фотографии высокого разрешения, а также много анимаций. С обычной HTML-версткой лендинг загружался бы очень долго. Потому было принято решение для фронтенд-разработки использовать библиотеку React.JS, с упором на обеспечение высокой скорости загрузки сайта. Для интеграции админ-панели с React.js было разработано API.

Выбрали October CMS. С этой системой сотрудникам AMBASSAD будет удобно наполнять сайт. В карточке товара быстро меняется: название, категории, дизайнер, страна и дата добавления. Можно сортировать, убирать и возвращать камни. То есть очень гибкая настройка для наполнения каталога. Кроме того, CMS не имеет репутационных проблем с безопасностью.

Спроектировали гибкую сетку карточек товаров. На выбор заказчика:: широкоформатная, высокая или обычная. Захотели выделить что-то конкретное, поставили по всей ширине экрана изображение. 

Нюансы

Браузер Safari не любит видео. Поэтому пришлось потратить много времени на устранение багов. В итоге все отлично работает. WebP формат имеет маленький вес, но не поддерживается техникой Apple. Поэтому использовали разные форматы фотографий. Таким образом видим картинки высокого разрешения на разных браузерах.

Привлекательный и понятный сайт для аудитории. Удобный и быстрый для контент-менеджеров компании. Реализовали идею со шкатулкой, отобразили оригинальность бренда. 

Разделы

Меню: 

Ваш выбор - каталог. Тут тоже подчеркнули эксклюзивность бутика. Сделали меню - слайдер. Фото с изделиями выезжают. В превью товара: название, имя дизайнера, страна производства, крупным фото украшения, внизу перечислены материалы. 

О нас. История компании - ее гордость. Это ощущается при входе на страницу. Миссию AMBASSAD видно в каждой детали. Не только самих товаров, но и внешнего вида салона. Учли каждую деталь. 

На красивый элемент распадается карточка из 3-х фото с девушками с украшениями. Идет текст про изделия, дизайнеров. Тем временем, эскиз кольца продолжает прорисовываться. 

Контакты

А тут мы видим эскиз гостиницы, в которой располагается бутик. Для удобства покупателей есть телефон для записи. Клиенты ценят свое время, им важно сделать выбор в комфорте. Telegram, в котором можно тоже ознакомиться с ассортиментом и почитать интересные факты.

 AMBASSAD

Pop-up- всплывающее окно. Мы видим красивое видео с приятной музыкой, на котором: кольца, часы и серьги. 

  Как пройти? 

Мы ориентировались на целевую аудиторию. Поэтому в разделе путь сразу по гостинице. В отображении на Яндекс картах нет необходимости. 

 Шкатулка

Эксклюзивный вариант каталога. Скролл вниз, и мы оказываемся шкатулке товаров. Внутри которой и находится весь ассортимент.  

Далее мы продолжаем сотрудничество и планируем второй спринт. В скором времени можно будет онлайн примерять кольца, серьги, часы.