Как сделать сайт для анимационной студии и получить первые лиды ещё до запуска продвижения
- Заказчик
- Lemon Digital — команда креативных аниматоров из США, которые создают уникальные 2D ролики для бизнеса.
- Задача
- Разработать уникальную площадку, на которой Lemon сможет опубликовать более 40 созданных анимаций для сферы ICO и блокчейна, чтобы привлечь единомышленников и получить новые заказы.
Идея
В основе концепции дизайна — желание заказчика передать дух блокчейна. И мы решили отразить непрерывную последовательность блоков в точках. Элементы возникают, хаотично взаимодействуют и сплетаются в образ цифровой монеты.
Прямая отсылка к криптовалюте наполняет новую платформу символизмом и выстраивает прочную связь с целевой аудиторией.
Реализация
Концептуальный и лаконичный сайт должен выделить студию в digital-пространстве, показать работу и плавно привести пользователя к оформлению заявки. Поэтому в реализации мы максимально облегчили UI и сохранили уникальный стиль Lemon Digital. Для этого потребовались найти продуктивный баланс между техническими решениями и воплощением идеи в дизайне.
Разработка
С технической стороны нашей целью стало создание сайта с хорошей оптимизацией, отлаженной анимацией и удобным управлением. К счастью, заказчик предоставил нам полную свободу выбора решений, и мы собрали, наверное, идеальный пул инструментов для работы над площадкой.
Выбор фреймворка пал на Vue.js — прежде всего из-за отличной производительности на небольших проектах. Затем в проект добавили библиотеку Jquery для ускорения и облегчения рутинных задач поиска элементов и работы с массивами. За удобное взаимодействие с сайтом жестами отвечал Hammer.js.
Ничто не спасёт платформу, если она не загрузится. Поэтому анимация была прописана кодом с помощью GSAP, видео открываются в новой вкладке и не перегружают площадку, а в структуре нет сложных элементов. В завершение мы подчистили код и избавились от костылей, чтобы ничего не мешало удобной работе с сайтом в дальнейшем.
Дизайн
Создание яркого пользовательского опыта — очевидная задача дизайна. Мы добавили к ней желание сфокусировать внимание на работах студии и подобрали монохромную палитру в дополнение к общему минимализму. Чёрный, белый и серый цвета подчеркнули стиль площадки и сделали акцент на ярких роликах аниматоров, которые контрастируют с b/w фоном сайта.
Главные информационные блоки мы разместили в центре экрана, а весь функционал перенесли на края страницы. Так иконки не отвлекают внимание от сообщения и всегда доступны для получения дополнительной информации, навигации по сайту и заполнения формы заявки:
- соцсети студии и гамбургер-меню в правом верхнем углу;
- форма для заказа звонка в правом нижнем углу;
- кнопка перехода между экранами.
И — вишенка на торте — электронная подпись основателя Lemon Digital в разделе о возможностях команды. Это необычное решение появилось спонтанно, но мы решили оставить его в финальной версии как символ гарантии отличного результата.
Итоги
Создание уникальной площадки для роликов по ICO и блокчейну заняло около 2 месяцев. За это время мы сделали стильный и быстрый сайт с рейтингом 99% по оценке PageSpeed Insigts. А первые заявки заказчик получил ещё до начала продвижения, когда мы просто опубликовали платформу на Awwwards.
Награды
Awwwards — Honorable Mention
CSS Design Awards — Special Kudos
