Как выстроить эффективное взаимодействие между дизайнером и

фронтенд-разработчиком

Игорь Шеко

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

Идея

Производство

Результат

Доработки

Ретроспектива

https://google.github.io/eng-practices/review/

Блок кривой.

У тебя верстка поехала.

Текст нужно переписать, непонятно

Твой текст/дизайн/верстка г-но.

Паддинг блока 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