Собрали сайт из 3-х папок мусора, а клиент теперь их бережет. Коллажный сайт для курса блогера

К нам обратилась популярная блогерша Лиза @moilizochek (аудитория 200К+ в соцсетях) за созданием сайта для своего флагманского курса ((пере))соберись

Главной проблемой были сроки — предидущие исполнители просрочили дедлайны и не сделали сайт таким, каким видит его автор курса. Сроки горели — всего 10 дней

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

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

— Проанализировали целевую аудиторию, ее пожелания и боли

— Точечно проработали дизайн

— Добавили вырезки из любимых фильмов и мультиков клиента, чтобы сайт максимально передавал ее вайб

— Отдельно работали над блоками каждого модуля курса — у них абсолютно разное настроение

— Сверстали сайт на платформе Tilda, что значительно ускорило работу

— Адаптировали сайт под все устройства

— Анимировали каждый блок сайта и добавили код

— Подключили домен и сервисы оплаты

— Создали политику конфиденциальности

Фундаментом любой разработки, является анализ и задача, которую должен закрыть сайт

С задачей мы определились сразу — сайт, который будет приносить продажи курса через личность создателя

Что касаемо анализов, мы дали упор на анализ целевой аудитории, из него мы выделили портреты ЦА, их боли и что они хотят увидеть на сайте. Именно на это мы будем опираться в дальнейшей разработке

Конечно, мы сделали и анализ конкурентов, выделив плюсы и минусы, мы смогли грамотно преподнести наши преимущества

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

Обычно мы предлагаем около 3-х разных сильных концепций дизайна, чтобы клиент смог точно определиться, каким он хочет видеть свой будущий сайт.

В этот раз у клиента было очень четкое видение компонентов дизайна (коллажные вырезки, цвета и тд), поэтому мы сразу приступили к вариантам концепций из всего того, что уже нравится клиенту 

В итоге мы перебрали более 20 вариантов дизайна — от более дерзкого и современного, до женственного и милого

Ну и кончено, пришли к тому самому идеальному! На фото лишь некоторые из вариантов

После того, как мы определились с концепцией, мы перешли ко всему дизайну

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

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

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

Блок "о курсе" мы оформили в виде блокнота, развивая метафору личного дневника и прозрачности курса, он понятен как открытая книга

После анализа ЦА, у нас уже были четкие портреты и боли пользователей, их мы показали в отдельном блоке "для кого курс". В нем также есть вырезки из любимых фильмов и мультиков автора курса, что еще больше предает ее вайб на сайте, отражает ее взгляды и привлекает тех, кому по душе эта эстетика

Одним из самых ярких пожеланий клиента было разделить каждый блок модуля по эстетике.

Задача не из легких, но мы справились!

Итак, 1 модуль — ((mind))

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

2 модуль — ((body))

Про питание, сон и гармонию со своим телом. Добавили вырезки еды, спорта и коллаж из живых, настоящих фото Лизы (опять же для сближения с пользователем)

3 модуль - ((soul))

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

И последний 4 модуль — ((system))

Про продуктивность и структурность. Создали офисную эстетику: скрепки, стикеры, конверты и тд

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

Грамотно адаптируем под все устройства: от телефонов и планшетов, до огромных ПК

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

Клиентка в восторге, как можно так точно выразить в сайте то, что она чувствует, а мы рады слышать эту обратку и ценим наших клиентов!

А еще, сайт получил 3 награды: CSSLight, Made on Tilda и Top Design King 🏆