Инженерный дизайн: как делать умные и красивые продукты
•
0 j'aime•205 vues
Наверное, наиболее исчерпывающий свод моих мыслей по инженерному дизайну на апрель 2017 года. Включает в себя как азы работы, так и высший пилотаж по Agile (хотя без моих пояснений разобраться в этом будет не так легко - но на то это и слайды к презентации, а не слайды мне на замену).
Recommandé
Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à Инженерный дизайн: как делать умные и красивые продукты
Similaire à Инженерный дизайн: как делать умные и красивые продукты (20)
Plus de Alexey Borodkin
Plus de Alexey Borodkin (9)
Инженерный дизайн: как делать умные и красивые продукты
- 1. ИНЖЕНЕРНЫЙ ДИЗАЙН КАК ДЕЛАТЬ УМНЫЕ И КРАСИВЫЕ ПРОДУКТЫ Алексей Бородкин, агентство Notamedia Специально для конференции РИФ+КИБ 2017
- 2. КТО Я ТАКОЙ
- 3. КТО Я ТАКОЙ
- 4. ПОЕХАЛИ!
- 6. ЦЕЛЬ НАШЕЙ РАБОТЫ КАЧЕСТВЕННЫЙ ПРОДУКТ
- 7. ТЕХНОЛОГИИ БИ ЗН ЕС П О Л ЬЗО ВАТЕЛ И ИНФОРМАЦИОННАЯ АРХИТЕКТУРАƠЛОГИКА РАБОТЫ ИНТЕРФЕЙСЫ ПРОДУКТ
- 9. ПРЕСЕЙЛ
- 11. ЧТО НА ВХОДЕ Тип А. «Дизайн лаконичный, сайт мультиязычный…» Тип B. «Я не знаю, но мне нравится Headhunter…» Тип D. [ТЗ на 200 страниц с ERP-диаграммами] Тип C. [Вордовский файл и прототип в MS Paint]
- 12. ? КАК БОРОТЬСЯ С БАРДАКОМ?
- 13. О ПОЛЬЗЕ БРИФА
- 14. ЗАЧЕМ БРИФ ПОНЯТЬ, С ЧЕМ МЫ РАБОТАЕМ ВЫУДИТЬ ИНФОРМАЦИЮ ИЗ ЗАКАЗЧИКА УЗНАТЬ, ЧТО МЫ НИЧЕГО НЕ ЗНАЕМ
- 15. ЧТО В БРИФЕ Глава I. Глобальное 1. Цели-задачи-проблемы 2. Как докатились до жизни такой
- 16. ЧТО В БРИФЕ Глава II. Текуще-продуктовое 1. Где можно увидеть 2. ЦА, сегментация, задачи 3. Монетизация продукта и прочая математика 4. Вся подноготная продукта 5. Посещаемость и прочая веб-аналитика 6. Маркетинговые активности 7. Платформа, интеграции, технологии 8. Документация
- 17. ЧТО В БРИФЕ Глава III. Светло-будущее 1. ТЗ, презентации и прочие хотелки 2. ЦА будущего продукта и ее задачи 3. Монетизация продукта 4. Изменится ли сам продукт идеологически 5. Планируемая посещаемость и маркетинг 6. Конкуренты-аналоги-рефы 7. Языковые версии, контент и пр. 8. Устройства, интеграции и прочие технологии
- 18. ЧТО В БРИФЕ Глава IV. Проектное 1. Бюджеты 2. Сроки 3. Контактные лица 4. KPI Глава V. Эстетическое 1. Фирстиль-брендбук 2. Пожелания 3. Референсы по эстетике
- 19. БРИФ: САМОЕ ГЛАВНОЕ 1. Вопросы • Бизнес / Пользователи / Технологии • Прошлое / Настоящее / Будущее • Внутренности / Интерфейсы / Внешний мир • Контент / Эстетика / Логика 2. Приемы • Очная ставка • Живая беседа • Фиксация мелочей
- 23. НУЖНА КОНЦЕПЦИЯ - Нам нужно разложить все вводные - Нам нужно согласовать видение продукта - Нам нужно оставить что-то на память - Нам нужно что-то посчитать
- 24. КОНЦЕПЦИЯ 1. Постановка задачи 1. Общая информация о заказчике 2. Бизнес-цели проекта 3. Задачи проекта 4. Целевая аудитория и ее задачи 5. Обзор существующих решений 2. Предлагаемое решение 1. Краткое описание 2. Функциональность 3. Структура и список шаблонов 4. Доп. указания 5. Референсы 3. Открытые вопросы
- 25. КОНЦЕПЦИЯ: САМОЕ ГЛАВНОЕ 1. Вопросы • Вводные • Решение • Вопросы 2. Приемы • Не бойтесь предлагать варианты • Не бойтесь тыкать пальцем в небо • Не бойтесь додумывать вводные • Не бойтесь показывать • Не бойтесь
- 27. КУДА УПОТРЕБИТЬ КОНЦЕПЦИЮ КОНЦЕПЦИЯ ВЗЯТЬ И ВСЕ ПОСЧИТАТЬ ВЗЯТЬ И ПОСЧИТАТЬ ВСЕ ПРОЕКТИРОВАНИЕ ВЗЯТЬ И ПОСЧИТАТЬ ТОЛЬКО АНАЛИЗ
- 28. КУДА УПОТРЕБИТЬ КОНЦЕПЦИЮ КОНЦЕПЦИЯ ВЗЯТЬ И ВСЕ ПОСЧИТАТЬ ВЗЯТЬ И ПОСЧИТАТЬ ВСЕ ПРОЕКТИРОВАНИЕ* ВЗЯТЬ И ПОСЧИТАТЬ ТОЛЬКО АНАЛИЗ* *остальное вилками
- 29. ПО РУКАМ
- 31. ИДЕМ К ЗАКАЗЧИКУ
- 32. ? ЗАЧЕМ НАМ СНОВА ЗАКАЗЧИК?
- 34. ЧТО МЫ ДЕЛАЕМ - Собираем все имеющиеся вводные - Действительно все. - Без шуток.
- 36. НАШИ ИНСТРУМЕНТЫ - Общие вводные (уже есть) - Интервью - Экспертный аудит - Юзабилити-исследования - Веб-аналитика - Технологический анализ - Конкурентный анализ - Анализ трендов - Анализ предметной области
- 37. ? К ЧЕМУ МЫ СТРЕМИМСЯ?
- 39. ТРЕБОВАНИЯ К ПРОДУКТУ 1. Общая информация о продукте 2. Целевая аудитория 3. Бизнес-цели 4. Бизнес-условия 5. Технологические условия 6. Графические условия 7. Пользовательская специфика 8. Идеи по функциональности 9. Идеи по интерфейсам 10. Идеи по информационной структуре 11. Дополнительная полезная информация (SEO!) 12. Открытые вопросы
- 40. ТРЕБОВАНИЯ: САМОЕ ГЛАВНОЕ 1. Вопросы • Условия • Идеи • Вопросы 2. Приемы • Реальные исследования превыше всего • Если их нет - сойдут и экспертные • Мало информации не бывает • Все согласуем
- 41. ? И ЭТО ВСЕ, ЗА ЧТО УПЛАЧЕНО?
- 43. ВАРИАНТ ОПЛАТЫ №1 АНАЛИЗ ДИЗАЙН РАЗРАБОТКАПРЕСЕЙЛ
- 44. ВАРИАНТ ОПЛАТЫ №2 АНАЛИЗ ДИЗАЙН РАЗРАБОТКАПРЕСЕЙЛ ПЕРЕСМОТР КОНЦЕПЦИИ
- 46. МОЗГОВОЙ ШТУРМ: ЧТО ДЕЛАЕМ 1. Берем все вводные 2. Собираемся командой 3. Придумываем продукт 4. Составляем Бумажного тигра и пересматриваем концепцию 5. Конкретизируем важные детали 6. Переосмечиваем проект
- 47. ЧТО ЗА «ВАЖНЫЕ ДЕТАЛИ» 1. Общая сложность проекта (интеграции, функциональность, все такое) 2. Структура и количество шаблонов 3. Креативный потенциал страниц На основе этого делается переоценка дизайна.
- 48. ? ЧТО ДАЛЬШЕ?
- 49. В ДИЗАЙН!
- 52. ? ДЛЯ КОГО?
- 53. ДИЗАЙН Заказчик Разработчик Тестировщик Контент- редактор Менеджер Проектировщик ПОТРЕБИТЕЛИ ДИЗАЙНА
- 54. ТЕХНОЛОГИИ БИ ЗН ЕС П О Л ЬЗО ВАТЕЛ И ИНФОРМАЦИОННАЯ АРХИТЕКТУРАƠЛОГИКА РАБОТЫ ИНТЕРФЕЙСЫ ПРОДУКТ
- 55. ТЕХНОЛОГИИ БИ ЗН ЕС П О Л ЬЗО ВАТЕЛ И СТРУКТУРА ДАННЫХ ФУНКЦИОНАЛЬНЫЕ ОПИСАНИЯ ДИЗАЙН-МАКЕТЫ ПРОДУКТ
- 58. ТЕХНИЧЕСКОЕ ЗАДАНИЕ • Общие требования • Описание интерфейсов • Описание структуры данных • Описание функциональности • Описание системы администрирования • Описание связи с внешними системами
- 59. ЧТО ВАС ОЖИДАЕТ 1. Танцы с прототипами 2. Дизайнер не вспомнит, что мы делаем 3. Проектировщик будет рыдать ночами 4. Никто не прочтет ТЗ 5. Все сойдут с ума
- 61. ШАГ 1. РАСПИЛИТЬ ПРОДУКТ ШАРД ШАРД ШАРД ШАРД ШАРД ШАРД ШАРД ШАРД ШАРД
- 62. ЧТО ТАКОЕ ШАРД ИНФОРМАЦИОННАЯ АРХИТЕКТУРАƠЛОГИКА РАБОТЫ НАБОР ИНТЕРФЕЙСОВ
- 63. ШАГ 2. ФОКУС НА ШАРДЕ СТРУКТУРА ДАННЫХ ФУНКЦИОНАЛЬНЫЕ ОПИСАНИЯ ДИЗАЙН-МАКЕТЫ БУМАЖНЫЙ ТИГР ПРОТОТИПЫ НАБРОСКИ СТРУКТУРЫ НАБРОСКИ ФУНКЦИЙ
- 64. ШАГ 2. ФОКУС НА ШАРДЕ «ЖИВОЕ» ТЕХНИЧЕСКОЕ ЗАДАНИЕ «ЖИВОЕ» КОНТЕНТНОЕ ЗАДАНИЕ СТРУКТУРА ДАННЫХ ФУНКЦИОНАЛЬНЫЕ ОПИСАНИЯ ДИЗАЙН-МАКЕТЫ
- 65. ПЕРЕСМОТР КОНЦЕПЦИИ ПЛАНИРОВАНИЕ ДИЗАЙНА МОЗГОВОЙ ШТУРМ ШАГ 3. ОБЩИЙ ПРОЦЕСС ФИНАЛИЗАЦИЯ ТЗ (+КЗ) И ДИЗАЙНА ПОЭТАПНЫЙ ДИЗАЙН ПОЭТАПНЫЙ ДИЗАЙН И ПОПОЛНЕНИЕ ТЗ (+КЗ)
- 66. ПЛЮСЫ ПОДХОДА 1. ТЗ не мешает дизайну 2. ТЗ находится в актуальном состоянии 3. Все работают в команде 4. Ни у кого не горит мозг 5. Параллельные процессы 6. Равное внимание и логике, и эстетике
- 67. ? ЧТО ДАЛЬШЕ?
- 70. КЗ ТЗ ЧТО ПРОИСХОДИТ ДАЛЬШЕ РАЗРАБОТКА ПОДГОТОВКА К ТЕСТИРОВАНИЮ
- 71. КЗ ТЗ ЧТО ПРОИСХОДИТ ДАЛЬШЕ МАГИЯ КОНТЕНТ-РЕДАКТОРА РАЗРАБОТКА ПОДГОТОВКА К ТЕСТИРОВАНИЮ
- 72. ЧТО ДЕЛАЕМ 1. Декомпозируем 2. Ставим задачи 3. Контролируем 4. Консультируем
- 75. КАК ВСЕ ВЫГЛЯДИТ В ИТОГЕ АНАЛИЗ ДИЗАЙН РАЗРАБОТКАПРЕСЕЙЛ UX БИЗНЕС ТЕХНОЛОГИИ ИДЕЯ ИНФОРМАЦИОННАЯ АРХИТЕКТУРА ИНТЕРФЕЙСЫ ФУНКЦИОНАЛЬНОСТЬ КОНСУЛЬТАЦИИ КОНТРОЛЬ
- 76. ВЫСШИЙ ПИЛОТАЖ
- 79. AGILE-ПРОЦЕСС ТРЕБОВАНИЯ К ПРОДУКТУ ТЗ + ДИЗАЙН-МАКЕТЫ ВЕРСИЯ ПРОДУКТА ПРЕСЕЙЛ ФИНАЛЬНЫЙ РЕЛИЗ+ написание спецификации
- 80. КОМАНДА
- 81. DESIGN DREAM TEAM ЗАКАЗЧИК МЕНЕДЖЕР ПСИХОЛОГ ХУДОЖНИК РАЗРАБОТЧИК ТЕСТИРОВЩИК
- 82. ИГРА «ВЫБЕРИ ОТВЕТСТВЕННОГО» ЗАКАЗЧИК МЕНЕДЖЕР ПСИХОЛОГ ХУДОЖНИК РАЗРАБОТЧИК ТЕСТИРОВЩИК
- 83. DESIGN DREAM TEAM ДИЗАЙНЕР ПРОДУКТА ГРАФИЧЕСКИЙ ДИЗАЙНЕР МЕНЕДЖЕР
- 84. СФЕРЫ ОТВЕТСТВЕННОСТИ - Ценность: продукт (качество) - Анализ - Синтез - Фиксация - Авторский надзор - Защита продукта - Коммуникация по продукту - Ценность: проект (деньги/сроки) - Документооборот - Координация команды - Организация - Защита проекта - Управление рисками - Коммуникация по проекту Дизайнеры Менеджеры
- 85. ПЛЮСЫ ТАКОГО ПОДХОДА • Есть компетенции по продукту • Есть адвокаты продукта, отстаивающие его интересы • Есть продуктивный рабочий конфликт • История масштабируемая
- 86. РАЗДЕЛЕНИЕ ТРУДА - Бизнес-анализ - Технический анализ - UX-исследования - Прототипирование интерфейсов - Проработка логики и архитектуры - Написание документации - Коммуникация с заказчиком по логике - Постановка продуктовых задач - Формирование креативной концепции - Определение графической концепции - Отрисовка дизайн-макетов - Коммуникация с заказчиком по эстетике Дизайнер продукта Графический дизайнер
- 87. ГДЕ ИСКАТЬ - (Около)техническое образование - Шизофренический карьерный бэкграунд - Инженерный склад ума - Любовь к продуктовому дизайну - Русский язык - Нацеленность на качество и детали - Коммуникабельность - Хорошие навыки граф. дизайна - Коммуникабельность - Понимание сути разработки продукта Дизайнер продукта Графический дизайнер
- 94. • Разделение между проектом и продуктом • Разделение между продуктовым и графическим дизайном • Дизайн-экосистема САМОЕ ГЛАВНОЕ О ЛЮДЯХ
- 95. ЭПИЛОГ
- 96. ИНЖЕНЕРНЫЙ ДИЗАЙН: ГЛАВНОЕ Проработка продукта во всей полноте Четко выстроенные процессы Четкие роли Универсальной дизайн-стратегии нет, но есть универсальные принципы дизайн-мышления Вам понадобится экосистема.
- 98. ДЕЛАЙТЕ УМНЫЕ И КРАСИВЫЕ РЕШЕНИЯ! Алексей Бородкин, директор по продукту агентства Notamedia, глава Гильдии вольных проектировщиков facebook.com/alexey.borodkin a.borodkin@notamedia.ru http://www.the-guild.ru