Имиджевый лендинг на Tilda для международной фармкомпании Boiron

Имиджевый лендинг на Tilda для международной фармкомпании Boiron

Обновили визуал, упростили навигацию и адаптировали сайт под мобильные устройства
Создали современный визуал
Выстроили понятную навигацию и упростили путь к заявке
Сделали удобную мобильную версию с адаптацией под разные устройства и браузеры
Получить персональное предложение и стоимость

Любой сайт со временем устаревает. Примерно раз в 5–7 лет ему нужно обновление, просто чтобы не выглядеть «приветом из прошлого» и не отпугивать посетителей с первого взгляда.

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

В этом кейсе рассказываем, как мы обновили внешний вид и сценарии поведения на имиджевом экологическом лендинге для фармкомпании «Буарон».

Ситуация на старте

«Буарон», лидер рынка гомеопатии, обратилась к нам для редизайна морально устаревшего лендинга своего просветительского проекта «Экофармацевтика BOIRON»

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

Этот проект дополняет наше сотрудничество с брендом. О разработке корпоративного сайта для «Буарон» мы уже подробно рассказывали в отдельном кейсе.

CMS

Tilda

Задачи и требования

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

Ключевые решения

1. Разработали дизайн лендинга

Обновили визуал, чтобы лендинг лучше отражал суть проекта: заботу о себе и ответственное отношение к окружающей среде.


Сделали дизайн легким и современным

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

Первый экран: от плотного фона к воздуху и ярким акцентам.
Первый экран: от плотного фона к воздуху и ярким акцентам.


Добавили фирменные графические элементы

Цветные круги и полукруги (желтый, зеленый, бирюзовый) стали визуальными якорями, которые оживляют страницу и помогают глазу ориентироваться в длинном лендинге.


Ввели систему маркеров секций

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

Маркеры секций помогают ориентироваться в структуре лендинга.
Маркеры секций помогают ориентироваться в структуре лендинга.


Обновили типографику и подачу

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


Подобрали современные фотографии

Заменили старые изображения на более живые и понятные: люди, препараты, процесс утилизации. Это делает проект ближе и понятнее пользователю.

2. Продумали навигацию

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


Обновили шапку сайта для удобства

Убрали длинное меню из шапки и спрятали навигацию в аккуратный бургер. Это делает первый экран чище и не отвлекает пользователя от главного. Кнопку «Заказать контейнер» вынесли на самый верх. Теперь она всегда на виду: можно оставить заявку в любой момент, не прокручивая страницу.

Простое меню с якорными ссылками, соцсетями и акцентной кнопкой призыва к действию.
Простое меню с якорными ссылками, соцсетями и акцентной кнопкой призыва к действию.


Свернули длинные тексты в аккордеон

Чтобы не перегружать страницу, подробности скрыли под ссылки «далее». Пользователь сам решает, читать полный текст или двигаться дальше, а лендинг остается легким и не пугает объемом.

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


Акцентировали переход на материнский сайт

Блок «Препараты Буарон» получил яркую кнопку «Перейти на сайт»: глядя на нее, пользователь сразу понимает, куда ведет ссылка и что он там найдет.

Заменили абстрактное «Подробнее» на понятное «Перейти на сайт».
Заменили абстрактное «Подробнее» на понятное «Перейти на сайт».


Упростили форму заявки

Вместо длинного и сложного заголовка сделали короткий и понятный призыв. Так пользователь охотнее оставляет контакты.

Текст кнопки в лид-форме тоже поменяли с «Подписаться» на «Отправить», чтобы посетителю было понятнее.
Текст кнопки в лид-форме тоже поменяли с «Подписаться» на «Отправить», чтобы посетителю было понятнее.

3. Сверстали и интегрировали в Tilda

Собрали лендинг на Zero Block, что дало полную свободу в дизайне и позволило реализовать все задуманные графические элементы.

Реализовали дизайн строго как в макете. Настроили анимации и интерактив: 

