Документ предлагает обзор различных средств прототипирования веб-сайтов, подчеркивая важность прототипов для улучшения качества проектирования и взаимодействия с клиентами. Прототипы способствуют более понятному представлению конечного продукта и позволяют проводить юзабилити-тестирование. Рассматриваются различные инструменты для создания прототипов, их характеристики и преимущества, а также их влияние на процесс разработки.

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

2. Проекты

3. Процесс

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

5. http://habrahabr.ru/blogs/ui_design_and_usability/35175/ Текущая ситуация в проектах

6. http://habrahabr.ru/blogs/ui_design_and_usability/35602/ Текущая ситуация в проектах

7. http://habrahabr.ru/blogs/ui_design_and_usability/35185/ Текущая ситуация в проектах

8. Точный прототип позволяет проработать требования к интерфейсу и позиционированию функциональных блоков уже на этапе проектирования. Дизайнеры будут задавать меньше вопросов и не будут отрисовывать несуществующую функциональность. С прототипом дизайн чаще рисуется «с первого раза». Заказчикам прототип дает четкое представление того, что они получат по итогу проекта. Интерактивный прототип понятнее для заказчика. Прототип легче сохранять в актуальном виде, чем функциональную спецификацию Повышает качество проекта, уменьшая количество ошибок взаимодействия с системой Прототип позволяет провести юзабилити-тестирование http://webmascon.com/topics/development/23a.asp Преимущества

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

10. Google http://www.slideshare.net/wud/keekim-heng-the-principles-of-rapid-prototyping

11. 37 signals http://rimmer333.habrahabr.ru/blog/31598/

12. Cooper http://www.amazedev.com/knigi-po-usability/

13. Упростить создание типовых решений, давая возможность для творчества Позволить создавать интерактивные, детализированные прототипы, доступные всем участникам проекта с возможностью вносить изменения Учитывать невысокий уровень знаний и опыта у человека, выполняющего прототипирование Позволить думать о создаваемом интерфейсе, а не инструменте Низкая стоимость ПО http://www.amazedev.com/prototipirovanie-web-proektov-sobiraya-voedino/ Требования

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

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

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

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

18. Среда http://www.jvetrau.com/category/ui-modeling/wireframes/ Скорость создания прототипа: высокая Интерактивность: низкая Детализация: высокая Необходима повторная отрисовка: нет Доступность для всех участников проекта: полная Возможность внесения изменений: возможно без ограничений Собственные библиотеки: возможно Microsoft Visio

19. Среда http://usethics.ru/lib/indesign_prototyping.html Скорость создания прототипа: средняя Интерактивность: низкая Детализация: высокая Необходима повторная отрисовка: нет Доступность для всех участников проекта: полная Возможность внесения изменений: возможно без ограничений Собственные библиотеки: возможно Adobe InDesign

20. Среда http://www.slideshare.net/azart/akhmelevsky-wireframing-in-adobe-fireworks-presentation Скорость создания прототипа: средняя Интерактивность: низкая Детализация: высокая Необходима повторная отрисовка: нет Доступность для всех участников проекта: полная Возможность внесения изменений: возможно без ограничений Собственные библиотеки: возможно Adobe Fireworks

21. Среда http://axure.com/expert.aspx Библиотека элементов http://upa.org.ru/UsabilityBulletin-26.aspx?EntryID=787 Скорость создания прототипа: высокая Интерактивность: средняя Детализация: высокая Необходима повторная отрисовка: нет Доступность для всех участников проекта: полная Возможность внесения изменений: возможно без ограничений Собственные библиотеки: возможно Axure RP

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

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

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

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

26. http://www.amazedev.com/stencils/ Стенсилы

27. Среда http://www.gui.ru/copylove/xaml-for-interction-design/ Microsoft Expression

28. Среда http://labs.adobe.com/technologies/flashcatalyst/ Adobe Flash Catalyst

29. http://habrahabr.ru/blogs/ui_design_and_usability/35162/ http://community.livejournal.com/ru_ucdesign/457798.html Используемые инструменты

30. СПАСИБО ЗА ВНИМАНИЕ ВОПРОСЫ? http://www.usability.by http://www.amazedev.com http://www.1point.ru В презентации использовались изображения : Rob Enslin (http://www.flickr.com/photos/doos/3596580004/) Lloyd Budd (http://www.flickr.com/photos/foolswisdom/43144375/)