Руководство по ведению борьбы с темной стороной дизайна для джедаев цифровых продуктов

Привет, я Александр Волошин

Так же как и многие начинающие дизайнеры, я лихорадочно осваивал только программы и инструменты, и совсем не думал о методологии, из-за чего и испытал на себе все тяготы дизайнерской работы, как на фрилансе, так и в различных дизайн-студиях и айти-компаниях. Однажды я решил разобраться во всем и разработать простой в освоении, и гибкий алгоритм, в результате чего и родилось это пособие. В его основе лежат методологии Human Centered Design и Design Thinking, а также богатый личный опыт работы над проектами разной сложности.

Какие проблемы решает это пособие

Понимание роли и задач дизайнера

На сегодняшний день, чтобы быть успешным дизайнером, не достаточно просто нарисовать набор красивых картинок продукта. Прежде всего важно уметь определить задачи бизнеса и проблемы пользователя, а выявив их, предложить решение, которое будет приносить прибыль бизнесу и удовлетворять потребности пользователя. Такой дизайнер всегда будет востребован и материально обеспечен, не смотря на кризис, революцию или надвигающийся конец света.

Продуманный алгоритм работы

Часто ли тебе приходилось сталкиваться с заказчиком, который сам не знает, чего хочет? Знакома ли ситуация, когда все сроки сдачи проекта уже прошли, а ты все еще находишся на этапе согласования дизайна? Приходилось ли тебе переделывать и дорабатывать уже утвержденный макет? С этими проблемами сталкиваются практически все дизайнеры. Продуманный и проверенный алгоритм поможет избежать основных проблем и получить нужный результат.

Кому будет полезно это пособие

Веб-дизайнерам Поможет структурировать информацию, а также изучить простые методы и инструменты проектирования интерфейсов и избежать основных проблем. Менеджерам Позволит понять, как построить коммуникацию с клиентом и наладить работу всей команды над проектом, чтобы получить нужный результат в срок. Программистам Даст ключ к пониманию методов проектирования удобных интерфейсов, чтобы разрабатывать успешные программные продукты. Если ты узнал себя и свои проблемы, тогда материал ниже — для тебя. Приступим!

Дизайн — это борьба! Борьба эстетики с уродством, порядка с хаосом, света с тьмой... На чьей ты стороне?

---

ЧАСТЬ ПЕРВАЯ

Поиск силы

Про человеческий мозг, подсознание и достижение целей

Любая деятельность, любой процесс направлены на получение конкретного результата и достижение определенной цели. Об этом написано много книг, существует огромное количество методик для различных сфер человеческой деятельности. Однако для большинства дизайнеров деятельность, которой они занимаются, представляется весьма туманным процессом, и его результат зависит от настроения, вдохновения, расположения звезд или количества наркотического вещества в крови, в то время как на самом деле нужно научиться управлять собой...

Человеческий мозг

Краткое руководство по применению Мозг человека — это мощный биокомпьютер, который обрабатывает и хранит информацию. У него есть рабочая память и долгосрочная память. Мозг может эффективно работать только над одной задачей, которая находится в рабочей памяти. Если человек пытается работать над задачей и при этом параллельно удерживать другие задачи, которые нужно не забыть, продуктивность работы снижается. Можно провести аналогию с компьютером: чем больше одновременно запущенных программ и чем сложнее процессы, которые обрабатывают эти программы, тем больше компьютер тормозит. Зачем это нам знать? А затем, что чаще всего дизайнер работает над сложными проектами и ему нужно удерживать в рабочей памяти очень много информации, что напрямую влияет как на продуктивность, так и на результат. Соответственно, дизайнеру нужно построить свою работу таким образом, чтобы работать только над текущей задачей а важную информацию, которую нужно запомнить, хранить вне своей головы. Кроме того, есть два режима мышления: сфокусированное и рассеянное. Сфокусированное мышление применяется тогда, когда нужно сосредоточиться на какой-либо информации, проанализировать и изучить ее. Рассеянное мышление применяется, когда нужно придумать что-то новое, сгенерировать идеи. В рассеянном режиме мозг способен обдумывать то, над чем мы не сосредоточены в данный момент, то есть задействовать подсознание. В сфокусированном режиме мы используем рабочую память, а в рассеянном - долгосрочную. Твой мозг обладает потрясающими способностями, но к нему не прилагается руководство. Вот основные моменты, которые нужно понимать о мозге:

