Веб-дизайнер: учимся делать скетчи

Открытое онлайн-занятие

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

проектировщик пользовательских интерфейсов 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»