Обзор средств прототипирования веб-сайтов Коноплицкий Павел

Проекты

Процесс

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

Текущая ситуация в проектах

Текущая ситуация в проектах

Текущая ситуация в проектах

1.Точный прототип позволяет проработать требования к интерфейсу и позиционированию функциональных блоков уже на этапе проектирования. 2.Дизайнеры будут задавать меньше вопросов и не будут отрисовывать несуществующую функциональность. С прототипом дизайн чаще рисуется «с первого раза». 3.Заказчикам прототип дает четкое представление того, что они получат по итогу проекта. Интерактивный прототип понятнее для заказчика. 4.Прототип легче сохранять в актуальном виде, чем функциональную спецификацию 5.Повышает качество проекта, уменьшая количество ошибок взаимодействия с системой 6.Прототип позволяет провести юзабилити-тестирование Преимущества

1.Скетч, набросок, рисунок 2.Wireframes, макет 3.Дизайн, детальный макет 4.Интерактивный прототип 5.Прототип близкий к готовому продукту Виды прототипов

Google

37 signals

Cooper

1.Упростить создание типовых решений, давая возможность для творчества 2.Позволить создавать интерактивные, детализированные прототипы, доступные всем участникам проекта с возможностью вносить изменения 3.Учитывать невысокий уровень знаний и опыта у человека, выполняющего прототипирование 4.Позволить думать о создаваемом интерфейсе, а не инструменте 5.Низкая стоимость ПО Требования

1.Скорость создания прототипа 2.Интерактивность 3.Детализация 4.Необходимость повторной отрисовки 5.Доступность для всех участников проекта 6.Возможность простого внесения изменений 7.Создание собственных библиотек Критерии

Среда Скорость создания прототипа: высокая Интерактивность: отсутствует Детализация: высокая Необходима повторная отрисовка: да Доступность для всех участников проекта: ограниченная Возможность внесения изменений: не возможно Собственные библиотеки: не возможно Бумага

Среда Скорость создания прототипа: средняя Интерактивность: отсутствует Детализация: средняя Необходима повторная отрисовка: да Доступность для всех участников проекта: ограниченная Возможность внесения изменений: возможно с ограничениями Собственные библиотеки: не возможно Доска

Среда Скорость создания прототипа: средняя Интерактивность: низкая Детализация: низкая Необходима повторная отрисовка: да Доступность для всех участников проекта: полная Возможность внесения изменений: возможно с ограниченьями Собственные библиотеки: возможно Microsoft Office или Open Office

Среда Скорость создания прототипа: высокая Интерактивность: низкая Детализация: высокая Необходима повторная отрисовка: нет Доступность для всех участников проекта: полная Возможность внесения изменений: возможно без ограничений Собственные библиотеки: возможно Microsoft Visio

Среда Скорость создания прототипа: средняя Интерактивность: низкая Детализация: высокая Необходима повторная отрисовка: нет Доступность для всех участников проекта: полная Возможность внесения изменений: возможно без ограничений Собственные библиотеки: возможно Adobe InDesign

Среда Скорость создания прототипа: средняя Интерактивность: низкая Детализация: высокая Необходима повторная отрисовка: нет Доступность для всех участников проекта: полная Возможность внесения изменений: возможно без ограничений Собственные библиотеки: возможно Adobe Fireworks

Среда Библиотека элементов Скорость создания прототипа: высокая Интерактивность: средняя Детализация: высокая Необходима повторная отрисовка: нет Доступность для всех участников проекта: полная Возможность внесения изменений: возможно без ограничений Собственные библиотеки: возможно Axure RP

Среда Скорость создания прототипа: низкая Интерактивность: высокая Детализация: высокая Необходима повторная отрисовка: нет Доступность для всех участников проекта: полная Возможность внесения изменений: возможно без ограничений Собственные библиотеки: возможно HolyGrail (Adobe Dreamweaver)

Среда Скорость создания прототипа: высокая Интерактивность: низкая Детализация: высокая Необходима повторная отрисовка: нет Доступность для всех участников проекта: полная Возможность внесения изменений: возможно без ограничений Собственные библиотеки: ? WireframeSketcher (Eclipse)

Среда JustProto (on-line) Скорость создания прототипа: высокая Интерактивность: средняя Детализация: высокая Необходима повторная отрисовка: нет Доступность для всех участников проекта: полная Возможность внесения изменений: возможно без ограничений Собственные библиотеки: не возможно

Среда Balsamiq Mockups (on-line) Скорость создания прототипа: высокая Интерактивность: низкая Детализация: высокая Необходима повторная отрисовка: нет Доступность для всех участников проекта: полная Возможность внесения изменений: возможно без ограничений Собственные библиотеки: не возможно

Стенсилы

Среда Microsoft Expression

Среда Adobe Flash Catalyst

Используемые инструменты

СПАСИБО ЗА ВНИМАНИЕ ВОПРОСЫ? В презентации использовались изображения : Rob Enslin ( Lloyd Budd (