• мозг эффективно работает только над одной задачей;
• головой надо думать; для запоминания есть другие инструменты;
• рабочая память - это пространство, где мы думаем;
• когда мозг думает, он тратит энергию. Мозг устает думать через 40 минут, потому что заканчивается энергия;
• много думать над одной задачей плохо и неэффективно, и если вам нужно что-то придумать, нужно думать мало;
• мозг в течение рабочего дня думает максимум 2-3 часа;
• чтобы мозг отдохнул, нужно не думать и не нагружать его вообще ни чем, то есть потупить;
• отделяем «думать» от «делать», то есть думаем только в момент принятия решения, потом делаем и не думаем в этот момент;
• любое дело мы дробим на задачи;
• хорошо составленная задача не заставляет думать, с чего начать и отвечает на вопрос: «Что нужно сделать?»;
• разложить все по местам и освободить мозг.

Подсознание

Как взаимодействовать с внутренней силой Подсознание человека похоже на автономный компьютер, в котором все вычислительные процессы проходят незаметно для хозяина. Это значит, что оно способно работать над задачей даже тогда, когда вы не сфокусированы на ней. В этом и заключается вся его мощь. Хотя ученые продолжают изучать работу подсознания не одну сотню лет, мало кто из них способен внятно объяснить, как оно устроено. На сегодняшний день уже точно установлено, что наше подсознание понимает только конкретные команды и образы. То есть, если ты хочешь что-то получить и чего-либо достичь, тебе нужно сначала это представить, помечтать об этом, описать словами, в общем нарисовать яркую картинку в своем воображении. Если загонять в подсознание невнятные образы, если ты не понимаешь, что хочешь получить, то и результат будет соответствующим. А причем тут дизайн? А при том, что у дизайнера, как и у любого нормального человека, тоже есть подсознание и он использует в своей работе всю его мощь. Если ты понимаешь, какой результат нужно получить, если в твое подсознание загружено четкое видение, значит ты обязательно достигнешь цели, рано или поздно. Вопрос заключается лишь в том, как получить это самое четкое видение, обозначить цель и загрузить её в подсознание.

Продукт как цель

Про постановку и достижение целей Западные школы дизайна уже давно систематизировали знания и превратили процесс работы над продуктом, будь это фирменный стиль, сайт или мобильное приложение, в четкий алгоритм, основанный на конкретных данных, получаемых в результате исследований. На просторах СНГ дизайнеры унаследовали советскую школу, в которой учат больше основываться на внутренних ощущениях и интуиции, - какие там исследования. Этот метод подходит художникам, которые занимаются художественным оформлением и самовыражением, но никак не дизайнерам, которые работают на бизнес, которому, в свою очередь, нужно получать прибыль. Не стоит забывать, что кроме дизайнера над проектом работает целая команда, в которую входят, как минимум, менеджер проекта и программист, и все члены команды, и клиент, должны понимать, к какой цели они идут, что должно получиться в итоге, какой результат нужно получить. Таким образом цифровой продукт нужно рассматривать как цель, которой нужно достичь. А для любой цели важно детальное описание, благодаря которому формируется четкое видение будущего результата. Сложность работы дизайнера как раз и заключается в том, что при постановке задачи цель не обозначена, дизайнер ее формирует в процессе своей работы. Результатом работы дизайнера как раз и является четко сформулированное описание цели в виде документации, и макетов. И если есть видение будущего результата, значит в руках дизайнера и клиента всегда будут критерии, по которым оценивается конечный результат, значит можно легко проверить, достигли мы поставленной цели или нет.

Книги по теме

Думай как математик. Как решать любые задачи быстрее и эффективнее Барбара Оакли Как привести дела в порядок. Искусство продуктивности без стресса Девид Аллен Мозг освобожденный. Как предотвратить перегрузки и использовать свой потенциал на полную мощь Тео Компернолле

