Создание адаптивного интернет-магазина часов SwissWatch
О проекте
SwissWatch — проект интернет-магазина фирменных часов, который мы создали на Webasyst Shop-Script. Работа включала адаптивный дизайн, вёрстку, интеграцию, перенос товарных данных и подключение дополнительных компонентов. Для каталога с большим количеством брендов мы подготовили оформление, в котором фотографии часов, названия моделей и навигация по производителям занимают центральное место.
Адаптивный дизайн пяти основных страниц
Мы разработали дизайн главной страницы, категории, карточки товара, корзины и оформления заказа. Интерфейс проектировался для ширины от 320 до 1920 пикселей. В галерее представлены варианты для телефона, планшета и настольного экрана: на широком экране каталог раскрывается в боковой колонке, а на небольшом меню и инструменты покупки собраны в компактную шапку. Сетка товаров перестраивается под доступную ширину.
Светлый фон и красные акценты поддерживают фотографии часов и выделяют действия пользователя. Главная страница объединяет большой баннер, подборки лучших, новых и популярных моделей, новости, отзывы и информацию о магазине. Список брендов помогает начать просмотр с производителя, а разделение товарных подборок создаёт несколько способов знакомства с ассортиментом.
Вёрстка и интеграция приложений Webasyst
Вёрстку выполнили с использованием HTML5 и CSS3. В состав работ входило согласование отображения в Opera, Mozilla Firefox, Internet Explorer, Chrome, Safari и Яндекс Браузере, а также на iPad, iPhone и устройствах Android. Подготовленные страницы интегрировали с функциональностью Shop-Script, сохранив общую стилистику каталога и оформления покупки.
Интеграция охватывала разделы магазина, сайта, блога и фото, а также все бесплатные плагины Webasyst. Мы перенесли товары на двух языках. Это отдельная часть реализации: товарные данные были включены в новую витрину вместе с её оформлением и структурой страниц.
Слайдер, бренды и дополнительные компоненты
В проекте установили и оформили приложение слайдера, плагин брендов с картинками, приложение опросов, плагин отзывов и плагин изображений категорий. Их интерфейсы включили в дизайн магазина. Слайдер предназначен для визуальных презентаций, блоки брендов и категорий помогают ориентироваться в ассортименте, а отзывы и опросы дополняют информацию о товарах и магазине.
На представленных экранах также оформлены информационные блоки доставки и гарантий, статьи и подписка на новости. Эти материалы размещены рядом с каталогом и поддерживают переход от изучения моделей к условиям покупки. На мобильном варианте сохранены доступ к поиску, каталогу и корзине, а содержимое длинной главной страницы располагается последовательно.
Результат разработки
Кейс SwissWatch объединяет создание интерфейса и его техническую реализацию: пять основных страниц, адаптивную вёрстку, интеграцию приложений Webasyst, перенос товаров на двух языках и оформление перечисленных модулей. Это пример интернет-магазина часов, в котором каталог производителей, товарные подборки и информационные разделы подчинены общей структуре витрины.
Другие проекты и разработка сайта
Посмотрите разработку магазина часов Clockwerk и разработку магазина часов VipTime в нашем портфолио сайтов.
Для нового проекта можно заказать создание интернет-магазина на Webasyst, обсудить программирование и доработки Shop-Script и связаться с Quadro Design.