Разработка интернет-магазина «Aravak»

Мы открываем новую рубрику, в котором покажем вам примеры пошаговой разработки интернет-магазинов на платформе ImageCMS Shop, и сегодня рассмотрим первый из таких кейсов.

Задача

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

Прототипирование

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

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

Дизайн

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

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

На главной странице интернет-магазина «Aravak» отображается контактная информация, логотип, графические баннеры, а также блоки с акционными и новыми товарами.

Внимание к деталям

Казалось бы, какая разница, как выглядит иконка корзины размером в 10 пикселей?! На самом деле, из таких мелочей и складывается общее впечатление об интернет-магазине, которое формируется у посетителя.

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

Каталог товаров

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

Перечень товаров можно отображать как в виде списка, так и в виде таблицы (по умолчанию) по выбору пользователя.

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

Страница товара

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

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

Слева мы расположили блоки с информацией по доставке и оплате:

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

Корзина

Процесс покупки товара проходит через корзину, перейти к которой покупатель может при нажатии кнопки «Купить», что приводит к появлению всплывающего окна со списком добавленных товаров и возможностью перейти к оформлению заказа или продолжить просмотр каталога.

При нажатии пользователем кнопки «Подтвердить заказ» он будет перенаправлен на страницу оформления заказа, которая содержит только действительно необходимые для заполнения поля, и спроектирована специалистами “Сайт Имидж”с упором на обеспечение хорошего уровня конверсии и продаж.