Дизайн интернет-магазина «Arma-Store»

Создание визуального образа интернет-магазина «Arma-Store» с учётом возможностей системы управления сайта Bitrix и требований адаптивности.

На основе анализа крупных интернет-магазинов и специфики продукции, которая будет реализовываться в Arma-Store, был создан простой и понятный дизайн. Главная задача, которую решает разработанный дизайн — совершить покупку в минимальное количество действий.

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

На главной странице сайта расположены все необходимые навигационные и структурные элементы, такие как кнопка «Все товары», основное меню, кнопки «Входа» и «Регистрации», слайдер с важной информацией, несколько товаров и футер с контактами информацией и дублирующей навигацией.

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

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

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

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

Страница каталога включает все товары по определённому бренду.

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

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

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

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

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

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

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

В качестве основной была выбрана гарнитура без засечек Roboto с двумя вариантами начертания: Regular и Bold.

Дизайн был разработан для студии Esoteric Design.