Traffic Jam 2024: как сделать захватывающий лендинг с помощью нейросети
5 мин чтения
Каждый год мы проводим конкурс для вебмастеров под названием Traffic Jam. И в год дракона, наша команда Rafinad выбрала соответствующую тематику. Рассказываем, как использовали нейросеть в создании лендинга, чтобы погрузить участников в огненную атмосферу🔥
Traffic Jam – это наш ежегодный тематический конкурс, где участники получают кешбэк, продвигаясь по уровням и зарабатывая "сахарки". Среди лучших 10 участников будет распределен призовой фонд более 3 000 000 рублей! Подробнее о конкурсе мы рассказывали в статье «Traffic Jam: как организовать конкурс для вебмастеров с призовым фондом более 3 млн рублей».
Каждый год мы создаем новый лендинг, так как тематика конкурса меняется. В 2024 году мы решили внести немного магии и фэнтези, обратившись к теме драконов – «Охота на драконов».
Наша цель была – создать креативный лендинг, который расскажет о конкурсе и привлечет внимание вебмастеров.
Для начала провели подготовительную работу по сбору информации о драконах и связанных с ними элементах. И затем мы обратились к нейросети, которая быстро создает уникальные креативы.
Создание креативов
Мы генерировали в нейросети каждый элемент, которые потом собирали в один креатив.
Несмотря на мифическую тему конкурса, у нас все-таки реалистичные призы:) Мы разместили призы в сундуки, добавив подсветку при наведении.
Наш конкурс в формате соревнования, поэтому важно было вынести на лендинг прогресс участников.
Разработка лендинга
Результатом эксперимента с нейросетью стал креативный и качественный дизайн лендинга. Хоть сама концепция и отличается смелостью, но содержит в себе большое количество графических элементов. Особенно сложной оказалась анимация главной страницы, и реализация требовала решения некоторых проблем.
1. Синхронизация видео. Сами анимации представляли собой три видео, которые проигрываются каскадно в установленном порядке. И сложность была в том, что лендинг был перенасыщен графическими элементами, такой вес приводит к долгой загрузке.
По итогу добавили прелоадер и скомпрессировали видео до минимально возможного размера так, чтобы сократить время загрузки именно анимаций. Кроме того, объединили некоторые анимации в один файл для сокращения количества отдельных элементов в цикле.
2. Прозрачность видео. Во время оптимизации мы искали баланс между качеством видео и его размером. Дело в том, что видео должны быть на прозрачном фоне, поэтому отдельные трудности вызвали некоторые браузеры, в частности Safari, которые не читают webm.
В итоге это приводит к некорректной работе на устройствах MacOS и iOS. После подбора “читаемых” кодеков было принято решение использовать видео в формате mov для отдельных браузеров.
3. Оптимизации размеров видео. Был выбран формат webm и подобран минимально допустимый размер при котором сохранялось качество.
По итогу мы получили качественный, привлекательный и уникальный дизайн лендинга конкурса о драконах, который успешно привлекает внимание участников и посетителей. Использование искусственного интеллекта в процессе создания дизайна позволило значительно ускорить работу над проектом, сделать его более эффективным и оригинальным.
Переходите на конкурсную страницу, участвуйте и зарабатывайте “сахарки” для победы. И не забудьте подписаться на наши соцсети, чтобы не пропустить еще больше огненных новостей!