Занятие №9

Скетчинг и
прототипирование
Что мы делали в прошлый раз?
1. Познакомились с понятием Оси Взаимодействия.
2. Узнали о понятии модальности окон и правилах их
использования.
3. Прошлись по принципам разработки эффективных форм.
4. Поняли, что таблицы – намного более широкий инструмент
чем может показаться.
5. Прошлись по всем базовым элементам интерфейса.
ЗАДАЧИ
Раз:
Понять разницу между скетчами,
варфреймами, прототипами и макетами.

Два:
Научиться выбирать что, в каком случае
и в каком порядке лучше всего делать.
Ху из ху
Скетч (Sketch)
Это низко детализированный макет продукта в виде зарисовок на бумаге. Многие
приложения для прототипирования копируют логику скетчинга, но пусть вас это не
путает. Это сделано для удобства сопоставления.

Варфрейм (Wireframes)
Это тоже низкодетализированный макет только теперь уже перенесенный в
цифровую среду. То есть это все тот же скетч, может уже более детальный но
накиданный в какой-то программе.

Прототипы (Prototypes)
Это уже кликабельна история и более детализированная. Тут вы можете понажимать
кнопки, увидеть какие-то выпадающие окна, списки, активировать какие-то функции.
Но сделать все это «понарошку».

Макеты (Mockups)
Это статичный макет, но уже с графическим дизайном, максимально
детализированный и с функциональной и с графической точки зрения. Тут вы ничего
нажать не можете, но это будет уходить верстальщикам и программистам для работы.
Скетч Варфрейм Low-res Макеты High-res
Прототипы Прототипы

Низкий Высокий
уровень уровень
детализации детализации
Скетчинг
Лучше всего пробовать
прорисовать интерфейс на
бумаге, а затем переносить
это на цифровую среду.
При этом есть общие правила того как какие элементы должны выглядеть на скетчах.
Скетчи приложений и сайтов – это как универсальный язык. Кто бы не посмотрел на
скетч – вы всегда поймете что на нем имеется ввиду.
Общие правила отображения
элементов на скетчах
(внимание на доску!)
• Изображение
• Видео
• Иконки
• Логотипы
• Заголовок
• Текст
• Кнопки
Варфрейм
Когда убедились в
адекватности скетчей –
переносим все в цифру.
В этом нам помогут такие программы как Balsamiq или Axure.
Они платные, но все мы знаем лозейки, правда?
Прототип
Понемногу детализируем
наш варфрейм и добавляем
ему функционала
Добавляем ссылки на страницы, имитацию выпадающих окон,
списков, выборов и так далее.
Домашнее задание
ДЗ №1

Отрисовать несколько
страниц своего продукта
в виде скетчей
Попробуйте порисовать в блокноте, соблюдая те
правила что мы обсудили на занятии.
«Какую профессию ни возьми, ее освоение
построено на системе совершения ошибок,
их осознания, разбора и исправления.»
NA