Web Дизайн. Уроки фотошопа, photoshop. Статьи о дизайне. Как создать сайт. Обучение дизайну. Фото. Гламурные галереи
Веб дизайн

Статьи о дизайне   Портфолио дизайнера
Дизайн Форум


Про дизайн и web дизайн




Главная     Форум     Галереи




  Статьи о дизайне





  Делаем интернет магазин




Проектируем интернет магазин

Магазин - это сложный по структуре и наполнению проект, который просто обязан продавать. Попробуем сделать его таким. И в процессе проектирования не забываем о том, что сайт должен одинаково отображаться в основных браузерах и иметь мобильную версию. Это важно. Не забываем, что интернет-магазин предлагает товары, а у товаров есть цены. Не забываем про цены!!!

Основные элементы интернет магазина

Фон - светлый, текст - контрастен фону. Ссылки подчеркиваем, важные ссылки снабжаем выпадающими подсказками. На фотографии ставим альтернативный текст - тег alt.
Не стоит украшать страницу отвлекающей графикой, например падающим снегом или всплывающими баннерами.
Не стоит ставить на страницу звуковое сопровождение.
Обязательна (как и на всех сайтах) страница ошибки 404.
Эту страницу оформляем в стиле сайта (шапка с телефонами, формой поиска и низ с контактами) и ставим ссылки на главную и основные разделы сайта. Как и большинство коммерческих сайтов интернет-магазин должен одинаково отображаться в популярных браузерах и иметь мобильную версию.

Шапка интернет-магазина.

Может быть имиджевой и содержать изображение, а может быть простой абстрактной композицией с фирменными узнаваемыми цветами и логотипом. Какой из двух вариантов оформления выбрать вы решаете сами. Хороши и тот и другой вариант. Но по высоте лучше не превышать 150-200 пикселей. Название и логотип, номер телефона и поиск по сайту размещаем в шапке страницы и дублируем шапку на всех страницах.
Важный элемент - заголовок, он должен четко дать понять посетителю что это за сайт и что он предлагает.
Важный элемент - номер телефона размещаем в шапке сайта. Ниже ставим ссылку - заказать обратный звонок. Телефон должен располагаться всегда на одном месте и быть заметен в первые секунды просмотра страницы.
Форма поиска по сайту размещается в шапке или под ней в боковой колонке или в середине страницы. Поиск должен быть хорошо заметен и иметь ссылку на расширенный поиск. Обычно поиск обозначается кнопкой Найти. Пункт меню раздела, на странице которого мы находимся, должен быть выделен.

Основная часть страницы.

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

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

Меню навигации по сайту делаем сверху горизонтально. Здесь могут быть пункты - о компании, контакты, помощь, оплата, доставка и тд. На всех внутренних страницах в качестве дополнительной навигации под горизонтальным меню прописываем пути по сайту (крошки хлеба).

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

Подвал сайта

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

Страница регистрации.

Нужно дать понять покупателю, что зарегистрироваться лучше, чем не зарегистрироваться. Эта информация находится рядом с кнопкой зарегистрироваться (на главной или внутренней странице) или вверху собственно на странице регистрации. Ошибочно введенные данные подсвечиваются и выделяются. Если произошла ошибка регистрации, страница не должна перегружаться и верно введенные данные не должны теряться. Ставим возможность получать рассылку от магазина.

Страница каталога товаров.

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

Карточка товара.

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

Страница корзины заказа.

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

Страница оформления заказа.

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


Смотрите также:
Делаем интернет магазин
Оптимизация интернет-магазина
Индексация интернет-магазина
Как правильно оптимизировать сайт







Электронные книги о дизайнеЧМ 2018Гламурные картинкиГраффити галереяЯпония фотографииО путешествиях и странах, дешевые авиабилеты и отелиДизайн форум



    Rambler's Top100     Яндекс.Метрика  


Web дизайн и создание сайтов


Карта сайта       Наверх