Да обретет силу познавший себя!

---

ЧАСТЬ ВТОРАЯ

Управление силой

Про дизайн-мышление, три уровня дизайна, рабочий процесс и жизнь продукта

Работа дизайнера похожа на работу изобретателя: дизайнеру нужно провести исследования и проанализировать результаты, сгенерировать гипотезы и идеи, воплотить их и проверить, как они работают. Важно также отметить, что для получения хорошего результата нужны соответствующие условия: творческая обстановка, профессиональная команда, специальные методы и инструменты. Ниже пойдет речь о методах и инструментах.

Дизайн-мышление

Методология поиска и решения проблем Дизайн-мышление – это такая методология решения проблем в условиях неопределенности и работы с нестандартными задачами. Ценность методологии заключается в том, что она заточена на работу с "неявным знанием" потребителя, который не в состоянии осознать и вербализировать свои проблемы и потребности, а также помогает находить инновационные решения. Это тот случай, который описывал Генри Форд в своем знаменитом высказывании: "Если бы я спросил людей, чего они хотят, они бы попросили более быструю лошадь". Апологетом дизайн-мышления является компания IDEO, которая специализируется на разработке инновационных продуктов для крупных компаний. Ключевым инструментом дизайн-мышления является эмпатия – умение взглянуть на мир глазами других людей, понять их потребности и желания, стоящие перед ними задачи, прочувствовать проблемы и боль. Сама по себе методология представляет собой некий фреймворк, который можно подгонять под свои потребности и использовать в рамках своей предметной области. Для работы используются четыре базовых вопроса: что есть? что если? что цепляет? что работает? Что есть? Исследуется существующая реальность. Что если? Представляется новое будущее, генерируются идеи. Что цепляет? Делается определенный выбор из предложенных идей. Что работает? Проводится тестирование и вывод продукта на рынок. Классическая методология состоит из шести этапов: исследование, фокусировка на проблеме, генерация идей, выбор идеи, прототипирование, тестирование идеи. Процесс проектирования продукта заканчивается после успешного тестирования, а этап реализации входит в процесс разработки. Проходя по этапам мы то расширяем поток информации, используя дивергентное мышление (лат. diverge - расходиться), то фокусируемся на самом важном, используя конвергентное мышление (лат. convergere - сходиться). Дивергентное мышление - это то же самое, что и рассеянное мышление; применяется, когда нужно придумать что-то новое, сгенерировать идеи. Конвергентное мышление - это сфокусированное мышление; применяется когда нужно сосредоточиться на какой-либо информации, проанализировать и изучить ее, принять решение. Коротко рассмотрим каждый этап. Исследования Собираем информацию из всех возможных источников для того, чтобы увидеть полную картину и изучить проблему со всех сторон. Фокусировка на проблеме После сбора информации определяем проблему, которую нужно решить, и фокусируемся на ней. Генерация идей Генерируем различные гипотезы и идеи, которые могут решить основную проблему. Выбор идеи Анализируем идеи и выбираем ту которая должна решить проблему. Прототип На основе идеи разрабатываем несколько решений в виде прототипов, чем больше прототипов - тем лучше. Тестирование Тестируем прототипы на живых пользователях и выбираем вариант, который решает проблему наилучшим образом. Реализация Когда тестирование проведено успешно можно приступать к реализации, то есть ставить задачу программистам и дизайнерам. Если на каком-либо шаге мы обнаружим, что ушли в сторону, например, неправильно определили проблему или идеи не решают ее, нужно вернуться на предыдущие шаги и начать заново. Как дизайн-мышление применяется в проектировании цифровых продуктов я расскажу в третьей части.

Три уровня дизайна

Информационные слои в цифровых продуктах Еще немного теории об информационных слоях, из которых состоит цифровой продукт. Это поможет тебе понять, каким образом можно сложную задачу превратить в набор более простых и загрузить все это в мозг, который, в свою очередь, выдаст нужное решение. Для себя я определил, что любой цифровой продукт состоит из трех информационных уровней.

