{"id":14293,"url":"\/distributions\/14293\/click?bit=1&hash=05c87a3ce0b7c4063dd46190317b7d4a16bc23b8ced3bfac605d44f253650a0f","hash":"05c87a3ce0b7c4063dd46190317b7d4a16bc23b8ced3bfac605d44f253650a0f","title":"\u0421\u043e\u0437\u0434\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0439 \u0441\u0435\u0440\u0432\u0438\u0441 \u043d\u0435 \u043f\u043e\u0442\u0440\u0430\u0442\u0438\u0432 \u043d\u0438 \u043a\u043e\u043f\u0435\u0439\u043a\u0438","buttonText":"","imageUuid":""}

Лендинг в стиле 8-битных игр для онлайн-курса

В онлайн подготовке к ЕГЭ все уже давно слились в единую массу: у всех онлайн-школ однотипные бесплатные вебинары, курсы и рассылки.

На фоне стагнации этой ниши ребята из онлайн-школы "Техноскул" решили выделиться - оформили свой финальный курс подготовки к ЕГЭ EndGame в стиле ретро игр.

Перед нами встала задача: создать сайт, сохранив существующие элементы дизайна, и передать атмосферу 8-битных игр.

Структура сайта

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

  • Главный экран
  • Для кого этот курс?
  • Описание курса
  • Программа курса
  • Тарифы
  • Преподаватели
  • Отзывы
  • Ответы на часто задаваемые вопросы
  • Небольшой блок мотивации

Чтобы проникнуться атмосферой игр того времени, наша команда быстренько достала свою старую Sega Mega Drive и прошлась по самым популярным играм того времени.

Главный экран

После непродолжительной игры в Sega мы придумали несколько идей:

  • Элементы игрового интерфейса можно адаптировать и заполнить информацией
  • Кнопку на главном экране можно сделать кнопкой "Press start"
  • На фоне можно пустить "плавающие пиксели"

В итоге наш главный экран получился похож на меню при включении игры:

Для кого этот курс?

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

Описание курса

Вот с этим блоком пришлось повозиться. Мы не хотели делать описание продукта слишком длинным, потому что его часто все равно просто пролистывают.

В итоге нам нужно было в размер обычного блока воткнуть огромное количество информации. Выкрутились таким "крутящимся решением":

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

Простой блок с открывающимися датами и более подробной информацией внутри:

Тарифы

Классические 3 столбика с разными плюшками:

Преподаватели

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

Можно выбрать "своего игрока", отвечающего за конкретный предмет ЕГЭ.

По кнопке "выбрать уровень сложности" ребенка снова отсылает к блоку с тарифами.

Отзывы

Классическая крутилка с текстом и фото:

Ответы на часто задаваемые вопросы

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

Хочешь также или лучше?

Залетай в нашу группу ВК и пиши кодовое слово "МОРЕ":

Не стесняйся задать любой вопрос - мы всегда поможем взять на абордаж твоих клиентов😏

0
Комментарии
-3 комментариев
Раскрывать всегда