Веб-дизайнер: учимся делать скетчи
-
date post
20-Aug-2015 -
Category
Design
-
view
1.680 -
download
2
Transcript of Веб-дизайнер: учимся делать скетчи
Открытое онлайн-занятие
Балакирева Станислава
проектировщик пользовательских интерфейсов UsabilityLab
Веб-дизайнер: учимся делать скетчи
ПОЛЬЗОВАТЕЛЬ БИЗНЕС
ТЕХНОЛОГИИ
СБОР ТРЕБОВАНИЙ хороший продукт появляется на пересечении требований бизнеса, пользователей и технологий
ЧТО ТАКОЕ СКЕТЧИНГ?
Скетч — это эскиз, быстрый рисунок
Скетчинг — процесс создания скетчей
Я не умею рисовать…
Неверные установки
Неверные установки
СКЕТЧИНГ ЭТО НЕ РИСОВАНИЕ!
ДЛЯ ЧЕГО ИСПОЛЬЗУЕТСЯ СКЕТЧИНГ
Мы используем скетчи, чтобы
• думать
• документировать
• экспериментировать
• объяснять и общаться
• совершить 80% ошибок
• найти верное решение
ВИДЫ СКЕТЧЕЙ
Исследовательский
• его понимаете только вы
• низкая детализация
• очень много разновидностей
ВИДЫ СКЕТЧЕЙ
Изящный
• лучшего качества
• более детализированный
• понятен другими
• более реалистичен
ОСНОВНЫЕ ПРАВИЛА СКЕТЧИНГА
• Чем быстрее, тем продуктивнее
• Чем «страшнее», тем лучше
• Чем больше скетчей, тем больше идей
• Не критикуйте качество
• Не стремитесь к совершенству
• Не фокусируйтесь на деталях
ЗАПАСИТЕСЬ ИНСТРУМЕНТАМИ
• Чернила лучше, чем графит
• Тонкие ручки и маркеры для комментариев, серый маркер для затенения, увеличения глубины
• Цветной маркет для привлечения внимания и выделения самых важных мест
ИНСТРУМЕТЫ
ЗАПАСИТЕСЬ ИНСТРУМЕНТАМИ
Выберите блокнот или
скетчбук
• Вы можете использовать скетчбуки с разметками или с чистыми листами
• Если под рукой нет скетчбука, всегда можно взять лист А4
ЧЕМ ПРОЩЕ, ТЕМ ЛУЧШЕ
ИСПОЛЬЗУЙТЕ
СТИКЕРЫ
Тренируйтесь
Тренируйтесь
БЕРИТЕСЬ ЗА ДЕЛО
• Линии должны быть прямыми
• Жирным выделяйте то, что должно привлекать больше внимания
• Используйте серый маркер для придания глубины
• Если напортачили — продолжайте!
• Если совсем все плохо — возьмите новый лист
• Начинайте с тонких линий, затем придавайте глубину и объем
Я
ИЩИТЕ ЛЕГКИЕ ПУТИ Элементы интерфейсов
• Научитесь рисовать стандартный элементы интерфейсов
• Добавляйте тени, объем
ИЩИТЕ ЛЕГКИЕ ПУТИ Элементы интерфейсов
Стандартные поля ввода данных
Шапка Таблица Текст
Пользователь с описание Картинка с описанием Видео с описанием
ЛЕГКИЕ ПУТИ
Выноски с различными вариантами тени
ЛЕГКИЕ ПУТИ
Слайд-шоу
ДЕТАЛИЗИРУЙТЕ
Работайте со слоями
• Начните с маркера серого цвета и постепенно добавляйте темные слои (маркеры+ручки)
• Не начинайте с ручки, если вы потом добавите маркер, чернила расплывутся
Что почитать? Книги:
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-oh-my-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/
Станислава Балакирева
Ведущий проектировщик интерфейсов в компании «UsabiltyLab»