Видеозапись открытого занятия «Веб-дизайнер: учимся делать скетчи» можно посмотреть здесь: http://bit.ly/1grRPbe Скетчинг — один из основных этапов, предшествующих разработке практически любого продукта: от сайта-визитки, до сложной многофункциональной системы. Создание любого успешного сайта начинается с идеи. Визуализация мысли позволяет перенести перенести идею из ментальной области в реальный мир. Из презентации вы узнаете: — Об основных правилах скетчинга. — Какие инструменты использовать. — Как рисовать интерфейсы. — Что еще почитать по теме.

1. Открытое онлайн-занятие
Веб-дизайнер:
учимся делать скетчи
Балакирева Станислава
проектировщик пользовательских
интерфейсов UsabilityLab

2. БИЗНЕС
ПОЛЬЗОВАТЕЛЬ
СБОР
ТРЕБОВАНИЙ
хороший продукт появляется на
пересечении требований бизнеса,
пользователей и технологий
ТЕХНОЛОГИИ

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

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

5. Неверные установки
СКЕТЧИНГ ЭТО
НЕ РИСОВАНИЕ!

6. ДЛЯ ЧЕГО ИСПОЛЬЗУЕТСЯ
СКЕТЧИНГ
Мы используем скетчи, чтобы
•
•
•
•
•
•
думать
документировать
экспериментировать
объяснять и общаться
совершить 80% ошибок
найти верное решение

7. ВИДЫ СКЕТЧЕЙ
Исследовательский
•
•
•
его понимаете только вы
низкая детализация
очень много разновидностей

8. ВИДЫ СКЕТЧЕЙ
Изящный
•
•
•
•
лучшего качества
более детализированный
понятен другими
более реалистичен

9. ОСНОВНЫЕ ПРАВИЛА
СКЕТЧИНГА
•
•
•
•
•
•
Чем быстрее, тем продуктивнее
Чем «страшнее», тем лучше
Чем больше скетчей, тем больше идей
Не критикуйте качество
Не стремитесь к совершенству
Не фокусируйтесь на деталях

10. ЗАПАСИТЕСЬ
ИНСТРУМЕНТАМИ
•
•
Чернила лучше, чем графит
•
Цветной маркет для привлечения внимания
и выделения самых важных мест
Тонкие ручки и маркеры для комментариев,
серый маркер для затенения, увеличения
глубины

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

12. ЗАПАСИТЕСЬ
ИНСТРУМЕНТАМИ
Выберите блокнот или
скетчбук
•
Вы можете использовать
скетчбуки с разметками или с
чистыми листами
•
Если под рукой нет скетчбука,
всегда можно взять лист А4

13. ЧЕМ ПРОЩЕ, ТЕМ ЛУЧШЕ

14. ИСПОЛЬЗУЙТЕ
СТИКЕРЫ

16. Тренируйтесь

17. Тренируйтесь

18. БЕРИТЕСЬ ЗА ДЕЛО
•
•
Линии должны быть прямыми
•
•
•
•
Используйте серый маркер для придания глубины
Жирным выделяйте то, что должно привлекать больше
внимания
Если напортачили — продолжайте!
Если совсем все плохо — возьмите новый лист
Начинайте с тонких линий, затем придавайте глубину и
объем

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

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

21. Шапка
ЛЕГКИЕ
ПУТИ
Таблица
Текст
Пользователь с описание
Картинка с описанием
Видео с описанием

22. Выноски с различными
ЛЕГКИЕ
ПУТИ
вариантами
тени
Слайд-шоу

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

26. Что почитать?
Книги:
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
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-ohmy-creating-your-own-magical-wizard-experience.php
5.
http://www.slideshare.net/pubsmith/sketching-interfaces-workshop-interactions12-dublin
6.
http://ui-patterns.com/patterns
7.
http://uxdesign.smashingmagazine.com/2012/06/06/design-patterns-when-breaking-rules-ok/

27. Станислава
Балакирева
Ведущий проектировщик интерфейсов
в компании «UsabiltyLab»