Задача: Создать шаблон интернет-магазина, с которым владельцы малого и среднего бизнеса смогут быстро запустить онлайн-торговлю разными товарами — от газонокосилок и автомобильных шин до косметики и детских товаров.

Решение: Мы разработали Шопер — универсальный шаблон для интернет-торговли с адаптивной версткой.

Шаблон отлично выглядит и на десктопе и на мобильных устройствах, а 4 цветовые схемы подходят для разных тем: косметики, подарков, одежды, зоотоваров, электроники и других. Каждая цветовая схема — цельная, яркая, индивидуальная и выглядит как уникальный дизайн.

В Шопер есть все, может понадобиться для интернет-магазина: 11 страниц, продуманные фильтры для сортировки товаров, 3 варианта каталога, шаблоны писем для оповещения клиентов.




Главная страница представляет интернет магазин, показывает ассортимент и разные категории товара: хиты, акции, скидки. Посетители с разными интересами найдут на главной раздел, который им подойдет.

kosmet.by
Промо-блок с баннерами приглашает посетителя изучить интересные и популярные товары и знакомит с акциями.
Хиты продаж показывают посетителю самые популярные товары на сайте.
Блок с брендами пригодиться посетителям, которые предпочитают или ищут определенную марку.
Блок Акции показывает акционные товары и привлекает пользователя ценами.

В Шопер 3 варианта отображения каталога. Каждый подходит под разные типы товаров. Выберите один из них, тот который наилучшим образом представит ваши товары, и установите его в каталоге как вариант по умолчанию. Товары сортируются по разным параметрам: по популярности, по цене, сначала новинки, хиты или товары на акции.

technoset.by
Карточки товара информативны: в каждой показывается название товара, производитель, количество отзывов, обычная цена, или старая и новая цена, размер скидки, изображение товара. Если у товара несколько фотографий, то их можно посмотреть прямо в карточке.
Разнообразные элементы: чек-боксы, радиокнопки, выпадающие списки, слайдеры, инпуты и комбобоксы позволяют создать фильтры для товаров даже с очень большим количеством характеристик.

На этой странице содержится полная информация о товаре:
название, производитель, цена, скидка, описание и характеристики.

cosmet.by
Блок с фотографиями товара замирает слева и при прокрутке описания.
Cразу за описанием собраны отзывы о товаре и форма для нового отзыва.
Внизу страницы показываем посетителю похожие или дополняющие товары.

В корзине вся информация нужная для заказ: данные товаров и форма с данными покупателя.

technoset.by
Товары выводятся карточками: изображение товара, название, марка, короткое описание, цена, количество — все необходимое для того чтобы определиться с заказом.
В форме заказа подводиться итог всей покупки: сколько товаров, на какую сумму, сколько сэкономлено. Форма запоминает ранее введенные данные.

На персональной странице собраны все данные пользователя: имя, номер телефона, почта и пароль. И здесь же пользователь может их изменить.

technoset.by
Персональная скидка — яркая большая плашка привлекает внимание.
Последние заказы пользователя. Все данные собраны в карточки: номер заказа, когда его приняли, его статус, количество товаров в заказе, сумма заказа, оплачен он или нет, трек-код для заказов отправленных почтой.

Шаблон полностью адаптивен, но чтобы обеспечить максимальное удобство пользователей была разработана специальная мобильная версия сайта. Она учитывает особенности навигации и использования сайта с мобильных устройств.

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

Готовим страницу проекта для портфолио, поднимаем архив, смотрим сколько у дизайнера скопилось материалов по работе — десятки страниц пометок, эскизов, прототипов и 5,31 ГБ макетов.

Наша компания не раз сталкивалась с клиентами, которые хотят запустить онлайн-торговлю, но у них возникает проблема: уникальный дизайн стоит дорого, у шаблонов из интернета часто плохой дизайн или с ними неудобно работать.

Чтобы помочь таким клиентам, мы решили разработать универсальный интернет-магазин, который будет подходить разным магазинам с самыми разными товарами, но при этом будет красивым, функциональным и адаптивным.


Формулирем задачи:

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

Создать дизайн, который будет красиво и ярко показывать товары. Функционал — удобный, понятный и ненавязчивый.

Сайт должен быть адаптивным.

Разработать мобильную версию для пользователей, которые покупают товары с мобильных устройств.

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


Дизайнер идет изучать интернет-магазины:

Дизайнер решает, что для такого интернет-магазина подойдет современный дизайн с обилием белого цвета. Индивидуальность интернет-магазинам придадут разные цветовые схемы и разный контент. Белый цвет выгодно подчеркнет и выделит сами товары.

