Stella Serebrennykova

Кейс: Мультиязычный сайт
для Стеллы Серебрянниковой

Поводите пальцем по экрану

Задача
Решение
О Стелле
Создание фирменного стиля
Упаковка YouTube и SoundCloud
SEO-оптимизация

Задача

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

Решение

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

Вот большая карта в Miro с скриншотами сайтов
https://miro.com/app/board/o9J_kwERPIM=/

Вот большая карта в Miro с скриншотами сайтов
https://miro.com/app/board/o9J_kwERPIM=/

О Стелле

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

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

Создание фирменного стиля

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

Зиверт и Сюзанна и Лобода. С Сюзанной совпал стиль именно с Японией.

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

В голову пришел фильм «Призрак в доспехах», здесь тоже урбан тематика, японское техно в современном стиле. От этого решили идти, смотрели баннеры, картинки к фильму и вот такой стиль, который на этом изображении (фото). Кибер панк. Искали в фильме кадры, которые бы наиболее подошли бы под атмосферу и нашли эти два кадра

Подобрали палитру потенциальных цветов. Перебрали пару снимков Лободы, чтобы НЕ попадать в ее цвета и отличаться.

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

null

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

Далее мы начали подбор шрифтов, одним из которых стал, начертание как у Зиверт, а второй в Японском стиле.

Чуть позже обработал фотографию как следует. Сочетает в себе два цвета. От этого плясали дальше)

В итоге у нас получился такой «Брендбук»:
https://stellaserebrennykova.com/brand

Упаковка YouTube

Для YouTube мы сделали фон канала, логотип и обложку для видео

Упаковка SoundCloud

Для SoundCloud мы сделали фон профиля и логотип

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

Так как наш сайт имеет 3 языковые версии, важно прописать теги alternate и hreflang для всех страниц, для корректного понимания поисковиками принадлежности к определенному языку

Английская версия

/en

<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/">

/en/about

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

/en/video

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

/en/music

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

/en/contacts

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

Русская версия

/ru

<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/">

/ru/about

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

/ru/video

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

/ru/music

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

/ru/contacts

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



Японская версия

/jp

<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/">

/jp/about

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

/jp/video

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

/jp/music

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

/jp/contacts

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

Сниппет для OpenGraph

Важно, чтобы когда делишься ссылкой в соцсетях, это выглядело красиво

Чек-лист проекта

Что было сделано по проекту в целом

Фирменный стиль

Загрузка роликов на YouTube

Загрузка треков на Soundcloud

Адаптация под английский и японский языки

Оформление Soundcloud

Настройка тегов H1,H2,H3

Сниппет для OpenGraph

Регистрация в Search Console

__

fav.ico всех размеров

Влад Злыгостев

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

Спасибо за просмотр!

Хотите займемся вашим проектом?

Запишитесь на Skype-встречу

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

Нажимая на кнопку «Записаться» вы соглашаетесь
с политикой конфиденциальности

Запишитесь на Skype-встречу

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

лендинг онлайн курса 147
лендинг онлайн школы 96
личный сайт музыканта 20
начинающие музыканты сайт 38
онлайн курсы +по созданию сайтов 398
продвижение артистов 441
раскрутка артиста 88
сайт +для музыкантов 694
сайт артист 1637
сайт артистов театра 103
сайт блогеров 1326
сайты артистов россии 32
создать сайт музыканта 49
структура продающего лендинга +для онлайн школы 11
упаковка артиста ?