Скетчинг: глаза боятся, руки делают

181 вебинар UX Russia

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

17 января 2013

Что такое «скетчинг»?

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

Скетчинг – процесс

создания скетчей

Зачем?

Мы используем скетчи, чтобы…

…думать …документировать …экспериментировать …объяснять и общаться …быстрее потерпеть неудачу …найти верное решение

http://konigi.com/book/sketch-book/

Когда?

Неверные установки

«Я не умею рисовать…»

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

!

Основные правила

Концертный зал имени Уолта Диснея

Чем быстрее, тем продуктивнее!

Чем «страшнее», тем лучше!

Чем больше скетчей, тем больше идей!

Не критикуйте!

Не стремитесь к совершенству! Не фокусируйтесь на деталях!

Виды скетчей

«Исследовательский» скетч «Изящный» скетч

• Его понимаете только вы

• Низкая детализация

• Очень много разновидностей

• Лучшего качества

• Более детализированный

• Интерпретируем другими

• Более реалистичный

http://www.slideshare.net/pboersma/good-design-faster-at-ux-sofia

Этап 1: Запаситесь инструментами

Чернила лучше, чем графит

Тонкие ручки и маркеры – для комментариев, серый маркер – для затенений, увеличения глубины

Цветной маркер (желтый) – для привлечения внимания и выделения самых важных мест

Блокноты с плотной бумагой

Листы А4 в огромных количествах

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

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

Линии должны быть прямыми

Более толстыми выделяйте места, которые должны привлекать больше внимания

Используйте серый маркер для придания глубины

Если напортачили – продолжайте!

Если совсем-совсем напортачили – возьмите новый лист!

Толстые линии отлично прячут ошибки

Начните с тонких линий, затем придавайте им толщину и объем

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

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

Этап 4: Выберите ту самую идею

http://konigi.com/book/sketch-book/

«Если каждый человек в группе, состоящей из пяти человек, потратит 5 минут своего времени и нарисует 6-8 идей, то по истечении 5 минут у Вас будет целый пул из 30-40 идей, которые можно обсуждать»

Tod Zaki

Этап 5: Проработайте концепцию

http://uxdesign.smashingmagazine.com/2011/12/13/messy-art-ux-sketching/

Работайте со слоями Начните с маркера серого цвета и постепенно

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

маркер, чернила расползутся Рисуйте от плеча При рисовании длинных линий старайтесь

рисовать от плеча. Для коротких – от кисти Изображайте взаимодействие Используйте стикеры и добавляйте с их

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

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

Подведем итоги…

Зачем использовать скетчи?

Скетчи дают возможность делать ошибки и мыслить открыто

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

Скетчи позволяют фиксировать идеи, не погружаясь в детали

Их легко обсуждать, ими легко делиться, их легко критиковать!

Это весело!

Что почитать? Книги:

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

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