Задача: Создать шаблон интернет-магазина, с которым владельцы малого и среднего бизнеса смогут быстро запустить онлайн-торговлю разными товарами — от газонокосилок и автомобильных шин до косметики и детских товаров.
Решение: Мы разработали Шопер — универсальный шаблон для интернет-торговли с адаптивной версткой.
Шаблон отлично выглядит и на десктопе и на мобильных устройствах, а 4 цветовые схемы подходят для разных тем: косметики, подарков, одежды, зоотоваров, электроники и других. Каждая цветовая схема — цельная, яркая, индивидуальная и выглядит как уникальный дизайн.
В Шопер есть все, может понадобиться для интернет-магазина: 11 страниц, продуманные фильтры для сортировки товаров, 3 варианта каталога, шаблоны писем для оповещения клиентов.
Главная страница представляет интернет магазин, показывает ассортимент и разные категории товара: хиты, акции, скидки. Посетители с разными интересами найдут на главной раздел, который им подойдет.
В Шопер 3 варианта отображения каталога. Каждый подходит под разные типы товаров. Выберите один из них, тот который наилучшим образом представит ваши товары, и установите его в каталоге как вариант по умолчанию. Товары сортируются по разным параметрам: по популярности, по цене, сначала новинки, хиты или товары на акции.
На этой странице содержится полная информация о товаре:
название, производитель, цена, скидка, описание и характеристики.
В корзине вся информация нужная для заказ: данные товаров и форма с данными покупателя.
На персональной странице собраны все данные пользователя: имя, номер телефона, почта и пароль. И здесь же пользователь может их изменить.
Шаблон полностью адаптивен, но чтобы обеспечить максимальное удобство пользователей была разработана специальная мобильная версия сайта. Она учитывает особенности навигации и использования сайта с мобильных устройств.
Владельцам интернет магазинов важно поддерживать связь с клиентами, а клиентам важно знать что происходит с их аккаунтом и заказами. Чтобы обеспечить надежную связь между продавцом и покупателем мы включили в шаблон набор писем: письмо о регистрации, о принятии заказа и изменении статуса.
Готовим страницу проекта для портфолио, поднимаем архив, смотрим сколько у дизайнера скопилось материалов по работе — десятки страниц пометок, эскизов, прототипов и 5,31 ГБ макетов.
Наша компания не раз сталкивалась с клиентами, которые хотят запустить онлайн-торговлю, но у них возникает проблема: уникальный дизайн стоит дорого, у шаблонов из интернета часто плохой дизайн или с ними неудобно работать.
Чтобы помочь таким клиентам, мы решили разработать универсальный интернет-магазин, который будет подходить разным магазинам с самыми разными товарами, но при этом будет красивым, функциональным и адаптивным.
Формулирем задачи:
Разработать шаблон, который будет хорошо адаптироваться под разный контент, любые товары — и детские пинетки, и электролобзики — должны одинаково классно смотреться на страницах сайта.
Создать дизайн, который будет красиво и ярко показывать товары. Функционал — удобный, понятный и ненавязчивый.
Сайт должен быть адаптивным.
Разработать мобильную версию для пользователей, которые покупают товары с мобильных устройств.
Продумать фильтры, чтобы с их помощью можно было выбрать и холодильник, и книгу для детей.
Дизайнер идет изучать интернет-магазины:
Первый подход от другого дизайнера:
Менеджер проекта просит обратить внимание на верхнее меню: нужно сделать его так, чтобы в нем могло поместиться любое количество пунктов, всего в меню будет 3 уровня вложенности.
Дизайнер пробует разные варианты:
Чтобы еще больше привлечь внимание пользователя к разделам, решаем добавить в меню рекламные баннеры. Дизайнер предлагает отдельно готовить картинки для акций по заготовленному шаблону, но понимает, что это не сработает — владельцы малого и среднего бизнеса, часто сами занимаются администрированием сайта и добавляют акции. Нужно сделать так, чтобы создавать и добавлять баннер было легко.
Дизайнер идет думать и предлагает решение:
Решаем какие блоки еще будут на главной странице. Главная должна выгодно представлять разные категории товаров, знакомить пользователя с каталогом, увлекать и мотивировать совершить покупку. Решаем демонстрировать на главной самое интересное на сайте: выгодные предложения, новые разделы, супер-акции, хиты продаж, акции и новинки.
Во время тестирования готовой верстки решаем упростить поведение блока с хитами, сделать его более понятным:
Решаем добавить на главную блок с брендами — он будет полезен пользователям, которые интересуются товарами определенных марок или любят просматривать все товары какого-то бренда.
Для удобства пользователей, делаем так, чтобы товар можно было добавить в корзину сразу на главной — пользователь не отвлекается от изучения страницы и не совершает лишних кликов.
Решаем как должен выглядеть каталог. Шопер будут использовать для разных товаров, поэтому в каталоге нужны разные режимы просмотра: карточками, карточки с описанием и очень компактные карточки-строки.
На страница каталога,чтобы пользователь не потерялся, прикрепляем к заголовку «хлебные крошки». Так пользователь видит, где именно он находиться.
Чтобы облегчить сортировку товаров создаем систему фильтров.
Смотрим какие элементы сортировки бывают, как они работают, как их используют. Продумываем и создаем фильтры, которые подойдут для сортировки очень разных товаров.
Чек-боксы
Используйте их для выбора желаемого параметра: марки, даты выхода, типа корпуса, серии, материала, формы, страны и других. Вариантов параметра может быть очень много: выводите в начале самые популярные, а остальные покажите в специальном поп-апе.
Вывод результатов
Этот элемент появляется при выборе параметров в фильтрах и сразу показывает, сколько вариантов товара с заданными параметрами найдено. При клике на него на странице выводятся подходящие товары. в специальном поп-апе.
Слайдер
Используйте его для диапазонов: цены от и до, объема, веса и т. п. Изменение параметров может быть непрерывным, а может перескакивать с одного предустановленного значения к другому.
Инпут
Используйте его, когда для фильтрации необходимо задать диапазон из известного промежутка: цена, время работы, длина, ширина, вес, количество ядер, объем памяти, частота процессора, диаметр, толщина, профиль и т. д.
Радиокнопки
Используйте их для параметров, у которых может быть только 2 значения — наличие или отсутствие какой-то детали: поддержка карты памяти, цельный корпус, сенсорный экран, оптический привод и т. п.
Двойной комбобокс
Еще один способ задания диапазона выборки. Используйте его, когда есть фиксированные значения для фильтрации: размер экрана в дюймах, разрешение монитора, разрешение камеры, емкость аккумулятора, температура света и т. п.
Комбобокс
Используйте его, когда для фильтрации нужно выбрать одно значение из небольшого ряда известных: объем, вес, тип корпуса, диаметр, ширина, объем батареи, количество ядер в процессоре.
Выбор цвета и размера
Наглядно показывают цвет и размер. Вариантов цвета и размера может быть сколько угодно: сначала показываются самые популярные, дополнительные цвета скрываются.
3 варианта страницы каталога:
Страница товара должна давать полную информацию. Чтобы пользователь всегда видел, товар закрепляем его изображение.
Для товаров с несолькими вариантами, которые отличаются друг от друга по одному параметру, например, по цвету, создаем блок с вариантами товара. Так все варианты удобно собираютсяр на 1 странице.
В корзине масса информации, ее нужно удобно и наглядно показать. Делим всю информацию на две части: о товарах и о заказе.
Для удобства пользователя собираем информацию о всех покупках в архиве заказов.
Пользователь может детально изучить заказ на странице заказа (открывается при клике на карточку).
Для управления профилем создаем персональную страницу. Показываем на ней личные данные и даем возможность их редактировать.
