Необходимо разработать дизайн и сделать верстку сайта для онлайн курсов. Всего нужно сделать две страницы.
Прототип –
На прототипе звездочкой отмечен логотип, который пришлем. Сверху меню, которое "прилипает" к странице при скролле. В меню должны быть пункты, которые ссылаются на: "программа", "тарифы", "вход" (в крайнем углу справа) и "записаться" (чуть ниже, должно быть как-то выделено). Когда человек нажимает на "записаться", вылезает pop-up с формой.
СТРАНИЦЫ:
1. Основная страница.
Блоки:
а) заголовок, где будет видео-представление с youtube – пример на прикрепленном фото; должна быть какая-то подложка/картинка под, место для видео с youtube и очень краткая информация о курсе
б) блок преимущества: несколько преимуществ выделены очень четко (текст скинем), к каждому преимуществу какая-то персонализированная иконка в дизайне сайта
в) описание курса: представлено небольшое описание курса (текст скинем) и картинка, которая отражала бы цифровую трансформацию/диджитализацию и соотносилась с дизайном сайта;
г) программа курса с формой для отклика: представление для посетителя сайта только трех модулей курса, полную программу он получает после введения данных в специальном блоке. Когда человек ввел данные и нажимает на кнопку "получить" – ему вылезает pop-up, что информация отправлена на его почту;
д) блок с графиком: необходимо показать на графиках, как менялась З/П руководителей по ЦТ и росло число вакансий в 2019 году и 2020 (пример см. на прототипе, цитату пришлем). График сделать в дизайне сайта, возможен вариант с анимацией. Цифры необходимо выделить более крупным шрифтом;
е) блок с тарифами: три столбца, один выше другого в зависимости от стоимости + прописаны отличия одного тарифа от другого (см. примеры в файле с референсами). Когда человек нажимает на тот тариф, который ему необходим – ему вылезает pop-up для введения данных (Имя, Телефон, e-mail, поле для промокода), дальше он переходит на страницу с оплатой;
ж) об авторе курса: небольшая биография автора курса, логотипы компаний (пришлем), вырезанная фотография под дизайн сайта;
з) отзывы – перелистывание отзывов;
и) блок "что получите на выход": буллетами отмечены результаты после курса (текст пришлем) + место для сертификата (пришлем);
к) блок "записаться на курс"; Здесь должна быть еще предусмотрена строчка, где в вылезающей строке при нажатии вылетают варианты тарифов: онлайн, онлайн+, бизнес или "не могу определиться". При выборе одного из тарифов – человеку вылезает pop-up для введения данных, поле для промокода, далее переход на страницу с оплатой. Если он выбирает "не могу определиться", то вылезает pop-up, что вам позвонят;
л) FAQ: должны быть вопросы и при нажатии на плюсики справа – раскрытие ответов ; (см. примеры в файле с референсами)
м) футер (пример –
)
2. Страница, где человек будет смотреть видео курса
Меню наверху: Личный кабинет, Мой курс, Поддержка, Выход.
Плеер встраивать не нужно, необходимо просто предусмотреть место для видео + должен быть сбоку как список с названиями уроков/модулей и возможность между ними переключаться, а также ставить галочки на те курсы, которые человек уже просмотрел. То есть именно человек отмечает. Внизу строка "сколько осталось до достижения цели". ВАЖНО: страница должна быть адаптивной под любой экран, в частности под 13 дюймов и мобильную версию, чтобы хорошо смотрелось.
Прототип страницы с видеоконтентом-
Верстать необходимо на twitter bootstrap с адаптивностью. По цветам предпочтительно красный, черный и белый. Желательно, чтобы блоки не особо различались по цветовой гамме между собой, чтобы была возможность в случае необходимости поменять их местами и чтобы это не разрушило общий дизайн.
Чтобы были понятны примерные референсы и примеры курсов-