Сайт Mr. Thank You: актёр, певец и предприниматель Сергей Косенко

Задача

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

Что мы сделали

1. Стиль: журнал, а не визитка

   • Дизайн
   • Стиль

   Тёплый светлый фон, серифные заголовки заглавными буквами, розовый курсив в заголовках и тёмно-синие плашки. Сайт напоминает журнал: крупные заголовки, много воздуха и тонкие линии.

   • Профиль. Портрет, справка в строках (имя, чем известен, признание, релиз) и четыре вехи по годам.
   • Розовый курсив. Единственный яркий цвет: им выделены слова в заголовках и кнопка collaborate.

   

2. Цифры и направления

   • Контент
   • Цифры

   Под профилем шесть цифр аудитории и охватов и строка имён коллабораций. Ниже блок «What Mr. Thank You does» с пятью направлениями: короткое видео, кино и искусство, глобальные инициативы, события и спорт, бренды.

   • Одна цифра — один факт. Каждый факт стоит на сайте один раз, без повторов.

   

3. Проекты и коллаборации

   • Проекты
   • Бренды

   Проекты показаны строками-индексом: нажал на название — рядом меняется картинка. На телефоне строка раскрывается аккордеоном. Бренды-партнёры идут бегущей лентой логотипов на фоне облаков.

   • Страница на каждый проект. Восемь проектов с описанием, цитатой и ссылками на публикации.
   • Бегущая лента брендов. Логотипы партнёров едут по кругу и останавливаются при наведении.

   

4. Ролики и музыка

   • Видео
   • Музыка

   Ролики Instagram открываются прямо на сайте, а внешние скрипты загружаются только после нажатия. Блок «Listen. Watch. Feel.» — четыре релиза в виде пластинок с 30-секундным демо и ссылки на Spotify, Apple Music и YouTube.

   • Ролики без лишних скриптов. Окно ролика создаётся при клике, до этого ничего из Instagram не грузится.
   • Музыка с демо. Нажал на пластинку — она крутится, играет 30 секунд.

   

   

5. Пресса и форматы сотрудничества

   • Пресса
   • Сотрудничество

   Публикации о Сергее собраны строками: издание, заголовок, дата. Форматы сотрудничества — раскрывающийся список из семи пунктов (амбассадорство, промо в соцсетях, события и другие) с кнопкой «Discuss your idea». Дальше огромное «Let’s talk» и три кнопки заявки.

   • Заявка без лишнего. Три кнопки: партнёрство, мероприятие, пресса. Заявка уходит в Telegram и на почту.
   • Пресса. Список публикаций с сайтами изданий и датами.

   

   

6. Журнал и страницы статей

   • Журнал
   • SEO

   В журнале статьи о проектах и событиях: у каждой обложка, оглавление, блок «Главное», галерея и список публикаций. Внизу блок вопросов и ответов.

   • SEO-разметка. На главной JSON-LD с профилем и вопросами, на статье — разметка статьи, есть карта сайта.
   • FAQ. Восемь ответов в аккордеоне, они же в разметке для поисковиков.

   

   

Что получилось

• Сайт на английском с профилем, цифрами, проектами и коллаборациями на одной странице
• Свои страницы у каждого проекта и статьи журнала
• Ролики и музыка работают на сайте, внешние скрипты грузятся только после нажатия
• Прелоадер, плавная шторка между страницами и полноэкранное меню
• Заявки идут на почту и в закрытый чат Telegram

Что вошло в работу

• Дизайн
• Winter CMS
• Адаптивная вёрстка
• Прелоадер и анимации
• Ролики Instagram
• Музыкальный блок
• Форма заявки в Telegram
• SEO-разметка