Stella Serebrennykova

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

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

О СТЕЛЛЕ

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

Судьба распорядилась так, что уже много лет я нахожусь и творю на стыке культур. Обретя новый дом в Японии, я продолжаю жить и созидать на нескольких континентах.
Создание фирменного стиля
Началось все с того, что мы начали смотреть примеры певиц, которые отличаются своим стилем в современной попсе. Смотрели, что из себя представляют, какие приемы используют.
Зиверт и Сюзанна и Лобода. С Сюзанной совпал стиль именно с Японией.
Начали думать над стилем, хотели обратиться к синтезаторной музыке Японии 80-х годов и сразу определили, что будет использоваться холодный и теплый цвет. Решили, что это будет что-то в стиле техно-ретро. Тем более у Стеллы стиль, который напоминает техно стиль
В голову пришел фильм «Призрак в доспехах», здесь тоже урбан тематика, японское техно в современном стиле. От этого решили идти, смотрели баннеры, картинки к фильму и вот такой стиль, который на этом изображении (фото). Кибер панк. Искали в фильме кадры, которые бы наиболее подошли бы под атмосферу и нашли эти два кадра
Подобрали палитру потенциальных цветов. Перебрали пару снимков Лободы, чтобы НЕ попадать в ее цвета и отличаться.

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

кинематографично-зелено-призрачно-утопически-циановый
стимпанковский-японско-платье-синтезаторно-красный
Далее мы начали подбор шрифтов, одним из которых стал, начертание как у Зиверт, а второй в Японском стиле.
Чуть позже обработал фотографию как следует. Сочетает в себе два цвета. От этого плясали дальше)
В итоге у нас получился такой «Брендбук»:
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
упаковка артиста ?