Сила рисования ручкой и бумагой

Нужно что-то спроектировать? Может возникнуть соблазн начать с компьютерного инструмента, например, программного обеспечения для создания каркасов, такого как Balsamiq, или инструментов дизайна, таких как Photoshop или Figma. У них есть свое место, но я бы порекомендовал отступить и начать со скромной ручки и бумаги.

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

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

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

Возьмите лист бумаги и ручку, и давайте начнем!

Зачем начинать с бумаги

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

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

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

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

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

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

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

Повторяйте про себя: свободно, быстро, не обязательно идеально

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

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

Мы можем использовать эти небольшие наброски, чтобы опробовать несколько версий макета домашней страницы:

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

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

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

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

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

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

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

• Dribbble, который особенно хорош для поиска дизайнерских идей для таких элементов, как форма входа.
• SiteInspire, чтобы узнать, каковы текущие тенденции в современном дизайне.
• Лендбук для вдохновения в дизайне целевой страницы.
• Commerce Cream для вдохновения в дизайне веб-сайта электронной коммерции.
• Pttrns для вдохновения при разработке мобильных приложений.

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

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

Не забывайте практиковаться!

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

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

Давайте рассмотрим то, что мы рассмотрели:

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

Есть ли другие источники вдохновения? Как выглядят ваши эскизы? Хотел бы услышать от вас в комментариях!

Дальнейшее чтение журнала Smashing Magazine

• «Рисуем картинки весь день», Альма Хоффманн
• «Наброски от руки: вещи, о которых вы не знали, что ваши дудлы могут быть выполнены», Лаура Буше.
• «Как создать Porsche 911 с помощью эскиза», Никола Лазаревич
• «Переход от Photoshop и Illustrator к Sketch: несколько советов дизайнерам пользовательского интерфейса», Лачезар Петков.
• «Надпись кистью: после практики становится только лучше», Альма Хоффманн
• «Современная иллюстрация середины века: создание обложки книги с помощью Illustrator и InDesign», Мануэла Лангелла.
• «Живой набросок путешествия посетителя сайта для создания карты сайта вместе с вашим клиентом», Мэтт Орли
• «Переход от Sketch к Figma: пример миграции систем проектирования», Базз Усборн
• «Раскрытие всего потенциала символов в Sketch», Хавьер Куэлло