плавное появление блоков при скролле, работа аккордеонов, корректное открытие меню — всё работает без задержек и глюков.

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

4. Адаптировали сайт под мобильные устройства

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

Аккордеоны, формы и списки адресов переработали под вертикальный скролл. Кнопки стали достаточно крупными, чтобы по ним было удобно попадать пальцем.

Мобильная версия лендинга: графика, текст и навигация — всё адаптировано и удобно.
Мобильная версия лендинга: графика, текст и навигация — всё адаптировано и удобно.

5. Протестировали и запустили лендинг

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

Результаты

  • Лендинг выглядит легко, стильно и полностью соответствует духу и стилю материнской компании. 
  • Сделали сайт удобным для мобильных. Большая часть аудитории заходит со смартфонов. Теперь им не нужно щуриться и приближать экран — всё читается легко, а до кнопок удобно дотянуться пальцем.
  • Упростили путь к заявке. Кнопка заказа контейнера всегда на виду, а форма стала понятнее. Пользователю легко оставить заявку на установку Pharma-Ecobox.

Мы превратили морально устаревший сайт в современный и удобный инструмент. Пользователям теперь легко читать и оставлять заявки, а команде «Буарон» — быстро обновлять контент. Этот лендинг стал хорошим примером того, как грамотный редизайн на Tilda закрывает и имиджевые, и технические задачи, не раздувая сроки и бюджет клиента.

Частые вопросы о разработке и доработке сайтов

1. Какую CMS выбрать для разработки сайта?

Выбор платформы зависит от задач проекта, бюджета и требований к функционалу. Для корпоративных сайтов и сложных проектов с интеграциями часто рекомендуем 1С-Битрикс. Это мощная CMS с широкими возможностями, но требующая ресурсов сервера и квалификации разработчиков. Для небольших сайтов и лендингов подойдут WordPress или Tilda — они проще в освоении и дешевле в поддержке. Мы также работаем с такими платформами как MODX или Laravel.

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

2. Зачем заказывать разработку уникального дизайна, если можно использовать готовый шаблон?

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

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

3. Как подготовить контент для сайта до начала разработки?

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

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

Если контент не готов, мы помогаем с его созданием: проводим интервью с представителями бизнеса для сбора информации, пишем тексты с учетом SEO-требований, организуем фотосъемку или подбираем стоковые материалы. Важно понимать, что разработка дизайна и верстка с «рыбой» (шаблонным текстом) возможны, но финальное наполнение и тестирование должны проходить с реальным контентом, чтобы избежать проблем с версткой и восприятием.

4. Когда начинать SEO-продвижение сайта?

Правильная SEO-оптимизация начинается не после запуска сайта, а на этапе проектирования. Мы изучаем поисковые запросы целевой аудитории, анализируем конкурентов и учитываем требования поисковых систем при создании структуры и технического задания. На этапе разработки настраиваются мета-теги, создаются ЧПУ (человекопонятные URL), продумывается семантическая разметка, оптимизируется скорость загрузки, создается XML-карта сайта. В результате после запуска сайт уже готов к продвижению и индексации, что экономит время и бюджет на дальнейшую SEO-оптимизацию.

5. Какие интеграции можно реализовать при разработке сайта?

Современный сайт — это часть экосистемы бизнеса, поэтому важны интеграции с внешними сервисами. При разработке мы подключаем CRM-системы (Битрикс24, AmoCRM и другие) для автоматизации обработки заявок, 1С для синхронизации товаров и остатков, платежные системы для приема онлайн-оплаты, сервисы аналитики (Яндекс.Метрика) для отслеживания поведения пользователей, email-рассылки и мессенджеры для коммуникации с клиентами. Такие интеграции превращают сайт из информационной визитки в полноценный инструмент лидогенерации и продаж с прозрачной отчетностью и автоматизацией рутинных процессов.

Остались вопросы?
Закажите бесплатную консультацию

Используя наш сайт вы даете согласие на обработку файлов cookie. Если вы не согласны на обработку ваших данных, покиньте сайт.