Сайт и логотип мехового салона «Диамант»

Задача: Показать шубы так, чтобы захотелось прийти в салон

Сделав первые скетчи сайта, мы поняли, что нужно обновить логотип. Старый логотип — бриллиант — однозначно ассоциировался с ювелирным салоном. Полностью отказываться от бриллиантика в логотипе нельзя из-за названия «Диамант». К бриллианту мы добавили зимнего настроения и уютной пушистости шубок — снежинка с бриллиантиком внутри.

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

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

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

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

На главной странице нет ничего лишнего: немного информации о салоне, фотографии популярных моделей шуб и текущая акция.

vdiamant.ru

Уникальным сайт делает его верстка. Он тянется от разрешения планшетных компьютеров — 1024px, до огромных десктопов — 1920px. Казалось бы, ничего удивительного. Но как он тянется? Тянется только содержимое — огромные фотографии шуб становятся еще больше. Отступы между блоками сохраняются. Не появляется пустое место на больших экранах.

Отлично смотрится на любом экране

Каталог товаров с плавной подгрузкой. Сначала загружается 9 товаров. Затем пользователь листает страницу вниз, и подгружается следующая группа из 9 товаров. Чтобы загрузка была плавной, для каждого элемента каталога вычисляется его размер — ширина и высота. Отображается анимированный индикатор загрузки, а название и цена выводятся сразу же. Пользователь мог бы ждать только загрузки фотографий. Но поскольку все элементы подгружаются автоматически и до того, как пользователь пролистает страницу до самого конца, то все эти действия происходят незаметно. Создается эффект бесконечной страницы.

vdiamant.ru/women

Бесконечная страница — это хорошо, но как прислать ссылку на середину страницы? Как вернуться в нужное место каталога, нажав кнопку «Назад» в браузере? Все это решается с помощью виртуальных страниц. При листании страницы вниз, к ее адресу добавляется виртуальный номер. При загрузке страницы эта информация обрабатывается, и каталог пролистывается до нужного номера виртуальной страницы.

Страница просмотра товара каталога. Основная фотография товара настолько большая, что можно разглядеть даже мельчайший волос шубки.

Помимо всех вышеперечисленных бонусов мы сделали темную схему сайта. Пользователь может в любой момент включить ее. Тема запоминается на компьютере пользователя. И когда он повторно зайдет на сайт, то увидит уже выбранную им цветовую схему — не надо постоянно переключать на темную версию, если она так полюбилась.

Всего было прорисовано 20 страниц.