1. Дизайн продукта — на этом уровне содержится основная информация о продукте: какие проблемы решает и каким образом, кто пользователи, какие используются технологии. Это ядро продукта, его уникальность, то, что определяет его ценность.
2. Дизайн взаимодействия — на этом уровне основная информация превращается в элементы интерфейса, паттерны и экраны, навигацию, подачу информации. Этот уровень определяет удобство работы с продуктом.
3. Дизайн графического интерфейса — это уровень визуального и эмоционального восприятия продукта, его графическая оболочка. Это уровень, который видят пользователи и с которым они взаимодействуют.

В следующей главе я расскажу, как эти уровни превращаются в этапы работы над продуктом, зачем они нужны, какие инструменты и методы использовать.

Рабочий процесс

Применение дизайн-мышления при проектировании цифровых продуктов Соединим методологию дизайн-мышления и три уровня дизайна, чтобы понять, как это использовать в процессе работы над проектом. Получившаяся схема отображает идеальный процесс проектирования, одну итерацию от начала работы до получения первого результата и реализации продукта, то есть выпуска первой версии. В конце каждого этапа обозначены контрольные точки по которым команда оценивает результат и принимает решение переходить к следующему этапу или вернуться назад и поработать еще.

Итерации и жизнь продукта

Про работу над продуктом после выпуска первой версии Выше были описаны шаги для одной итерации которая представляет собой один цикл работы над продуктом. Первая итерация начинается с исследований и заканчивается выпуском первой версии продукта. В стартапах это так называемый минимально-жизнеспособный продукт (MVP от англ. Minimum Viable Product) который позволяет без больших затрат проверить гипотезу и получить обратную связь. После выпуска первой версии продукта все этапы повторяются, то есть проводится анализ результата, определяются проблемы, генерируются идеи, выбирается решение, создаются прототипы, проводится пользовательское тестирование, после чего идет реализация и выпуск следующей версии продукта, и так до бесконечности... Если продукт оказывается успешным он, как правило, усложняется и разбивается на части, то есть подпродукты. В таком случае, все те же итерации повторяются для каждого подпродукта отдельно. Таким образом, цифровой продукт можно рассматривать как живой организм который постоянно хочет расти и развиваться. У него тоже есть свои этапы развития, так называемые стадии жизненного цикла продукта: детство (внедрение на рынок), юность (интенсивный рост прибыли и объема продаж), зрелость (пик продаж) и старость (падение уровня продаж и прибыли). Понимание этого поможет тебе грамотно планировать работу, разбивать функционал на версии, выстраивать стратегию развития продукта.

Книги по теме

Думай как дизайнер. Дизайн-мышление для менеджеров Жанна Лидтка и Тим Огилви Разрыв шаблона. Как находить и воплощать прорывные идеи Тина Силиг Взлом креатива: как увидеть то, что не видят другие Майкл Микалко

Успеха достигнет управляющий силой!

---

ЧАСТЬ ТРЕТЬЯ

Применение силы

Про три этапа дизайна цифровых продуктов и построение рабочего процесса

Мне пришлось перебрать много разных инструментов, протестировать их на своих проектах и отобрать самые простые и эффективные. В итоге получилась достаточно гибкая методология проектирования цифровых продуктов, которая подходит к проектам разной сложности, состоящая из трех основных этапов.

Дизайн продукта

Первый этап проектирования Сначала тебе нужно описать видение будущего продукта и утвердить его с клиентом. Сформировать видение помогают различные типы исследований, которые дают нам объективные данные и помогают лучше понять, какие проблемы придется решать. Исследования дают пищу для ума и подсознания, благодаря которой активно включаются механизмы генерации идей. Кроме того, формируются критерии, по которым оценивается конечный результат на соответствие поставленным целям. В процессе проектирования нужно всегда помнить о трех основных составляющих, которые лежат в основе любого цифрового продукта: бизнес-требования, пользовательские требования и используемые технологии. Именно из этих трех составляющих и получается хороший продукт, то есть UX (англ. User eXperience - пользовательский опыт взаимодействия). Любой правильно настроенный процесс должен помогать дизайнеру постоянно держать в фокусе эти составляющие, иначе есть большой риск заблудиться в информации и пойти не в том направлении. На первом этапе проектирования мы опираемся на эту информацию, поэтому так важно уделить процессу сбора информации особое внимание. Почему это так важно поможет понять такая легенда: однажды Эйнштейна спросили, как бы он потратил час времени, выделенный на решение трудной задачи, и он ответил, что потратил бы 55 минут на определение задачи и ее альтернатив, а 5 минут — на ее решение. Как правило, клиент сам дает описание того, что он хочет получить, дает примеры на похожие продукты. Помимо этого он помогает понять, для кого этот продукт будет предназначен, то есть описывает портрет пользователя. Если клиент не может этого сделать, придется ему помочь, вы же дизайнер, и это ваша работа. Вся эта информация помогает дизайнеру сформировать бизнес- и пользовательские требования, что в свою очередь помогает понять какой результат ждет от него клиент. Перечень основных шагов, которые нужно пройти:

