Перед началом работы у заказчика уже был сайт, но он не устраивал с технической и визуальной точки зрения. Мы начали работу с написания рекомендаций по исправлению текущего сайта и в процессе было принято решение создать новый.
Задача
- Обновить дизайн сайта, сделав его более современным, но при этом сохранить цвета и стиль логотипа.
- Сайт должен быть адаптивным и хорошо выглядеть на мобильных телефонах.
- Разработать удобную структуру каталога товаров.
Основной функционал сайта - каталог товаров. Было важно иметь настраиваемый фильтр для каждой категории продукции и неограниченную вложенность категорий. В магазине Верона 10 категорий товаров, поэтому нужно предусмотреть возможность разного представления страниц категорий.
Реализация
Оформление сайта создавали ориентируясь на современные тенденции, оригинальный стиль Вероны и удобство пользователей.
Для поддержания стиля логотипа мы сделали золотые иконки и текстурный фон. А блоки с информацией расположили по уже привычной пользователям интернет-магазинов схеме, чтобы заходя на сайт никто не терялся и сразу мог найти нужный раздел.
В шапке сайта размещена вся нужная информация: ссылки на страницы о компании, поиск товаров, телефон и график работы. В главном меню выделили самые важные разделы.
На первом экране главной страницы разместили преимущества магазина, последние акции и список категорий товаров с выпадающими списками для быстрого перехода в нужный раздел.
Каталог товаров
Параметры фильтра в каждой категории товаров настраиваются через систему управления сайтом. В списке товаров добавлены кнопки для быстрой навигации по распростанённым запросам покупателей. Настройки группировки и вида товаров сохраняются при переходе между страницами категорий. Каждому товару можно установить акционную цену или пометить как новинку до определенной даты.
Для товарной страницы предусмотрели разные варианты наполнения информацией. В зависимости от того, есть ли у товара варианты исполнения, сопутствующие товары, видеообзоры или комплект, нужные блоки появляются на странице. Под картинкой размещена навигация по странице, чтоб пользователю было удобно быстро переключиться к нужным данным. Навигация прилипает к верху экрана при пролистывании.
После описания текущего товара добавили блоки с сопутствующими товарами и товарами выбранного бренда. Так посетителю не нужно искать сочетающиеся позиции по всему каталогу, а удобно перейти сразу к их просмотру.
Сравнение товаров
Для выбора товаров не нужно открывать множество вкладок и внимательно вчитываться в характеристики, чтобы найти, чем же они отличаются. В списке товаров, на товарной странице и в поиске сразу можно нажать кнопку «Сравнить».
В разделе сравнения товары сортируются по категориям, ведь нет смысла сравнивать характеристики зеркала и смесителя. Тут же сразу можно положить понравившийся товар в корзину или добавить еще товары в сравнение.
Дизайн интерьера
Магазин предоставляет услуги дизайна интерьеров, поэтому мы выделили его в отдельный раздел.
Здесь же мы разместили примеры реализованных проектов. Так посетители сайта могут визуализировать результаты своего собственного ремонта. Примеры показывают как товары магазина будут смотреться в реальных условиях и как их красиво сочетать.
Фото каждого проекта можно посмотреть на отдельной странице. Там предусмотрено описание используемых материалов и комментарии пользователей.
Мобильная версия
Для сайта сделали адаптивный дизайн, который подстраивается под размер экрана пользователя: мобильный телефон, планшет или компьютер.
На главной странице пользователям с мобильного сразу видны категории товаров.
Результат
По окончанию разработки сайт полностью отвечает поставленным задачам. Посетители могут ознакомиться с ассортиментом магазина, заказать товары или получить консультацию. Страницы оптимизированы для отображения на разных устройствах. Мы добавили на сайт микроразметку и теги для поисковых систем.
На создании сайта часто работа над ним не заканчивается: нужно добавлять и обновлять товары, улучшать фильтры на основании поведения посетителей сайта. Поэтому с магазином Верона мы продолжаем сотрудничество, ведь нет предела совершенству!