Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

5,229 views

Published on

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

  1. 1. Скетчинг: глаза боятся, руки делают 181 вебинар UX Russia Станислава Балакирева 17 января 2013
  2. 2. Что такое «скетчинг»? Скетч – эскиз, быстрый рисунок Скетчинг – процесс создания скетчей
  3. 3. Зачем?Мы используем скетчи, чтобы… …думать …документировать …экспериментировать …объяснять и общаться …быстрее потерпеть неудачу …найти верное решение http://konigi.com/book/sketch-book/
  4. 4. Когда?
  5. 5. Неверные установки «Я не умею рисовать…»
  6. 6. Верные установки !
  7. 7. Основные правила Чем быстрее, тем продуктивнее!  Не критикуйте! Чем «страшнее», тем лучше!  Не стремитесь к совершенству! Чем больше скетчей, тем больше  Не фокусируйтесь на деталях! идей! Концертный зал имени Уолта Диснея
  8. 8. Виды скетчей «Исследовательский» скетч «Изящный» скетч • Его понимаете только вы • Лучшего качества • Низкая детализация • Более детализированный • Очень много разновидностей • Интерпретируем другими • Более реалистичный http://www.slideshare.net/pboersma/good-design-faster-at-ux-sofia
  9. 9. Этап 1: Запаситесь инструментами Чернила лучше, чем графит Тонкие ручки и маркеры – для комментариев, серый маркер – для затенений, увеличения глубины Цветной маркер (желтый) – для привлечения внимания и выделения самых важных мест Блокноты с плотной бумагой Листы А4 в огромных количествах
  10. 10. Этап 2: Потренируйтесь
  11. 11. Этап 3: Фиксируйте идеи Линии должны быть прямыми Более толстыми выделяйте места, которые должны привлекать больше внимания Используйте серый маркер для придания глубины Если напортачили – продолжайте! Если совсем-совсем напортачили – возьмите новый лист! Толстые линии отлично прячут ошибки Начните с тонких линий, затем придавайте им толщину и объем
  12. 12. Этап 3: Фиксируйте идеи
  13. 13. Этап 3: Фиксируйте идеи
  14. 14. Этап 4: Выберите ту самую идею«Если каждый человек в группе, состоящей из пяти человек, потратит 5 минутсвоего времени и нарисует 6-8 идей, то по истечении 5 минут у Вас будет целыйпул из 30-40 идей, которые можно обсуждать» Tod Zaki http://konigi.com/book/sketch-book/
  15. 15. Этап 5: Проработайте концепциюРаботайте со слоями Начните с маркера серого цвета и постепенно добавляйте темные слои (маркеры + ручки) Не начинайте с ручки: если вы потом добавите маркер, чернила расползутсяРисуйте от плеча При рисовании длинных линий старайтесь рисовать от плеча. Для коротких – от кистиИзображайте взаимодействие Используйте стикеры и добавляйте с их помощью подсказки, окна и любые интерактивные элементы на свой скетч Используйте разные цвета, чтобы обозначить разные типы взаимодействий http://uxdesign.smashingmagazine.com/2011/12/13/messy-art-ux-sketching/
  16. 16. Подведем итоги…Зачем использовать скетчи? Скетчи дают возможность делать ошибки и мыслить открыто Скетчи могут создаваться на лету: много идей за минимальный промежуток времени Скетчи позволяют фиксировать идеи, не погружаясь в детали Их легко обсуждать, ими легко делиться, их легко критиковать! Это весело!
  17. 17. Что почитать?Книги:1.Bill Buxton “Sketching User Experiences: Getting theDesign Right and the Right Design ”. – Morgan Kaufmann;1 edition, 20072. Dan Roam “The back of the napkin”. - PortfolioHardcover; 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 Boersma3. 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.php5. http://www.slideshare.net/pubsmith/sketching-interfaces-workshop-interactions12-dublinСоздание интерактивных скетчей: ссылка на описание программыhttp://www.infragistics.com/products/indigo-studio/?gclid=CID29LeD27QCFeR4cAodZ0kA2A
  18. 18. Спасибо за внимание!

×