Дизайн темы оформления на insales

Дизайн темы оформления для магазина на CMS InSales

Специфика дизайна темы оформления

• Нет конкретного ТЗ

• Нет конкретной предметной области

• Нет конкретного заказчика с его

вкусовыми пристрастиями

Как подходить к работе?

• Представьте близкие категории товаров.

Примеры:

– автозапчасти, стройматериалы, комплектующие

– одежда, аксессуары, подарки

– телефоны, техника

– …

• Выберите одно такое семейство категорий.

Это увеличит применимость темы и при этом

закроет потребности владельца магазина.

• При продумывании и прорисовке можно

отталкиваться от примеров магазинов.

Разбор по косточкам

Чтобы лучше понять, что закладывать в тему оформления,

давайте рассмотрим на примере, что получится, если убрать

из работающего магазина контент.

Возьмём, например,

ozon.ru:

Магазин без товаров и контента

Если убрать контент и разбить на блоки:

Ozon.ru как тема оформления

Функциональность главной страницы:

• Строка поиска

• Личный кабинет покупателя

• Дерево категорий (каталог) в левой панели

• Корзина в левой панели

• Несколько специальных подборок товаров

• Правая панель с баннерами

• Футер с несколькими блоками ссылок

Тема оформления в духе ozon.ru

Напомним, что тему оформления желательно сделать

настраиваемой: например, логотип и цвета

Тема оформления в духе ozon.ru

Прошу прощения,

если предыдущие картинки,

сделанные на скорую руку,

вызвали у Вас эстетическое отвращение ☺

Это была только иллюстрация к мысли

Ключевые страницы магазина

При дизайне ключевых страниц

Думайте о том, как это ляжет на структуру движка:

• Выделяйте Layout

• Выделяйте списки ссылок (меню)

• Выделяйте «панели блоков» (sidebars), в которых

могут быть баннеры, текстовая информация и т.п.

Держите под рукой список функциональности:

• Чтобы добавить что-нибудь интересное

• Чтобы не нарисовать что-либо не реализуемое

Шаблон главной страницы

• Название магазина с возможностью замены на логотип

• Верхнее меню (настраиваемое)

• Каталог товаров (1-2-3 уровней вложенности)

• Контент главной страницы (редактируемый через WYSIWYG)

• Специальные предложения (товары или группы товаров)

• Корзина (с выводом количества и возможно состава корзины, а также

возможно с кнопкой заказа)

• Новости магазина (или последние записи блога)

• Баннеры, которые можно безболезненно убрать

• Форма поиска

• Настраиваемые цвета: фон отдельных областей, цвет границ, текста,

ссылок и т.п.

• Заменяемое фоновое изображение

• Футер с настраиваемым списком ссылок

Всё, кроме контента и спец.предложений, можно выделить в layout

Шаблон категории

• Layout (шапка, футер, меню, форма поиска, фон)

• Отображение выбранной (текущей) категории в каталоге

• Хлебные крошки

• Описание и изображение категории

• Подкатегории

• Фильтры по параметрам

• Вывод товаров в категории (с названием, кратким описанием, ценой,

старой ценой)

• Возможность добавить товар в корзину, если не требуется выбор

модификации (цвета/размера и т.п.)

• Постраничный вывод

• Сортировка по цене, алфавиту, дате

• SEO-текст под списком товаров

• Боковые панели можно отнести к layout (тогда будут одинаковые для

всех страниц), либо к шаблону категории (тогда будут отличаться).

Шаблон товара


• Отображение текущей категории в каталоге

• Хлебные крошки

• Название товара

• Краткое и полное описание (полное редактируемо в WYSIWYG)

• Цена, старая (перечёркнутая) цена, кнопка «купить» и «под заказ»

• Выбор модификации товара

• Изображение товара (основное и несколько дополнительных)

• Увеличение изображения товара

• Вывод списка параметров товара

• Сопутствующие товары

• Рейтинг товара

• Отзывы на товар (раскрываемый список + форма добавления отзыва)

• Всплывающее окно при добавлении в корзину с предложением

оформить заказ или продолжить покупки

Шаблон корзины


• Список добавленных товаров (с указанием модификации) с мелкими

изображениями

• Количество с возможностью изменения или удаления позиции

• Строка, показывающая скидку на заказ (например, при сумме >3000р)

• Дополнительные товары для предложения в корзине

• Поле ввода купона на скидку

• Пересчёт корзины по нажатию кнопки или автоматически по

изменению

• Кнопка «оформить заказ»

Оформление заказа

В платформе InSales оформление заказа является наименее вариативным

с точки зрения дизайна. Пошаговую логику, расположение полей и т.п.

изменить нельзя. Тем не менее, можно сделать свой стиль оформления:

• фон (картинка или генерируемая заливка),

• цвет элементов,

• цвет кнопок,

• цвет границ,

• цвет текста и ссылок.

Набор полей и шагов настраиваемы в админке магазина (бэк-офисе) .

В стиле оформления заказа будет также выводиться личный кабинет

покупателя, страницы авторизации пользователя и восстановления

пароля.

Шаблон результатов поиска

Очень похоже на страницу категории:


• Вывод списка товаров (с названием, кратким описанием, ценой,

старой ценой)

• Возможность добавить товар в корзину, если не требуется выбор

модификации (цвета/размера и т.п.)

• Постраничный вывод

• Боковые панели можно отнести к layout (тогда будут одинаковые для

всех страниц), либо к шаблону результатов поиска (тогда будут

отличаться).

Шаблон Страницы

Текстовая страница, например, об условиях доставки или с контактами и

адресом магазина.


• Название

• Текст (редактируем в WYSIWYG)

• Боковые панели для шаблона страницы могут быть либо свои, либо

заложенные в layout.

Шаблоны Блог и Статья

Задают отображение ленты статей и отдельно взятую статью.


• Название статьи, дата и автор

• Краткий анонс и ссылка “читать далее >>”

• Текст (редактируем в WYSIWYG)

• Список комментариев с датами и авторами

• Форма добавления комментария (с именем, email и текстом)

• Уведомление, что перед публикацией комментарии проходят

модерацию

• Боковые панели могут быть либо свои, либо заложенные в layout.

Шаблон 404

Схож с шаблоном Страницы, но не редактируем в WYSIWYG


• Можно добавить специальную подборку товаров

• Можно добавить список категорий

• И конечно текст/картинка ☺

Утомились от списков?

Тогда несколько картинок-примеров из магазинов,

работающих на InSales:

Каталог 2 уровня, хлебные крошки, zoom

Примеры

Рейтинги и отзывы на товар

Примеры

Хлебные крошки, подбор по параметрам

Примеры

Корзина в боковой панели и

в виде отдельной страницы

Примеры

Боковая панель с блоками:

• Баннер бесплатной доставки

• Авторизация/личный кабинет

• Краткая информация о

доставке и оплате

• Последние два блока –

редактируемые и добавляемы

через WYSIWYG-редактор

Остались вопросы?

Создавайте партнёрский аккаунт http://www.insales.ru/new_partner

и обращайтесь в поддержку.

Мы ответим.

http://www.insales.ru/blog

twitter:@insales

Дизайн темы оформления на insales

Technology