Проект «Русский код»

БФУ им. И. Канта — ведущий университет, который способствует сохранению и продвижению русской культуры. В рамках научно-популярного проекта «Русский код» мы помогли балтийскому вузу запустить интерактивный квиз о русском языке — модном и динамично развивающемся феномене.

О проекте «Русский код»

Русский код — это уникальный проект, который рассматривает русский язык не только как средство общения, но и как культурное явление, объединяющее миллионы людей по всему миру.

В БФУ им. И. Канта считают, что русский язык — это код, в котором зашифрована мудрость веков: литература, изобразительное искусство, кинематограф, образование и даже культура поведения. Русский язык дает людям возможность выражать свои мысли и чувства, объединяет и становится важнейшей составляющей человеческой жизни, пронизывая все аспекты нашей жизни.

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

Зачем вузу интерактивный квиз о русской культуре?

Российские университеты все чаще используют геймификацию (игрофикацию) — внедрение игровых элементов на сайтах, в приложениях, программах и сервисах, — чтобы привлечь внимание целевой аудитории. БФУ им. И. Канта — один из немногих вузов, который активно поддерживает этот подход и вкладывает ресурсы на развитие интересных геймифицированных проектов.

Новый квиз в игровой форме предлагает пользователям «расшифровать русский код». Пользователи из России могут проверить знания о культуре своей страны, в то время как иностранцы — вдохновиться на дальнейшее изучение русского языка.

Продукт выполняет не только развлекательную функцию, но и служит эффективным инструментом продвижения университета.

Вовлечение целевой аудитории

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

Позиционирование университета

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

Вирусный маркетинг

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

Внесение разнообразия

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

Дизайн

БФУ им. И. Канта обратился к нам, чтобы улучшить уже существующий квиз как со стороны дизайна, так и со стороны технической реализации.

Заказчикам не нравилось изначальное оформление платформы, которое казалось слишком простым и было лишено интерактивных элементов. Квиз не вызывал у пользователей wow-эффекта и не отличался от обычных викторин на многих других сайтах.

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

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

В качестве фона мы выбрали паттерн березы, так как это один из наиболее узнаваемых символов России. Чтобы подчеркнуть эту ассоциацию, мы добавили анимированные березовые листья при наведении на некоторые кнопки.

По всей площадке используется частичная пикселизация, которая отсылает нас к идее, что русский язык — это код. Например, на главной странице в заголовке применяются различные шрифты: некоторые буквы пикселизованы, в то время как другие напоминают буквицу. Это продолжение концепции логотипа, который представляет собой монограмму слова «русский код». Буква «Р» выполнена в классическом рукописном стиле, а «K» состоит из символов кода «/» и «^».

Также главную страницу украшают яркие иллюстрации, которые сразу вызывают у пользователя ассоциации с русской культурой: плакат с Лилей Брик, портрет Пушкина, «Богатыри» Васнецова и фотография балерин на сцене театра.

Все блоки квиза имеют закругленные и мягкие формы — это современный тренд, известный как сквирклморфизм (от англ. «squircles» — квадраты с закругленными углами). Благодаря такому стилю, квиз выглядит дружелюбно и расслабленно, в отличие, например, от тестов на экзамене.

Механика квиза

Квиз представляет собой игру на проверку знаний, которая состоит из двух уровней — базового и сложного. Их олицетворяют Юрий Гагарин и Лев Толстой, по ховеру также появляются фразы, которые могли бы сказать эти известные деятели. Базовый уровень ориентирован иностранцев, изучающих русский язык и культуру, а сложный предназначен для русскоговорящих пользователей.

Квиз состоит из нескольких типов вопросов, где необходимо выбирать правильные ответы, перемещать карточки, находить пары. На сложном уровне справляться с заданиями нужно за ограниченное время. Вопросы могут быть как текстовыми, так и содержать изображения, видео и аудиоматериалы. 

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

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

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

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

Интерактивность

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

Сайт поражает разнообразием анимированных элементов, реагирующих на движения курсора. По щелчку на кнопку «Начать игру» пользователь погружается в квиз, визуально похожий на яркий мультфильм. Для создания такой уникальной атмосферы была задействована библиотека Barba.js. Удивительного эффекта появления страницы с результатами удалось добиться с помощью технологии GSAP и Barba, а также SVG-изображения, создавая неповторимую атмосферу.

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

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

В разработке фронтенд-части сайта мы уделили особое внимание деталям, включая тонкости верстки, анимации и механики игры. Несмотря на объем работы, мы эффективно справились с поставленными задачами благодаря использованию методологии «от меньшего к большему» и модульных паттернов проектирования. Это позволило нам обеспечить стабильную работу сайта и обеспечить безупречный пользовательский опыт.

Административная панель

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

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

Контент

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