Онлайн-школа

Описание проекта

Открытая школа 2035 — образовательная онлайн-платформа для учителей и школьников 7-18 лет из России и Казахстана. Анимационные ролики, интерактивные задания, открытые уроки, тренажеры, тесты помогают школьникам усваивать знания по учебной программе. А учителям платформа позволяет систематизировать программу, интегрировать в нее новые форматы и разнообразить свой методический багаж.

Что требовалось

Разработать новый дизайн онлайн-платформы. У Открытой школы уже существовал сайт, нужно было сохранить логотип. Перед редизайном клиент выполнил конкурентный анализ и анализ ЦА, подготовил новую структуру.

Важно было сделать дизайн:

• «Увлекательным и залипучим». Визуал важен не только для увлечения учеников, но и для презентации проекта коллегам и инвесторам
• Удобным, интуитивно понятным, предсказуемым. Чтобы школьникам было удобно находить и изучать материалы самостоятельно. А учителя могли бы быстро открывать уроки и не тратить много времени на понимание, как работает навигация
• Адаптивным для мобильных устройств и интерактивных досок в классах

Что сделали

На этапе пресейла провели бриф с клиентом, собрали мудборд в соответствии с тематикой и пожеланиями. Затем подготовили варианты промо-блока сайта, на которых представили 3 подхода к концепции: акцент на рукописные шрифты, минимализм и анимации, 3D-элементы.

Клиенту понравилось два решения: с акцентом на анимации и движения блоков и 3D. 
Объединили эти идеи, назвав такой подход к концепции «островным дизайном».

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

Евгений, арт-директор Пиробайта

В чем идея концепции?

Подход Открытой школы представили в виде метафоры завода по обработке знаний, придания им формы и смысла. На платформу знания поступают в виде угловатых тусклых элементов, а выходят — в виде ярких шаров.

Идею продумали и описали сначала на скетче. Далее подобрали референсы для моделей шаров-знаний. По нашей задумке, Открытая школа помогает знаниям обрести форму и доставляет их в умы людей

Евгений, арт-директор Пиробайта

Далее приступили к разработке 3D. Разработали модель и саму анимацию в Spline.

Так выглядит готовая анимация и реализация идеи:

Результат

Разработали дизайн-концепцию цифровой платформы с анимационными роликами и интерактивными уроками. В рамках работы:

• Учли пожелания клиента и продумали общую идею концепции, визуальные акценты
• Продумали логику расположения блоков и переходов к ним
• Реализовали 3D-анимации для блоков-«островов»
• Разработали дизайн главной страницы
• Выполнили адаптивный дизайн для мобильных устройств