🌍 Артефакты команды дизайна
Производимые командой
| Название | Описание (что это за артефакт, что в себя включает и как работает) | Что будет если не использовать артефакт | Ссылка на пример |
|---|---|---|---|
| Дизайн концепт | Пример визуального представления будущего интерфейса, в ограниченном количестве (1-5 экранов) | Вероятность что команда приступит к дизайну, но визуальный подчерк не устроит по каким-то причинам заказчика, что спровоцирует большую потерю времени | Dribbble |
| Style-guide | Краткое описание стиля продукта в 1-ом, 2-х слайдах (как правило вытекающая из ui kit). Рассказывает о выбранных начертаниях, палитрах, элементах и отступах с размерами. | При подаче задач графическим дизайнерам, маркетологам и прочим специалистам будет нарушены визуальные стили со стороны другой команды | Dribbble one Dribbble two |
| UI Kit | Это единый набор элементов пользовательского интерфейса. Унификация элементов интерфейса, которая сокращает и упрощает работу в сложных проектах, чтобы избежать ошибок в дальнейшем. Помогает скоординировать работу с разработчиками, чтобы получить дизайн единообразным на разных страницах одного проекта. | Будет замедлена работа дизайнера, появляются ошибки по примеру «тут иконка перекрасилась, а вот тут нет» в большом количестве. Увеличивают десятикратно внесение правок в уже существующие макеты (чем больше экранов, тем больше времени требуется). Разработчикам сложнее прописывать компонентные элементы, не видны все состояния. Проще говоря это штука которая позволяет потратить всей командой не 600 часов, а 350-400 | Видео пример Figma |
| Логотип | Знак компании в векторном формате для расположения на светлом и темном фоне | Будет отсутствовать опознавательный знак | Dribbble one Dribbble two |
| Логобук | Описание правил использования логотипа | Искажение использования логотипа другими командами | Google drive |
| Брендбук | Описание правил использования фирменного стиля компании (включает в себя логотип, цвета, шрифты, паттерны, носители) и философию компании (бренд, история, миссия, ценности и т. д. список очень большой) | Не будет полного понимания что и как публиковать, будут отсутствовать такие штуки как носители и размещение графики на них, описание типографики, логотипа, цветов, документации | Google drive |
| UI дизайн | Дизайн-макеты экранов, которые полностью готовы к передаче в разработку | Хаос в разработке любого продукта | |
| UX дизайн | Совокупность нескольких артефактов: CJM, User-Flow, Прототипов. Так же может включать в себя анализ рынка по необходимости | Будет отсутствовать понимание достижения цели. Проще говоря, сделаем красиво, но не функционально, болей пользователя не решим, тем самым конверсия точно не поднимется | Прототипы, CJM, User-Flow, Анализ |
| Прототипы | Бесцветные примерные макеты, отражающие основное позиционирование блоков и взаимосвязей между ними. | Если начать все сразу делать в дизайне, то будет много правок которые труднее реализовывать за счет соблюдения стилей. А на этапе UX (условно как выкройка) очень много переделок и правок. Если этапом пренебречь, то время вырастет по экспоненте | Google drive |
| CJM | Помогает понять пользователя и увидеть главную цель продукта | Без нее мы можем решать проблему пользователя, но не так эффективно. Не сможем понимать ход мысли пользователя и соответственно разложить его все шаги наперёд, что бы предугадывать решения и вести по подготовленному сценарию. Проще говоря, мы не сможем манипулировать решениями пользователя. | Miro |
| User Flow | Навигационная карта продукта, состоящая из всех возможных путей пользователя. Позволяет посмотреть на всю навигацию продукта в рамках одной схемы. Ценность артефакта заключается в том что при развитии продукта или внесения изменений, это единственное место где мы видим все узлы которые затронет это решение. | Если в приложении 10 экранов, ничего страшного. Если больше то трудно будет его редактировать и масштабировать. Не владелец, не дизайнер, не РП, вообще никто не будет видеть полную картинку продукта. Что может вылиться в сложности и стопор в развитии. Это как отсутствие карты в центре леса. Выбраться можно конечно, но затратив времени x2 и какие-то важные вещи упустив. Также помогает решить проблему внедрения фичи, что бы сразу было видно все узлы которые она затронет и ничего не пропустить | Miro |
| Аудит (основательный) | По сути это анализ дизайн-продукта (сайта или приложения, пакета молока) с целью выявить проблемы UI и/или UX. Нужен он когда клиент приходит и говорит, что ему не нравится наш продукт, но не понимает почему. Дизайнер в этом случае берёт и рассматривает сайт со стороны своей экспертности (накопленных знаний и опыта, открытых источников с аналитикой). На выходе получаются рекомендации по улучшению. Важно: рекомендации в этом артефакте являются субъективынми, так как не подкреплены данными — всё это гипотезы | Начнется хаос в разработке на этапах проектировани и дизайна. Клиент будет пытаться крутить дизайн и предлагать попробовать разые варианты, потому что четко не осознает проблему которую решает и что на нее влияет. Как итог клиент потратит много времени и денег, а команды будет выгорать. Чаще всего такие проекты заканчиваются негативно для обеих сторон | Пример |
| Аудит (поверхостный) | Отличие от основательного аудита только в объеме ресурсов и упаковке. Чаще всего результат презентуется в формате беседы/звонка с демонстрацией проанализированных экранов. Потомиу что на упаковку времени нет. Максимум собирается документик с текстом. В нем мы ограничиваемся: — изучение предметной области и бизнеса; — поиск и анализ проблем (на субъективный взгляд дизайнера); — рекомендации. | Иногда времени мало, а клиент не понимает почему ему нужно что-то изменить в продукте, тогда и нужен этот аудит. Потому что он помогает найти точки на которые мы можем влиять и показать верхнеуровневые проблемы. Иначе клиент которые не понимает глубокой проблематики текущего продукта, не смодет верно оценить решение которое мы предлагаем | Пример |