Post on 17-Jul-2015
Дизайнер, разработчик, нет конфликта, нет драмы
Евгения Малкова 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 Интересуйтесь параллельным миром
+ =