Русский код

Главное о кейсе

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

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

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


Russian Code is a unique project that considers the Russian language not only as a means of communication, but also as a cultural phenomenon that unites millions of people around the world.

IKBFU believes that the Russian language is a code that encodes the wisdom of centuries: literature, fine arts, cinema, education, and even the culture of behaviour. The Russian language gives people the opportunity to express their thoughts and feelings, unites and becomes the most important component of human life, permeating all aspects of our lives.

The main goal of the initiative is to inspire and motivate people to discover the greatness of the Russian language and begin to explore its secrets. The University strives to preserve and transmit the cultural heritage of the Russian language, including the work of Russian writers, poets, and other literary geniuses who contributed to world literature.

Как проект изменил жизнь пользователей

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

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

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

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

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

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

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

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

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


The product not only serves as an entertainment function, but also serves as an effective tool for promoting the university.

Engaging the target audience

The quiz attracts potential students interested in the humanities, art, literature and history, as well as their parents and teachers. Thanks to this, attention to the university increases and a positive impression is formed.

Positioning the university

With the help of the quiz, the university emphasizes its strengths in the field of Russian culture, strengthening its position.

Viral marketing

Participants can share the quiz results on social networks, which can lead to viral distribution and increased visibility of the university among the target audience.

Adding variety

An ordinary user opens many sites per day. Only a few of them use gamification, so an interactive quiz is a good opportunity to stand out from the crowd.

Бизнес-задача и ее решение

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Контент

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

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


Russian universities are increasingly using gamification — the introduction of game elements on websites, applications, programs, and services — to attract the attention of their target audience. IKBFU is one of the few universities that actively supports this approach and invests resources in the development of interesting gamified projects.

IKBFU is a leading university that promotes the preservation and promotion of Russian culture. We helped the Baltic university launch an interactive quiz about the Russian language, a trendy and dynamically developing phenomenon, as part of the popular science project «Russian Code».

The new quiz in a game form invites users to «decipher the Russian code». Users from Russia can test their knowledge of the culture of their country, while foreigners can be inspired to further study the Russian language. Let us remind you that one of the key assets of IKBFU is its international cooperation. The university actively participates in the exchange of students and teachers, has partnerships with 197 universities and organizations around the world.

Design
I. Kant Baltic Federal University approached us to improve an existing quiz, both in terms of design and technical implementation.

The customers did not like the initial design of the platform, which seemed too simple and lacked interactive elements. The quiz did not cause a wow effect in users and was no different from regular quizzes on many other sites.

We were faced with the task of refining the quiz so that it would capture the user's attention and hold it with the help of animations, game mechanics and impressive effects.

We completely updated the design of the platform. The main colour of the quiz became dark blue, while green remained an accent colour for buttons and other small elements. We used white for cards with questions and pop-up windows with instructions so that users could easily perceive the text even under limited time.

We chose a birch pattern as a background, as it is one of the most recognizable symbols of Russia. To emphasize this association, we added animated birch leaves when hovering over some buttons.

Partial pixelation is used throughout the site, which refers to the idea that the Russian language is a code. For example, on the main page, the header uses different fonts: some letters are pixelated, while others resemble a drop cap. This is a continuation of the logo concept, which is a monogram of the word «Russian code». The letter «P» is made in a classic handwritten style, and «K» consists of the code symbols «/» and «^».

The main page is also decorated with bright illustrations that immediately evoke associations with Russian culture in the user: a poster with Lilya Brik, a portrait of Pushkin, Vasnetsov's «Bogatyrs» and a photo of ballerinas on stage.

All the quiz blocks have rounded and soft shapes — this is a modern trend known as squirclemorphism (from the English «squircles» — squares with rounded corners). This style makes the quiz look friendly and relaxed, unlike, for example, tests in an exam.

Quiz mechanics

The quiz is a knowledge test game consisting of two levels — basic and complex. They are personified by Yuri Gagarin and Leo Tolstoy, and phrases that these famous figures could have said also appear on the hover. The basic level is intended for foreigners studying the Russian language and culture, and the complex level is intended for Russian-speaking users.

The quiz consists of several types of questions, where you need to choose the correct answers, move cards, find pairs. At the complex level, you need to complete the tasks in a limited time. Questions can be both textual and contain images, video, and audio materials.

The implementation of this functionality became possible due to the use of object-oriented programming, interaction with the server via Ajax technologies, as well as the use of our own data storage and other plugins and utilities developed by us.

Before the start of each round, players are explained the rules and given the opportunity to practice. Before questions with more complex mechanics, pop-up windows with detailed explanations and the opportunity to practice also appear.

The top of the question card displays the number of points, the question number and, in the case of a difficult level, a timer that helps players keep track of time. When the time is up, a pop-up window appears offering to take the quiz again. At the end of the first round, a pop-up window warns about the end of the round, the number of points scored and the upcoming super game, where you need to find pairs among 12 cards.

At the end of the game, users receive a result — which character from Russian cartoons they are — it is accompanied by a funny description. The illustrations of the characters are edited using a special filter.

Content

The quiz offers users a wide range of questions regarding various aspects of Russian culture. Participants will be able to test their knowledge and expand it, learning interesting and unexpected facts. The questions cover various time periods and cultural phenomena, from ancient Russian history to modern cultural trends.

Currently, the university continues to improve the content for the quiz together with professional linguists. Users will be immersed in the history of the development of Russian culture: from the creation of the alphabet to the works of world-famous Russian writers, poets, artists, musicians, directors, athletes, and scientists.

Крафт (мастерство), реализация, технические детали

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

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

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

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

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

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

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


Developing the frontend of this project was a real challenge for us, but the result exceeded the customer's expectations. The quiz is not only highly interactive, but also technically flawless.

The site amazes with a variety of animated elements that respond to cursor movements. Cards with the effect of volume and depth from the super game are just one manifestation of this opportunity.

By clicking on the «Start the game» button, the user is immersed in a quiz that visually resembles a bright cartoon. To create such an atmosphere, the Barba.js library was used. The unusual effect of the appearance of the results page was achieved using GSAP and Barba technology, as well as an SVG image.

For animations, we chose the GSAP library, since over the years of our practice in creating various sites and animations, it has proven itself to be the most flexible, reliable and productive solution.

In developing the frontend part of the site, we paid special attention to details, including the intricacies of layout, animation and game mechanics. Despite the volume of work, we effectively completed the tasks set by using the «from less to more» methodology and modular design patterns. This allowed us to ensure stable operation of the site and provide a flawless user experience.

Administrative panel

In the previous version of the quiz, the admin panel was inconvenient for our customers, which prevented them from effectively managing the content. Therefore, the university insisted on creating a simple and intuitive admin panel. We understand that over time, those responsible for managing the quiz will change, so it was important for us that even a new employee could easily understand how to fill and change the content. Based on our own experience, we paid special attention to the functionality of the admin panel to make it as easy to use as possible.

Скриншоты