Главное

• Жидкие кристаллы в стоках выглядят как иллюстрации из учебника — конкуренты отказались от визуализации продукта вообще. Мы нашли обходной путь через сток-видео и AI-генерацию в Midjourney.
• Стандартные возможности Tilda не давали нужного визуала — обтекаемую верстку, кастомные кнопки и параллакс собирали вручную.
• Через некоторое время после сдачи клиент вернулся с заказом на второй сайт — Gulf Research Solutions.

Контекст: B2B в жидкокристаллических технологиях, международный рынок, ничего нет

Maramako Limited — компания, которая занимается разработкой и поставкой жидкокристаллических материалов: субтерагерцовые жидкие кристаллы для 6G-систем, быстропереключающиеся составы для дисплеев, оптические полимеры, люминесцентные материалы.  На июнь 2025 у компании не было интернет-представительства – то есть не было ни сайта, ни логотипа, ни брендбука – все предстояло сделать с нуля. Причем срок у разработки был сжатым – к нам заявка поступила 18 июня, а сделать нужно было до 31.  Особенность проекта – сайт должен был быть рассчитан на мультинациональную и мультикультурную аудиторию. Партнеры компании — из разных стран: визуальный язык должен быть понят для инженера из Токио так же, как для закупщика из Мюнхена. Клиенты — исследовательские лаборатории и промышленные производители в Европе, США, Японии. Типичный B2B с узкой экспертизой и длинным циклом принятия решений. Единственное, что облегчило работу – клиент пришел с готовым контентом для сайта — уже были тексты, описания технологий, структура страниц. 

Задача: логотип и полноценный многостраничный сайт за две рабочие недели

Задача на первый взгляд казалась компактной – нужны были: логотип, фирменный стиль, многостраничный сайт с адаптивами и базовым SEO. Но за этой простотой скрывалась глубина — по сути, нужно было запустить международное представительство компании с нуля, причем так, чтобы партнеры в Европе, США и Японии увидели профессиональный сайт, а не заглушку. Если говорить конкретнее:

• разработать брендбук, подобрать фирменные цвета и элементы;
• подготовить логотип, одинаково хорошо выглядящий в хедере и на визитках;
• создать и согласовать шесть макетов с уникальной версткой;
• каждый макет перенести на сайт и адаптировать для всех типов экранов – ПК, планшетов, мобильных телефонов в разных размерах.

Отдельно была задача по SEO. За компактным термином «базовая оптимизация» стоят метатеги, структура URL, фавикон, HTTPS-сертификат, редиректы для www-версии.  Не будем забывать и о необходимости согласовывать каждое решение – менеджмент всегда тоже забирает время, которого и так практически не было.

Сложность: продукт, который не показать, и ограничения Tilda

Объем работы был понятен с первого дня — сложность пряталась в визуализации и ограничениях площадки. Жидкие кристаллы как предмет дизайна — это боль всей индустрии. Стоковый визуал по теме выглядит как иллюстрация из учебника, а конкуренты Maramako просто отказались от визуализации продукта из-за сложности реализации и ушли в абстрактные цвета. Мы решили, что сайт должен с первого экрана считываться так, чтобы посетитель, даже не погружаясь в текст, понимал: компания разрабатывает и поставляет жидкокристаллические материалы.

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

Что сделали: логотип, визуальная концепция через AI, нестандартная верстка, анимации

Логотип и фирменная палитра

Для Maramako мы разработали текстовый логотип на основе шрифта Signika — гротеск с чуть увеличенными строчными буквами. Выбор был осознанным: в B2B-тематике перегруженный логотип работает хуже, чем сдержанный, но при этом стандартные Arial или Montserrat выглядят слишком нейтрально и теряются. Signika попадала в промежуток между «интересно» и «не перегружено». Она хорошо читается и в хедере сайта, и на визитке, и мелким кеглем в подписи к письму. 

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

Визуализация продукта через сток-видео и AI-генерацию

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

Вторая находка — AI-шейпы. У Maramako четыре технологических направления, и каждому нужна была своя визуальная идентификация. Рисовать четыре иллюстрации вручную за девять дней или заказывать 3D-модели нереалистично: это недели работы и другой бюджет. Автоматизация при помощи AI существенно сократила время работы над этой частью задачи.  Мы сгенерировали в Midjourney объемные стеклянные шейпы и закрепили за каждым направлением свой цвет: красный, фиолетовый, голубой, зеленый. Посетитель различает направления, не вчитываясь в подписи. Клиент получает уникальную графику в сроки и бюджет, куда обычно помещается только сток.

Здесь важна одна деталь. Midjourney в этом проекте — это только инструмент. Дизайнер формулировал промпты, отбирал варианты, дорабатывал результат под фирменный стиль и интегрировал шейпы в макет так, чтобы они работали в системе — с текстом, кнопками, отступами, цветовой логикой. Генеративная модель ускорила процесс создания визуалов, но решение о том, как эти визуалы должны выглядеть и зачем они нужны, принимал человек. Разница между «сгенерировать красивую картинку» и «встроить сгенерированный визуал в работающую дизайн-систему» — примерно такая же, как между набором слов и текстом.

