Веб-дизайн сайта. Дизайн интернет-магазина

Веб-дизайн сайта. Дизайн интернет-магазина

Урок №5 Веб-дизайн сайта. Дизайн интернет-магазина

Интернет-каталог или интернет-магазин?

Интернет-каталог - это корпоративный сайт с ограниченным ассортиментом товаров/услуг. В каталоге пользователь может выбрать понравившийся ему товар, а затем с помощью формы обратной заявки связаться с менеджером и заказать его.

Интернет-магазин - это расширенный по функционалу интернет-каталог, который имеет:

  • корзину
  • личный кабинет
  • подключение к платежным системам
  • интеграцию со службой доставки
  • сервисы по статистике покупок и наличия товаров

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

Особенности дизайна интернет-магазина:

  1. меню
  2. категории товаров и фильтры
  3. разделы на главной странице
  4. внутренние страницы

1) Меню

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

Строка меню интернет-магазина также обязательно содержит такие элементы, как:

  • логотип
  • корзина
  • быстрые контакты
  • поисковое поле
  • личный кабинет(не во всех магазинах)

2) Категории товаров и фильтры

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

Хорошим тоном является вынесение списка категорий товаров и фильтров в две отдельные панели.

3) Разделы на главной странице:

  • главный экран
  • категории товаров
  • акции, популярные товары, новинки
  • бренды, клиенты
  • футер

Прежде чем создавать главную страницу магазина, уточните у заказчика:

  1. собирается ли он проводить постоянные акции или распродажи
  2. часто ли у него обновляется ассортимент
  3. со многими ли брендами и марками товаров он работает
  4. есть ли среди его товаров необычные экземпляры, которые можно использовать для привлечения внимания и т.д.

Главный экран.

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

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

Категории товаров.

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

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

Акции, популярные товары, новинки.

Один из разделов, который должен быть не очень навязчивым, но в тоже время запоминающимся.

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

Бренды, клиенты.

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

Футер.

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

  • логотип
  • информация о компании (контакты, сотрудничество, вакансии)
  • помощь покупателю (возврат, рассрочка, как оформить заказ и т.д.)
  • доставка и оплата (желательно с указанием возможных вариантов электронных платежей)
  • группы в социальных сетях
  • поисковая строка
  • ссылки на скачивание мобильных приложений для магазина (многие крупные компании не скупятся на создание мобильного приложения для своего магазина - это удобнее и мобильнее)

Видео-уроки:

1) Дизайн интернет-магазина в веб-дизайне.

2) Дизайн главной страницы интернет-магазина в фотошопе.

3) Завершение дизайна главной страницы интернет-магазина в фотошопе.

4) Создание дизайна блога (новости) в фотошопе для сайта.

Мы разобрали модуль №5 Веб-дизайн сайта. Дизайн интернет-магазина

Дальше интересней и насыщенней, следующей урок - Дизайн интернет-магазина (часть 2) - внутренние страницы. Подписывайся чтоб ничего не пропустить.

Урок №4 Уроки веб-дизайна. Дизайн внутренних страниц и всплывающих окон

Веб-дизайн сайта. Дизайн интернет-магазина

Курс веб-дизайна для начинающих

Веб-дизайн сайта. Дизайн интернет-магазина