От яркой упаковки к полноценной цифровой системе бренда. Я разработала сайт, который сохраняет характер Coffee Lui, структурирует сложное B2B-предложение и помогает клиентам перейти от знакомства с продуктом к запросу образцов, оптовых цен или производства кофе под собственной маркой.
Роль
Web / UI/UX Designer & Tilda Developer
Зона ответственности
Информационная архитектура, чёрно-белый прототип, визуальная концепция, 3D-маскот, UI-дизайн, адаптивные версии, полная вёрстка на Tilda, подключение домена и SEO-настройка
Год / рынок / этап
2026 / Россия/ Дизайн завершён
Посетить сайт:
https://coffeelui.com
Сoffee Lui
В основе визуальной концепции я оставил существующую айдентику Coffee Lui: простая геометрия, насыщенные цвета и отсылки к эстетике авангарда и Баухауса.
Я перенесла этот язык в цифровую среду через крупные цветовые поля, контрастную типографику, асимметричные композиции и повторяющиеся геометрические элементы. Синий формирует основную поверхность сайта, а красный, жёлтый и тёплый молочный используются для смысловых акцентов и разделения контента.
Основной задачей было сохранить эмоциональный характер бренда, но не превратить сайт в декоративный промоматериал. Поэтому выразительные блоки чередуются с более спокойными коммерческими разделами: ассортиментом, условиями сотрудничества, этапами работы и формами заявки. В результате интерфейс остаётся ярким и узнаваемым, но при этом последовательно объясняет продукт и поддерживает деловые сценарии.
Я перенесла этот язык в цифровую среду через крупные цветовые поля, контрастную типографику, асимметричные композиции и повторяющиеся геометрические элементы. Синий формирует основную поверхность сайта, а красный, жёлтый и тёплый молочный используются для смысловых акцентов и разделения контента.
Основной задачей было сохранить эмоциональный характер бренда, но не превратить сайт в декоративный промоматериал. Поэтому выразительные блоки чередуются с более спокойными коммерческими разделами: ассортиментом, условиями сотрудничества, этапами работы и формами заявки. В результате интерфейс остаётся ярким и узнаваемым, но при этом последовательно объясняет продукт и поддерживает деловые сценарии.
Визуальная и системная идея
Яркий характер бренда внутри функционального B2B-сайта
До начала проекта персонаж существовал только как плоское изображение внутри логотипа. Для сайта я развила его в самостоятельного 3D-маскота с помощью ИИ, сохранив основные узнаваемые черты персонажа.
Была создана серия поз, связанных с разными услугами бренда: кофе, поставками, контролем качества, географией и производством под собственной торговой маркой.
Маскот решает сразу несколько задач:
Персонаж используется точечно — в ключевых преимуществах, CTA-блоках и коммуникационных материалах. Это позволяет сохранить баланс между игровой айдентикой и профессиональным позиционированием поставщика кофе.
Была создана серия поз, связанных с разными услугами бренда: кофе, поставками, контролем качества, географией и производством под собственной торговой маркой.
Маскот решает сразу несколько задач:
- делает сложный B2B-контент более дружелюбным;
- связывает разные страницы;
- усиливает узнаваемость;
- формирует основу для дальнейших рекламных материалов;
- добавляет эмоциональность без изменения существующего логотипа.
Персонаж используется точечно — в ключевых преимуществах, CTA-блоках и коммуникационных материалах. Это позволяет сохранить баланс между игровой айдентикой и профессиональным позиционированием поставщика кофе.
Маскот
Развитие персонажа из логотипа в полноценный элемент айдентики
Каталог был организован как система карточек с понятной иерархией. На первый план вынесена информация, которая влияет на выбор. При ракрытии карточки пользователь может ознакомиться с оптовыми условиями покупки.
Визуально карточки продолжают фирменную геометрию бренда и персонажа Лим в чб варианте под разные страны поставок. Цвет используется для навигации и разделения групп, а не как декоративный элемент. Так ассортимент воспринимается не как технический прайс-лист, а как понятный инструмент подбора продукта для конкретной бизнес-задачи.
Визуально карточки продолжают фирменную геометрию бренда и персонажа Лим в чб варианте под разные страны поставок. Цвет используется для навигации и разделения групп, а не как декоративный элемент. Так ассортимент воспринимается не как технический прайс-лист, а как понятный инструмент подбора продукта для конкретной бизнес-задачи.
Ассортимент и продуктовая подача
Сделать сложный ассортимент понятным для B2B-аудитории
Coffee Lui работает сразу с несколькими типами предложений: продажей зернового кофе, поставками для бизнеса, индивидуальными блендами и производством продукции под собственной торговой маркой. Сайт также должен был представить бренд, процессы поставки и ассортимент для разных форматов бизнеса.
Основной сложностью было не просто разместить большой объём информации, а разделить его на понятные направления. Клиенты приходят с разными задачами: кофейне нужен стабильный бленд, дистрибьютору - оптовые условия, а компании с собственной аудиторией - запуск продукта под своим брендом.
Я полностью выстроила информационную архитектуру, подготовила чёрно-белый прототип и определила последовательность ключевых разделов:
Главная / Кофе в зёрнах / Кофе для бизнеса / СТМ — Private Label / О бренде / Поставки / Блог / Контакты. Сначала в прототипе была зафиксирована продуктовая логика и приоритеты контента, а затем на эту структуру был наложен визуальный язык бренда.
Основной сложностью было не просто разместить большой объём информации, а разделить его на понятные направления. Клиенты приходят с разными задачами: кофейне нужен стабильный бленд, дистрибьютору - оптовые условия, а компании с собственной аудиторией - запуск продукта под своим брендом.
Я полностью выстроила информационную архитектуру, подготовила чёрно-белый прототип и определила последовательность ключевых разделов:
Главная / Кофе в зёрнах / Кофе для бизнеса / СТМ — Private Label / О бренде / Поставки / Блог / Контакты. Сначала в прототипе была зафиксирована продуктовая логика и приоритеты контента, а затем на эту структуру был наложен визуальный язык бренда.
Задача и архитектура
Объединить несколько направлений бизнеса в одном понятном сайте
Архитектура строится не вокруг формального каталога, а вокруг потребностей разных клиентов.
Для основных аудиторий были сформированы отдельные точки входа:
Каждый сценарий последовательно отвечает на основные вопросы пользователя: какой продукт подходит его формату, в чём коммерческая выгода, как устроены поставки и что необходимо сделать для начала сотрудничества.
Основные сценарии
Кофе для бизнеса Формат бизнеса → подходящее решение → преимущества → процесс работы → заявка
Производство под СТМ Возможности производства → этапы запуска → готовый продукт → обсуждение условий
Ассортимент Каталог → сорт или бленд → вкусовой профиль и условия → запрос образцов или прайс-листа
Основные действия — получение образцов, запрос оптовых цен и связь с компанией — повторяются в логичных точках пользовательского пути, а не только в конце страницы.
Для основных аудиторий были сформированы отдельные точки входа:
- кофейни и сети;
- рестораны и кафе;
- вендинговые компании;
- офисы и кейтеринг;
- оптовые дистрибьюторы;
- бренды, которым требуется производство под СТМ.
Каждый сценарий последовательно отвечает на основные вопросы пользователя: какой продукт подходит его формату, в чём коммерческая выгода, как устроены поставки и что необходимо сделать для начала сотрудничества.
Основные сценарии
Кофе для бизнеса Формат бизнеса → подходящее решение → преимущества → процесс работы → заявка
Производство под СТМ Возможности производства → этапы запуска → готовый продукт → обсуждение условий
Ассортимент Каталог → сорт или бленд → вкусовой профиль и условия → запрос образцов или прайс-листа
Основные действия — получение образцов, запрос оптовых цен и связь с компанией — повторяются в логичных точках пользовательского пути, а не только в конце страницы.
Пользовательские сценарии
От бизнес-задачи к конкретному предложению
После утверждения архитектуры и чёрно-белого прототипа я разработала дизайн всех страниц и адаптивных версий, а затем самостоятельно собрала сайт на Tilda.
Чтобы сохранить единый визуальный язык на большом количестве страниц, была сформирована повторяемая система:
Отдельно были выполнены технические задачи: адаптивная вёрстка, настройка форм, подключение домена и базовая SEO-оптимизация сайта.
Чтобы сохранить единый визуальный язык на большом количестве страниц, была сформирована повторяемая система:
- типографическая иерархия;
- цветовые роли;
- карточки продуктов и преимуществ;
- CTA-блоки;
- формы обратной связи;
- секции с этапами работы;
- элементы каталога;
- композиции с маскотом.
Отдельно были выполнены технические задачи: адаптивная вёрстка, настройка форм, подключение домена и базовая SEO-оптимизация сайта.
Финальный интерфейс и реализация
Полный цикл — от структуры до запущенного сайта
В результате был создан и запущен многостраничный сайт, который объединяет презентационную, продуктовую и коммерческую функции бренда.
Существующая айдентика получила полноценное цифровое продолжение: фирменная геометрия и палитра превратились в систему интерфейсных решений, а персонаж из логотипа - в 3D-маскота, способного развиваться в разных каналах коммуникации.
Архитектура сайта разделяет сложное B2B-предложение на понятные сценарии и помогает пользователям быстро перейти к ассортименту, условиям сотрудничества, образцам или производству под собственной торговой маркой.
Проект был выполнен мной полностью — от структуры и прототипа до визуального дизайна, вёрстки, подключения домена и SEO-настройки.
Существующая айдентика получила полноценное цифровое продолжение: фирменная геометрия и палитра превратились в систему интерфейсных решений, а персонаж из логотипа - в 3D-маскота, способного развиваться в разных каналах коммуникации.
Архитектура сайта разделяет сложное B2B-предложение на понятные сценарии и помогает пользователям быстро перейти к ассортименту, условиям сотрудничества, образцам или производству под собственной торговой маркой.
Проект был выполнен мной полностью — от структуры и прототипа до визуального дизайна, вёрстки, подключения домена и SEO-настройки.
Результат
Результат
