Как я делал дизайн интернет-магазина премиального нижнего белья
Клиент
Legendary Lingerie — компания из Нижнего Новгорода, которая занимается изготовлением и продажей премиального нижнего белья для женщин. Среди ценностей проекта можно особенно отметить эксклюзивность, этичность, индивидуальный подход.
Задача
Создать интернет-магазин, чтобы охватить большую аудиторию и привлечь к бренду новых покупателей. Нужно было через сайт показать, что нижнее белье — искусство, а его обладательница — муза.
Реализация
Работу начали с заполнения брифа, чтобы определить ситуацию бренда, задачи и цели. У клиента уже был логотип и фирменный стиль, на основе которого я подобрал референсы. Позже мы определились со структурой будущего сайта и собрали в кучу всю информацию, необходимую для начала работу. У меня на руках был готовый бриф, оффер, фотографии, списки товаров и фирменные элементы. Можно было начинать создавать дизайн.
Главная страница
Разберем по порядку каждый блок, все как я люблю.
Начнем с первого экрана.
Я подобрал новый шрифт для заголовков, так как фирменный рукописный не подходил для этих целей из-за плохой читаемости. Он позже будет использован для дополнительного декора и создания атмосферы. Так вот, этот новый шрифт просто невероятно красивый и эстетичный. Вы просто посмотрите на него.
Шрифты шрифтами, но мы пропустили шапку. На ней логотип и несколько стандартных пунктов меню. Хочу отметить, что корзину я решил сделать текстовым блоком с числом в скобках. Не хотел портить эстетику лишней графикой, в виде иконок.
Обратим внимание на кнопку под заголовком. Ее сделал с ассиметричной обводкой, которая смотрится интересно, а так же добавил эффект матового стекла.
На фоне затемненное фото девушки. Фотографии в этом проекте невероятно красивые, в этом вы убедитесь еще не раз.
Следующий блок — Популярные новинки.
Это мой любимый. В восторге от того, как я его реализовал. Обычно их делают обычной плиткой с позициями.
У меня получилось что-то вроде слайдера, где с активной позиции можно перейти сразу на страницу товара, жмякнув на кнопку. Остальные позиции расположены каруселью полупрозрачными фото.
Тут как раз можно видеть над заголовком шрифт из логотипа, как декоративный элемент.
Следующий блок — О бренде.
Слева логотип и ссылка на инсту. Справа описание компании и ее ценностей.
Следующий блок — Категории товаров.
Ссылки к соответствующим категориям каталога. Подбирая фото, старался чередовать планы и оттенки, чтобы они выглядели сбалансированно.
Следующий блок — Подвал.
Тут постарался выдержать симметрию, разместив ссылки на все категории товаров и небольшую информацию для клиентов. Внизу по центру ссылка на инсту, а по бокам политика конфиденциальности и копирайт.
Как итог — главная страница получилась не только красивой и эстетичной, но и удобной в использовании, что особенно важно для интернет-магазина.
Выдохнули… дальше будет интереснее
Основные страницы
Буду показывать их целиком, без шапки и подвала, чтобы место просто так не занимать.
Начнем с каталога. Что мы тут видим?
Есть категории сбоку, настройки выбора цвета, размера, ценового диапазона.
И есть карточки товара. Я сделал их прямоугольными и довольно крупными, по 3 в ряд, потому что товар визуальный. У карточки есть название и цена. Кроме того, на третьей позиции в первом ряду показано взаимодействие с наведением курсора. То есть, когда пользователь наводит мышку на карточку, там появляются стрелочки, для просмотра других фотографий сразу в каталоге. Опять же, товар у нас визуальный и это очень полезная фишка.
В нижней части страницы есть пагинация и кнопка для показа большего количества карточек.
Далее — страница товара.
У многих интернет-магазинов можно заметить тенденцию размещать фотографии слева, а текст справа. Тут я слегка пошел против системы.
Итак, слева у нас часть с тексом и элементами взаимодействия, для настройки товара. Можно выбрать размер, цвет, посмотреть цену, добавить в корзину и почитать всю необходимую информацию.
Справа у главной фотографии сразу есть стрелочки, для перелистывания, но это не единственный способ выбрать фото. Еще правее есть карусель, где можно жмякнуть на каждое фото и оно займет место главного.
Главное фото можно развернуть на весь экран. Это было предусмотрено.
Под блоком с фотографиями находится место под таблицу размеров, которой пока нет, так как сайт в разработке и до таких деталей не дошли.
В самом низу страницы предлагается выбор других товаров, похожих на текущий. Это побуждает посетителя посмотреть и возможно купить что-то еще.
Корзина.
Тут все как обычно. Позиции, цены, размеры, выбор количества и переход дальше на оформление заказа.
И наконец оформление заказа.
Тут слева дублируется информация из корзины. Чтобы покупатель ничего не перепутал и на всех шагах видел, что он оплачивает. Ниже подсчитана цена с учетом скидок и доставки.
Справа много-много форм для различной информации, необходимой для совершения заказа. Выбор способа оплаты и заветная кнопка.
Мобильная версия
Без нее никуда. У каждой страницы она есть.
Итоги
Я в восторге от этого проекта. Последнее время нравится делать в таком стиле. Создавать эстетику, визуальную красоту. Но в то же время, чтобы это было удобно и функционально. Мне такое нравится. Так что я получил огромное удовольствие от процесса работы над этим проектом.
Подпишись, чтобы не пропустить другие кейсы.
Стилек дичайше растиражирован и устарел три года назад. Хорошо хоть без арок обошлись
А вам не приходило в голову, что пользователи привыкли к этому стилю? Он ассоциируется с дорогими качественными брендами из бьюти сферы. Клиенты считывают это за пару секунд и сразу понимают, куда попали. Подобная картина есть в каждой нише, где ходовые стили существуют не по 3 года, где-то по 10 и более лет. И эти стили работают. Зачем изобретать велосипед?)
Тонкий заголовковый шрифт, имхо, ужасен. Будто его поставил дизайнер, который всю жизнь сидел на маке и думает, что кроме ретины никаких экранов не бывает)) Не читабельно же на стандартных экранах, там линия толщиной в пиксель получается, а то и меньше.
А, еще там буква П - это тупо латинская n. Сразу видно, качественный шрифт
Комментарий удален модератором
Ничего такого, чтобы делать целый пост. Шрифт я уже где-то видел такой. Непонятные белые плашки, что мешало оставить цвет страницы? Если очень хочется выделить, ну сделай ты тон ярче или темнее, зачем такой пластырь?
Все квадратное, а кнопки круглые. Вы точно дизайнер?
Комментарий удален модератором
Красивый проект, просто кайф. Приятно, что дизайнер заботится об удобстве конечного пользователя.
По комменту выше - эх, если б все сайты были такими "типичными и скучными")) Особенно в нише одежды и нижнего белья.
Спасибо :3
Мило, но каждый второй сайт с нижним бельем выглядит именно так
И часто вы на таких сайтах бываете?)
Нехватает изоленты за 2.990. Из неё тоже можно сделать сексуальное бельё))
Посмотрите в разделе с пакетами для мусора...
Комментарий недоступен
Согласен. Благодарю за обратную связь.
Саша Дождливый, ты не сдрочился, пока сайт этот делал?
пс: сайт огонь, но я бы не потянул по 8 часов в день смотреть на красивых теток )))
Честно скажу, долго привыкал)) Но работа такая только в радость, безусловно)
Комментарий удален модератором
Комментарий удален модератором
Century Gothic и прочие шрифты типа Futura сюда вообще не подходят.
Автор явно шрифтовой новичок.
Дизайн — как будто типичные блоки Тильды для интернет магазина, с последующим экспортом.
Тут нечего обсуждать
Чем премиальное нижнее белье отличается от обычного?
Наверное в том что дешевое будет в дырках уже через месяц,а премиальное будет год носиться как минимум
Закупают, как правило, все кружево, шелк и пр в одних и тех же местах… иногда даже пошив нельзя считать премиальным (малыми тиражами очень невыгодно шить нижнее белье).
Швей хороших на белье мало, на большое количество операций при малых тиражах не разбить. Чаще всего даже не на каждую операцию в цехах небольших брендов стоит своя промышленная машина.
Поэтому чаще всего из премиального в таких брендах только амбиции.
А сайт приятный.
Я не эксперт... но мб качеством, материалом, дизайном.
В шрифтовом логотипе, оба шрифта доминантные и "борются" за внимание. А на сайте всё ОК.
Согласен, логотип не очень. Его делал не я)
Комментарий удален модератором
Комментарий удален модератором
Что-то я сайт не нашел. Есть ссылка?
https://legendary-lingerie.com/
Та самая статья в которой хочется найти ссылку на сайт 😃
Для прототипов кстати есть вот сервис: https://structura.app если вдруг будет нужен
Спасибо, я прототип делаю сразу в Фигме, чтобы поверх него делать дизайн. Удобно. А ссылка где-то была)
Вот - https://legendary-lingerie.com/ru
Вообще я в поиске не сразу нашел их сайт
Им бы seo чтоб кто-то сделал
В статье я тоже не понял почему нет ссылки
Все листал пост в надежде долистать до раздела с фотосессией моделей. Но нет. Откуда фоточки?
Фотографии клиент предоставил. Там был огромный альбом, было на что посмотреть🥰
Отличное цветовое решение. Есть в подаче что-то будуарное)))
Я очень старался добавить что-то такое красивое, но слова такие умные еще не знал))
Сайт сделан очень красиво, молодцы!
Надеюсь, что "Длинный заготовок чудесного товара" - это окончательное название товара, звучит очень мило:)
К сожалению, нет. На тот момент у нас не было таблицы с позициями и их точными названиями. Но то, что все это чудесное, мы точно знали)
Текст в карточке товара, как будто специально сделан, чтобы его было трудно читать :-) Мелкий, серый, на бежевом фоне.
Оно в реале значительно крупнее, чем на скринах. Читается хорошо.
Шрифт и цвет фона очень понравились. Аккуратная и приятная работа.
Благодарю🥰
Очень нежно, кайф!
🤗
Какой прекрасный дизайн, наслаждение для глаз )
Благодарю)
Признавайся, всегда ли ты держал руки над столом во время работы?
ПС. Скока стоит?
Не всегда. Весь сайт целиком 120к.
Проект из разряда: два часа дрочишь, потом час работаешь?
Ничего вы не понимаете, это же искусство)
Соглашусь, мягкий приятный интуитивный дизайн.
Хорошо, что так)
Комментарий удален модератором
Комментарий удален модератором
Было сложно... хотя нет не сложно, я справился. Спасибо за статью)
Пожалуйста
Комментарий удален модератором
Комментарий удален модератором
Комментарий удален модератором
Курс 1к1
Они видать так и не запустили сайт на зарубежный рынок. Он изначально готовился в 2х форматах. Из за ситуации в стране у них не все планы получилось реализовать, к сожалению.
Когда жмешь "покажи еще", надо старое тоже показывать, а не "еще одно, что осталось". А так норм!