Первый выпуск «На 10 минут круче» на нашем youtube-канале учит основам скетчинга и прототипирования веб-интерфейсов. Вот, чему вы научитесь: —узнаете, что такое скетч, и почему это не рисунок — выберите правильные инструменты для работы — научитесь простым упражнениям, чтобы поставить руку — научитесь делать скетчи понятными Пройти курс Станиславы Балакиревой «Основы скетчинга и прототипирования»: http://bit.ly/1qVgc2c Перейти на youtube-канал «Нетологии»: http://www.youtube.com/user/netologytv

1. ЯНДЕКС.
ДИРЕКТ.
CLICK
TO EDIT
MASTER
CLICK TO EDIT
MASTER
ОНЛАЙН-КУРС:
«ЯНДЕКС. ДИРЕКТ.
НАЧАЛО РАБОТЫ.»
СКЕТЧИНГ И
ПРОТОТИПИРОВАНИЕ
Станислава
Балакирева
Проектировщик
пользовательских
интерфейсов
В «UsabilityLab»

2. ЧТО ТАКОЕ
СКЕТЧИНГ?
Скетч — это эскиз, быстрый
рисунок
Скетчинг — процесс создания
скетчей

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

4. ИНСТРУМЕНТЫ

5. ЗАПАСИТЕСЬ
ИНСТРУМЕНТАМИ
• Блокноты из плотной бумаги
• Листы А4 в огромных количествах

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

7. ИЩИТЕ ЛЕГКИЕ
ПУТИ
!
Элементы интерфейсов
!
• Научитесь рисовать
стандартный элементы
интерфейсов
• Добавляйте тени, объем

8. ИЩИТЕ ЛЕГКИЕ
ПУТИ
!
Элементы интерфейсов
!
Стандартные поля ввода данных

9. ЛЕГКИЕ
ПУТИ

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

11. ДЕТАЛИЗИРУЙТЕ
Работайте со слоями
!
• Начните с маркера серого
цвета и постепенно
добавляйте темные слои
(маркеры+ручки)
• Не начинайте с ручки, если вы
потом добавите маркер,
чернила расплывутся

12. РАБОТА СО СЛОЯМИ
С помощью различных оттенков серого, шриховки,
а также насыщенных темных линий можно
передать многослойность в скетче
!
ПРИМЕР

13. ДЕТАЛИЗИРУЙТЕ
Изображайте взаимодействия
!
• Используйте стикеры и
добавляйте с их помощью
подсказки, окна и любые
интерактивные элементы на
свой скетч
• Используйте разные цвета,
чтобы обозначить разные
типы взаимодейстия

14. ОТОБРАЖЕНИЕ
ВЗАИМОДЕЙСТВИЯ
С помощью стрелок можно показать переходы между
состояниями системы, а с помощью стикеров можно отобразить
интерактивные элементы, например, выпадающее меню
!
ПРИМЕР

15. ВЫВОДЫ
• Важно понимать, в чем основная
роль скетчинга на начальных
этапах
• Используйте правильные
инструменты
• Тренируйтесь, используйте
существующие приемы,
придумывайте свои

16. Занятия от ведущих
специалистов Рунета
Обучение с
любого устройства
Открытые занятия
c экспертами Рунета.
3 раза в неделю.
Онлайн-интенсивы
для обучения интернет-
профессиям. 1,5–2,5
месяца.
Интерактивные курсы
по маркетингу и интернет-
бизнесу, 2–3 часа, 40+
курсов. Доступ 24/7!
FREE

17. ПРИСОЕДИНЯЙТЕСЬ!
vk.com/netology
facebook.com/netology.ru
youtube.com/netologytv
netology.ru/blog
slideshare.net/netology
twitter.com/netology_ru