Для оформления нужно было найти образ, который поддержит тему внимания к себе и своему состоянию, но не сведёт разговор об энергии к буквальным символам.

От программы курса к готовому сайту

Ксения Окунёва пришла с программой авторского курса «Про энергию». В ней уже были темы уроков и практики, но сайта и готовой структуры для презентации курса ещё не было.

Я разработала сайт онлайн-курса с нуля: провела анализ аудитории, собрала структуру, написала тексты, подготовила прототип и визуальную концепцию. Затем оформила личный кабинет Tilda и PDF-материалы, которыми участники пользуются во время обучения.

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

Исследование и структура сайта

Структура и тексты лендинга

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

Сначала мы с Ксенией согласовали структуру и тексты. Затем я перешла к оформлению.

Программа и аудитория курса

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

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

Эти наблюдения помогли перейти от общего разговора об энергии к понятным формулировкам и стали основой раздела «Кому подойдёт курс».

02. 1

Прототип

02. 2

Готовый экран

Раздел «Кому подойдёт курс» в готовом дизайне

Концепция сайта

Выбрать характер

Я предложила два направления. Первое строилось на коллажах, наложениях и большом количестве деталей. Второе, Morning Pause, было проще по композиции: крупные изображения, ясная структура и больше свободного пространства.

Ксения выбрала второе направление. Оно меньше отвлекало от содержания и позволяло постепенно знакомить человека с курсом. На его основе я продолжила работу над сайтом.

03. 1

Два направления визуальной концепции

Изображения для сайта

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

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

Природные образы

Вместо буквальных символов энергии я использовала свет, воду и растения. Они помогли говорить о теме через узнаваемые ощущения: движение воздуха, солнечные блики, прикосновение к воде, листья в утреннем свете.

Эти образы связали оформление с повседневностью и вниманием к собственному состоянию.

03. 2

Визуальная концепция курса: природные образы, портрет и типографические карточки

Передать настроение

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

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

Добавить изящества

Когда мы подбирали шрифты, Ксения попросила добавить рукописное начертание. Я использовала его в коротких подписях и отдельных акцентах, чтобы придать оформлению изящество.

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

03. 3

Раздел «Как устроен курс»

Лендинг, личный кабинет и материалы курса

Программа курса и начало обучения

Программа помогает понять, что будет на занятиях: карточки знакомят с темами уроков и их содержанием. Отдельный раздел объясняет, как начать обучение: выбрать тариф, оплатить участие и получить письмо со ссылкой на личный кабинет Tilda.

Так человек может заранее разобраться и в содержании курса, и в порядке доступа к нему.

Ритм страницы

На лендинге много содержания: о самом курсе, программе, авторе, тарифах и порядке обучения. Я разделила его на короткие смысловые части и чередовала текст с крупными изображениями.

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

04. 1

Программа курса

04. 2

Порядок доступа к обучению

PDF-материалы к урокам

К урокам я оформила PDF-материалы, которые участники могут открыть во время обучения. Они продолжают оформление сайта, но больше внимания отдают текстам, упражнениям и пояснениям.

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

Личный кабинет Tilda

После оплаты человек получает письмо со ссылкой на личный кабинет Tilda. В кабинете собраны лекции и дополнительные материалы к урокам.

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

04. 3

Страница курса в личном кабинете Tilda

04. 4

PDF-материалы к урокам

Мобильная версия сайта

Для телефона я заново расположила тексты, карточки и изображения. Сохранила крупные заголовки и характер проекта, но учла ширину экрана и последовательность чтения.

04. 5

Кому подойдёт курс

04. 7

Раздел об авторе

04. 6

О чем курс

Результат проекта

Посмотреть сайт

kseniaokuneva.com

Курс запущен

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

Работа началась с программы и разговора с Ксенией, а завершилась связанным путём от первого знакомства с курсом до занятий.

Награды и отметки

Top Design King

King of the Day

2026

WD Awards

WD Favourite

2026

Web Guru Awards

Guru of the Day

2026

CSS Light

CSS Light Featured

2026

( заполнить бриф )

( или написать )

+ посмотреть

Insta*ram

Behance

Tilda experts

+ вдохновится

+ юридическое

+ изучить

Insta*ram

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