Pyrobattle. Лендинг для креативного конкурса веб-дизайнеров

Главное о кейсе

Создали яркий, при этом минималистичный, информативный лендинг для Pyrobattlе – дизайн-баттла UX/UI-дизайнеров с призовым фондом в 100 000 рублей.

• Суммарно потратили 3 дня. За 2 разработали концепцию и отрисовали дизайн в Figma, за 1 перенесли на Tilda. Далее, по ходу конкурса, дополняли сайт: включали zero block с нужной информацией и вели техподдержку.

• Сайт был единственной площадкой, на которой участники могли зарегистрироваться на дизайн-баттл.

• За все время публикации сайта, с 4 октября по 20 ноября 2023 года – 8 123 просмотров, визитов 6504 и 4025 посетителей.

• На дизайн (неосознанно) наш арт-директор вдохновился обложкой альбома METALLICA — 72 Seasons.

• На концепцию вдохновлялись названием самого конкурса — часть Pyro значит «огонь». Соревновательную часть решили показать отсылками на ретро-боевики.

• Концепт сайта дал вдохновение для мерча Пиробаттла: футболок, кепок, плакатов, стикеров, сертификатов участников.


Перевод

• We created a bright, yet minimalistic, informative landing page for Pyrobattle – a design battle between UX/UI designers with a prize fund of 100,000 rubles.

• The website was the only platform where participants could register for the design battle. For the entire period of publication of the site, from October 4 to November 20, 2023 - 8,123 views, 6,504 visits and 4,025 visitors.

• The website contains the necessary information about the competition: rules, deadlines, webinar schedule, jury composition, FAQ, results.

• Our art director was (unconsciously) inspired by cover of Metallica - 72 seasons album

Бизнес-задача и ее решение

• Задача 1: Продумать структуру и контентное наполнение лендинга.

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

Копирайтер собрал предварительную структуру блоков сайта: «О баттле», «Даты проведения», «Регистрация на баттл», «Жюри», «Вебинары», «FAQ», «Организаторы», «Инфопартнеры», «Контакты». Эту информацию разместили сразу же.

Заранее подготовили и задизайнили блоки
«Задание» (намеренно публиковали отдельно), «Сдача работ», «Победители баттла». Их включали по необходимости и срокам. Так, блоки «Задание» и «Сдача» работ открыли 1 ноября, на старте самой конкурсной части. Блок «Победители» — 21 ноября, на утро после финального эфира с итогами баттла.

За вербальную основу взяли игру слов со значениями «огонь» — огненный баттл, зажигаем новые знания, огонь креатива. Так подчеркнули и само название баттла — Pyrobattle, и принадлежность к студии — Pyrobyte.

• Задача 2: Разработать дизайн-концепцию сайта

Решение: Этот процесс шел параллельно с проработкой структуры.
Сначала арт-директор подобрали референсы и источники вдохновения.

Главным графическим элементом выбрали контурный минималистичный желтый огонь. Его разместили как в статичном, так и динамичном, анимированном варианте.

К огоньку добавили отсылки к кунг-фу ретро-боевикам. Для каждого тематического блока подобрали gif-анимации.

За основу цветовой палитры взяли два цвета: черный и желтый. Референсами стали костюмы Брюса Ли из «Игры смерти» и Беатрикс Киддо в исполнении Умы Турман из «Убить Билла».

Черный  ассоциируется с силой, что в нашем случае совпало с отсылками к боевикам :).

Желтый считается самым ярким и энергичным из всех теплых цветов. Ассоциируется со счастьем и солнечным светом, надеждой и немного с опасностью.

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

Тексты набраны Martian Mono. Это аккуратный читаемый моноширинный шрифт. Такие хороши в небольших текстовых блоках, в акцентах, в том числе для выборочного чтения. Потому с ними легко работать, за что моношрифты и любят многие дизайнеры.

• Задача 3: Запустить регистрацию участников Pyrobattle через сайт.

