Онлайн-конференция Design is Frontend. Дизайн и верстка, которые решают проблемы бизнеса

Ведущие UX-дизайнеры и фронтенд-тимлиды SberDevices, AFFINAGE, PINKMAN, Студии Олега Чулакова и Hawking Bros. расскажут, как вести баг-лист между дизайном и версткой, поделятся основами UX для фронтендеров и поговорят о том, как делать сложные виды анимации.

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

 

Расписание докладов

14:30-15:00

Игорь Яковлев, CEO AFFINAGE: Как фиксировать и не терять баги между дизайном и версткой. Реальный опыт.

  • Как составить баг-лист для нужд компании?

  • Разбираем, какие колонки точно должны быть в баг-листе.

  • Разберем реальный пример оформления таблицы.

  • Правила создания скриншотов и видео.

  • Какие типы и статусы бывают у багов.

  • Пишем тест-кейсы правильно.

15:00-15:30

Влад Шуянов, Тимлид фронтенд-разработки Hawking Bros: Сложные виды анимации на вёрстке, типичные ошибки фронтендера.

  • Способы реализации анимаций
    Video / Gif
    CSS
    - transition (переходы между состояниями элементов: смена цвета/появление тени/изменение размера и так далее).
    - animation / keyframes (зацикленные анимации/анимации при появлении блоков).
    JS
    - Плавное изменение стиля свойства с помощью расчетов в JS.
    - GSAP.
    - Canvas (простые элементы и сложные анимации).
    - WebGL / ThreeJS (3d-графики: Земля-2050 и несложная игра).
    SVG-анимации

  • В каком виде передавать сложные анимации верстальщику
    - Краткий обзор возможностей Figma/Zeplin.
    - After Effects и Illustrator.
  • Производительность анимаций и какие ограничения это создает
    - Как браузер рисует страницу? Этапы Styles, Layout, Paint, Composite.
    - Как анализировать производительность?
    - CPU vs GPU анимации.
    - 10 правил плавных CSS анимаций с примерами.
    - requestAnimationFrame. Подстраиваемся под ритмы браузера.

15:30-16:00
Екатерина Тюхай, UX-lead SmartApp Studio SberDevices: Дизайн и frontend: давайте жить дружно.

  • Базовые ценности дизайнера и фронтендера: в чем разница?

  • Правила коммуникации с дизайнерами. Как общаться на одном языке?

  • На что смотрит дизайнер в первую очередь при приемке верстки? 

  • Чеклист хорошей верстки с точки зрения дизайна

  • Топ ошибок фронтендера в части дизайна — и как свести их к минимуму

16:00-16:30
Юрий Чижов, технический директор PINKMAN: Как превратить разные отделы продакшена в слаженную команду.

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

Спойлер: не обещаю, что команда станет слаженной, — войн не избежать, их будет даже больше. Но результат будет лучше, а о том, что сроки съезжают, станет известно раньше.

16:30-17:00
Александр Кременской, арт-директор «Студии Олега Чулакова»: Как подружить аналитику, дизайн и разработку, не сорвав сроки.

  • Оценка проекта — этап менеджмента. Декомпозиция и планирование

  • Короткие итерации и привлечение клиента к работе.

  • Детализированное проектирование. Ускорение дизайна и начало разработки на этапе проектирования.

  • Уменьшение вопросов со стороны клиента. Клиентское видение продукта на всех этапах одинаковое.

  • Составление мудборда на этапе дизайн-концепции.

  • Компоненты в проектировании = Компоненты в дизайне только в цвете и с доработками = Компоненты в разработке.

  • Отработка всех состояний на каждой странице (показать чек-лист всех состояний).

  • Анимация (микровзаимодействия). Прежде чем придумать анимацию, её нужно согласовать.

  • UI-киты, дизайн-системы и техническое описание поведений.

  • Подготовка всех вижуалов к экспорту под верстку.

17:00-18:30 

Круглый стол «Взаимоотношения дизайнера и верстальщика»

Обсуждаем противоречивые вопросы:

  • Перейдет ли «чистая» (только HTML & CSS) вёрстка к веб-дизайнерам в ближайшем будущем?

  • Кто вообще придумал экспортировать макеты для верстки?

  • Будет ли когда-нибудь специализация у Frontend-разработчиков? (например Frontend UI/UX developer и Frontend JavaScript developer).

  • Видите ли вы реальные предпосылки к созданию «интерфейсов будущего" (пример: фильмы «Особое мнение», «Аватар»).