Искусство рисования эскизов при разработке прототипа

Маркетинг13 Создание сайтов8 Контекстная реклама7 SEO4 Комплекс услуг4 Дизайн7 Программирование1 SMM1 Digital2 Использование сервиса2 Мобильная разработка Юзабилити2 Брендинг4 Менеджмент1 Интернет-маркетинг Интранет

ЮзабилитиСтатья

ПрототипированиеИдея подхода

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

Peiter Buick

21 февраля 2012

Перевод статьи подготовлен Ольгой Сидоровой, Nimax.

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

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

Больше не нужно искать и обзванивать каждое диджитал-агентство
Создайте конкурс на workspace.ru – получите предложения от участников CMS Magazine по цене и срокам. Это бесплатно и займет 5 минут. В каталоге 15 617 диджитал-агентств, готовых вам помочь – выберите и сэкономьте до 30%.
Создать конкурс →

[Примечание редактора: книга, необходимая каждому профессиональному веб-дизайнеру и разработчику: The Printed Smashing Books Bundle . В ней содержится множество практических решений для вашей ежедневной работы.]

Эскиз ≠ Рисование

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

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

Когда вы оцениваете свой набросок, спросите себя: «Как я могу лучше передать эти мысли?» Поддаться соблазну и начать вместо этого оценивать свои способности к рисованию легко, но лучше попробуйте разделить эти две вещи. Посмотрите на ваши эскизы как на плакат.. Что считывается первым? Где находится подробная информация? Помните, что глаз фокусируется на области, где больше всего деталей и контраста.

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

ОК, давайте начнем.

Работайте со слоями

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

Короткий видеоролик показывает, как можно использовать слои

Техника

Начните со светло-серого маркера (от 20 до 30% серого) и постепенно добавляйте слои с деталями с помощью более темных маркеров и ручек.

Зачем это делать?

Начинать эскиз светло-серым маркером легче. Это дает вам возможность делать ошибки и оценивать свои идеи в процессе работы над задачей. Нарисовали кривую линию светлым маркером? Невелика беда. Эти линии едва ли будут заметны к моменту, когда вы уже закончите эскиз.

По мере того как страницы наполняются идеями, вернитесь к началу работы с более темным маркером (60% серого) или ручкой, и добавьте слой с дополнительными деталями в местах, где это необходимо. Это также отличный способ выделить конкретный набросок среди всех остальных.

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

Внимание!

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

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

От редакции

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

Как раз занимаетесь выбором подрядчика для разработки сайта? Советуем в первую очередь обратить внимание на участников рейтинга креативности веб-студий. Этот независимый рейтинг обладает прозрачной методологией и учитывает победы студий в 2 самых известных российских конкурсах сайтов и 4 мировых.

Разомните мышцы

Техника

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

Почему?

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

Преимущество рисования от плеча в том, что этот навык пригодится для рисования на офисной доске. Так что через некоторое время ваши ровные линии станут предметом зависти всех коллег.

Поиграйте своими возможностями

Техника

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

Зачем?

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

Внимание

Этот метод не очень хорошо работает с офисной доской, поэтому вам все-таки придется научиться рисовать вертикальные линии.

Зарисовываем взаимодействия

Техника

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

Зачем?

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

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

Исследуйте все многообразие взаимодействий и идей в одном эскизе с помощью клейких записок

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

Копируем и вставляем в реальном мире

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

Техника

Используйте ксерокс для того чтобы создать шаблоны из эскизов или чтобы воссоздать какую-либо область эскиза.

Зачем?

Ксерокс — это «олдскульная» версия Control + C, Control + V. Он делает производство моделей и подложек более эффективным. Он также поддерживает вашу уверенность в себе, поскольку если вы что-то испортили (а вы рано или поздно что-нибудь испортите), вы сможете легко это исправить.

Какую-то часть вашего интерфейса нужно последовательно перерисовывать в многочисленных эскизах? Сделайте несколько копий и затем делайте наброски прямо на распечатках.
Испортили какую-то часть эскиза? Никаких проблем. Накройте этот фрагмент эскиза чистым листком бумаги или исправьте замазкой, отксерокопируйте и продолжайте рисовать эскиз на этой распечатке.
Работаете над мобильным проектом? Или хотите сделать серию эскизов одинакового размера? Создайте макет и наксерокопируйте себе несколько стопок подложек. Еще проще распечатать в качестве подложки контуры девайса или браузера, хорошую подборку таких вещей можно найти здесь: «Free Printable Sketching, Wireframing and Note-Taking PDF Templates».
Хотите изменить макет боковой панели в последних пяти набросках? Сделайте эскиз нового сайд-бара, сделайте несколько его копий и затем приклейте новую боковую панель на старую. Да, это действительно просто.
Чтобы использовать эскиз как подложку для другого, похожего слоя, сделайте ксерокопию на 20% темнее, чем сам эскиз, отрегулировав настройки ксерокса.

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