1. Определить конечные цели и потребности бизнеса.
2. Узнать кто конечный пользователь продукта, определить каковы его цели и потребности, с какими проблемами сталкивается сейчас и как он их решает.
3. Описать персонаж пользователя на основе полученных данных и держать его перед глазами в течение всей работы над проектом.
4. Изучить существующие технологии которые используются в данной предметной области.
5. Изучить уже существующие решения и конкурентов.
6. Проанализировать полученную информацию и сгенерировать идеи.
7. Описать требования к будущему продукту.
8. Описать будущий опыт работы с продуктом с помощью пользовательских сценариев и сторибордов. Нужно охватить все ключевые сценарии, должно быть понятно как работает продукт.
9. При необходимости, составить диаграммы потоков задач опираясь на ключевые пользовательские сценарии.
10. Сделать первые концептуальные наброски.

Рассмотрим основные этапы чуть подробнее.

Бизнес-требования, потребности и цели

Исследования Важно с самого начала проектирования понимать, каковы цели создания будущего продукта, какие потребности бизнеса он должен удовлетворить. Эту информацию дает клиент или его представитель, нужно получить от них максимум информации.

Целевая аудитория

Исследования Чтобы лучше понимать потребности и проблемы целевой аудитории проводятся исследования пользователей в виде интервью, опросов, наблюдений за поведением. Одним словом, собираются все возможные качественные и количественные данные.

Персонаж пользователя

Фокусировка на проблеме Профиль персонажа нужен для того, чтобы собрать все данные в один документ и сфокусироваться на основных проблемах и целях целевой аудитории. Это документ, который помогает в процессе разработки сохранять верное направление и не уйти в сторону.

Требования к будущему продукту

Генерация и выбор идей Общие требования формируются из бизнес-требований, потребностей пользователей и технологических требований. После анализа этой информации проводится генерация и отбор идей. Требования помогают лучше понять, какой функционал и контент должен быть в будущем продукте.

Пользовательские сценарии

Выбор идеи Со сценариев, собственно, и начинается проектирование будущего продукта, так как мы описываем, каким образом будет работать будущий продукт. Главное требование к сценариям: чтобы любой человек, их прочитавший, получил представление о том как будет работать будущий продукт, какую проблему решает, какую потребность удовлетворяет и каким образом.

Сториборды

Генерация и выбор идей С помощью сторибордов можно более наглядно показать идею продукта, они являются хорошим дополнением к сценариям, либо заменяют их. Сториборды рассказывают историю о том как с помощью продукта решается конкретная проблема: в какой ситуации возникла проблема и каким образом она решается, в каком контексте используется продукт, какой конечный результат получает пользователь. Эти документы должны быть всегда доступны членам команды и клиенту так как они представляют собой аналог технического задания которое формируется по ходу работы, а не перед ней.

Контрольная точка

Первый этап формирует вполне объективные критерии оценки, по которым будет оцениваться конечный результат. В конце этого этапа на руках должен быть документ который описывает суть продукта, кто его пользователи, какую проблему он решает и каким образом. После того, как были проведены все исследования, определены проблемы, найдены пути их решения и написаны все сценарии, дай их почитать клиенту, чтобы согласовать свое и его видение будущего продукта. В результате и клиент, и дизайнер, и вся команда имеют одинаковое представление о том продукте, который должен получиться.