Обтекаемая верстка и кастомные элементы

Жидкие кристаллы — это текучесть. Эту идею мы перенесли в верстку: на первом экране каждой страницы изображение «обтекает» текстовый блок, граница между картинкой и текстом не прямая, а плавная, как поверхность жидкости. Рядом с конкурентами, у которых сайты сложены из прямоугольных блоков, — визуальный посыл считывается мгновенно.

Посетитель видит плавную линию. Дизайнер видит стопку шейпов. Стандартные блоки Tilda такой формы не дают, поэтому все шесть страниц собирали в Zero Block — режиме, где нет готового макета и каждый элемент ставится на холст вручную. Но и там нет масок: «обтекание» нельзя настроить один раз, для каждой страницы и каждого брейкпоинта — десктоп, планшет, мобильный — шейп вырезается в Figma отдельно и вручную ставится на сайт. Это самая трудоемкая по ручной работе часть проекта. Любая правка формы означает заново весь набор. 

Отдельная история — CTA-кнопки. Tilda в стандартном виде позволяет настроить смену цветов и добавить иконку, но это выглядит посредственно для сайта, где все остальное собрано нестандартно. Мы решили собрать кнопки полностью вручную, чтобы контролировать и форму, и анимации. Результат — кнопка с двойной формой (основное тело и отделенная стрелка) и анимацией заливки по ховеру, где красный цвет «засасывается» к центру, оставляя черный фон. Мелочь, но именно из таких мелочей складывается ощущение цельности.

Параллакс и интерактивные элементы

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

На страницах технологий и областей применения параллакс работает с 3D-объектами — теми самыми AI-шейпами. Цветные стеклянные формы двигаются в обратную сторону от курсора, и сайт из статичной страницы превращается в пространство, по которому хочется водить мышкой.

Почему сработало: три фактора успеха

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

• Первая — контент был готов до старта. Тексты, описания технологий и структура страниц пришли от клиента. Обычно проработка структуры — отдельный этап минимум на неделю-две; здесь он выпал, и дизайнер стартовала сразу с визуальной концепции.
• Вторая — доверие клиента. Первую обратную связь на макеты мы получили с комментариями вроде «делайте так, как по вашему мнению лучше, даже не спрашивайте — все супер». Это редкость: обычно согласования растягиваются на правки, уточнения и пожелания по деталям. Здесь доверие было высоким с самого начала, и это сэкономило дни.
• Третья — весь проект вела одна дизайнер. Логотип, макеты, верстка на Tilda, адаптивы, анимации — в одних руках. Поэтому здесь не было временных затрат на кросс-функциональную коммуникацию: не нужно объяснять верстальщику замысел, не нужно сводить видение двух людей. Tilda это позволяет — дизайнер работает с конечным продуктом напрямую, без участия разработчика на промежуточных этапах.

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

Результаты: рабочий сайт за 9 дней, повторный заказ

Задачу поставили 18 июня 2025 года. 30 июня — через 9 рабочих дней — клиент получил:

• Логотип на основе шрифта Signika с фирменной цветовой палитрой.
• Полный комплект макетов в Figma: главная страница и пять внутренних, десктоп, планшет и мобильная версия.
• Рабочий сайт maramako.com на Tilda с кастомной версткой, анимациями, параллаксом и AI-визуалами.
• Базовый SEO — от метатегов и структуры URL до HTTPS-сертификата и редиректов.
• Права на проект в Tilda и Figma — после сдачи сайт живет без нас:  обновить текст, заменить фото, добавить страницу клиент может сам, без специальных навыков.

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

Что изменилось для Maramako:

• У компании появилось международное представительство. До проекта ее нельзя было найти в интернете, а теперь англоязычный maramako.com сам объясняет продукт партнерам из Европы, США и Японии.
• Клиент управляет сайтом самостоятельно, без бюджета на поддержку.
• Сайт корректно находится в поиске с первого дня — поисковая база заложена при сборке.

Главный итог: через некоторое время клиент вернулся с заказом на второй сайт — Gulf Research Solutions. Повторный заказ — самый надежный индикатор качества нашей работы. 

Если продукт нельзя сфотографировать, а сроки поджимают

Материал, состав, технология, ПО — есть продукты, у которых нет внешности. На стоках вместо них учебные иллюстрации, у конкурентов — абстрактные градиенты. И производитель, который знает продукт до молекулы, не обязан представлять, как он должен выглядеть на экране. Когда к этому добавляется фиксированная дата — выставка, переговоры, выход на новый рынок, — задача выглядит невыполнимой: сначала придумать, как показать непоказываемое, потом успеть это собрать. Кейс выше — о том, что такая задача решаема. Референс, AI-визуал и верстка, выведенная из самой темы продукта, дали Maramako узнаваемый сайт за девять рабочих дней. Напишите нам. Посмотрим на продукт и срок и скажем, что реально сделать к вашей дате и на какой платформе.