Создание интернет-магазина электроники CoolKeen
О проекте
Для CoolKeen студия Quadro Design создала интернет-магазин электроники, гаджетов и аксессуаров на Webasyst Shop-Script. Проект coolkeen.ru разработан с нуля: индивидуальный дизайн, адаптивная вёрстка, интеграция платформы и оформление дополнительных функций. В каталоге макетов представлены медиаплееры, акустика, гаджеты, чехлы и аксессуары, поэтому навигация должна была объединить несколько разных товарных направлений.
Адаптивная тема с каталогом и публикациями
Дизайн охватил пять типов страниц: главную, категорию, карточку товара, корзину и оформление заказа. Диапазон отображения составил от 320 до 1920 пикселей. Макеты проработали на шести разрешениях: 320 пикселей для телефона, 768 и 1024 для планшетов, 1366, 1600 и 1920 для ноутбуков и стационарных компьютеров.
Главная оформлена на светлом фоне с чёрными текстовыми элементами, красными акцентами и голубыми ссылками. Верхний слайдер соседствует с изображениями товаров. Ниже находятся товарные подборки, обзоры и видеообзоры; в отдельной колонке показаны новости и отзывы. Такая структура объединяет витрину и содержательные материалы, сохраняя самостоятельное место для каждого типа информации.
Мобильная композиция выстраивает блоки в одну колонку, а меню раскрывается отдельно. В планшетной версии расположение секций перераспределено под промежуточную ширину. Общие элементы — логотип, поиск, корзина, заголовки и карточки — сохраняют узнаваемое оформление при смене устройства. Длинная главная показывает несколько направлений каталога и публикаций в рамках одного визуального стиля.
Вёрстка и функциональность Webasyst
Вёрстку выполнили на HTML5 и CSS3 с отображением в Opera, Mozilla Firefox, Internet Explorer, Chrome, Safari и Яндекс Браузере, а также на iPad, iPhone и устройствах Android. Вёрстку интегрировали в полный функционал Webasyst: разделы «Магазин», «Сайт» и «Блог» и все бесплатные плагины платформы.
13 дополнительных возможностей магазина
В программную часть вошли интеграция и оформление следующих плагинов и функций:
- Слайдер для главной страницы.
- Отзывы о магазине.
- Покупка в один клик.
- Определение местоположения пользователя.
- Обратный звонок.
- Фотографии категорий.
- Бренды.
- Совместная покупка.
- Предзаказ товара.
- Скидки на определённый товар.
- Опрос.
- Категории с различными фонами.
- Оптовая покупка.
Каждую из предусмотренных возможностей включили в общий интерфейс. Слайдер и фотографии категорий относятся к визуальной подаче ассортимента; бренды дополняют структуру каталога; отзывы, опрос и обратный звонок оформлены как отдельные способы взаимодействия. Предзаказ, совместная и оптовая покупка, товарные скидки и покупка в один клик отражают разные сценарии работы магазина, заявленные в проекте.
Кейс CoolKeen показывает разработку магазина со значительным объёмом дополнительных функций. Торговая часть, блог и интерфейсы плагинов объединены адаптивной темой, а их оформление согласовано на основных типах страниц. В результате создан индивидуальный сайт на Shop-Script, в котором каталог электроники и публикации используют общую навигацию и визуальную систему.
Другие проекты и разработка сайта
Посмотрите разработку магазина запчастей для техники Glavmag и разработку магазина автотюнинга CARLIGHT в нашем портфолио сайтов.
Для нового проекта можно заказать создание интернет-магазина на Webasyst, обсудить программирование и доработки Shop-Script и связаться с Quadro Design.