project interaction of designers and developers
TRANSCRIPT
Проектное взаимодействие дизайнеров и разработчиков
АЛЕКСАНДР СЛЮСАР
1 часть
ВЗАИМОДЕЙСТВИЕ
«Персонал компании – это как футбольная команда: все должны играть как единая команда, а не скопище ярких личностей» ЛИ ЯКОККА
Взаимодействие
РАБОЧИЕ МОМЕНТЫ
– Низкий уровень коммуникации
– Ограниченное взаимодействие
– Мало обмена опытом
– Недопонимание друг друга
– Разграниченная работа каждого
и так далее...
Взаимодействие
ЕЩЕ ИНОГДА МЫ ГОТОВЫ ПОСПОРИТЬ «ЗАЧЕМ ДВИГАТЬ КНОПКУНА 5 PX ВПРАВО»
Взаимодействие
ИДЕАЛЬНАЯ КОМАНДА
DESIGNTEAM
DEVELOPMENTTEAM
ANALYTICS & MANAGEMENT
TEAM
Взаимодействие
ОТ ИДЕАЛА К РЕАЛИЗАЦИИ
ANALYSIS
Initiate Analysis Prototype Visual Design Delivery Development Test Deployment
DESIGN
“The good life is a process, not a state of being. It is a direction not a destination.”
CARL ROGERS
DEVELOPMENT
Взаимодействие
ШАГИ К ВЗАИМОДЕЙСТВИЮ
– Вовлечение в процессы друг друга
– Баланс между дизайном и технологиями
– Обмен опытом и знаниями
– Раннее начало разработки
– Ориентир на качество и коллаборацию
– Цели, время и спринты
Взаимодействие
НОВЫЙ ПОДХОД
Initiate Analysis Prototype Visual Design Delivery Development Test Deployment
ANALYSIS DESIGN DEVELOPMENT
Взаимодействие
ДИЗАЙНЕРЫ
– Технологический подход при создании дизайна
– Проектирование как основной процесс
– Унификация внешнего вида проекта
– Ответственность за передачу в разработку
– Вовлечение разработчиков в этап дизайна
– Помочь начать Phase 0 разработки
– Попробовать роль Design QA
Взаимодействие
РАЗРАБОТЧИКИ
– Участвовать в обсуждении дизайна
– Обучать дизайнеров мыслить «технически»
– Чаще делать сборки для обсуждений
– Удерживать дизайнеров «на поддержке»
– Совместно тестировать и улучшать проект
– Вовлечение дизайнеров в процесс разработки до самого релиза проекта
2 часть
ПРИМЕНЕНИЕ
«Качество — это делать что-либо правильно, даже когда никто не смотрит.» ГЕНРИ ФОРД
Компиляция проектов
Применение
МЫ ЗНАЕМ НАПРАВЛЕНИЕ,НО КАК ЭТО ПРИМЕНИТЬНА ПРАКТИКЕ?
Применение
Принципы:
Преимущества:
SKETCHING
– Скорость исполнения
– Реализация нескольких идей
– Просто для обсуждений и изменений
– Создание Workflow проекта
– Обсуждение с разработчиками
– Проверка со Scope
НАШ ВЫБОР
Факт:
4 часа, 26 скетчей, выбрали направление, обсудили моменты для разработки.
Применение
Принципы:
Преимущества:
PROTOTYPE
– Использование Invision или Axure
– Много итераций проектирования
– Активное тестирование проекта
– Постоянные улучшения и «пиление»
– Полная детализация проекта
– Инсайты, обсуждение и дискуссии
– Обсуждение с разработчиками
– Начало архитектурной фазы разработки
НАШ ВЫБОР
Применение
Принципы:
Преимущества:
VISUAL DESIGN
– Стандартизация дизайна
– Использование Native элементов
– Использование готовых компонентов
– Системный подход в дизайне
– Учет технологических особенностей
– Сокращение времени в разработке
– Скорость при передаче в разработку
– Скорость при интеграции дизайна
Факт:
Времени было мало, использовали системные элементы, одинаковые отступы и размеры.
Применение
Принципы:
Преимущества:
DELIVERY
– Скорость и информативность
– Качество ресурсов
– Консультации с разработчиками
– Привычный набор для интеграции
– Быстрее и проще для разработчиков
– Проще поддерживать развитие проекта
Применение
DELIVERY SET
Prototype Specifications Styleguide UI Library
Assets Animations Sources Fonts
Применение
Tools:
Преимущества:
DELIVERY. STYLE GUIDE
– Для Photoshop: PNG Express
– Для Sketch: Sketch Measure
– Ждем Zeplin
– Полное описание дизайна
– Быстрее и проще для разработчиковНАШ ВЫБОР
ИНТЕГРИРУЕМ
Факт:
Очень утомляет дизайнеров, но в итоге получаются шикарные «книги» для интеграции дизайна
Применение
Tools:
Преимущества:
DELIVERY. GRAPHIC ASSETS
– Для Photoshop: PNG Express, Photoshop Extract Assets и Cut&Slice
– Для Sketch: Sketch Export Assets
– Отдельно NinePatch для Android
– Один векторный файл icon.pdf для iOS Работает в Xcode 6 НАШ ВЫБОР
ИНТЕГРИРУЕМ
НАШ ВЫБОР
Применение
Tools:
Преимущества:
DELIVERY. ANIMATIONS
– After Effects
– Marvel
– Можно изучать Form
– Динамическое «оживление» экранов
– Понятный формат для разработчиков
Итог:
Осваиваем анимации в After Effects паралельно консультируясь с разработчиками.
Применение
Принципы:
Преимущества:
COLLABORATE & TEST
– Тестирование с участием дизайнеров
– Общее обсуждение результатов
– Дополнительная точка верификации
– Забота о взаимодействии с проектом
– Улучшение качества и «мелочей»
Применение
ТО САМОЕ ЧУВСТВО,КОГДА ТЫ ВИДИШЬ КАК ТВОЙ ДИЗАЙН НАЧИНАЕТРАБОТАТЬ.
ИТОГИ
– «Внедряйтесь» в процессы друг друга
– Чаще общайтесь и делитесь опытом
– Создавайте проекты вместе, а не раздельно
– Дизайнеры помогают интегрировать дизайн
– Разработчики обучают мыслить «технически»
– Начинайте разработку как можно раньше
– Тестируйте и улучшайте вместе
Спасибо за внимание!
Александр СлюсарРуководитель дизайн отдела в компании [email protected]
www.trinetix.com