SHARAGA, design, rock'n'roll: редизайн для образовательного проекта AVA SHARAGA

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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