Разработать посадочную страницу для компании, которая осуществляет психологическую помощь онлайн с авторский дизайном, интересной анимацией и визуальными элементами, учитывая потребность в продаже продукта и логичной структуре сайта - страница готовилась для рекламной кампании. Также, особенностью можно считать то, что это первый продукт компании, и раннего опыта или MVP не существовало. Соответственно не было и статистики, от показателей которой можно было бы оттолкнуться.
Структура
Первоначальную структуру собрали по AIDA и постепенно наполняли смыслами. Очертили ключевые проблемы с которыми работает копания.
Добавили краткую и ценную информацию о специалистах и предусмотрели возможность стать участником команды Баланса.
Детально и понятно раскрыли последовательность проведения консультации – целевого действия для посетителей. Добавили описание принципиально–нового подхода к консультациям, который позволяет организовать онлайн чат с психологом в мессенджере.
{структура блоков и прототип страницы}
Дизайн решения
В концептах решаю идти в 3-х направлениях:
Простой и привычный в теплых оттенках. С иллюстрациями, линиями и карточками.
С простыми формами, а акцент сделать на анимации и взаимодействии элементов друг с другом – отсылая к теме психологии.
Мягкий как облачко) с курсивным шрифтом и тоже с иллюстрациями, чтобы отображать тему продукта в понятных образах.
{дизайн-концепции}
Заказчик выбрал первый вариант. Продолжаю его разрабатывать
Обращение к психологу – достаточно непростой шаг.
Для того чтобы создать теплую и дружественную атмосферу заботы в дизайне решаю использовать теплые оттенки бежевого, розовый и добавить фиолетовый акцент.
Характер элементов мягкий и плавный: карточки со скруглеными углами, плавные линии в иллюстрациях.
В иллюстрациях добавили текстуру карандаша, чтобы передать чувство мягкости и заботы.
Композицию использьзую простую - чтобы посетитель сайта смог быстро считать информацию и принять решение о покупке. В то же время совсем просто будет скучно. Поэтому решаю добавить сдвиги вверх и вниз в карточках – задаю динамику.
{дизайн-макет}
{иллюстрации}
{мобильная версия сайта}
Анимация
Эффекты при наведении на элементы добавлены в карточках основных услуг и кнопках. В некоторых местах сайта анимированы иллюстрации для демонстрации взаимодействия элементов. В том числе, на главном экране при загрузке происходит движение рук – отсылка к взаимопомощи. В остальном с анимацией решили не экспериментировать))