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

ИТ и интернет

Трансляция начнется 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, где мы даём практические рекомендации для  дизайнеров и фронтенд-разработчиков. Присоединяйтесь!

Поделиться:

149 дней назад
9 декабря 2020 14:00–18:00

Событие пройдет онлайн

Уже есть билет
Получить ссылку

Поделиться:

Есть вопросы?

Напишите нам, и мы обязательно вам ответим. Много интересного уже есть в нашей базе знаний.

Участник Организатор

Связь с организатором

На этот адрес придёт ответ от организатора.

Подпишитесь на рассылку организатора

Возврат билета

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

Подробнее о возврате билетов

Войдите через соцсети

или с помощью email

Забыли пароль?

Создайте организацию

чтобы получить возможность бесплатно создавать события и управлять ими.

Название увидят участники ваших событий на страницах регистрации, билетах и письмах

.timepad.ru

По этому адресу будет доступен ваш личный кабинет и страница событий для участников

Должен быть указан контактный телефон

Этот телефон будет указан в контактах организации, на страницах событий и в билетах. Удалить его нельзя, но изменить — можно. Без подтвержденного телефона нельзя создавать события.

Как вы планируете использовать Timepad?

Создайте организацию

чтобы получить возможность бесплатно создавать события и управлять ими.

Название увидят участники ваших событий на страницах регистрации, билетах и письмах

.timepad.ru

По этому адресу будет доступен ваш личный кабинет и страница событий для участников

Должен быть указан контактный телефон

Этот телефон будет указан в контактах организации, на страницах событий и в билетах. Удалить его нельзя, но изменить — можно. Без подтвержденного телефона нельзя создавать события.

Как вы планируете использовать Timepad?

Укажите ваш email

Подтвердите ваш email

Сообщение с проверочным кодом было отправлено на указанный email

Отправить еще раз