ЯНДЕКС.  ДИРЕКТ.

CLICK TO EDITMASTERCLICK TO EDITMASTER

ОНЛАЙН-КУРС:

«ЯНДЕКС. ДИРЕКТ.

НАЧАЛО РАБОТЫ.»

СКЕТЧИНГ И

ПРОТОТИПИРОВАНИЕ

СтаниславаБалакирева

Проектировщикпользовательскихинтерфейсов  В «UsabilityLab»

ЧТО ТАКОЕ СКЕТЧИНГ?

Скетч — это эскиз, быстрый рисунок

Скетчинг — процесс создания скетчей

ЯНЕ УМЕНЮ РИСОВАТЬ

НЕВЕРНЫЕ УСТАНОВКИ

ОСНОВНАЯ ЦЕЛЬ СКЕТЧИНГА — ПЕРЕДАТЬ ИДЕЮ, НАВЫКИ РИСОВАНИЯ НЕ ИМЕЮТ ЗНАЧЕНИЯ

ИНСТРУМЕНТЫ

ЗАПАСИТЕСЬ

ИНСТРУМЕНТАМИ

• Блокноты из плотной бумаги• Листы А4 в огромных количествах

ТРЕНИРУЙТЕСЬ

ИЩИТЕ ЛЕГКИЕ

ПУТИ!Элементы интерфейсов !

• Научитесь рисоватьстандартный элементыинтерфейсов

• Добавляйте тени, объем

ИЩИТЕ ЛЕГКИЕ

ПУТИ!Элементы интерфейсов !Стандартные поля ввода данных

ЛЕГКИЕ ПУТИ

ДЕТАЛИЗИРУЙТЕ

ДЕТАЛИЗИРУЙТЕ

Работайте со слоями !

• Начните с маркера серогоцвета и постепеннодобавляйте темные слои(маркеры+ручки)

• Не начинайте с ручки, если выпотом добавите маркер,чернила расплывутся

РАБОТА СО СЛОЯМИ

С помощью различных оттенков серого, шриховки,

а также насыщенных темных линий можно

передать многослойность в скетче

!

ПРИМЕР

ДЕТАЛИЗИРУЙТЕ

Изображайте взаимодействия !

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

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

ОТОБРАЖЕНИЕ

ВЗАИМОДЕЙСТВИЯС помощью стрелок можно показать переходы между

состояниями системы, а с помощью стикеров можно отобразить

интерактивные элементы, например, выпадающее меню !

ПРИМЕР

ВЫВОДЫ

• Важно понимать, в чем основная роль скетчинга на начальных этапах

• Используйте правильные инструменты

• Тренируйтесь, используйте существующие приемы, придумывайте свои

Занятия от ведущих

специалистов Рунета

Обучение с

любого устройства

Открытые занятия c экспертами Рунета. 3 раза в неделю.

Онлайн-интенсивы для обучения интернет-

профессиям. 1,5–2,5

месяца.

Интерактивные курсы по маркетингу и интернет-

бизнесу, 2–3 часа, 40+

курсов. Доступ 24/7!

FREE

ПРИСОЕДИНЯЙТЕСЬ!

vk.com/netology

facebook.com/netology.ru

youtube.com/netologytv

netology.ru/blog

slideshare.net/netology

twitter.com/netology_ru