Как выстроить эффективное взаимодействие между дизайнером и
фронтенд-разработчиком
Игорь Шеко
Frontend team lead at Voximplant
С чего мы начинали
Лендинги - 12 дней
Страницы - 12-60 дней
Долг +22 задачи в месяц
Год спустя...
Сейчас
Лендинги - 2 дня
Страницы - 3-14 дней
Долг - минус 7 задач в месяц
Нужное подчеркнуть...
-
Вы делаете ужасный продукт
-
Вы делаете ужасно медленно
-
Постоянно ищете виноватых
-
Макеты нельзя сверстать
-
Все кривое
-
Нет или почти нет респонсива
-
Макеты меняют в процессе верстки
-
Макеты в jpeg
-
Слои не подписаны
-
Все в растре
-
Анимации только на словах
-
Lorem ipsum dolor sit amet
- Фронты работают, как роботы
- Х вместо close
- Топорные анимации
- Верстка не похожа на макет
- Дизайн-программисты
- Пропускают часть макета, потому что долго делать
- Дизайн в векторе - верстка в растре
Разные компетенции
Ваня
Петя
UI
UX
Art
HTML
JS
CSS
Ваня
Петя
UI
UX
Art
HTML
JS
CSS
Разные компетенции
Ваня
Петя
UI
UX
Art
HTML
JS
CSS
Разные компетенции
Ваня
Петя
UI
UX
Art
HTML
JS
CSS
Разные компетенции
Ваня
Петя
UI
UX
Art
HTML
JS
CSS
Разные компетенции
Идеальный мир
Ваня
UI
UX
Art
HTML
JS
CSS
(Не такой) Идеальный мир
Ваня
UI
UX
Art
HTML
JS
CSS
(Не такой) Идеальный мир
Ваня
UI
UX
Art
HTML
JS
CSS
(Мой) Идеальный мир
Ваня
Петя
UI
UX
Art
HTML
JS
CSS
HTML
JS
CSS
UI
UX
Art
Разные устремления
- Внятный дизайн-язык
- Хороший UX
- Следование визуальным трендам
- Соответствие чувству вкуса заказчика
- Чтобы выглядело круто
- Быстрый сайт
- Качественная кроссбраузерная верстка
- Хороший код
- Поддержка этого кода
- Чтобы было написано круто
Идея
Контент
Дизайн
Верстка
Варианты пайплайна
Идея
Контент
Дизайн
Верстка
Идея
Контент
Дизайн
Верстка
Варианты пайплайна
Идея
Контент
Дизайн
Верстка
Идея
Контент
Дизайн
Верстка
Идея
Контент
Дизайн
Верстка
Варианты пайплайна
Задача на ТЗ
Задача на Контент
Задача на Дизайн
Задача на Верстку
DEADLINE!
Идея
Контент
Дизайн
Верстка
Задача на ТЗ
Задача на Контент
Задача на Дизайн
Задача на Верстку
DEADLINE!
Идея
Контент
Дизайн
Верстка
Задача на Дизайн
Задача на Верстку
DEADLINE!
Идея
Контент
Дизайн
Верстка
Задача на Дизайн
Задача на Верстку
DEADLINE!
???
???
Идея
Контент
Дизайн
Верстка
Объединили команду
Задача на Дизайн
Задача на Верстку
DEADLINE!
???
Идея
Контент
Дизайн
Верстка
???
Идея
Производство
Результат
Доработки
- убрать внешние согласования
- точнее прогнозировать готовность
Идея
Производство
Результат
Доработки
- точка контроля
- потенциально готовый MVP
- загрузить непроизводственные отделы
Идея
Производство
Результат
Доработки
- отшлифовать продукт до дедлайна
- внести доработки после "бета"-теста
Идея
Производство
Результат
Доработки
Идея
Производство
Результат
Доработки
Задача на ТЗ
Задача на Контент
Задача на Дизайн
Задача на Верстку
DEADLINE!
1
2
2
2
1
1
Идея
Производство
Результат
Доработки
Задача на ТЗ
Задача на Контент
Задача на Дизайн
Задача на Верстку
DEADLINE!
1
2
2
2
1
1
Идея
Производство
Результат
Доработки
Задача на ТЗ
Задача на Контент
Задача на Дизайн
Задача на Верстку
DEADLINE!
1
2
2
2
1
1
Идея
Производство
Результат
Доработки
Контент-ревью
Задача на ТЗ
Задача на Контент
Задача на Дизайн
Задача на Верстку
DEADLINE!
1
2
2
2
1
1
Идея
Производство
Результат
Доработки
Дизайн-ревью
Задача на ТЗ
Задача на Контент
Задача на Дизайн
Задача на Верстку
DEADLINE!
1
2
2
2
1
1
Идея
Производство
Результат
Доработки
Фронтенд-ревью
Задача на ТЗ
Задача на Контент
Задача на Дизайн
Задача на Верстку
DEADLINE!
1
2
2
2
1
1
Идея
Производство
Результат
Доработки
Ретроспектива
Блок кривой.
У тебя верстка поехала.
Текст нужно переписать, непонятно
Твой текст/дизайн/верстка г-но.
Паддинг блока 13px - мне кажется, это баг. Выше было 12px
На мобилке странно выглядит футер. Держи скриншот.
Текст странно встает в макет. Давай обсудим.
На Air 13 тормозит анимация.
Давайте посмотрим.
Софт для работы
- JIRA
- Figma
- Slack
- Notion
Почему JIRA
Разные Workflow для разных типов Issue
1 менеджер
Разные Workflow
Разные Workflow
Разные Workflow
Почему JIRA
Роли пользователей
Почему JIRA
Роли пользователей
Почему JIRA
JIRA Automate
- Если нужно менять исполнителей
- Если нужно создавать тикеты на основе других
Почему Figma
Версии
Почему Figma
Версии
Компоненты
Почему Figma
Версии
Компоненты
Почти всегда верстабельно
Notion && Slack
Спасибо
Игорь Шеко
Frontend team lead at Voximplant