Первый подход от другого дизайнера:

kosmet.by

Менеджер проекта просит обратить внимание на верхнее меню: нужно сделать его так, чтобы в нем могло поместиться любое количество пунктов, всего в меню будет 3 уровня вложенности.



Дизайнер пробует разные варианты:

Приходим к варианту, с прокручивающейся строкой и выпадающим меню. Так можно разместить сколько угодно пунктов, меню компактное, а разделы сайта не скрываются за безликим названием «Каталог». Чтобы пользователю было понятно сколько в меню пунктов, добавили внизу скроллбар.

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

Дизайнер идет думать и предлагает решение:

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

Решаем какие блоки еще будут на главной странице. Главная должна выгодно представлять разные категории товаров, знакомить пользователя с каталогом, увлекать и мотивировать совершить покупку. Решаем демонстрировать на главной самое интересное на сайте: выгодные предложения, новые разделы, супер-акции, хиты продаж, акции и новинки.

Хиты продаж— самые классные и самые популярные товары на сайте. Разрабатываем для них специальный блок.

Во время тестирования готовой верстки решаем упростить поведение блока с хитами, сделать его более понятным:

Решаем добавить на главную блок с брендами — он будет полезен пользователям, которые интересуются товарами определенных марок или любят просматривать все товары какого-то бренда.

Для краткости на главной странице покажем самые популярные или новые на сайте бренды, в конце — ссылку на страницу со со всеми брендами.

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

Решаем как должен выглядеть каталог. Шопер будут использовать для разных товаров, поэтому в каталоге нужны разные режимы просмотра: карточками, карточки с описанием и очень компактные карточки-строки.

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

На страница каталога,чтобы пользователь не потерялся, прикрепляем к заголовку «хлебные крошки». Так пользователь видит, где именно он находиться.

Чтобы облегчить сортировку товаров создаем систему фильтров.

Делим фильтры на две части: горизонтальная строка с популярными способами сортировки,а в левой колонке — фасетка.

Смотрим какие элементы сортировки бывают, как они работают, как их используют. Продумываем и создаем фильтры, которые подойдут для сортировки очень разных товаров.

Чек-боксы

Используйте их для выбора желаемого параметра: марки, даты выхода, типа корпуса, серии, материала, формы, страны и других. Вариантов параметра может быть очень много: выводите в начале самые популярные, а остальные покажите в специальном поп-апе.

Вывод результатов

Этот элемент появляется при выборе параметров в фильтрах и сразу показывает, сколько вариантов товара с заданными параметрами найдено. При клике на него на странице выводятся подходящие товары. в специальном поп-апе.

Слайдер

Используйте его для диапазонов: цены от и до, объема, веса и т. п. Изменение параметров может быть непрерывным, а может перескакивать с одного предустановленного значения к другому.

Инпут

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

Радиокнопки

Используйте их для параметров, у которых может быть только 2 значения — наличие или отсутствие какой-то детали: поддержка карты памяти, цельный корпус, сенсорный экран, оптический привод и т. п.

Двойной комбобокс

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

Комбобокс

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

Выбор цвета и размера

Наглядно показывают цвет и размер. Вариантов цвета и размера может быть сколько угодно: сначала показываются самые популярные, дополнительные цвета скрываются.

Страница товара должна давать полную информацию. Чтобы пользователь всегда видел, товар закрепляем его изображение.

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

Для товаров с несолькими вариантами, которые отличаются друг от друга по одному параметру, например, по цвету, создаем блок с вариантами товара. Так все варианты удобно собираютсяр на 1 странице.

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

Товары показываем карточками.

Во втором блоке показываем информацию заказа: итоговая сумма, сумма скидки, количество единиц в корзине, куда и кому доставить заказ.

Для удобства пользователя собираем информацию о всех покупках в архиве заказов.

Каждый заказ — карточа с самой важной информацией: номер заказа, его статус и т. д.

Доставленные заказы выделаем — окрашиваем зеленый цвет.

Пользователь может детально изучить заказ на странице заказа (открывается при клике на карточку).

Чтобы мотивировать пользователя постоянно совершать покупки, в интернет-магазине накапливается скидка, на странице заказа указывается общая выгода пользователя от всех скидок.

Показываем пользователю популярные товары связанные с заказом — они могут его заинтересовать.

Для управления профилем создаем персональную страницу. Показываем на ней личные данные и даем возможность их редактировать.

Показываем персональную скидку — она накапливается и зависит от общей суммы заказов и мотивирует пользователя совершать покупки на одном сайте.
Показываем пользователю его последние заказы.