Дизайн взаимодействия

Второй этап проектирования На этом этапе тебе нужно уточнить технические требования, детализировать сценарии, чтобы превратить их в элементы интерфейса, такие как кнопки, чек-боксы, формы и т. п., определить какая информация нужна и в каком виде. Это дает возможность получить полную картину об объеме предстоящих работ. Не стоит забывать о трех факторах, которые влияют на рабочий процесс и результат: сроки, стоимость и качество. Вся эта информация позволяет грамотно спланировать работу над проектом, при необходимости скорректировать требования и разбить функционал на версии. В конце этого этапа нужно получить прототип будущего продукта, в идеале несколько вариантов, провести тестирование, выбрать тот вариант который лучше всего решает проблему и соответствует требованиям. Перечень основных шагов:

1. Определить технические ограничения, исходя из специфики продукта.
2. Выявить и записать абсолютно все сценарии использования.
3. Составить информационную структуру продукта (разбивка по экранам/страницам).
4. Описать функционал и информационное наполнение для каждого экрана/страницы.
5. Проработать несколько прототипов будущего продукта.
6. Провести эвристическую оценку интерфейса.
7. Провести пользовательское тестирование прототипа и внести правки.
8. Составить карту навигации на основе сценариев и прототипа.

Рассмотрим основные этапы чуть подробнее.

Технические требования и ограничения

Прототип Нужно уточнить и описать технические требования и ограничения, проанализировать возможные проблемы и варианты их решений. Это делается до того, как дизайнер приступает к прототипированию будущего продукта.

Сценарии, структура, функционал и наполнение

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

Первые наброски

Прототип Руками думать лучше и быстрее, по этому для начала накидай свои идеи карандашом на бумаге. Эти инструменты не ограничивают полет фантазии, в отличие от компьютера, и дают возможность быстро набросать большое количество вариантов, продумать их поведение, расставить акценты, показать свои идеи команде и обсудить.

Прототипирование интерфейса

Прототип После того, как у тебя появится ясная картина количества экранов и их содержимого, можно перейти к созданию прототипа. Прототип нужен для того, чтобы проверить идею, обсудить ее и протестировать, и чем больше вариантов, тем лучше.

Обсуждение, тестирование прототипа

Тестирование Прототип обсуждается с клиентом и командой, проводится пользовательское тестирование, проверяются все гипотезы и, при необходимости, вносятся правки. Таким образом снижается количество ошибок и логических несоответствий в конечном продукте.

Карта навигации

Тестирование Карта составляется после того, как проработаны все экраны интерфейса продукта. Она дает возможность увидеть общую картину и все связи, выявить недостающие экраны, помогает понять программистам как работает логика. Для больших и сложных проектов карта составляется для отдельных сценариев.

Контрольная точка

Проработать несколько идей в виде прототипа и изменить их намного проще, и быстрее, чем править окончательный макет. По сути прототипы это черновики, большая часть из которых пойдет в мусорную корзину, и чем больше прототипов, тем лучше. Обязательно обсуди прототип с командой, а затем согласуй с клиентом, проведи пользовательское тестирование, если это нужно и возможно, и только после этого передавай разработчикам. Имея сценарии, прототипы всех экранов и карту навигации, программисты могут приступить к работе, в то время как дизайнер начинает прорабатывать графический интерфейс.

Дизайн графического интерфейса

Третий этап проектирования Графический интерфейс — это лицо продукта, то с чем непосредственно работает пользователь. Есть три основных фактора, на которые нужно опираться на этом этапе: эмоциональное впечатление, язык визуальной коммуникации и язык общения с пользователем. Именно благодаря этим факторам формируются критерии и производится эстетическая оценка графического интерфейса цифрового продукта. Начинающие дизайнеры начинают именно с проработки графического интерфейса, пропуская все остальные этапы, от чего и случаются все проблемы. Перечень основных шагов:

1. Определить общее настроение, тон визуальной и текстовой коммуникации на основе исследований целевой аудитории.
2. Проработать несколько вариантов графического оформления для ключевых экранов.
3. Выбрать один вариант и проработать все экраны.
4. Проработать эффекты и анимацию.
5. Подготовить графику для вёрстки и руководство для программистов.
6. Проверить результаты работы программистов.

