Как я делал дизайн интернет-магазина премиального нижнего белья

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

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

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

Разберем по порядку каждый блок, все как я люблю.

Начнем с первого экрана.

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

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

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

На фоне затемненное фото девушки. Фотографии в этом проекте невероятно красивые, в этом вы убедитесь еще не раз.

Следующий блок — Популярные новинки.

Это мой любимый. В восторге от того, как я его реализовал. Обычно их делают обычной плиткой с позициями.

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

Тут как раз можно видеть над заголовком шрифт из логотипа, как декоративный элемент.

Следующий блок — О бренде.

Слева логотип и ссылка на инсту. Справа описание компании и ее ценностей.

Следующий блок — Категории товаров.

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

Следующий блок — Подвал.

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

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

Буду показывать их целиком, без шапки и подвала, чтобы место просто так не занимать.

Начнем с каталога. Что мы тут видим?

Есть категории сбоку, настройки выбора цвета, размера, ценового диапазона.

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

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

Далее — страница товара.

У многих интернет-магазинов можно заметить тенденцию размещать фотографии слева, а текст справа. Тут я слегка пошел против системы.

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

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

Главное фото можно развернуть на весь экран. Это было предусмотрено.

Под блоком с фотографиями находится место под таблицу размеров, которой пока нет, так как сайт в разработке и до таких деталей не дошли.

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

Корзина.

Тут все как обычно. Позиции, цены, размеры, выбор количества и переход дальше на оформление заказа.

И наконец оформление заказа.

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

Справа много-много форм для различной информации, необходимой для совершения заказа. Выбор способа оплаты и заветная кнопка.

Без нее никуда. У каждой страницы она есть.

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

Подпишись, чтобы не пропустить другие кейсы.