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

Кейс

Информация о клиенте

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

Задача

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

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

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

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

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

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

Коротко о компании на главной

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

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

Соц сети компании

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

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

Мобильная версия интернет-магазина

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

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

Основные страницы интернет-магазина

Навигация сайта

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

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

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

Также были разработаны дополнительные страницы информационного характера: оплата и⦁доставка, гарантии, информация о⦁сборке и⦁уходе, о⦁компании.

Минималистичный дизайн для интернет-магазина мебели в стиле лофт

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

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

Итоги проделанной работы

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

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

Главная страница