The Mr. Thank You website: the actor, singer and entrepreneur Sergey Kosenko

The task

Sergey Kosenko has a large audience, but it lives on social networks. Brands, event organizers and editorial offices want to find in one place who he is, what he has already done and how to work with him. The website had to bring all this into one page and lead to a request.

What we did

1. Style: a magazine, not a business card

   • Design
   • Style

   A warm light background, serif headings in capital letters, pink italics in the headings and dark blue bars. The website resembles a magazine: large headings, a lot of air and thin lines.

   • Profile. A portrait, a reference in rows (name, what he is known for, recognition, a release) and four milestones by years.
   • Pink italics. The only bright color: it highlights the words in the headings and the collaborate button.

   

2. Figures and areas

   • Content
   • Figures

   Under the profile are six figures of the audience and reach and a row of the names of collaborations. Below is the “What Mr. Thank You does” block with five areas: short video, film and art, global initiatives, events and sports, brands.

   • One figure, one fact. Every fact stands on the website once, without repeats.

   

3. Projects and collaborations

   • Projects
   • Brands

   The projects are shown as index rows: click a title and the picture next to it changes. On a phone the row expands as an accordion. The partner brands go as a running line of logos on a background of clouds.

   • A page for each project. Eight projects with a description, a quote and links to publications.
   • A running line of brands. The partners’ logos go in a circle and stop on hover.

   

4. Videos and music

   • Video
   • Music

   Instagram videos open right on the website, and external scripts load only after a click. The “Listen. Watch. Feel.” block has four releases in the form of records with a 30-second demo and links to Spotify, Apple Music and YouTube.

   • Videos without extra scripts. The video window is created on a click, until then nothing from Instagram loads.
   • Music with demos. Click a record and it spins and plays for 30 seconds.

   

   

5. Press and collaboration formats

   • Press
   • Collaboration

   Publications about Sergey are collected in rows: a publication, a headline, a date. The collaboration formats are an expandable list of seven items (ambassadorship, social media promo, events and others) with a “Discuss your idea” button. Then a huge “Let’s talk” and three request buttons.

   • A request without the extra. Three buttons: partnership, event, press. The request goes to Telegram and to email.
   • Press. A list of publications with the websites of the outlets and the dates.

   

   

6. The magazine and the article pages

   • Magazine
   • SEO

   The magazine has articles about projects and events: each has a cover, a table of contents, a “The main points” block, a gallery and a list of publications. At the bottom is a questions and answers block.

   • SEO markup. The home page has JSON-LD with the profile and the questions, an article has article markup, and there is a sitemap.
   • FAQ. Eight answers in an accordion, and the same ones in the markup for search engines.

   

   

The result

• A website in English with a profile, figures, projects and collaborations on one page
• Each project and each magazine article has its own page
• The videos and music work on the website, and external scripts load only after a click
• A preloader, a smooth curtain between pages and a full-screen menu
• Requests go to email and to a private Telegram chat

What the work included

• Design
• Winter CMS
• Responsive layout
• The preloader and animations
• Instagram videos
• The music block
• The request form in Telegram
• SEO markup