9 декабря 2020

№2: Дизайн и верстка, которые решают проблемы бизнеса

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

Доклады

Екатерина
Тюхай

UX-lead SmartApp Studio
SberDevices

Дизайн и frontend: давайте жить дружно

  • Базовые ценности дизайнера и фронтендера: в чем разница?
  • Правила коммуникации с дизайнерами. Как общаться на одном языке?
  • На что смотрит дизайнер в первую очередь при приемке верстки?
  • Чеклист хорошей верстки с точки зрения дизайна.
  • Топ ошибок фронтендера в части дизайна — и как свести их к минимуму

Игорь
Яковлев

CEO
AFFINAGE

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

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

Влад
Шуянов

Тимлид фронтенд-разработки
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. Подстраиваемся под ритмы браузера.

Александр
Кременской

Арт-директор
Студия Олега Чулакова

Как подружить аналитику, дизайн и разработку

  • Оценка проекта — этап менеджмента. Декомпозиция и планирование.
  • Короткие итерации и привлечение клиента к работе.
  • Детализированное проектирование. Ускорение дизайна и начало разработки на этапе проектирования.
  • Уменьшение вопросов со стороны клиента. Клиентское видение продукта на всех этапах одинаковое.
  • Составление мудборда на этапе дизайн-концепции.
  • Компоненты в проектировании = Компоненты в дизайне только в цвете и с доработками = Компоненты в разработке.
  • Отработка всех состояний на каждой странице (показать чек-лист всех состояний).
  • Анимация (микровзаимодействия). Прежде чем придумать анимацию, её нужно согласовать.
  • UI-киты, дизайн-системы и техническое описание поведений.
  • Подготовка всех вижуалов к экспорту под верстку.

Юрий
Чижов

Технический директор
PINKMAN

Как превратить разные отделы продакшена в слаженную команду

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

Круглый стол

Общая тема:
«Взаимоотношения дизайнера и верстальщика»

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

  • Перейдет ли «чистая» (только HTML & CSS) вёрстка к веб-дизайнерам в ближайшем будущем?
  • Кто вообще придумал экспортировать макеты для верстки?
  • Будет ли когда-нибудь специализация у Frontend-разработчиков? (например Frontend UI/UX developer и Frontend JavaScript developer).
  • Видите ли вы реальные предпосылки к созданию «интерфейсов будущего" (пример: фильмы «Особое мнение», «Аватар»).

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

  • Онлайн-трансляция

    Из любой точки мира!
    Да, нас смотрят в Европе и США

  • Уникальный контент

    Каждый доклад прогоняется среди топ-менеджеров и senior-экспертов

  • Живое общение

    В прямом эфире наши спикеры ответят на ваши вопросы

  • Организатор

  • При поддержке

  • Генеральные партнеры

  • Информационные партнеры

По вопросам партнерства или участия в качестве спикера пишите организаторам