Разработка сайта образовательного проекта SRG от команды AVA DIGITAL

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

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

Пришла пора создать новый дизайн, сочетающий экспертность с панковской атмосферой AVA Digital.

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

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

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

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

Мы стремились подчеркнуть, что обучение в SRG — большой, но персонализированный путь для каждого из студентов, поэтому в основу концепции положили руку из логотипа SRG. Перевернутая «R» напоминает жест «peace» — мы решили развить эту идею и сделать жесты основным визуальным образом сайта. Дополнили содержание: рассказали о ходе учебы, представили преподавателей, похвастались кейсами студентов. Это помогает подкреплять доверие к опыту команды. Не забыли про дух SRG в мелочах: анимировали логотип при скролле, «оживили» фото кураторов, добавили координаты курсора, как на макете.

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

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

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

Жест, которым встречает SRG — это «peace», отсылающий к перевернутой R на логотипе. 3D-модель руки стала визуальным проводником по всему сайту. Она взаимодействует с разными экранами уникальным образом: по-рокерски складывает пальцы в «козу», демонстрирует логотипы конкурсов, считает этапы обучения. И, конечно, показывает FAQ — то есть средний палец.

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

Сложнее всего оказалось «оживить» 3D-руку. В ее создании участвовала вся команда: разработали модель в Blender, прописали логику жестов и движений в скриптах и сверстали это на Taptop. Почти все анимации были написаны кастомным кодом с использованием библиотеки GSAP. С помощью библиотеки Lenis придали плавности скроллу, чтобы добавить ощущение премиальности дизайна.

Множество взаимодействий пришлось настраивать вручную: уникальный курсор, динамические координаты, Lottie-анимации в логотипе. Не забыли и о пасхалках: если навести курсор на определенное место в футере, рука покажет «козу».

Основой палитры стали свойственные AVA цвета: черный, белый, красный. На сером фоне ярко выделяются акцентные оттенки. При наведении курсора команда и студенты оживают: фото становятся цветными, а кураторы еще и показывают разные жесты, поддерживая единую тему сайта.

Инсайты, гипотезы, процесс создания и взаимодействия с заказчиком

Сайт для дизайнеров не может обойтись без фишек — где, как не здесь, демонстрировать свое мастерство? Мы добавили несколько пасхалок: например, логотип SRG при скролле постоянно пересобирается, буквы переставляются местами. Эта метафора отражает трансформацию наших студентов во время обучения. Координаты курсора по периметру сайта, как на макете, позволяют посетителю почувствовать себя дизайнером.

Мы сделали все, чтобы воплотить в диджитал-среде дух своей команды и передать его будущим студентам.

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

Прочая информация о кейсе

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

Разработали отдельный лендинг для презентации. Ключевая визуальная метафора — тайм-линия, привязанная к скроллу: пролистывая страницу, пользователь проигрывает анимацию. Минималистичный дизайн усиливает акцент на интерактивные элементы.

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

После публикации кейс собрал максимум регалий:
- Site of the day на CSSDA
- Site of the day, Developer Award и Honorable Mention на Awwards
- Третье место на Workspace Awards в категории «Сайты на конструкторе»
- DP Best на DPROFILE

Проект AVANIMATION так же вошел в подборки лучших проектов на DPROFILE.

Скриншоты

Комментарий заказчика

«Это был один из тех проектов, где с самого концепта все пошло как надо — команда нашла совместное вдохновение и буквально прыгнули выше своих голов. Я наблюдал за всем процессом — от обсуждения текстов до трехнедельных споров из-за способов анимации руки на сайте. Каждый, кто был в проекте, выложился на максимум. И я очень благодарен своим ребятам, за то, что они горят тем, что мы делаем, так же как и я».

Никита Кечкин, основатель и руководитель студии AVA