Этапы создания интернет-магазина дизайнерской мебели

Информация о клиенте и постановка задач
У заказчика в Подмосковье небольшой магазин дизайнерской мебели La Furniture в стиле лофт. Планировалось, что бОльшая часть пользователей будет заходить на сайт через мобильный телефон.
Задача: Сделать продающую структуру главной страницы. Проработать мобильную версию сайта для удобной покупки товаров с телефона.

Разработка структуры главной страницы

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

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

Ниже разместили еще один важный блок – популярные товары. Благодаря этому можно сразу перейти на страницу товара и оформить покупку.
La Furniture не только продают готовую мебель, но и делают мебель на заказ по индивидуальным проектам. Это важная информация, поэтому ее тоже разместили на главной страницы вместе с кнопкой с призывом к действию «Оставить заявку»‎ для тех пользователей, которые сразу готовы перейти к заказу. В этот раздел также можно попасть из пункта меню «Мебель на заказ»‎ – это отдельная страница с подробной информацией о заказе мебели по индивидуальным меркам.

Также на главной странице разместили блок с информацией о магазине. Заголовок «О нас»‎ слишком часто используется на сайтах и не передает никаких эмоций, поэтому этот блок назвали «Комфорт. Качество. Стиль.» – именно эти слова характеризуют мебель. Этот блок не стали перегружать текстом, оставили краткую информацию и кнопку «Подробнее о нас», которая ведет на отдельную страницу.
Инстаграм – основная социальная сеть заказчика. Поэтому было предложено разместить блок с фотографиями из инстаграм, который будет синхронизироваться и автоматически обновляться с соц сетью.

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

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

Было разработано 18 уникальных страниц для интернет-магазина

Основные страницы, через которые проходят посетители сайта, совершая к покупку, это: главная страница, каталог, страница товара, корзина, оформление заказа и личный кабинет. Поэтому в первую очередь были проработаны именно они.
Также были разработаны дополнительные страницы информационного характера: оплата и доставка, гарантии, информация о сборке и уходе, о компании.
Минималистичный дизайн
La Furniture производит мебель в стиле лофт. Стиль лофт – это о простоте и просторе, такая мебель открытая и удобная, в ней нет ничего лишнего. Дизайн сайта должен передавать точно такие же эмоции. Поэтому было решено сделать минималистичный дизайн, где отсутствуют лишние элементы.

Основные цвета в стиле лофт: холодные, черно-белые оттенки. Поэтому на сайте было использовано минимум цветов: черный для текста, белый для фона. Акцентный цвет, который был использован на кнопках – темно-синий. Этот цвет также был использован в логотипе.
Итоги проделанной работы
Была сделана продающая структура главной страницы. Навигация сайта проработана, количество шагов для приобретения товара минимизированы. В каталоге добавлены фильтрация и сортировка товаров для быстрого поиска нужной мебели.
Чтобы снизить визуальную нагрузку фотографии мебели были подобраны в одном ракурсе и помещены на однотонный светлый фон. Сам сайт получился минималистичным и стильным.
Главная страница
Каталог
Страница товара
Корзина
Личный кабинет
Доставка и оплата
Давайте обсудим ваш проект
Made on
Tilda