Обзор средств прототипирования веб-сайтов

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

2. Проекты

3. Процесс

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

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

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

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

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

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

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/)