Язык свободы и андеграунда: разработка интернет-магазина для берлинского бренда FUENF

Заказчик — FUENF, молодой и динамичный берлинский бренд, основанный в 2017 году. Сочетает в себе уличный стиль и небрежную элегантность, объединяя цифровую культуру и моду. В коллаборации с THE BRVTALIST бренд выпустил капсулу из премиальных материалов.

Линейка объединяет узнаваемую эстетику FUENF с «мутациями» THE BRVTALIST и включает бесполые, экологичные предметы для города и путешествий — маску, брелок, трансформируемую сумку, пуловер, дождевик и другие позиции.

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

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

А еще сами стали дизайнерами — разработали четыре концепта для одежды под атмосферу бренда.

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

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

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

Типографика сайта выдержана в сложной бруталистской эстетике: фирменный шрифт FUENF — Heebo — применяется в крупных заголовках, бегущих контурных строках и нестандартных композиционных приемах, создавая единый стиль и направляя пользователя по коллекции.

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

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

Главный акцент — на самой вещи. Благодаря минималистичному дизайну страница товара создает сильное визуальное впечатление.

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

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

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

Дополнительно разработали серию принтов для коллекции одежды.

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

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

Создали четыре разных концепта, которые объединены философией бренда fuenf:

• Принт основан на геометрии перевернутого треугольника. Первый вариант включает в себя текст манифеста FUENF, второй — абстрактный набор букв. 

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

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

• Минималистичный принт с одним из главных посылов бренда. Вся композиция построена на тексте из манифеста FUENF, выполненном в фирменном начертании. Это визуальный statement — прямое обращение к обществу.

•  Четвертый концепт построен на разделении слова TRANSFORMATION на несколько смысловых блоков: TRANS / FORMA / ON. Это решение подчеркивают прямоугольные цветовые акценты. Принт размещен на удлиненном худи: крупная геометрия помогает сбалансировать силуэт и создать яркий визуальный ритм.

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

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

Чтобы наглядно представить внешний вид одежды и передать футуристичное настроение коллекции, реализовали на сайте интеграцию 3D-моделей товаров через облачную платформу Vectary. Пользователь может взаимодействовать с моделью прямо в браузере — приближать, вращать и рассматривать детали.

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

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

Для управления сайтом разработали удобную административную панель на базе WordPress с гибкой модульной архитектурой и встроенной системой оптимизации.

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

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

Интерфейс панели администратора упрощен — скрыты все лишние разделы WordPress, оставлены только необходимые для работы с контентом и заказами, чтобы менеджеру было проще ориентироваться.

Четыре шага в будущее:

[1] Передали эстетику бренда.  С помощью бруталистского дизайна, черно-белой палитры с провокационными акцентами и динамичной композиции попали в характер новой капсулы и качественно презентовали коллекцию в формате визуально выразительной landing page, которая работает как полноценный интернет-магазин.

[2] Разработали концепции принтов. Все четыре концепта опираются на философию бренда — минимализм, футуризм и осмысленную подачу. Графика работает как визуальное высказывание, подчеркивающее индивидуальность и манифест бренда.

[3] Упростили путь от интереса к покупке. Продуманный пользовательский сценарий позволяет быстро ознакомиться с вещью, изучить материалы, подобрать размер и быстро оформить заказ.

[4] Подготовили платформу к масштабированию. Модульная архитектура, 3D-просмотр товаров и упрощенная админка работают на быстрый запуск новых коллекций и помогают работать с контентом без помощи разработчиков.