Кейс – создание лендинг страницы для академии роботов

Задача:создать web-представительство для профильного учебного заведения, посвященного технологиям робототехники для детей разного возраста

Ключевые ценности: наличие узнаваемого фирменного стиля, большой базы учеников (более 50 000), широкого представительства в различных странах мира (более 18), наличие проверенных и рабочих программ обучения во всех технологичных областях академии, сеть офисов в России, Финляндии и Японии.

Процесс подготовки

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

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

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

— Составили список программ, которые необходимо было отразить в каждом из блоков будущей web-страницы.

Прототипирование — как готовились к созданию лендинга

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

Главную страницу было решено сделать активной, с изменением слайдов и разным наполнением контента, наличием шапки для удобства пользованием страницы и основные контактные данные, для быстрой связи пользователя.

Последующие блоки включали в себя:

• выбор направления – программирование, математика, английский язык, русская классическая школа, робототехника, 3Dмоделирование, финансовая грамотность, эмоциональный интеллект (EQ)
• основную информацию о программах
• расписания
• о преподавательском составе
• плюсы как альтернативу школьному обучению
• информацию о летней академии
• партнерах
• отзывы и то что пишут СМИ об академии
• карту и функциональный «подвал» страницы

Примеры блоков:

Дизайн нового лендинга — проект обретает краски

На основе информативного прототипа дальнейшая работа дизайнера была следующей:

• Наполнить прототип «цветами» (светло зеленый и оставить белые участки) для удобства восприятия информации;
• Добавить все необходимые фото материалы (которые были эксклюзивными, без использования «фото стоков», что хорошо для дальнейшего продвижения проекта);
• Наполнение контента. В последнем случае информация исходила от заказчика.
• Созданием дизайна для мобильной адаптивной версии будущей web-страницы, без урезания функционала страницы, что важно;
• Прорисовка всех иконок и элементов сайта.

Сайт обрёл индивидуальный стиль и дизайн:

Программирование — сделать так, чтобы все заработало

Составляющие финального этапа:

• Процесс программирования и верстки проекта на удобной к использованию CMSсистеме, с внесением окончательных правок в функционал
• Создание адаптивной версии на основе 2х дизайнов, что удобно при использовании функционала Figma
• Установка проекта на свой сервер, проверка всех лид-форм, установки необходимых метрик и нужный к размещению домен (адрес сайта)

С итогом проекта можно ознакомиться лично, перейдя по рабочей ссылке— http://academy.robbo.ru/moscow