Почему важно делать эскизы, прежде чем переходить к прототипу
Вы читаете перевод статьи Райана Нэнса “Designing By Hand in the Digital Age”. Над переводом работали Полина Фирсова и Ринат Шайхутдинов. При поддержке iSpring.
iSpring — решение для запуска дистанционного обучения.
Первым делом карандаш — потом пиксели. Инструменты и советы для создания крутых скетчей.
В сфере цифрового дизайна есть ребята, которые сначала берут в руки карандаш, и лишь потом приступают к отрисовке пикселей. И я один из них. На самом деле, цифровыми инструментами дизайна (Sketch, Photoshop, Fireworks, Marvel, InDesign и другими) я вообще пользуюсь не особо часто. Само собой, когда нужно разработать новые визуальные стили или производственные активы — к этим программам стоит обратиться. Но в процессе проектирования они уступают традиционным аналоговым инструментов.
Ищите системное погружение в тему? Загляните в блог для дизайнеров.
Если вам это интересно, если вы всегда хотели попробовать визуализировать идеи от руки или даже уже пробовали, но хотите еще — этот пост для вас.
Зачем
Возможно, сперва это было просто моей причудой, но в итоге стало для меня основой проектирования. Отчасти потому, что каждый этап решения, на мой взгляд, состоит из двух аспектов: формулирование идеи и передача идеи. И отчасти потому, что рисование, как и письмо от руки, задействует другие области мозга и мышления по сравнению с теми же действиями на компьютере. Когда воображение и аналитическое мышление работают вместе, открывается больше возможностей для творчества.
И по мере того, как я буду рассказывать о своем методе создания эскизов, мы увидим, что два этих аспекта выполняются за счет, во-первых, отрисовки эскиза в карандаше и, во-вторых, раскрашивания этого эскиза.
Два компонента любого дизайнерского решения: формулирование идеи и ее передача.
Итак, эти два действия: исследование бескрайних возможностей чистого листа и выделение ключевой идеи — хорошо отражают мысль Билла Бакстона о творческом процессе проектирования:
Проектирование — это выбор. И вот где есть место для креативности:
1. Креативный подход к созданию списка разных вариантов, из которых нужно выбирать
2. Креативный подход к определению критериев (эвристик), по которым вы делаете свой выбор.
— Билл Бакстон в книге Sketching User Experiences
Что
Когда новый дизайнер начинает работать в Tradesy, я выдаю ему набор инструментов для проектирования. Даже тем, кто отлично владеет скетчингом в коде или стряпает убойные мокапы в Sketch или Photoshop, я предлагаю сначала сформулировать свои идеи от руки — по крайней мере для себя.
В этот набор входят:
- Механический карандаш Pentel .05 Graphgear 500
- Набор из 6 ручек Micron
- Набор из 12 маркеров Prismacolor (теплые оттенки серого)
- Ластик Staedtler Mars
- Карманная инженерная линейка
- Щеточка для смахивания пыли
- Красные гелевые ручки
- Чемоданчик художника
- Миллиметровая бумага 8" x 11"
- Миллиметровая бумага 11" x 17"
- Несколько цветных маркеров Prismacolor
Как
Мне не особо важно, идет ли речь о небольшом скетче, который намечает идеи силуэта объекта, или о наборе рабочих схем с тщательным пояснением — процесс всегда начинается с чистого листа и карандаша.
И вот что для меня важно. Дизайнеры не садятся за пустой лист с «пустой» головой. На самом деле, чаще всего мы переполнены идеями. И именно выбор первых правильных линий — первый шаг к принятию решений.
Мы исследуем целостную систему или лишь маленький элемент большей, уже сформировавшейся среды? Стоит ли обозначить границы экрана, под который проектируем, как рисуем лицо в виде круга, в котором затем нарисуем точки-глаза и выразительную дугу-улыбку?
Большая часть мастерства дизайна — понимание того, как подходить к задаче. И на чистом листе как раз это и требуется.
Инструменты вроде Sketch очень эффективны, однако то, что в них есть готовые шаблоны артбордов, означает, что при решении задачи мы полагаемся на эти стандартные фреймворки.
Проектирование UI, как и архитектурные чертежи, требует девственно чистого листа. Пути взаимодействия формируют будущие блоки контента и варианты их последовательностей. Макеты страниц намекают на устройства, для которых они создаются.
Первая линия вашего эскиза становится отправной точкой для исследования. Первая линия всегда самая сложная.
Это и есть работа дизайнера: приближаться к решению.
Я начинаю с грубого карандашного скетча. Затем, выбирая элементы, которые отвечают искомому проектному решению, я обвожу набросок ручками Micron. Именно тогда в дело вступает ластик (и щетка для смахивания пыли!), убираются лишние линии, и вырисовывается хорошая идея. Это делает рисунок чище и позволяет приступить к планомерному редактированию.
Рисуя карандашом, я часто использую ровный край инженерной линейки, чтобы получить быструю прямую линию. Когда приходит время обводить набросок, все линии рисуются от руки. Так мы не фокусируемся на точности рисунка — вместо этого общее внимание сосредоточено на точности замысла, который он передает.
Не фокусируйтесь на точности рисунка — сосредоточьте внимание на том, насколько точно рисунок передает замысел.
Теперь идея сформулирована достаточно ясно для того, чтобы ее оценивал не только тот, кто ее придумал.
Безусловно, мне встречались дизайнеры, которые могут сделать на компьютере что-то очень похожее на такой набросок и за меньшее время. И правда, круто. Но в процессе им придется принимать решения, которые не так уж существенны для оценки идеи: подбирать цвет, шрифт и размер в пикселях, отступы и иконки. Да, эти решения принимать тоже нужно, но обо всем по порядку.
Много хороших идей были забракованы из-за шрифта, выбранного в мокапе.
Добавление цвета и особенно теней реально помогает усилить иерархию и ясность при передачи идей. Одно из главных преимуществ скетчей в том, что они показывают, как работают проектные решения, а не просто изображают их. Это помогает всем, кто оценивает идею, сфокусироваться на концепции, структуре, механике и динамике объекта, а также его изображении.
Скетчи — это про принцип работы проектных решений, а не про их изображение.
И затем мы берем красную ручку мы приступаем к пояснениям. Этот этап скетча дает огромные возможности для донесения идеи. На нем уточняется поведение пользователя, структура и цели дизайна.
Как и всякая часть любого процесса, это не механизм, который гарантирует результат, — это способ посмотреть на одну задачу под разными углами.
Другие ресурсы по скетчингу
Книги и сайты
Статьи
Полезные файлы
Если вам понравилась статья и перевод, дайте нам знать — нажмите ♡
А если у вас есть на примете какая-нибудь классная статья по дизайну и не только — скиньте нам ссылку, и мы будем рады над ней поработать.
Нас можно найти в Facebook: Полина Фирсова и Ринат Шайхутдинов.
Видеокурсы и практика по дизайну интерактивных систем: ux/ui, веб-дизайн и бренд-дизайн
Вас ждет плотная проектная практика по анимации интерфейсов, дизайну сайтов, а также мобильных и веб-приложений. Под руководством наставников в стиле «смотри и повторяй»!
Breezzly — это среда для тренировки digital-навыков. Здесь вы встретите комплекты видеокурсов в актуальных инструментах интерактивного дизайна, среди них Figma, Principle и Invision Studio. А каждый проект — это живой кейс с историей, собранной по горячим следам!
