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-экспертов
Живое общение
В прямом эфире наши спикеры ответят на ваши вопросы
По вопросам партнерства или участия в качестве спикера пишите организаторам