UX-дизайнерам и фронтенд-разработчикам: как комплексно подходить к проблеме низкого качества вёрстки и решать проблемы бизнеса. Баги между дизайном и версткой, ошибки фронтендера, чек-лист при приемке верстки. Спикеры: SberDevices, AFFINAGE, PINKMAN, Студии Олега Чулакова и Hawking Bros.
Неправильно выгруженные макеты или красная кнопка вместо зеленой — это не просто картинки, а реальные финансовые потери для бизнеса. Почему конечный продукт не похож на первоначальный замысел дизайнера? Как комплексно подходить к проблеме низкого качества вёрстки?
Ведущие UX-дизайнеры и фронтенд-тимлиды SberDevices, AFFINAGE, PINKMAN, Студии Олега Чулакова и Hawking Bros. расскажут, как вести баг-лист между дизайном и версткой, поделятся основами UX для фронтендеров и поговорят о том, как делать сложные виды анимации на верстке.
Доклады первой конференции Design is Frontend
Кому будет интересна онлайн-конференция:
Дизайнерам, фронтенд-разработчикам, руководителям веб-студий, CEO, CTO, тимлидам и всем тем, кого волнует качество верстки.
Расписание докладов
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
Дизайн и frontend: давайте жить дружно
- Базовые ценности дизайнера и фронтендера: в чем разница?
- Правила коммуникации с дизайнерами. Как общаться на одном языке?
- На что смотрит дизайнер в первую очередь при приемке верстки?
- Чеклист хорошей верстки с точки зрения дизайна
- Топ ошибок фронтендера в части дизайна — и как свести их к минимуму
16:00-16:30
Как превратить разные отделы продакшена в слаженную команду
- Классический подход в создании сайта, которым мы пользовались до недавнего времени.
- Какие боли мы испытали и какие уроки вынесли.
- Как на основе этих уроков мы пришли к параллельной разработке, когда все «отделы» стартуют почти одновременно.
- Как в таком формате успешно запустили два проекта в максимально сжатые сроки, да так что все остались довольны.
- Как мы это внедряем в повседневную разработку.
Спойлер: не обещаю, что команда станет слаженной, — войн не избежать, их будет даже больше. Но результат будет лучше, а о том, что сроки съезжают, станет известно раньше.
16:30-17:00
Как подружить аналитику, дизайн и разработку, не сорвав сроки
- Оценка проекта — этап менеджмента. Декомпозиция и планирование
- Короткие итерации и привлечение клиента к работе.
- Детализированное проектирование. Ускорение дизайна и начало разработки на этапе проектирования.
- Уменьшение вопросов со стороны клиента. Клиентское видение продукта на всех этапах одинаковое.
- Составление мудборда на этапе дизайн-концепции.
- Компоненты в проектировании = Компоненты в дизайне только в цвете и с доработками = Компоненты в разработке.
- Отработка всех состояний на каждой странице (показать чек-лист всех состояний).
- Анимация (микровзаимодействия). Прежде чем придумать анимацию, её нужно согласовать.
- UI-киты, дизайн-системы и техническое описание поведений.
- Подготовка всех вижуалов к экспорту под верстку.
17:00-18:30
Общая тема: «Взаимоотношения дизайнера и верстальщика»
Обсуждаем противоречивые вопросы:
- Перейдет ли «чистая» (только HTML & CSS) вёрстка к веб-дизайнерам в ближайшем будущем?
- Кто вообще придумал экспортировать макеты для верстки?
- Будет ли когда-нибудь специализация у Frontend-разработчиков? (например Frontend UI/UX developer и Frontend JavaScript developer).
- Видите ли вы реальные предпосылки к созданию «интерфейсов будущего" (пример: фильмы «Особое мнение», «Аватар»).
В нашей группе Facebook публикуем информацию о докладах и спикерах. Добавляйтесь, и вы узнаете, как руководитель отдела фронтенд-разработки AGIMA однажды уронил сайт одного из топ-20 банков на полтора часа, генеральный директор AFFINAGE сделал из кулинарного сайта рекламную площадку фильмов 18+, а из-за ошибки Frontend TeamLead Voximplant один маленький банк чуть не закрылся. Ждём вас!
А ещё у нас есть чат в Telegram, где мы даём практические рекомендации для дизайнеров и фронтенд-разработчиков. Присоединяйтесь!