2. Специфика дизайна темы оформления
• Нет конкретного ТЗ
• Нет конкретной предметной области
• Нет конкретного заказчика с его
вкусовыми пристрастиями
3. Как подходить к работе?
• Представьте близкие категории товаров.
Примеры:
– автозапчасти, стройматериалы, комплектующие
– одежда, аксессуары, подарки
– телефоны, техника
– …
• Выберите одно такое семейство категорий.
Это увеличит применимость темы и при этом
закроет потребности владельца магазина.
• При продумывании и прорисовке можно
отталкиваться от примеров магазинов.
4. Разбор по косточкам
Чтобы лучше понять, что закладывать в тему оформления,
давайте рассмотрим на примере, что получится, если убрать
из работающего магазина контент.
Возьмём, например,
ozon.ru:
6. Ozon.ru как тема оформления
Функциональность главной страницы:
• Строка поиска
• Личный кабинет покупателя
• Дерево категорий (каталог) в левой панели
• Корзина в левой панели
• Несколько специальных подборок товаров
• Правая панель с баннерами
• Футер с несколькими блоками ссылок
7. Тема оформления в духе ozon.ru
Напомним, что тему оформления желательно сделать
настраиваемой: например, логотип и цвета
8. Тема оформления в духе ozon.ru
Прошу прощения,
если предыдущие картинки,
сделанные на скорую руку,
вызвали у Вас эстетическое отвращение ☺
Это была только иллюстрация к мысли
10. При дизайне ключевых страниц
Думайте о том, как это ляжет на структуру движка:
• Выделяйте Layout
• Выделяйте списки ссылок (меню)
• Выделяйте «панели блоков» (sidebars), в которых
могут быть баннеры, текстовая информация и т.п.
Держите под рукой список функциональности:
• Чтобы добавить что-нибудь интересное
• Чтобы не нарисовать что-либо не реализуемое
11. Шаблон главной страницы
• Название магазина с возможностью замены на логотип
• Верхнее меню (настраиваемое)
• Каталог товаров (1-2-3 уровней вложенности)
• Контент главной страницы (редактируемый через WYSIWYG)
• Специальные предложения (товары или группы товаров)
• Корзина (с выводом количества и возможно состава корзины, а также
возможно с кнопкой заказа)
• Новости магазина (или последние записи блога)
• Баннеры, которые можно безболезненно убрать
• Форма поиска
• Настраиваемые цвета: фон отдельных областей, цвет границ, текста,
ссылок и т.п.
• Заменяемое фоновое изображение
• Футер с настраиваемым списком ссылок
Всё, кроме контента и спец.предложений, можно выделить в layout
12. Шаблон категории
• Layout (шапка, футер, меню, форма поиска, фон)
• Отображение выбранной (текущей) категории в каталоге
• Хлебные крошки
• Описание и изображение категории
• Подкатегории
• Фильтры по параметрам
• Вывод товаров в категории (с названием, кратким описанием, ценой,
старой ценой)
• Возможность добавить товар в корзину, если не требуется выбор
модификации (цвета/размера и т.п.)
• Постраничный вывод
• Сортировка по цене, алфавиту, дате
• SEO-текст под списком товаров
• Боковые панели можно отнести к layout (тогда будут одинаковые для
всех страниц), либо к шаблону категории (тогда будут отличаться).
13. Шаблон товара
• Layout (шапка, футер, меню, форма поиска, фон)
• Отображение текущей категории в каталоге
• Хлебные крошки
• Название товара
• Краткое и полное описание (полное редактируемо в WYSIWYG)
• Цена, старая (перечёркнутая) цена, кнопка «купить» и «под заказ»
• Выбор модификации товара
• Изображение товара (основное и несколько дополнительных)
• Увеличение изображения товара
• Вывод списка параметров товара
• Сопутствующие товары
• Рейтинг товара
• Отзывы на товар (раскрываемый список + форма добавления отзыва)
• Всплывающее окно при добавлении в корзину с предложением
оформить заказ или продолжить покупки
14. Шаблон корзины
• Layout (шапка, футер, меню, форма поиска, фон)
• Список добавленных товаров (с указанием модификации) с мелкими
изображениями
• Количество с возможностью изменения или удаления позиции
• Строка, показывающая скидку на заказ (например, при сумме >3000р)
• Дополнительные товары для предложения в корзине
• Поле ввода купона на скидку
• Пересчёт корзины по нажатию кнопки или автоматически по
изменению
• Кнопка «оформить заказ»
15. Оформление заказа
В платформе InSales оформление заказа является наименее вариативным
с точки зрения дизайна. Пошаговую логику, расположение полей и т.п.
изменить нельзя. Тем не менее, можно сделать свой стиль оформления:
• фон (картинка или генерируемая заливка),
• цвет элементов,
• цвет кнопок,
• цвет границ,
• цвет текста и ссылок.
Набор полей и шагов настраиваемы в админке магазина (бэк-офисе) .
В стиле оформления заказа будет также выводиться личный кабинет
покупателя, страницы авторизации пользователя и восстановления
пароля.
16. Шаблон результатов поиска
Очень похоже на страницу категории:
• Layout (шапка, футер, меню, форма поиска, фон)
• Вывод списка товаров (с названием, кратким описанием, ценой,
старой ценой)
• Возможность добавить товар в корзину, если не требуется выбор
модификации (цвета/размера и т.п.)
• Постраничный вывод
• Боковые панели можно отнести к layout (тогда будут одинаковые для
всех страниц), либо к шаблону результатов поиска (тогда будут
отличаться).
17. Шаблон Страницы
Текстовая страница, например, об условиях доставки или с контактами и
адресом магазина.
• Layout (шапка, футер, меню, форма поиска, фон)
• Название
• Текст (редактируем в WYSIWYG)
• Боковые панели для шаблона страницы могут быть либо свои, либо
заложенные в layout.
18. Шаблоны Блог и Статья
Задают отображение ленты статей и отдельно взятую статью.
• Layout (шапка, футер, меню, форма поиска, фон)
• Название статьи, дата и автор
• Краткий анонс и ссылка “читать далее >>”
• Текст (редактируем в WYSIWYG)
• Список комментариев с датами и авторами
• Форма добавления комментария (с именем, email и текстом)
• Уведомление, что перед публикацией комментарии проходят
модерацию
• Боковые панели могут быть либо свои, либо заложенные в layout.
19. Шаблон 404
Схож с шаблоном Страницы, но не редактируем в WYSIWYG
• Layout (шапка, футер, меню, форма поиска, фон)
• Можно добавить специальную подборку товаров
• Можно добавить список категорий
• И конечно текст/картинка ☺
20. Утомились от списков?
Тогда несколько картинок-примеров из магазинов,
работающих на InSales:
Каталог 2 уровня, хлебные крошки, zoom
24. Примеры
Боковая панель с блоками:
• Баннер бесплатной доставки
• Авторизация/личный кабинет
• Краткая информация о
доставке и оплате
• Последние два блока –
редактируемые и добавляемы
через WYSIWYG-редактор
25. Остались вопросы?
Создавайте партнёрский аккаунт
http://www.insales.ru/new_partner
и обращайтесь в поддержку.
Мы ответим.
http://www.insales.ru/blog
twitter:@insales