Внимание!

Бумагой можно порезаться

Набросок на ксерокопии оригинального эскиза — необходимо пересмотреть боковую панель

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

Дизайн — это детали

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

Техника

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

Зачем?

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

Быстрое создание равномерных линий с помощью линейки с палеткой и 30-процентного серого маркера.

Техника

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

Зачем?

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

Чтобы акцентировать некоторые области эскиза, используйте линейку и 70-процентный серый маркер.

Техника

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

Зачем?

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

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

Разрываем липкую записку с помощью линейки

Расскажите всю историю целиком

Техника

Нарисуйте приложение в контексте, в котором оно будет использоваться, или «вставьте» его в девайс, на котором оно будет применяться.

Зачем?

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

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

Внимание!

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

Эскиз идеи для мобильного приложения в контексте того, где оно будет использоваться

Выбрасывайте тетрадь для рисования

Техника

Рисуйте на бумаге формата 8.5 × 11 дюймов (NB! не совпадает с А4: http://en.wikipedia.org/wiki/Letter_(paper_size)).

Зачем?

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

Одна из многих стен, увешанных скетчами, в нашем офисе

Чего вы ждете?

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

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

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

Сделайте это! Не увязните в технологиях. Устройте беспорядок. И развлекайтесь!

Инструменты

Ниже даны ссылки не некоторые инструменты, которые описаны в этом посте:

Quilt Ruler — Collins Quilt & Sew Ruler 2"X18″
Prismacolor Markers — Cool Grey Prismacolor 12/set

nbsp;nbsp;всем остальным, что должно быть равномерно распределено. Это что-то вроде аналогового варианта

Юрий Панасюк
Проектировщик интерфейсов и информационных систем в Nimax

Конечно, нарисованные в статье эскизы красивы и привлекательны, но кто-нибудь занимался подобным в реальности?

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

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

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

Статья скорее будет полезна школьникам на уроках рисования, чем проектировщикам. «Разработчики, менеджеры проектов и бизнес-аналитики тоже могут поучаствовать в веселье» — этим все сказано, не более.

Ольга Павлова
Совладелец в «Собака Павлова»

В школе нас немножко забыли научить мыслить визуально. В результате и технари, и гуманитарии, и прочий люд играют словами, кто во что горазд — а толку-то при рисовании интерфейсов? Лучше бы худо-бедно научиться рисовать квадратики и стрелочки. И кнопочки обязательно.

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

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

Макс Гулевич
Руководитель отдела проектирования и дизайна в РосБизнесКонсалтинг

Очень интересная статья, прекрасные скетчи!

Давайте скажем прямо — почти никто из нас всерьез не занимается бумажным прототипированием, и уж тем более — отрисовкой скетчей. И напрасно: рисование на бумаге очень дисциплинирует.

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

Если же говорить про восприятие макетов аудиторией — тут тоже только одни плюсы.

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

Да, были попытки использовать специально созданные для этого неряшливые инструменты проектирования (напр. Бальзамик), но, на мой взгляд, искусственность подобных технологий чаще всего мешает сосредоточиться на макете. Получается, что что-то более-менее серьезное для отправки важному заказчику приходится все равно рисовать в обычном векторном редакторе, пусть и специально разработанному для прототипирования (ИнДизайн, Экшур, Вижио, ...), но тут возникает совсем другая проблема — заказчик, видя красивый и ровный макет, часто срывается на обсуждение дизайна, не вникая в суть отраженного на прототипе взаимодействия. Это как рукописный шрифт, который только с первого взгляда выглядит оригинально, а спустя две строчки становится неинтересен и от него веет неким холодком.

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

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

И да, если бы у меня была возможность, я бы рисовал еще чаще :-).

Александр Реушкин

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

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

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

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

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

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

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

Спасибо автору за интересную статью и видео.

Удачи всем!

Юрий Ветров
Руководитель отдела проектирования и дизайна интерфейсов в Mail.Ru

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

