Download - Обзор средств прототипирования веб-сайтов
![Page 1: Обзор средств прототипирования веб-сайтов](https://reader033.vdocuments.pub/reader033/viewer/2022050905/54c401ee4a7959c0118b462e/html5/thumbnails/1.jpg)
Обзор средств прототипирования веб-сайтовКоноплицкий Павел
![Page 2: Обзор средств прототипирования веб-сайтов](https://reader033.vdocuments.pub/reader033/viewer/2022050905/54c401ee4a7959c0118b462e/html5/thumbnails/2.jpg)
Проекты
![Page 3: Обзор средств прототипирования веб-сайтов](https://reader033.vdocuments.pub/reader033/viewer/2022050905/54c401ee4a7959c0118b462e/html5/thumbnails/3.jpg)
Процесс
![Page 4: Обзор средств прототипирования веб-сайтов](https://reader033.vdocuments.pub/reader033/viewer/2022050905/54c401ee4a7959c0118b462e/html5/thumbnails/4.jpg)
Программисты
«Программистам часто приходиться выбирать между простотой создания кода и простотой использования продукта. Поскольку о производительности программистов обычно судят по их способности эффективно писать код и сдавать его в невероятно сжатые сроки, несложно понять, в какую сторону склоняются весы для большинства цифровых продуктов»
Алан Купер «Об интерфейсе»
![Page 5: Обзор средств прототипирования веб-сайтов](https://reader033.vdocuments.pub/reader033/viewer/2022050905/54c401ee4a7959c0118b462e/html5/thumbnails/5.jpg)
http://habrahabr.ru/blogs/ui_design_and_usability/35175/
Текущая ситуация в проектах
![Page 6: Обзор средств прототипирования веб-сайтов](https://reader033.vdocuments.pub/reader033/viewer/2022050905/54c401ee4a7959c0118b462e/html5/thumbnails/6.jpg)
http://habrahabr.ru/blogs/ui_design_and_usability/35602/
Текущая ситуация в проектах
![Page 7: Обзор средств прототипирования веб-сайтов](https://reader033.vdocuments.pub/reader033/viewer/2022050905/54c401ee4a7959c0118b462e/html5/thumbnails/7.jpg)
http://habrahabr.ru/blogs/ui_design_and_usability/35185/
Текущая ситуация в проектах
![Page 8: Обзор средств прототипирования веб-сайтов](https://reader033.vdocuments.pub/reader033/viewer/2022050905/54c401ee4a7959c0118b462e/html5/thumbnails/8.jpg)
1. Точный прототип позволяет проработать требования к интерфейсу и позиционированию функциональных блоков уже на этапе проектирования.
2. Дизайнеры будут задавать меньше вопросов и не будут отрисовывать несуществующую функциональность. С прототипом дизайн чаще рисуется «с первого раза».
3. Заказчикам прототип дает четкое представление того, что они получат по итогу проекта. Интерактивный прототип понятнее для заказчика.
4. Прототип легче сохранять в актуальном виде, чем функциональную спецификацию5. Повышает качество проекта, уменьшая количество ошибок взаимодействия с системой6. Прототип позволяет провести юзабилити-тестирование
http://webmascon.com/topics/development/23a.asp
Преимущества
![Page 9: Обзор средств прототипирования веб-сайтов](https://reader033.vdocuments.pub/reader033/viewer/2022050905/54c401ee4a7959c0118b462e/html5/thumbnails/9.jpg)
1. Скетч, набросок, рисунок2. Wireframes, макет3. Дизайн, детальный макет4. Интерактивный прототип5. Прототип близкий к готовому продукту
Виды прототипов
![Page 10: Обзор средств прототипирования веб-сайтов](https://reader033.vdocuments.pub/reader033/viewer/2022050905/54c401ee4a7959c0118b462e/html5/thumbnails/10.jpg)
http://www.slideshare.net/wud/keekim-heng-the-principles-of-rapid-prototyping
![Page 12: Обзор средств прототипирования веб-сайтов](https://reader033.vdocuments.pub/reader033/viewer/2022050905/54c401ee4a7959c0118b462e/html5/thumbnails/12.jpg)
Cooper
http://www.amazedev.com/knigi-po-usability/
![Page 13: Обзор средств прототипирования веб-сайтов](https://reader033.vdocuments.pub/reader033/viewer/2022050905/54c401ee4a7959c0118b462e/html5/thumbnails/13.jpg)
1. Упростить создание типовых решений, давая возможность для творчества
2. Позволить создавать интерактивные, детализированные прототипы, доступные всем участникам проекта с возможностью вносить изменения
3. Учитывать невысокий уровень знаний и опыта у человека, выполняющего прототипирование
4. Позволить думать о создаваемом интерфейсе, а не инструменте5. Низкая стоимость ПО
http://www.amazedev.com/prototipirovanie-web-proektov-sobiraya-voedino/
Требования
![Page 14: Обзор средств прототипирования веб-сайтов](https://reader033.vdocuments.pub/reader033/viewer/2022050905/54c401ee4a7959c0118b462e/html5/thumbnails/14.jpg)
1. Скорость создания прототипа 2. Интерактивность 3. Детализация4. Необходимость повторной отрисовки5. Доступность для всех участников проекта6. Возможность простого внесения изменений7. Создание собственных библиотек
Критерии
![Page 15: Обзор средств прототипирования веб-сайтов](https://reader033.vdocuments.pub/reader033/viewer/2022050905/54c401ee4a7959c0118b462e/html5/thumbnails/15.jpg)
Среда
Скорость создания прототипа: высокаяИнтерактивность: отсутствуетДетализация: высокаяНеобходима повторная отрисовка: даДоступность для всех участников проекта: ограниченнаяВозможность внесения изменений: не возможноСобственные библиотеки: не возможно
Бумага
![Page 16: Обзор средств прототипирования веб-сайтов](https://reader033.vdocuments.pub/reader033/viewer/2022050905/54c401ee4a7959c0118b462e/html5/thumbnails/16.jpg)
Среда
http://blog.guimagnets.com/
Скорость создания прототипа: средняяИнтерактивность: отсутствуетДетализация: средняяНеобходима повторная отрисовка: даДоступность для всех участников проекта: ограниченнаяВозможность внесения изменений: возможно с ограничениямиСобственные библиотеки: не возможно
Доска
![Page 17: Обзор средств прототипирования веб-сайтов](https://reader033.vdocuments.pub/reader033/viewer/2022050905/54c401ee4a7959c0118b462e/html5/thumbnails/17.jpg)
Среда
Скорость создания прототипа: средняяИнтерактивность: низкаяДетализация: низкаяНеобходима повторная отрисовка: даДоступность для всех участников проекта: полнаяВозможность внесения изменений: возможно с ограниченьямиСобственные библиотеки: возможно
Microsoft Office или Open Office
http://excelprototyping.weebly.com/
![Page 18: Обзор средств прототипирования веб-сайтов](https://reader033.vdocuments.pub/reader033/viewer/2022050905/54c401ee4a7959c0118b462e/html5/thumbnails/18.jpg)
Среда
http://www.jvetrau.com/category/ui-modeling/wireframes/
Скорость создания прототипа: высокаяИнтерактивность: низкаяДетализация: высокаяНеобходима повторная отрисовка: нетДоступность для всех участников проекта: полнаяВозможность внесения изменений: возможно без ограниченийСобственные библиотеки: возможно
Microsoft Visio
![Page 19: Обзор средств прототипирования веб-сайтов](https://reader033.vdocuments.pub/reader033/viewer/2022050905/54c401ee4a7959c0118b462e/html5/thumbnails/19.jpg)
Среда
http://usethics.ru/lib/indesign_prototyping.html
Скорость создания прототипа: средняяИнтерактивность: низкаяДетализация: высокаяНеобходима повторная отрисовка: нетДоступность для всех участников проекта: полнаяВозможность внесения изменений: возможно без ограниченийСобственные библиотеки: возможно
Adobe InDesign
![Page 20: Обзор средств прототипирования веб-сайтов](https://reader033.vdocuments.pub/reader033/viewer/2022050905/54c401ee4a7959c0118b462e/html5/thumbnails/20.jpg)
Среда
http://www.slideshare.net/azart/akhmelevsky-wireframing-in-adobe-fireworks-presentation
Скорость создания прототипа: средняяИнтерактивность: низкаяДетализация: высокаяНеобходима повторная отрисовка: нетДоступность для всех участников проекта: полнаяВозможность внесения изменений: возможно без ограниченийСобственные библиотеки: возможно
Adobe Fireworks
![Page 21: Обзор средств прототипирования веб-сайтов](https://reader033.vdocuments.pub/reader033/viewer/2022050905/54c401ee4a7959c0118b462e/html5/thumbnails/21.jpg)
Среда
http://axure.com/expert.aspxБиблиотека элементов
http://upa.org.ru/UsabilityBulletin-26.aspx?EntryID=787
Скорость создания прототипа: высокаяИнтерактивность: средняяДетализация: высокаяНеобходима повторная отрисовка: нетДоступность для всех участников проекта: полнаяВозможность внесения изменений: возможно без ограниченийСобственные библиотеки: возможно
Axure RP
![Page 22: Обзор средств прототипирования веб-сайтов](https://reader033.vdocuments.pub/reader033/viewer/2022050905/54c401ee4a7959c0118b462e/html5/thumbnails/22.jpg)
Среда
http://www.amazedev.com/holygrail/
Скорость создания прототипа: низкаяИнтерактивность: высокаяДетализация: высокаяНеобходима повторная отрисовка: нетДоступность для всех участников проекта: полнаяВозможность внесения изменений: возможно без ограниченийСобственные библиотеки: возможно
HolyGrail (Adobe Dreamweaver)
![Page 23: Обзор средств прототипирования веб-сайтов](https://reader033.vdocuments.pub/reader033/viewer/2022050905/54c401ee4a7959c0118b462e/html5/thumbnails/23.jpg)
Среда
http://wireframesketcher.com/index.html
Скорость создания прототипа: высокаяИнтерактивность: низкаяДетализация: высокаяНеобходима повторная отрисовка: нетДоступность для всех участников проекта: полнаяВозможность внесения изменений: возможно без ограниченийСобственные библиотеки: ?
WireframeSketcher (Eclipse)
![Page 24: Обзор средств прототипирования веб-сайтов](https://reader033.vdocuments.pub/reader033/viewer/2022050905/54c401ee4a7959c0118b462e/html5/thumbnails/24.jpg)
Среда
http://www.justproto.com/en/
JustProto (on-line)
Скорость создания прототипа: высокаяИнтерактивность: средняяДетализация: высокаяНеобходима повторная отрисовка: нетДоступность для всех участников проекта: полнаяВозможность внесения изменений: возможно без ограниченийСобственные библиотеки: не возможно
![Page 25: Обзор средств прототипирования веб-сайтов](https://reader033.vdocuments.pub/reader033/viewer/2022050905/54c401ee4a7959c0118b462e/html5/thumbnails/25.jpg)
Среда
http://www.balsamiq.com/products/mockups
Balsamiq Mockups (on-line)
Скорость создания прототипа: высокаяИнтерактивность: низкаяДетализация: высокаяНеобходима повторная отрисовка: нетДоступность для всех участников проекта: полнаяВозможность внесения изменений: возможно без ограниченийСобственные библиотеки: не возможно
![Page 26: Обзор средств прототипирования веб-сайтов](https://reader033.vdocuments.pub/reader033/viewer/2022050905/54c401ee4a7959c0118b462e/html5/thumbnails/26.jpg)
http://www.amazedev.com/stencils/
Стенсилы
![Page 27: Обзор средств прототипирования веб-сайтов](https://reader033.vdocuments.pub/reader033/viewer/2022050905/54c401ee4a7959c0118b462e/html5/thumbnails/27.jpg)
Среда
http://www.gui.ru/copylove/xaml-for-interction-design/
Microsoft Expression
![Page 28: Обзор средств прототипирования веб-сайтов](https://reader033.vdocuments.pub/reader033/viewer/2022050905/54c401ee4a7959c0118b462e/html5/thumbnails/28.jpg)
Среда
http://labs.adobe.com/technologies/flashcatalyst/
Adobe Flash Catalyst
![Page 29: Обзор средств прототипирования веб-сайтов](https://reader033.vdocuments.pub/reader033/viewer/2022050905/54c401ee4a7959c0118b462e/html5/thumbnails/29.jpg)
http://habrahabr.ru/blogs/ui_design_and_usability/35162/http://community.livejournal.com/ru_ucdesign/457798.html
Используемые инструменты
![Page 30: Обзор средств прототипирования веб-сайтов](https://reader033.vdocuments.pub/reader033/viewer/2022050905/54c401ee4a7959c0118b462e/html5/thumbnails/30.jpg)
http://www.usability.by
СПАСИБО ЗА ВНИМАНИЕВОПРОСЫ?
http://www.amazedev.comhttp://www.1point.ru
В презентации использовались изображения : Rob Enslin (http://www.flickr.com/photos/doos/3596580004/)
Lloyd Budd (http://www.flickr.com/photos/foolswisdom/43144375/)