Сила скетчинга: почему бумага и ручка пригодятся в работе каждому дизайнеру

No items found.
Аудио перевод статьи
0:00
0:00
·

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

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

Хотите разработать дизайн? Возможно, у вас возник соблазн сразу же открыть программу для создания вайрфреймов, к примеру, Balsamiq, или интерфейсов, например, Photoshop или Figma. Безусловно, они тоже пригодятся, но я бы порекомендовала сделать шаг назад и начать с самого простого — бумаги и ручки.

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

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

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

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

Почему следует начать с бумаги и ручки?

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

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

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

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

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

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

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

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

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

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

Запомните: быстрые, простые и не обязательно идеальные

Все мы видели восхитительные детализированные “дизайнерские” наброски. Однако это не тот стандарт, на который надо равняться. Не обращайте на них внимания. Наши скетчи должны быть быстрыми и простыми.

Этот набросок включает слишком много мелких деталей, но в этом нет необходимости на раннем этапе работы.

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

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

С помощью этих скетчей мы можем создать несколько версий макета главной страницы:

Несколько версий макета главной страницы.

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

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

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

Техника скетчинга

Скетч vs главная страница моего сайта. Отличный способ попрактиковаться в создании набросков и натренировать свой мозг видеть в нарисованных деталях элементы интерфейса.

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

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

Изучите вдохновляющие примеры, чтобы было проще генерировать идеи

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

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

  • Dribbble — изучите, как могут выглядеть разные элементы интерфейса, например, форма входа в систему.
  • SiteInspire — здесь можно найти последние тренды современного дизайна.
  • Land-book — вдохновляющая коллекция лендингов.
  • Commerce Cream — лучшие сайты электронной коммерции.
  • Pttrns — вдохновляющие примеры дизайна мобильных приложений.
Вдохновляющие примеры с Dribbble, мои скетчи и мой мокап. Вы можете увидеть, что я расположила элементы аналогичным образом, однако каждая деталь в моем дизайне отличается. Создавайте мокапы на основе набросков, и это поможет вам избежать точного копирования других проектов. (PDF)

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

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

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

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

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

Давайте еще раз остановимся на самых важных моментах:

  • Скетчи — самый быстрый способ исследовать разные дизайн-идеи. За короткое время мы можем добиться больших результатов, если встанем из-за компьютера.
  • В процессе скетчинга обратитесь к вдохновляющим примерам. Не обязательно начинать с пустой страницы: отыщите интересные дизайны, которые могут служить образцом для вашего проекта.
  • Сделайте больше набросков, чем необходимо. Иногда пятая идея кажется нам самой подходящей, однако вы можете обнаружить, что более поздняя концепция еще лучше.
  • Практика — это путь к совершенству. Чем больше набросков вы делаете, тем быстрее, проще и удачнее они получаются.
Источник:
smashingmagazine.com
·
comments powered by HyperComments