Дизайнер, разработчик, нет конфликта, нет драмы

Евгения Малкова Mobile UX/UI Designer, 2ГИС

Роль дизайна в продукте

Процесс создания продукта

Коммуникации между дизайнером и разработчиком

Как вместе делать крутой продукт

?Что делать, если чувство прекрасного у разработчика развито сильнее, чем у дизайнера?

Как подвигать пиксели без риска для жизни?

Зачем разработчику иногда нужно побыть дизайнером?

Дизайн. зачем?

Контроль финансов

Контроль финансов

Контроль финансов

119 р.

Технологии +

дизайн

Создание продукта

Как это делается?

Продуктовые требования

Дизайн ревью Фичефриз

Выпуск продукта

Общий дизайн

Дизайн фич Разработка фич

Оценка от разработки, roadmap продукта

Реализация фич

Дизайнер Разработчик Менеджер

Тестировщик Teamlead Арт-директор

Супер-команда

+

Проектирует интерфейс

Пишет код

Ставит задачи

Кто чем занимается?

В супер-команде все равны!

Где происходят пересечения?

Продуктовые требования

Дизайн ревью Фичефриз

Выпуск продукта

Общий дизайн

Дизайн фич Разработка фич

Оценка от разработки, roadmap продукта

Реализация фич

Продуктовые требования

Дизайн ревью Фичефриз

Выпуск продукта

Общий дизайн

Дизайн фич Разработка фич

Оценка от разработки, roadmap продукта

Реализация фич

Оценка продукта

«Договориться надо на берегу»

РМ готовит продуктовые требования

Дизайнер продумывает UX продукта

Дизайн и требования отправляются в Confluence

Команда разработки изучает требования и выносит оценку

Составляется roadmap продукта со сроками

Что происходит на этом этапе?

Что может случиться?

Разработчик не может реализовать дизайн

Выяснить, в чем проблема

Если проблему невозможно решить, задать вопрос о целесобразности дизайна:

А зачем нам столько фич в приложении? Может некоторые вынести в отдельный продукт?

При отсутствии аргументов — пересмотреть дизайн.

Решение

Работа над продуктом

РМ описывает требования к фиче в Confluence

РМ ставит задачу дизайнеру в Basecamp

Дизайнер разрабатывает интерфейс

РМ апрувит дизайн и выкладывает его в Confluence

Разработка начинает заниматься фичей

Что происходит на этом этапе?

Инструменты совместной работы

Basecamp Confluence Jira Dropbox

Что может случиться?

Дизайнер далеко ушел от первоначального дизайна

Не стесняться и спросить у РМ:

Почему изменили дизайн? В первой итерации были нативные кнопки, где они?

Решение

Есть сомнения — задать вопрос

Разработчику не нравится дизайн :)

Эмпатия

Дизайн — шляпа Нарушена логика UI в продукте

Метафора иконки совсем неочевидна! #$%*##%*!

Сформулировать и тезисно обосновать, что именно не нравится:

Решение

Подумать — зачем я это говорю?

Эстетически неубедительно

Lifehack

backlog задач wishlist

Реализация дизайна

Дизайнер завершает работу над дизайном основных фич

Разработка продолжает заниматься фичами

Разработчик дает требования к файлам

Дизайнер готовит файлы для разработчика

Что происходит на этом этапе?

Что может случиться?

Разработчик вдруг понял, что успевает сделать дизайн только на 70%

Успокоить дизайнера

Попробовать найти ресурсы для выполнения

Если это невозможно, предложить дизайнеру 2-3 варианта решения проблемы:

Прости, к релизу мы можем сделать пока только через браузер, или вообще убрать. С тебя — дизайн иконки и нарезка файлов. Потом сделаем полноценную версию!

Решение

Дизайнер неправильно подготовил файлы, а разработчик взял их в работу

Нет ресурсов 2х и 3х

Непопадание в пикселиCMYK

Ошибки в файлах

Подробно и четко рассказать, что вам и как нужно подготовить.

Обьяснить дизайнеру особенности процесса разработки.

Поругать!

Для реализации фичи мне не хватает файлов для ретины и 3х. Опять ты забыл! Подготовь, и мы закроем задачу.

Решение

Не берите в работу файлы с ошибкой!

Фичефриз и дизайн-ревью

Дизайн сделан

Код написан

Разработчики правят баги

Дизайнер делает дизайн-ревью

Что происходит на этом этапе?

Что может случиться?

Дизайнер вдруг полностью меняет интерфейс

Что меняем?

Простые изменения

Не успеем!

Сложные изменения

РМ прибежал и сказал делать новую фичу

Не успеем! Противоречит гайдлайнам!

Решение

+

Объединитесь и примите решение вместе

Разработчик реализовал дизайн некорректно

Некорректно — это как?

Неправильный цвет/ положение

Лишний элемент

Другаямеханика UI

Найди 10 отличий

Почему?

Ошибка разработчика Ошибка дизайнера

Давай-ка подвигаем пиксели!

Читай матчасть.

Не забывайте ставить задачи в Jira

Кажется, вы художник

Если вам пришло вдохновение — отбросьте Xcode

В любой непонятной ситуации — не пишите код

Возьмите карандаш, бумагу, Sketch и начинайте творить!

Запомните!

1 Цель — крутой продукт

2 Правильно используйте инструменты

3 Уважайте чужой труд

4 Учите друг друга

5 Интересуйтесь параллельным миром

+ =

Спасибо!

jane.malkova@gmail.com