Leonid Rudyk
375

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

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

В закладки

Задача: создать стиль и имиджевый сайт

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

Самое сложное было — понять и отразить японский стиль смешанный с киберпанком и техно-ретро, который соответсвует сценическому образу Стеллы.

Кирилл Козлов
Менеджер проекта

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

Стелла — простая девушка из Евпатории

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

Анализ, творческая часть и техническая

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

Посмотрели сайты всех популярных исполнителей и музыкантов

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

Зиверт, Сюзанна и Лобода

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

Разработка собственного стиля Стеллы

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

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

Один из референсов

На цвета вдохновлялись «Призраком в доспехах»

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

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

Стимпанковский-японско-платье-синтезаторно-красный и кинематографично-зелено-призрачно-утопически-циановый

Влад Злыгостев
арт-директор

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

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

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

Используем два шрифта

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

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

Фон канала YouTube, логотип и обложка

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

Фон профиля SoundCloud и логотип

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

Мультиязычный сайт на Тильде

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

Нам повезло, что Стелла – натура творческая. У нее в портфеле оказалось много интересных фотографий с фотосессиий.

Дамир Ильяшенко
Исполнительный директор веб-студии

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

Мы использовали конструктор симуляции:

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

На страницу с музыкой встроили треки из SoundCloud

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

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

Простая но приятная анимация в разделе «Видео»

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

SEO-оптимизация мультиязычного сайта

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

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

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

<link rel="alternate" hreflang="x-default" href="https://stellaserebrennykova.com/"> <link rel="alternate" hreflang="en" href="https://stellaserebrennykova.com/en/"> <link rel="alternate" hreflang="ru" href="https://stellaserebrennykova.com/ru/"> <link rel="alternate" hreflang="jp" href="https://stellaserebrennykova.com/jp/">

Провели три презентации клиенту по скайпу

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

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

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

Веб-студия «Quadro»

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

{ "author_name": "Leonid Rudyk", "author_type": "self", "tags": [], "comments": 3, "likes": 1, "favorites": 3, "is_advertisement": false, "subsite_label": "unknown", "id": 134234, "is_wide": true, "is_ugc": true, "date": "Sat, 27 Jun 2020 14:52:06 +0300", "is_special": false }
Личный опыт
Как стартапу сделать победный питч для саммита: инструкция
В марте этого года мы вместе с нашей командой Raison.ai выиграли московский этап битвы стартапов Unicorn Battle. В…
Объявление на vc.ru
0
3 комментария
Популярные
По порядку
1

Благодарю за столь подробное описание процесса работ. Кейс интересный, видно что на проект потратили не мало сил и времени. В связи с этим два вопроса:
1. Такой подход используете для всех клиентов?
2. Сколько это стоит? 

Ответить
0

1. Да, так как мы работаем в основном удаленно, хочется общаться с клиентом вживую, несмотря на расстояния)) Конечно, на встречи тоже выезжаем) 
2. До 180 000 руб. 

Ответить
0

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

Ответить

Комментарии