Как сделать сайт для анимационной студии и получить первые лиды ещё до запуска продвижения
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.
Это мой комментарий, что бы не было грустненько
Теперь и правда совсем не грустненько - спасибо!
Интересный замысел, но, честно говоря черный фон на любителя, мне больше нравится, наоборот белый фон для восприятия.
Согласны, что на любителя - мы и наши заказчики из таких + как раз на фоне всех остальных белых сайтов этот проект отлично выделяется и привлекает к себе внимание, в чем и была задумка в том числе. Но бесспорно, на вкус и цвет)
Вы серьезно пишете, что взяли ву и для скорости добавили туда жиквери?))
Это как написать, что взяли мерседес и добавили туда для скорости движок от запорожца.))
тоже прихуел
Ну что можно сказать, ребята "красавчики". Отработали славненько, но mobile design (мое мнение), тяжеловат таки... Я не о скорости, а о восприятии. Да, и подход необычен.
Хотя логотип из шапки я бы убрал. Мельчит он для mobile. Его на заходной экран воткнуть нужно. Крупно. Может даже подцветить как вы иконки сделали (классно).
Я, допустим, вижу так: в одной колонке лого, во второй надпись со стрелкой "ниже" и все это отрисовывается в вашем стиле.
Согласен, лишний секс, но эффект может быть "wow!".