Возможность «подумать руками». Рисование на бумаге или маркерной доске — самый быстрый способ визуализации идей, когда между вами и прототипом стоит только ручка, а не основанный на куче микро-операций интерфейс программ для проектирования. Как только вы точно поняли, что именно вы хотите нарисовать — перенести прототип в электронный вид и детализировать его будет гораздо проще и быстрее.
Сделать наброски нескольких концепций экрана или серии экранов интерфейса. Пускай эти схемы будут совсем условными, но возможность за пару минут нарисовать разные направления развития идеи невозможна в других инструментах. Специализированное ПО стимулирует вдаваться в детали, мешая сфокусироваться на решении проблемы в целом. Нарисуйте как минимум полдюжины концепций для каждой из ключевых страниц — только так можно найти оптимальное решение.
Провести совместную рабочую сессию или брейншторм с другими проектировщиками или участниками команды разработки. Их можно проводить в двух вариантах — рисовать прототипы на маркерной доске общими силами или дать участникам 10-20 минут на собственные наброски, после чего обсудить их и выбрать лучшие идеи. Это не только сплотит команду, но и поможет вам быстрее охватить весь спектр возможных идей — в одиночку на это будет потрачено в разы больше времени.
Продумывать интерфейс вместе с клиентом, рисуя скетчи прямо на встрече с ним. Это помогает вовлечь его в рабочий процесс, что сильно упрощает жизнь. Клиент понимает, откуда взялись те или иные решения и меньше критикует вас там, где это не оправдано. А кроме того, еще сильнее болеет за итоговый продукт.

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

Ольга Вахромеева
UX Designer в Multichannel Research Limited

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

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

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

Екатерина Шукалова
Генеральный директор в ФЕРТ

Интересный зарубежный опыт работы над прототипами. Возможно, нам еще удасться дожить, когда такая практика будет использовать студиями, да и просто веб-мастерами повсеместно, а уважаемые Клиенты (не только крупные иностранные компании :-) будут готовы оплачивать работу такого рода. В любом случае статья полезна, как картинка для сравнения «как у них» с тем, «как у нас».

Я использую для эскизных работ по прототипированию сайтов блокноты для рисования с полупрозрачными страницами (продаются в магазинах для художников). Это позволяет делать этакие «мультяшные» прототипы, когда видны изменения, происходящие с эскизом в процессе обдумывания.

Любовь Журавлева
Руководитель проектов и UX специалист в NewIdols

Симпатично и будет полезно тем, кто использует эскизы. Но, по сути, более чем спорно:

Чтобы «представить, как будет выглядеть веб-сайт или мобильное приложение, или последовательность взаимодействия и пользовательские сценарии» нужно использовать многочисленные инструменты проектирования, а не бумагу. Используемая многими Axure позволяет прекрасно визуализировать сайты и интерфейсы программ, и уже есть ряд решений для проектирования интерфейсов мобильных устройств.
Сама суть бумажных эскизов в их простоте, скорости и возможности набросать самое важное хоть на коленке. Подробная проработка эскизов сводит на «нет» именно идею показать основное и сделать это быстро.
Для обсуждения таких эскизов нужно личное присутствие заинтересованных лиц или сканирование/фотографирование. По времени и затратам выгоднее будет сделать блок-схему или быстрый прототип в специально предназначенных для этого программах, которые также позволяют быстро сгенерировать файлы, которые можно отправить коллегам и клиентам по email или выгрузить на сервер.

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

Иво Димитров
Исполнительный директор компании в Ingenius Systems

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

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

Спасибо за перевод очень полезной статьи.

Вадим Мерзликин
Креативный директор в ruFormat.ru

А может — ну его, этот фотошоп?

Представил бумажный способ прототипирования в проекте по разработке интернет-магазина, где около 20-25 прототипов и одновременно работают 3 дизайнера.

Сразу направшиваются вопросы:

Как примерить в прототип реальные тексты?
Как работать командой?
Как жить без ctrl+z?
Как отправлять это по почте?
Как продублировать правки в 20 макетов?
Где смарт объекты?)
Да еще и порезаться бумагой можно!

Мое мнение — в промышленных масштабах таком метод неприменим.

P.S. Нашёл только один плюс прототипирования на бумаге — можно делать красивые фото рабочего процесса :-). Вот бы получился хороший кадр: двое клеют кнопочки, один рисует браузер, а четвертый стоит с умным видом и держит руку с маркером вверх. Наши иностранные коллеги давно такой прием используют http://www.movingbrands.com/wp-content/uploads/2011/12/MovingBrands_HP_CaseStudy_HPteam1.jpg?84cd58, а чем мы хуже? :-)

Юрий Спиридонов
Исполнительный директор в AREALIDEA

Красивая альтернатива созданию электронного прототипа в Axure, Fireworks, Microsoft Visio.

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

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

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

Иван Бормотов
Руководитель в Qualitica

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

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