Решение: Оперативность публикации лендинга — важный фактор в нашем случае. Именно через форму, размещенную на нем, участники регистрировались на дизайн-баттл. Кроме того, ссылку на сайт распространяли партнеры конкурса в постах и рассылках.

Структуру и тексты для сайта, а также дизайн сделали примерно за 2 дня. Еще день потратили на перенос макета на Tilda. Итого лендинг для Pyrobattle подготовили и запустили за 3 дня.

• Задача 4: Техподдержка сайта и актуализация информации

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


Перевод

• Task 1: Think over the structure and content of the landing page.

Decision: We started this stage as soon as we prepared the final version of the Pyrobattle rules. We had necessary invoice texture for logic and content. The information had to be structured and anticipate questions that might arise from the battle participants.

• Task 2: Develop a design concept for the site

Solution: This process went hand in hand with the development of the structure.

First, the art director selected references and sources of inspiration.To the flame we’ve also added some kung fu action film references. GIF animations were selected for each thematic block.

The color palette was based on two colors: black and yellow. The references were the costumes of Bruce Lee from Game of Death and Beatrix Kiddo played by Uma Thurman from Kill Bill.

In contrast, the two colors created a perfect duo tone A graphic element (f(flame symbol) instantly memorable in these colors is immediately memorable and begins to evoke a direct association with the competition and the studio that organized it.

Texts were typed using Martian Mono font.

• Task 3: Start registering Pyrobattlе participants through the website.

Solution: The speed of publication on the landing page is a key factor in our case. The registration of participants was made through a form on a website. Moreover, the link to the website was distributed among the partners of our competition through emailing and advertisement posts.

•Task 4: Website technical support and updating information

Solution: The necessary blocks and content for them were prepared in advance. We opened them at the right moment: for example, when the date of announcing the webinar was approaching, or when when the we’ve already streamed the awarding of the participants.

Крафт (мастерство), реализация, технические детали

• Стэк: Figma, Tilda

Перевод

• Stack: Figma, Tilda

Инсайты, гипотезы, процесс создания и взаимодействия с заказчиком

• Первое вдохновение на цвета лендинга было неосознанным

Так это объясняет наш арт-директор Евгений: «Где-то с неделю, еще до начала работы над лендингом Пиробаттла, у меня на рабочем столе стояла пластинка METALLICA — 72 Seasons. Ее обложка сделана в двух цветах: черном и желтом.

Когда приступили к дизайну лендинга, в голову сразу пришли именно эти два цвета. А вот осознание, почему — чуть позже, когда мы уже вспомнили костюмы героев боевиков. Неосознанно дал сам себе установку, получается, которая удачно подошла :) ».

• Концепция и тон сайта задали весь визуал проекта

Цветовую гамму и минималистичную стилистику выдержали и в мерче: футболках, кепках, значках, стикерах, плакатах, подарочных боксах.

• Отсылки к ретро-боевикам добавляли в контент для каналов баттла в соцсетях.

Например, с помощью нейросетей переводили фотографии экспертов в стиль аниме. Создали несколько коротких видео: соединили в них отрывки из культовых боевиков с мотивирующими или напоминающими о дедлайне фразами.


Перевод

• The first inspiration for the landing page colors was unconscious.

This is how our art director Evgeniy explains it:
“For about a week, even before I started working on the Pyrobattl landing page, I had the METALLICA — 72 Seasons record on my desktop. their cover is composed of two colors. When we started designing the landing page, these two colors immediately came to mind. It was only when we remembered the colors of the action heroes' costumes that we realized why we had chosen those colors. I believe I've subconsciously programmed myself to do it, and it turned out to be great :)"

• The concept and tone of the site set the entire future visual of the project

The color scheme and minimalist style were also referenced in the merch: T-shirts, caps, badges, stickers, posters, gift boxes.
References to retro action films were added as content in channels of competition on social media.

Скриншоты