Кейс веб-студии: Фирменный стиль и имиджевый мультиязычный сайт исполнителя поп-музыки на Тильде

Мы — веб-студия «Quadro». Рассказываем о том, как проходил творческий процесс, какие фишки использовали и делимся секретами

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

Мы разработали фирменный стиль для Стеллы, а также разработали мультиязычный имиджевый сайт с прикольной визуализацией

Она простая девушка из Евпатории (Крым) — именно там начинала свою карьеру. Но уже несколько лет живет и работает в Японии. И сейчас ее песни популярны на нескольких континентах, а их стиль близок к современной поп-музыке, но с особым изяществом.

Мы разделили работу на несколько этапов: анализ, творческая часть и техническая. И прежде чем перейти к технической части — мы сделали брендбук, оформили YouTube и SoundCloud. Заложили фундамент для дальнейшей работы других PR-служб.

Мы проанализировали рынок: посмотрели сайты всех популярных исполнителей и музыкантов, чтобы найти интересные решения и понять, как они себя позиционируют. Получилась вот такая большая карта в Miro с скриншотами сайтов

https://miro.com/app/board/o9J_kwERPIM=

В итоге мы остановились на трех певицах Зиверт, Сюзанна и Лобода. У Зиверт подсмотрели использование шрифтов, с Сюзанной совпала японская тематика, а у Лободы нам понравилось использование цветов.

Анализ конкурентов помог посмотреть на рынок со стороны и понять, в каком направлении двигаться дальше.

Так мы начали разработку собственного стиля Стеллы. Мы обратились к синтезаторной музыке Японии 80-х годов и сразу определили, что будем использовать холодный и теплый цвета. Решили, что сделаем в стиле техно-ретро. Тем более образ Стеллы близок к этой «киберпанковской» тематике.

Когда думали, какие оттенки цветов будем использовать, нам попались кадры из фильма «Призрак в доспехах». Там и урбан тематика, и стимпанк, и японское техно в современном прочтении.

Получилось четыре цвета: черный, прозрачно-белый, красный и мятный.

Нашу палитру сверили с цветами Светланы Лободы, чтобы не было совпадений.

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

Так получилось 4 основных цвета и свой отличительный стиль.

Для одного за пример взяли начертание как у Зиверт, а второй сделали в Японском стиле.

Фирменные цвета, размеры шрифтов и все, что нужно для создания сайта упаковали в небольшой брендбук.

Для YouTube мы сделали фон канала, логотип и обложку для видео. Основная задача состояла в том, чтобы обложка хорошо выглядела в любом формате: через телефон, ноутбук, планшет. У нас получилось.

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

Анализ, который мы делали в начале, помог определиться со структурой сайта: главная страница, о певице, музыка, видео, контакты. Мы составили чек-лист со списком материалов, которые нам нужны, и отправили клиенту. Как получали материалы — добавляли их на сайт.

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

Полученный в конструкторе код разместили на сайте и с помощью скрипта вставили в Zero Block.

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

Загрузили аудиофайлы в SoundCloud, заполнили название и описание, в меню «share», если выбрать вариант «embed», то появится код, который можно вставить на сайт.

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

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

Так как мы делали сайт на трех языках: русский, японский и английский — прописывали теги alternate и hreflang для всех страниц.

Пример кода для главной страницы:

Основная сложность была в том, что Стелла постоянно в перелетах, так что бывало приходилось созваниваться ночью.

С клиентом мы общаемся по скайпу, демонстрируем экран и обсуждаем результат работ в реальном времени. Так процесс согласования идет быстрее, обсуждаются все нюансы и позволяет быть на одной волне.

У нас было три презентации: стиль, главная страница сайта и проект в целом.

Пишите в комментариях что думаете о проекте, о Тильде или другие вопросы!