Графический интерфейс

Реализация Дизайнер прорабатывает графический интерфейс, по которому пользователи будут судить о продукте. Итогом этой работы являются макеты высокого разрешения с проработкой различных состояний элементов, анимации и т. д.

Эффекты, анимация

Реализация Когда проработаны все типовые экраны, дизайнер продумывает эффекты и анимацию элементов интерфейса. Самое главное на этом этапе сильно не увлечься и не переборщить c эффектами.

Графика, спецификации

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

Контрольная точка

Для начала сделай несколько черновых вариантов основных экранов, которые позволяют понять идею, обсудите их с клиентом и командой. Нет необходимости прорабатывать все экраны сразу. При чем, эти варианты могут быть в виде набросков или кусков из разных проектов, главное быстро донести идею. После согласования и утверждения одного варианта проработай все типовые экраны, при чем начинать лучше с самых сложных. После того как проработаны все экраны дизайнеру остается подготовить графику для верстки, проработать состояния для всех интерактивных элементов и передать это все разработчикам.

Подготовка оружия

Как настроить свой рабочий процесс Прежде всего у тебя должно быть свое четкое видение процесса работы над проектом и инструменты, в которых удобно разбивать работу на этапы и отслеживать текущее состояние работы. Для этого я использую неплохой условно-бесплатный инструмент Trello, который вполне может подойти и для командной работы. Я рекомендую создавать шаблон проекта, в котором описаны все шаги, благодаря чему у вас не должно возникнуть вопросов, с чего начать и что сейчас делать. Тем самым ты разгружаешь свой мозг и направляешь всю его силу непосредственно на работу над проектом. Конечно, каждый проект уникален и не все этапы будут нужны, в таком случае спокойно пропускаем те, в которых нет необходимости. Помимо контроля этапов работы также важно создавать проектный документ, в который будут собираться все данные и к которым будут иметь доступ клиент, и все члены команды. Хорошо для этого подходит Google Docs или Jira. Кроме того, нужно определить внутри команды, в какой программе будут готовиться макеты, в каком формате будут передаваться исходники и спецификации, в каком виде будет показываться результат клиенту и обсуждаться внутри команды. На сегодняшний день становится стандартом связка Sketch плюс inVision. В Sketch готовятся прототипы и финальные макеты, генерируются спецификации и гайдлайны с помощью плагина Zeplin, а с помощью плагина Silver можно делать интерактивные прототипы. Таким образом дизайнер делает практически всю работу с помощью одного инструмента, что существенно экономит рабочее время. Программа Principle помогает делать анимацию используя макеты без навыков программирования, таким образом можно легко донести свои идеи клиенту и программистам. Для продвинутых дизайнеров, которые умеют программировать на JavaScript, есть достаточно интересный инструмент Framer Studio. С его помощью можно быстро разрабатывать интерактивные прототипы и делать анимацию, генерировать страницы для обсуждения (пример). В inVision проводится обсуждение прототипа и финального дизайна, возможно так же провести пользовательское тестирование. На самом деле инструментов огромное множество. Каждый дизайнер выбирает для себя те программы, которые помогают ему работать продуктивно и реализовывать свои идеи. И самое важное: при получении заказа нужно уведомить клиента о том, как будет строиться работа, на каких ключевых этапах вы будете с ним обсуждать результаты и корректировать направление. Как показывает практика, таким образом ты устанавливаешь свои правила игры и отсекаешь проблемных клиентов.

Книги по теме

Сторителлинг в проектировании интерфейсов. Как создавать истории, улучшающие дизайн Уитни Кесенбери и Кевин Брукс

UX-дизайн. Практическое руководство по проектированию опыта взаимодействия Расс Унгер, Кэролайн Чендлер Алан Купер об интерфейсе. Основы проектирования взаимодействия Алан Купер, Роберт М. Рейманн, Дэвид Кронин

Теперь ты готов к борьбе с тьмой! Да пребудет с тобой сила!

---

Перевод статьи ux-clan.org