Трансляция начнется 9 декабря в 14:00 МСК 

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

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

Доклады первой конференции Design is Frontend

Наша группа в Facebook

Telegram-чат

Кому будет интересна онлайн-конференция:

Дизайнерам, фронтенд-разработчикам, руководителям веб-студий, CEO, CTO, тимлидам и всем тем, кого волнует качество верстки.

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

14:00-14:30 

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

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

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

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

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

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

14:30-15:00

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

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

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

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

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

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

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

15:00-15:30

Сложные виды анимации на вёрстке, типичные ошибки фронтендера

• Способы реализации анимаций
  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

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

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

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

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

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

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

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

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

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

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

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

16:00-16:30

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

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

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

16:30-18:00

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

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

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

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

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

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

В нашей группе Facebook публикуем информацию о докладах и спикерах. Добавляйтесь, и вы узнаете, как руководитель отдела фронтенд-разработки AGIMA однажды уронил сайт одного из топ-20 банков на полтора часа, генеральный директор AFFINAGE сделал из кулинарного сайта рекламную площадку фильмов 18+, а из-за ошибки Frontend TeamLead Voximplant один маленький банк чуть не закрылся. Ждём вас!

А ещё у нас есть чат в Telegram, где мы даём практические рекомендации для  дизайнеров и фронтенд-разработчиков. Присоединяйтесь!