Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

30,686 views

Published on

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

Published in: Design
  • А почему здесь берд не рассмотрен?) хоть он еще и в бете, но, наверное, один из лучших инструментов для создания прототипов (единственное, чего не хватает, так это групп слоев, как в фотошопе и возможности включения и выключения слоев и групп)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Даже если на проектор, то я не понимаю, почему полэкрана пустые на 7-м слайде. Я буду привередой, потому что ты позиционируешь себя как юзабилист. Practice what you preach!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Спасибо за совет, но не будь привередой. Презентация изначально рассчитана на проектор. Сделай на весь экран и посмотри или скачай.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Если уж ты сравниваешь разные инструменты, то странно не видеть сводную табличку с индикаторами, показывающими степень пригодности. Все эти «высокая», «низкая» трудно интерпретировать.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Слайды неразборчивые. Компоновка и размер шрифтов сомнительные.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

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

×