и мы свяжемся с Вами в ближайшее время!
Bottle CodeСайт с вау-эффектом для нового направления: алкогольной логистики
Главная анимация сайта. При прокрутке бутылка выпрямляется и переходит в следующий блок. Там на ней проявляется акцизная марка. Одна бутылка показывает обе стороны сервиса: доставим и промаркируем.
Не просто сайт, а впечатление
Наши постоянные клиенты запускали новое направление: алкогольную логистику полного цикла. Им был нужен сайт, который создаёт вау-эффект и визуалом, и сутью. Заготовок не было: ни текстов, ни фото, ни бренда. Весь контент мы сделали сами, от клиента получали только техническую информацию.
Референсы
Собрали несколько визуальных направлений и обсудили их с клиентом.
Идея
Предложили варианты главной идеи сайта и вместе выбрали одну.
Прототип и тексты
Собрали структуру и написали все тексты под новое направление.
Дизайн десктопа
Нарисовали макет и продумали анимации для ключевых экранов.
Мобильная версия
Отдельный макет для смартфонов, а не просто сжатый десктоп.
Tilda и запуск
Перенос на Tilda, адаптация, формы, техстраницы и почты.
Четыре направления и один выбор
Мы собрали несколько подборок: от строгих логистических сайтов до ярких имиджевых проектов с крупной графикой. Обсуждение с клиентом помогло понять, что ему ближе: деловой характер, но с запоминающейся подачей. Итоговый референс задал общее настроение сайта.
Из нескольких вариантов выбрали идею крутящейся бутылки с тиснением Bottle Code. Одна картинка объясняет весь сервис, и от неё мы отталкивались во всём остальном сайте.
Груз, который нужно доставить
На первом экране бутылка стоит под наклоном, как груз в пути. Это логистика, таможня и хранение на складе.
Продукция, которую нужно промаркировать
При прокрутке бутылка выпрямляется и переходит в следующий блок. Там на ней появляется акцизная марка: продукция оформлена и готова к продаже.
Деловой тон без скуки
В прототипе мы выстроили логику: кто такой 4PL-оператор, что он берёт на себя, где склад, как устроена маркировка и кто стоит за проектом. Тексты писали с нуля по технической информации от клиента. Задача была объяснить сложный сервис просто и при этом звучать уверенно.
Винный цвет и много воздуха
Визуал вырос из главной идеи. Глубокий винный цвет, светлые экраны, крупная типографика и фотореалистичные объекты: бутылка, кран, контейнер, судно. Блоки появляются плавно, карты и фото собраны в одном стиле. Сайт выглядит солидно, как и положено B2B-сервису, но его хочется досмотреть до конца.
Отдельный макет для смартфона
Мобильную версию мы нарисовали отдельным макетом. Анимации упростили, но сохранили главное: бутылку, складские цифры и сцену с краном. Сайтом удобно пользоваться одной рукой.
Много движения, но по делу
Анимации на сайте много, но каждая что-то объясняет. Бутылка показывает суть сервиса. Контейнер покачивается на тросах крана, пока посетитель читает про перевозку. Цифры склада появляются в нужный момент. При этом мы следили, чтобы движение не мешало читать и не превращало сайт в мастер-класс по анимации.
Каждая сцена со смыслом
Бутылка рассказывает про маркировку, кран с контейнером про перевозку. Анимация продолжает текст, а не украшает его.
Не мешает читать
Движение спокойное и привязано к прокрутке. Текст остаётся на месте, кнопки и формы работают как обычно.
Работает на телефоне
Для мобильной версии сценарии упростили, чтобы сайт оставался лёгким и удобным.
Фирменный стиль для нового направления
Новому направлению нужен был не только сайт. Мы собрали для проекта цельный образ: цвета, шрифты и графику с бутылкой. Всё работает в одной системе с сайтом.
Знак по пожеланию клиента
Логотип сделан по пожеланию клиента. Мы предлагали более лаконичные варианты, но на тот момент клиенту был важен именно такой знак. Поэтому мы встроили его в систему так, чтобы он гармонично смотрелся на сайте.
Не только красиво, но и работает
Макеты мы перенесли на Tilda, адаптировали под разные экраны и настроили всё, что нужно для работы. Заявки с сайта приходят на почту, техстраницы на месте, у команды есть корпоративные адреса на домене проекта.
Обсудим вашу поставку
Заявки на почту
Подробная форма для расчёта поставки. Заявки сразу приходят на почту команды.
Технические страницы
Политика конфиденциальности, согласие на обработку данных и материалы для клиентов.
Доменные почты
Создали и подключили корпоративные адреса на домене проекта для отделов и сотрудников.
Новое направление с готовым брендом
Сайт с идеей
Бутылка с двумя сторонами объясняет сервис быстрее любого абзаца и запоминается.
Контент с нуля
Тексты, визуал и графику сделали сами. От клиента была только техническая информация.
Цельный бренд
Сайт, фирменный стиль и корпоративные почты работают в одной системе.
Готов к работе
Формы, почты и техстраницы настроены. Сайт удобен и на десктопе, и на телефоне.
Запускаете новое направление?
Придумаем идею, соберём сайт и бренд, чтобы о вас запомнили с первого экрана.