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