Лендинг в стиле 8-битных игр для онлайн-курса
В онлайн подготовке к ЕГЭ все уже давно слились в единую массу: у всех онлайн-школ однотипные бесплатные вебинары, курсы и рассылки.
На фоне стагнации этой ниши ребята из онлайн-школы "Техноскул" решили выделиться - оформили свой финальный курс подготовки к ЕГЭ EndGame в стиле ретро игр.
Перед нами встала задача: создать сайт, сохранив существующие элементы дизайна, и передать атмосферу 8-битных игр.
Структура сайта
Поняв, с каким продуктом мы имеем дело, приступили к созданию структуры сайта. Остановились на такой последовательности блоков:
- Главный экран
- Для кого этот курс?
- Описание курса
- Программа курса
- Тарифы
- Преподаватели
- Отзывы
- Ответы на часто задаваемые вопросы
- Небольшой блок мотивации
Чтобы проникнуться атмосферой игр того времени, наша команда быстренько достала свою старую Sega Mega Drive и прошлась по самым популярным играм того времени.
Главный экран
После непродолжительной игры в Sega мы придумали несколько идей:
- Элементы игрового интерфейса можно адаптировать и заполнить информацией
- Кнопку на главном экране можно сделать кнопкой "Press start"
- На фоне можно пустить "плавающие пиксели"
В итоге наш главный экран получился похож на меню при включении игры:
Для кого этот курс?
Достаточно просто оформленный статичный блок. Проанализировав продукт клиента, мы создали такие формулировки:
Описание курса
Вот с этим блоком пришлось повозиться. Мы не хотели делать описание продукта слишком длинным, потому что его часто все равно просто пролистывают.
В итоге нам нужно было в размер обычного блока воткнуть огромное количество информации. Выкрутились таким "крутящимся решением":
Программа курса
Простой блок с открывающимися датами и более подробной информацией внутри:
Тарифы
Классические 3 столбика с разными плюшками:
Преподаватели
Тут мы решили поиграться и оформить преподавателей, как персонажей игры с разными характеристиками.
Можно выбрать "своего игрока", отвечающего за конкретный предмет ЕГЭ.
По кнопке "выбрать уровень сложности" ребенка снова отсылает к блоку с тарифами.
Отзывы
Классическая крутилка с текстом и фото:
Ответы на часто задаваемые вопросы
Мы изучили сайты конкурентов, пообщались с отделом продаж и узнали самые сильные боли аудитории. По ним мы составили список этих вопросов, оформленных в "открывашке", как и блок с программой курса.
Хочешь также или лучше?
Залетай в нашу группу ВК и пиши кодовое слово "МОРЕ":
Не стесняйся задать любой вопрос - мы всегда поможем взять на абордаж твоих клиентов😏