Дизайн
#кейсы

Как монетка стала кнопкой: рассказываем о редизайне студии «Сирена»

И показываем, какие варианты отвергли в процессе.

Иллюстрация: Полина Честнова для Skillbox Media

Ребрендинг студии «Сирена» стал оскароносным (ну почти — сайт выиграл премию G8 в номинации «Сайты. Прорывные решения» категории Web & App 2024).

Дизайнеры студии рассказали нам про игровые механики и про то, как придумали лаконичную идею логотипа-кнопки.

Матвей Медведев

Creative dev lead

Александр Куканов

Арт-директор

Марк Холодов

Head of marketing

О студии

«Сирена» — креативная студия внутри «Спортс». Команда создаёт кастомные веб-игры, тесты, квизы, контентные лендинги и решает другие креативные задачи. «Сирена» — потому что изначально хотели ассоциироваться с теми, кто делает нечто громкое. А ещё это ассоциация со спортивной сиреной, которая есть в хоккее, когда забивают шайбу. Большинство проектов студии из спортивной индустрии.

«Мы фанаты игр: компьютерных, настольных, спортивных. И к созданию специальных проектов мы подходим как к созданию игры. У нас есть геймдизайнер, она продумывает путь пользователя, уровни вовлечения, механики. За всё время работы мы чего только не воплотили: детективную историю про кражу кубка, олимпийские игры для „Самоката“, построили город и многое другое», — говорят в студии.

Почему был нужен ребрендинг

За пять лет работы студия изменилась: выросла команда, стало больше проектов, добавились новые направления. Поэтому креативщики задумались об обновлении стиля.

Арт-директор студии Александр Куканов, который разрабатывал как старый, так и новый дизайн, рассказывает:

— Когда я только пришёл в «Сирену», то сразу понял, что тут все живут играми: всем нравились игры, все рубились в игры. Поэтому при создании предыдущего логотипа мы нашли коин — игровая монетка, нарисованная в пикселях, — и сделали её нашим символом. Жёлтый цвет был выбран из-за сходства с монетками. В какой-то момент у нас даже появилась идея использовать её в спецпроектах как собственную игровую валюту.

Идея перехода к новому логотипу возникла, когда мы осознали, что «Сирена» изменилась. Из небольшой инхаус-студии мы выросли в команду, которая реализует сложные специальные проекты, применяет опыт геймдизайна, экспериментирует с 3D, разрабатывает новые игровые механики. Пришло время меняться и внешне.

Всё начинается с самоопределения

Марк Холодов рассказывает:

— Главная трудность возникла в понимании, а что мы вообще хотим? Кто мы? О чём хотим заявить миру? Экзистенциальные вопросы. Поэтому, кроме простого обновления стиля, мы ещё и пересмотрели некоторые внутренние вопросы самоопределения. Это нельзя назвать бренд-платформой, но нечто похожее.

Главным источником вдохновения при создании стиля стали люди. Мы общались один на один, штурмили вместе, обсуждали идеи даже за обедом.

Нужную идею искали долго. Прикидывали множество разных вариаций исполнения: от абстракции до обычного текстового написания. В штурмах поняли, что нам нужен какой-то объект из диджитал-мира, компьютерных игр.

Изображение: «Сирена»

Перебирали картинки с курсорами, другими иконками и остановились в итоге на кнопке. Всё из-за короткого вброса: «А почему не может быть кнопка?»

Изображение: «Сирена»

Так кнопка стала главным элементом айдентики. Это понятный и узнаваемый образ для мира игр и digital. Мы включаем компьютер через нажатие кнопки, создаём контент с помощью кнопок, общаемся с помощью кнопок, играем с их помощью. Наш связующий элемент был найден.

Изображение: «Сирена»
Изображение: «Сирена»

Почему фиолетовый цвет

— Основным цветом стал сиреневый/фиолетовый. Если честно, так и не решили, как его называть. Мы проанализировали рынок и заметили, что на рынке нет ни одной креативной студии с таким цветом: есть красный, монохромный, белый, чёрный, жёлтый. А такого — нет.

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

Изображение: «Сирена»
Изображение: «Сирена»
Изображение: «Сирена»

Проекты и баскет с анекдотами

— Новый сайт — ещё одна деталь в обновлении «Сирены». Здесь мы решили пойти на сложный, но важный эксперимент и зайти на территорию 3D. Сайты с такой нагрузкой требовательны, могут долго загружаться, и мы понимали это.

Но на рынке студий не так много игроков, которые применяют подобные решения. Все сайты выполнены по единой структуре, несут за собой больше элемент информационной эффективности. Мы же решили сделать что-то другое, что кардинально отличает нас от проектов коллег.

Так мы пришли практически к игровой концепции сайта «Сирены», где есть и рабочее, и что-то фановое: отсылки к прошлым проектам, теги нашей команды и даже уличный баскетбол. Если вам надоест лазать по сайту, то вы прямо там можете покидать мяч в кольцо. Или посмеяться над шутками, которые пишет один из наших сотрудников, — объясняют в студии.

Матвей Медведев, creative dev lead, рассказывает:

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

Сайт создавался долго, потому что мы не особо умели это делать. Говорить, что получилось что-то невероятное, нельзя, потому что многие ответят, что сайт лагает. Всё так, мы немного косякнули с оптимизацией. Текущая версия — наша попытка зайти в 3D-web.

На сайт мы потратили несколько месяцев, над ним работали девять человек. Честно говоря, я очень критично оцениваю то, что получилось в итоге с оптимизацией. Это просто наша первая попытка, и у сайта есть много недостатков, но есть и свои преимущества.

Изображение: «Сирена»

Всё наполнение — это тема для своих. Например, тема с Cordiant — она про сложный проект с компанией. Поэтому я поставил тачку с Cordiant. Есть Pacman — это вообще наш первый проект, который лагал и за который клиент нас раскритиковал. Его я тоже туда поставил. Кафе «Булкер» — кафешка рядом с прошлым офисом. Есть баскетбол с анекдотами как ещё одна отсылка к интерактивным проектам.

Изображение: «Сирена»

Это всё очень сложно создавать — в 3D-web всё же. У нас есть несколько студий, на которые мы ориентируемся, например французская Merci Michel: чуваки там делают на совсем другом уровне.

В ближайшее время студия обещает ещё обновить сайт.

Изображение: «Сирена»

Три совета от «Сирены»:

— Меняться бывает трудно, но без изменений нет движения вперёд. После своего опыта у нас всего два важных совета:

1. Вдохновляйтесь не только стилями, но и всем, что окружает вас вокруг: люди, энергетика, продукт и многое другое. Чаще всего именно там кроется нужная идея.

2. Пробуйте создавать новое. Если у вас есть возможность сделать нечто нетипичное, поэкспериментировать, предложить рынку другое решение — обязательно сделайте это. Ведь именно смелые решения ведут рынок в будущее.

3. Обязательно поймите, а кто вы и про что вы? Можно придумать офигенный стиль, который привлечёт внимание, но если он не будет отражать настроение вашей команды и ваши проекты, то это приведёт к рассинхрону восприятия вашего бренда. Поэтому если предстоит ребрендинг, то лучше потратить время и расставить точки в смыслах, а уже потом переходить к созданию фирменного стиля.

Научитесь: Профессия Графический дизайнер PRO Узнать больше
Понравилась статья?
Да

Пользуясь нашим сайтом, вы соглашаетесь с тем, что мы используем cookies 🍪

Ссылка скопирована