Все, что вам нужно знать о скетчинге UX

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

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

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

В этом посте я намерен охватить все, что вам нужно знать о UX-набросках, включая следующие моменты:

• Знакомство с UX-скетчами и вайрфреймами
• Основы, инструменты и техники UX-скетчинга
• Уточняющие эскизы с примечаниями, аннотациями, номерами
• Советы и рекомендации по созданию эскизов UX
• Мини-методы, разработанные для повышения качества и производительности
• Все, что вам нужно знать о Wireflows
• Краткое руководство по наброску UX-потока

UX-скетчинг — это двухэтапный процесс

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

• Генерация идей

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

• Добавление деталей и уточнений

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

UX-эскизы и вайрфреймы: введение и классификация

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

Я выделил следующие типы эскизов:

• Эскиз: Генерация идеи

Это первоначальные наброски. Детали более низкого уровня просто отмечаются. Используется ограниченное количество цветов.

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

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

• Каркас: спецификация, подробный этап

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

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

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

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

• Проект визуального дизайна

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

• Разбивка компонентов/элементов

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

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

Начало работы с основами

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

Теперь все готово и можно приступать:

• Нарисуйте края. Нарисуйте рамки, окно браузера или телефона, часть интерфейса и так далее.

• Добавьте самые большие или основные элементы: меню, нижний колонтитул, основной контент.

• Добавьте детали. Добавьте соответствующие детали, но на этом этапе не усложняйте их.

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

• Варианты эскизов. Набросайте несколько быстрых альтернатив вашему решению.

• Выберите лучшее решение. Выбирайте лучшие варианты.

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

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

• Делиться. Обычно я использую один из следующих способов обмена:
  • Сканируйте наброски через Evernote и предоставьте постоянную ссылку другим членам команды или заинтересованным сторонам.
  • Сфотографируйте и загрузите в InVision.
  • Загружайте и сопоставляйте изображения с Realtimeboard.
  • Или просто отправить фото по электронной почте.
• Просмотрите эскизы и добавьте примечания. Сделайте перерыв, а затем вернитесь к своим эскизам через некоторое время. Взгляните на них еще раз. Эскиз все еще имеет для вас смысл? Хороший набросок должен быть легким для понимания.

Уточнение эскизов с дополнительными элементами

Найдите или нарисуйте подходящий эскиз, а затем добавьте к нему следующие детали:

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

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

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

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

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

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

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

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

Более конкретные советы и рекомендации

1. Не беспокойтесь о качестве. Не смотрите на скетчи на Dribbble; они совсем о другом . Имейте в виду, что основная цель набросков — помочь вам мыслить более ясно, находить лучшие решения и экономить время.

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

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

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

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

6. Лотки для бумаги. Подумайте о размещении лотков для бумаги на рабочем столе. Например, у меня их три: для входящих задач, для набросков и чистых листов бумаги.

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

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

Дополнительные мини-методы для улучшения ваших эскизов

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

1. Создайте доску для рисования. Одно из самых больших преимуществ использования ручки и бумаги вместо цифрового инструмента для рисования заключается в том, что вы можете прикрепить его к стене. Все в вашей команде могут видеть это и участвовать (хотя я рекомендую настроить сеансы просмотра).
   
   • Вы сами увидите свои эскизы, и это будет стимулировать ваше мышление и позволит вам увидеть общую картину, не отдельные фрагменты, а всю систему. Вы увидите взаимодействие между частями и то, как они подходят друг другу.
     
   • Создайте доску для эскизов — прикрепите свои эскизы доски. Если в вашем офисе нет белой доски, вы можете использовать клейкую ленту двойного размера или листы для заметок, чтобы прикрепить свои наброски к стене. Если вы не хотите приклеиваться к стене, вместо этого вы можете найти большой кусок картонной бумаги. Я настоятельно рекомендую использовать доски для рисования, так как они являются одним из лучших инструментов дизайна.
2. Используйте белую доску. Белая доска — отличный инструмент для рисования. Он имеет ряд преимуществ:
   • Это совместная работа, и других членов команды легко привлечь к обсуждению и рисованию. Даже если их идеи не подходят, вы поймете их образ мыслей, и это поможет вам быть на одной волне.
     
   • Маркеры не позволяют сосредоточиться на деталях, приходится думать об общем. Эскизы открыты для интерпретации.
     
   • Белую доску легко чистить и вносить исправления.
     
   • Места много и можно легко продумать всю системную последовательность.
     
   • Вы можете прикреплять эскизы, распечатки и справочные материалы с помощью магнитов.

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

   

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

5. Используйте Evernote для сканирования. Evernote — отличный инструмент для дизайна. Вы можете хранить и делиться своими эскизами в нем, вы можете создавать темы и использовать теги для организации своих эскизов. Особенно впечатляют возможности режима «Сканер». Вы кладете перед ним свой эскиз, и он «сканирует» его, так что вы получаете копию эскиза. Затем вы можете пригласить своих коллег в Evernote и дать им ссылку на вашу заметку. Так как есть мобильное приложение для планшетов и телефонов, ваши эскизы всегда будут под рукой.

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

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

Wireflow: описание системного потока и ветвления

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

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

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

Обычно я пытаюсь определить следующие типы потоков проволоки, в зависимости от организации и практического использования:

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

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

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

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

   • Пустой
   • Пользователь тянет файл в активной области
   • Файл загружается
   • Файл загружен
   • Ошибка

Набросок UX Flow: краткое практическое руководство

Процесс проектирования wireflow аналогичен каркасному. Многие шаги похожи или идентичны, но есть несколько важных отличий:

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

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

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

Решите, что будет дальше. Нарисовав начальные шаги, решите, что делать дальше, ответив на следующие вопросы:

• Куда этот шаг ведет пользователей?
• Каким путем вы хотите, чтобы они пошли?
• Что им нужно сделать, чтобы попасть туда?

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

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

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

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

Сохранять. Сделайте цифровую копию эскиза.

Делиться. Поделитесь эскизом (например, через Evernote или InVision).

Основные советы и рекомендации по UX Flow Sketching

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

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

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

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

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

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

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

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

• Линии, следующие за направлением света — это не всегда выглядит красиво, но можно использовать градуировку и поднимать объекты на разную «высоту».
• Выделение некоторой части более темным цветом (только низ или низ и правая сторона)
• Использование маркера Pro (или его эквивалента в приложении, которое вы используете для рисования)

Компоненты чертежа. Возражение типа «Я не умею так хорошо рисовать» может задушить вашу инициативу. На самом деле это проще, чем кажется. Даже самые сложные эскизы обычно состоят из нескольких базовых блоков, как в этом примере. Если вы можете нарисовать точку, линию, треугольник, квадрат и круг, то у вас есть основные строительные блоки, необходимые для рисования чего-либо для вашего эскиза.

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

Заворачивать

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

Как вы можете видеть, это много , чтобы покрыть. Дизайнеры используют множество инструментов, методов и подходов для создания эскизов UX, и это довольно субъективно. Некоторые методы могут работать или не работать для разных людей, работающих над разными проектами. Если вы только начинаете, вам обязательно стоит поэкспериментировать. Постоянная практика и эксперименты помогут вам найти то, что работает именно для вас.

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

• • •

Дальнейшее чтение в блоге Toptal Design:

• UX электронной коммерции — обзор лучших практик (с инфографикой)
• Важность ориентированного на человека дизайна в дизайне продукта
• Лучшие портфолио дизайнеров UX — вдохновляющие тематические исследования и примеры
• Эвристические принципы для мобильных интерфейсов
• Упреждающий дизайн: как создать волшебный пользовательский опыт