Когда мы говорим об анимациях в вебе, на ум сразу приходят CSS-анимации — это достаточно простой и эффективный инструмент.

Но если мы хотим сделать действительно сложную и красивую анимацию, нам могут понадобиться более мощные инструменты для motion-дизайна вроде After Effects.

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

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

Помимо прихваток для решения конкретных задач получите понимание, как задавать дизайнерам правильные вопросы и оптимизировать трехмерные сцены до того, как за них возьмется 3D-художник и фронтендер.

* Сначала поговорим про скролл. Но не простой скролл сверху вниз, а скролл, к которому привязаны движения камеры или движения персонажа или объектов на экране.
* Потом обсудим, как можно сделать динамическое освещение в интерфейсе, не используя никакие источники света в 3D-сцене. А также пара слов про Redshift и Octane Render. Что из них лучше и почему.
* Третьим пунктом покажу один очень простой и дешевый способ сделать из простой фотки трехмерную сцену и поразить непритязательного заказчика. Сами делали так сто раз, и каждый раз срабатывает!
* Дальше разберем рейкастинг. Он нужен для того, чтобы создавать точки интереса в трехмерных сценах на сайте. Когда, например, у вас вместо главной карта города глубиной, и по ней нужно разбросать метки с выпадающим меню. Вот разберем, как это реализовать, сколько объектов, вообще, можно располагать на одной странице и насколько этот прием ресурсоёмкий.
* А на десерт Geometry Instancing — чтобы понять, как прорывная оптимизационная методика из геймдева 2004 года может применяться в сайтах сегодня. Разберем типы шейдеров и попробуем технологию на прочность. Для этого будем добавлять в сцену клонированные объекты до тех пор, пока она не сломается.

Если останется время и будет настрой, поделюсь парой баек о том, как слить дизайн, 3D-продакшн и фронтендеров в один работоспособный юнит и не сойти с ума.

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

Предметно рассмотрим текущие возможности Figma: кастомные hot key, новый функционал в прототипировании, крайне полезные плагины для ускорения работы. Возможно, закроем ваши годовые цели нажатием одной кнопки. Подключим библиотеку иконок через Figma API к вашей ДС в storybook.

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

* Докажу, что доступность нужна не только людям с особыми потребностями.
* Объясню, почему доступность важна для бизнеса и как она влияет на доходы.
* Подсвечу, как всё устроено в Контуре: у нас около 70 продуктов и команд разработки, мы делаем продукты для бизнеса, а наши фронтендеры мало знают про доступность.
* Разберу, как проводить аудит продуктов, использовать библиотеку контролов и объясню роль фронтендеров в развитии доступности.
* Поделюсь историей, как мы столкнулись с овердоступностью и что с этим делали.

Цифровая доступность в Контуре ещё развивается, но наш опыт может помочь крупным и не очень компаниям понять, зачем она нужна, как начать ее развивать и с какими проблемами в процессе можно столкнуться.

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

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

Веб быстро развивается, в нём постоянно появляются новые фичи. Container Queries, Cascade Layers, новые цветовые пространства и многое другое меняют наше представление о современной верстке. Это уже не тот CSS, который писали 3, 5 или 10 лет назад.

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

Большинство активных пользователей интернета ежедневно пользуются двумя основными устройствами для работы и отдыха: телефоном и компьютером.

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

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