1. Скетчинг: глаза боятся, руки делают
181 вебинар UX Russia
Станислава Балакирева
17 января 2013

2. Что такое «скетчинг»?
Скетч – эскиз,
быстрый
рисунок
Скетчинг –
процесс
создания
скетчей

3. Зачем?
Мы используем скетчи, чтобы…
…думать
…документировать
…экспериментировать
…объяснять и общаться
…быстрее потерпеть неудачу
…найти верное решение
http://konigi.com/book/sketch-book/

4. Когда?

5. Неверные установки
«Я не умею
рисовать…»

6. Верные установки
!

7. Основные правила
 Чем быстрее, тем продуктивнее!  Не критикуйте!
 Чем «страшнее», тем лучше!  Не стремитесь к совершенству!
 Чем больше скетчей, тем больше  Не фокусируйтесь на деталях!
идей!
Концертный зал имени Уолта Диснея

8. Виды скетчей
«Исследовательский» скетч «Изящный» скетч
• Его понимаете только вы • Лучшего качества
• Низкая детализация • Более детализированный
• Очень много разновидностей • Интерпретируем другими
• Более реалистичный
http://www.slideshare.net/pboersma/good-design-faster-at-ux-sofia

9. Этап 1: Запаситесь инструментами
 Чернила лучше, чем графит
 Тонкие ручки и маркеры – для комментариев, серый
маркер – для затенений, увеличения глубины
 Цветной маркер (желтый) – для привлечения внимания
и выделения самых важных мест
 Блокноты с плотной бумагой
 Листы А4 в огромных количествах

10. Этап 2: Потренируйтесь

11. Этап 3: Фиксируйте идеи
 Линии должны быть прямыми
 Более толстыми выделяйте места, которые
должны привлекать больше внимания
 Используйте серый маркер для придания
глубины
 Если напортачили – продолжайте!
 Если совсем-совсем напортачили – возьмите
новый лист!
 Толстые линии отлично прячут ошибки
 Начните с тонких линий, затем придавайте им
толщину и объем

12. Этап 3: Фиксируйте идеи

13. Этап 3: Фиксируйте идеи

14. Этап 4: Выберите ту самую идею
«Если каждый человек в группе, состоящей из пяти человек, потратит 5 минут
своего времени и нарисует 6-8 идей, то по истечении 5 минут у Вас будет целый
пул из 30-40 идей, которые можно обсуждать»
Tod Zaki
http://konigi.com/book/sketch-book/

15. Этап 5: Проработайте концепцию
Работайте со слоями
 Начните с маркера серого цвета и постепенно
добавляйте темные слои (маркеры + ручки)
 Не начинайте с ручки: если вы потом добавите
маркер, чернила расползутся
Рисуйте от плеча
 При рисовании длинных линий старайтесь
рисовать от плеча. Для коротких – от кисти
Изображайте взаимодействие
 Используйте стикеры и добавляйте с их
помощью подсказки, окна и любые
интерактивные элементы на свой скетч
 Используйте разные цвета, чтобы обозначить
разные типы взаимодействий
http://uxdesign.smashingmagazine.com/2011/12/13/messy-art-ux-sketching/

16. Подведем итоги…
Зачем использовать скетчи?
 Скетчи дают возможность делать ошибки
и мыслить открыто
 Скетчи могут создаваться на лету: много
идей за минимальный промежуток
времени
 Скетчи позволяют фиксировать идеи, не
погружаясь в детали
 Их легко обсуждать, ими легко делиться,
их легко критиковать!
 Это весело!

17. Что почитать?
Книги:
1.Bill Buxton “Sketching User Experiences: Getting the
Design Right and the Right Design ”. – Morgan Kaufmann;
1 edition, 2007
2. Dan Roam “The back of the napkin”. - Portfolio
Hardcover; Expanded edition, 2009
Статьи и презентации:
1. http://uxdesign.smashingmagazine.com/2011/12/13/messy-art-ux-sketching/ - создание скетчей при
помощи слоев
2. http://www.slideshare.net/pboersma/good-design-faster-at-ux-sofia - презентация Peter Boersma
3. http://www.uxbooth.com/articles/tools-for-sketching-user-experiences/
4. http://www.uxmatters.com/mt/archives/2010/05/sketches-and-wireframes-and-prototypes-oh-my-
creating-your-own-magical-wizard-experience.php
5. http://www.slideshare.net/pubsmith/sketching-interfaces-workshop-interactions12-dublin
Создание интерактивных скетчей: ссылка на описание программы
http://www.infragistics.com/products/indigo-studio/?gclid=CID29LeD27QCFeR4cAodZ0kA2A

18. Спасибо за внимание!