Проектируем от руки в цифровом веке

263

Вы читаете перевод статьи Райана Нэнса “Designing By Hand in the Digital Age”. Над переводом работали Полина Фирсова и Ринат Шайхутдинов. При поддержке iSpring.

iSpring — решение для запуска дистанционного обучения.

Первым делом карандаш — потом пиксели. Инструменты и советы для создания крутых скетчей.

Я даже превратил эту мысль в футболку. Купить ее можно здесь

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

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

Мой любимый карандаш 0.5 graphgear 500

Зачем

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

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

Два компонента любого дизайнерского решения: формулирование идеи и ее передача.

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

Проектирование — это выбор. И вот где есть место для креативности:

1. Креативный подход к созданию списка разных вариантов, из которых нужно выбирать

2. Креативный подход к определению критериев (эвристик), по которым вы делаете свой выбор.

— Билл Бакстон в книге Sketching User Experiences

Что

Когда новый дизайнер начинает работать в Tradesy, я выдаю ему набор инструментов для проектирования. Даже тем, кто отлично владеет скетчингом в коде или стряпает убойные мокапы в Sketch или Photoshop, я предлагаю сначала сформулировать свои идеи от руки — по крайней мере для себя.

Набор для скетчинга

В этот набор входят:

Как

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

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

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

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

Шаблоны артбордов в Sketch

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

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

Первая линия вашего эскиза становится отправной точкой для исследования. Первая линия всегда самая сложная.

Это и есть работа дизайнера: приближаться к решению.

Обведенный рисунок

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

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

Не фокусируйтесь на точности рисунка — сосредоточьте внимание на том, насколько точно рисунок передает замысел.

Теперь идея сформулирована достаточно ясно для того, чтобы ее оценивал не только тот, кто ее придумал.

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

Много хороших идей были забракованы из-за шрифта, выбранного в мокапе.

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

Скетчи — это про принцип работы проектных решений, а не про их изображение.

Скетчи макета с пояснениями

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

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

Другие ресурсы по скетчингу

Книги и сайты

Статьи

Полезные файлы



Мобильное приложение «Заметки о психике» | Mental Notes

Подкидывает идеи, как привлечь, удержать и направить внимание пользователя.

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

Скачать приложение в Appstore →
Инструменты проектировщика

Посты в категории UX-дизайн

40+ способов сделать опросы точнее: чек-лист для ux-исследователей

Ольга Жолудова

18 октября 2019

Посты в категории UX-дизайн

Ген UX/UI дизайнера: 5 жизненных принципов от продуктового дизайнера Atlassian

Ринат Шайхутдинов

18 июня 2019

Посты в категории UX-дизайн

100 вопросов для UX-анализа

Ольга Жолудова

22 апреля 2019