БФУ им. И. Канта обратился к нам, чтобы улучшить уже существующий квиз как со стороны дизайна, так и со стороны технической реализации.
Заказчикам не нравилось изначальное оформление платформы, которое казалось слишком простым и было лишено интерактивных элементов. Квиз не вызывал у пользователей wow-эффекта и не отличался от обычных викторин на многих других сайтах.
Перед нами стояла задача — доработать квиз так, чтобы он захватывал внимание пользователя и удерживал его при помощи анимаций, игровых механик и впечатляющих эффектов.
Мы полностью обновили дизайн площадки. Основным цветом квиза стал темно-синий, при этом зеленый цвет остался акцентным для кнопок и других небольших элементов. Белый цвет мы использовали для карточек с вопросами и всплывающих окон с инструкциями, чтобы пользователям было удобно воспринимать текст даже в условиях ограниченного времени.
В качестве фона мы выбрали паттерн березы, так как это один из наиболее узнаваемых символов России. Чтобы подчеркнуть эту ассоциацию, мы добавили анимированные березовые листья при наведении на некоторые кнопки.
По всей площадке используется частичная пикселизация, которая отсылает нас к идее, что русский язык — это код. Например, на главной странице в заголовке применяются различные шрифты: некоторые буквы пикселизованы, в то время как другие напоминают буквицу. Это продолжение концепции логотипа, который представляет собой монограмму слова «русский код». Буква «Р» выполнена в классическом рукописном стиле, а «K» состоит из символов кода «/» и «^».
Также главную страницу украшают яркие иллюстрации, которые сразу вызывают у пользователя ассоциации с русской культурой: плакат с Лилей Брик, портрет Пушкина, «Богатыри» Васнецова и фотография балерин на сцене театра.
Все блоки квиза имеют закругленные и мягкие формы — это современный тренд, известный как сквирклморфизм (от англ. «squircles» — квадраты с закругленными углами). Благодаря такому стилю, квиз выглядит дружелюбно и расслабленно, в отличие, например, от тестов на экзамене.
Разработка фронтенда этого проекта была для нас настоящим вызовом, но результат превзошел ожидания заказчика. Викторина не только максимально интерактивна, но и технически безупречна.
Сайт поражает разнообразием анимированных элементов, реагирующих на движения курсора. По щелчку на кнопку «Начать игру» пользователь погружается в квиз, визуально похожий на яркий мультфильм. Для создания такой уникальной атмосферы была задействована библиотека Barba.js. Удивительного эффекта появления страницы с результатами удалось добиться с помощью технологии GSAP и Barba, а также SVG-изображения, создавая неповторимую атмосферу.
Для анимаций мы выбрали библиотеку GSAP, поскольку за годы нашей практики в создании разнообразных сайтов и анимаций она зарекомендовала себя как наиболее гибкое, надежное и производительное решение. Данная библиотека способна реализовать практически любую задумку разработчика, превосходя ожидания.
Благодаря обширному опыту наших специалистов и уверенному владению этим инструментом, мы превзошли стандартные представления об анимациях, осмелившись исследовать новые горизонты и воплощать уникальные и захватывающие идеи. При этом сайт остаётся стабильным и эффективным даже на слабых устройствах. Карточки с эффектом объема и глубины из суперигры являются лишь одним из проявлений этой возможности.
В разработке фронтенд-части сайта мы уделили особое внимание деталям, включая тонкости верстки, анимации и механики игры. Несмотря на объем работы, мы эффективно справились с поставленными задачами благодаря использованию методологии «от меньшего к большему» и модульных паттернов проектирования. Это позволило нам обеспечить стабильную работу сайта и обеспечить безупречный пользовательский опыт.
Выставлено в номинациях:
— Сайт государственного проекта
— Образовательный портал, научно-популярный сайт, блог
— Сайт образовательного учреждения
— Сайт объекта культуры, концерта, выставки
— Лучший сайт социального проекта