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

30,015 views
29,903 views

Published on

Презентация Павла Коноплицкого с обзором средств прототипирования веб-сайтов на конференции "Сайт-2009" http://www.site-2009.ru/

Published in: Design
5 Comments
23 Likes
Statistics
Notes
No Downloads
Views
Total views
30,015
On SlideShare
0
From Embeds
0
Number of Embeds
27,531
Actions
Shares
0
Downloads
193
Comments
5
Likes
23
Embeds 0
No embeds

No notes for slide

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

  1. 1. Обзор средств прототипирования веб-сайтов Коноплицкий Павел
  2. 2. Проекты
  3. 3. Процесс
  4. 4. Программисты « Программистам часто приходиться выбирать между простотой создания кода и простотой использования продукта. Поскольку о производительности программистов обычно судят по их способности эффективно писать код и сдавать его в невероятно сжатые сроки, несложно понять, в какую сторону склоняются весы для большинства цифровых продуктов » Алан Купер «Об интерфейсе»
  5. 5. http://habrahabr.ru/blogs/ui_design_and_usability/35175/ Текущая ситуация в проектах
  6. 6. http://habrahabr.ru/blogs/ui_design_and_usability/35602/ Текущая ситуация в проектах
  7. 7. http://habrahabr.ru/blogs/ui_design_and_usability/35185/ Текущая ситуация в проектах
  8. 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. 9. <ul><li>Скетч, набросок, рисунок </li></ul><ul><li>Wireframes , макет </li></ul><ul><li>Дизайн, детальный макет </li></ul><ul><li>Интерактивный прототип </li></ul><ul><li>Прототип близкий к готовому продукту </li></ul>Виды прототипов
  10. 10. Google http://www.slideshare.net/wud/keekim-heng-the-principles-of-rapid-prototyping
  11. 11. 37 signals http://rimmer333.habrahabr.ru/blog/31598/
  12. 12. Cooper http://www.amazedev.com/knigi-po-usability/
  13. 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. 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. 15. Среда Скорость создания прототипа: высокая Интерактивность: отсутствует Детализация: высокая Необходима повторная отрисовка: да Доступность для всех участников проекта: ограниченная Возможность внесения изменений: не возможно Собственные библиотеки: не возможно Бумага
  16. 16. Среда http://blog.guimagnets.com/ Скорость создания прототипа: средняя Интерактивность: отсутствует Детализация: средняя Необходима повторная отрисовка: да Доступность для всех участников проекта: ограниченная Возможность внесения изменений: возможно с ограничениями Собственные библиотеки: не возможно Доска
  17. 17. Среда Скорость создания прототипа: средняя Интерактивность: низкая Детализация: низкая Необходима повторная отрисовка: да Доступность для всех участников проекта: полная Возможность внесения изменений: возможно с ограниченьями Собственные библиотеки: возможно Microsoft Office или Open Office http://excelprototyping.weebly.com/
  18. 18. Среда http://www.jvetrau.com/category/ui-modeling/wireframes/ Скорость создания прототипа: высокая Интерактивность: низкая Детализация: высокая Необходима повторная отрисовка: нет Доступность для всех участников проекта: полная Возможность внесения изменений: возможно без ограничений Собственные библиотеки: возможно Microsoft Visio
  19. 19. Среда http://usethics.ru/lib/indesign_prototyping.html Скорость создания прототипа: средняя Интерактивность: низкая Детализация: высокая Необходима повторная отрисовка: нет Доступность для всех участников проекта: полная Возможность внесения изменений: возможно без ограничений Собственные библиотеки: возможно Adobe InDesign
  20. 20. Среда http://www.slideshare.net/azart/akhmelevsky-wireframing-in-adobe-fireworks-presentation Скорость создания прототипа: средняя Интерактивность: низкая Детализация: высокая Необходима повторная отрисовка: нет Доступность для всех участников проекта: полная Возможность внесения изменений: возможно без ограничений Собственные библиотеки: возможно Adobe Fireworks
  21. 21. Среда http://axure.com/expert.aspx Библиотека элементов http://upa.org.ru/UsabilityBulletin-26.aspx?EntryID=787 Скорость создания прототипа: высокая Интерактивность: средняя Детализация: высокая Необходима повторная отрисовка: нет Доступность для всех участников проекта: полная Возможность внесения изменений: возможно без ограничений Собственные библиотеки: возможно Axure RP
  22. 22. Среда http://www.amazedev.com/holygrail/ Скорость создания прототипа: низкая Интерактивность: высокая Детализация: высокая Необходима повторная отрисовка: нет Доступность для всех участников проекта: полная Возможность внесения изменений: возможно без ограничений Собственные библиотеки: возможно HolyGrail ( Adobe Dreamweaver)
  23. 23. Среда http://wireframesketcher.com/index.html Скорость создания прототипа: высокая Интерактивность: низкая Детализация: высокая Необходима повторная отрисовка: нет Доступность для всех участников проекта: полная Возможность внесения изменений: возможно без ограничений Собственные библиотеки: ? WireframeSketcher (Eclipse)
  24. 24. Среда http://www.justproto.com/en/ JustProto (on-line) Скорость создания прототипа: высокая Интерактивность: средняя Детализация: высокая Необходима повторная отрисовка: нет Доступность для всех участников проекта: полная Возможность внесения изменений: возможно без ограничений Собственные библиотеки: не возможно
  25. 25. Среда http://www.balsamiq.com/products/mockups Balsamiq Mockups (on-line) Скорость создания прототипа: высокая Интерактивность: низкая Детализация: высокая Необходима повторная отрисовка: нет Доступность для всех участников проекта: полная Возможность внесения изменений: возможно без ограничений Собственные библиотеки: не возможно
  26. 26. http://www.amazedev.com/stencils/ Стенсилы
  27. 27. Среда http://www.gui.ru/copylove/xaml-for-interction-design/ Microsoft Expression
  28. 28. Среда http://labs.adobe.com/technologies/flashcatalyst/ Adobe Flash Catalyst
  29. 29. http://habrahabr.ru/blogs/ui_design_and_usability/35162/ http://community.livejournal.com/ru_ucdesign/457798.html Используемые инструменты
  30. 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/)

×