Инструменты проектирования интерфейсов

Откуда берется?

Идеи, мысли, видение

Идеи должны материализоваться!

Прототип?

Прототип — быстрая,

черновая реализация

будущей системы“

Зачем?• Формализовать идею• Протестировать идею• Быстро скорректировать • Спланировать дальнейшую разработку

Виды прототипов

1. «Нейронный»Находится в голове менеджера проекта

«Нейронный» прототип

• Не ограничен • Находится только в голове менеджера

• Не возможно поделиться без носителя

• Не стабилен

Виды прототипов

2. БумажныйСозданный на бумаге

Самый простой инструмент!

Пример бумажного прототипа

http://www.youtube.com/watch?v=Bf6csXa

5nXI&feature=player_embedded#!

http://www.youtube.com/watch?v=Bf6csXa5nXI&feature=player_embedded#!бумажного прототипа

Бумажный прототип

• Очень просто и очень быстро!

• Не ограниченный полет фантазии

• Формальный

• Низкая детализация

• Нет интерактивности

• Только для себя

Виды прототипов

3. Интерактивный

Статистика инструментов прототипирования!

http://habrahabr.ru/blogs/webdev/135536/

Инструменты проектирования

Больше : http://slodive.com/web-development/wireframe-tools/

Mockingbird

Mockingbird.com

• Просто и быстро создать прототип

• Без деталей

• Онлайн инструмент

• Несколько пользователей

• Низкая детализация прототипов

• Низкая интерактивность

• Ограниченный набор элементов

• Онлайн инструмент…

Mockingbird.com

Balsamiq

Balsamiq mockups

Balsamiq

• Просто и быстро создать прототип

• Без деталей

• Много настроек

• Низкая детализация прототипов

• Низкая интерактивность

• Ограниченный набор елементов

Omnigraffle

Omnigraffle

• Относительно быстрое и простое создание прототипа

• Создание и использование мастеров и библиотек

• Динамические возможности

• Красивая картинка

• Не очевидный интерфейс

• Мало настроек компонент

•Динамические возможности ограничены

• Нет русской версии

Omnigraffle

Visio

Visio

• Относительно быстрое создание прототипа

• Создание и использование мастеров и библиотек

• Простое создание схемы проекта

• Динамические возможности

• Не простой интерфейс

• Мало настроек компонент

• Динамические возможности ограничены

• Не только для проектирования интерфейсов

Visio

Axure

Axure

• Быстрое и простое создание прототипа

• Создание и использование мастеров и библиотек

• Простое создание схемы проекта

• Динамические возможности

• Обучающие ролики и бесплатные библиотеки

• Мало настроек компонент

•Динамические возможности ограничены

• Нет русской версии

Axure

Процесс проектирования

• Входящий документ• Анализ• Проектирование• Дизайн• Верстка• Программирование• Тестирование• Внедрение

Спасибо за внимание!