Prototypes - Exemples

EXEMPLES DE PROTOTYPES - Navigation, storyboard et fil de fer

Tous les écrans nommés et connectés - Diagramme de navigation

http://msdn.microsoft.com/en-us/library/vstudio/aa970446%28v=vs.100%29.aspx - Navigation d’un wizard

http://blog.jerrynixon.com/2013/09/windows-81-says-forget-all-that-design.html - Navigation de Windows 8

http://themobileexperience.macadamian.com/2010/05/iphone-view-controllers.html - Navigation d’un mobile

http://www.bbc.co.uk/schools/gcsebitesize/dida/using_ict/onscreen_publicationsrev1.shtml - Navigation d’un site scolaire

http://jerw.ca/portfolio-items/stratford-culinary-festival-communications-strategy/ - Savour Stratford App

http://www.parasiticplants.siu.edu/Navigate.html - Site sur les Plantes parasites

http://student.csuci.edu/~alyssa.orton583/homework/homework_04_designdocument/coding/html/designdoc.html - Coolhaus en allemand

http://ryanquick.wordpress.com/2008/12/03/flow-diagram-for-website-navigation-links/ - Diagramme à la main

https://developers.google.com/analytics/resources/concepts/gaConceptsAccounts - Google – Les profils des comptes

Un scénario d’une utilisation avec les détails… une histoire ! - Storyboard

http://grouplab.cpsc.ucalgary.ca/saul/681/1998/prototyping/survey.html - Storyboard pour une recherche avec aide

http://www.monicalamb.com/blog3/portfolio/mobile-app-ios6/ - Vegan App

http://spin.atomicobject.com/2014/03/06/multiple-ios-storyboards/ - IOS storyboard

http://vis.berkeley.edu/courses/cs160-fa06/wiki/index.php/ContextualInquiry-Group:The_Anototators - Histoire avec imagerie médicale

http://vis.berkeley.edu/courses/cs160-fa06/wiki/index.php/ContextualInquiry-Group:The_Anototators - Histoire avec imagerie médicale

http://www.americalearningmedia.net/edicion-001/245-solutions-a-apps/3308-ten-tools-storyboarding - Apps comme Paper by 53, Bamboo Paper and SketchBook Express dans iPad

http://www.targetprocess.com/articles/visual-specifications.html - Exemple à la main

http://courses.csail.mit.edu/6.831/wiki/index.php?title=Projects/MixrsNElixrs - MixrsNElixrs

http://msdn.microsoft.com/en-us/library/jj159334.aspx - Exemple de Microsoft

http://www.s3-id.com/products/elocator/elocator-sea-marshall-personal-locator-beacon/ - RFID et hélicoptère

http://www.ibm.com/developerworks/rational/library/06/0404_donatelli/ - Storyboard selon IBM

http://uxmag.com/articles/book-excerpt-the-user-experience-team-of-one - Un autre exemple de storyboard

Une image détaillée d’un écran du logiciel ou site web. - Parfois cette image est un squelette, parfois c’est un design non-terminé. - Maquette (mock-up)

http://www.modernanalyst.com/Resources/Articles/tabid/115/articleType/ArticleView/articleId/2669/A-Prototype-is-Nothing-More-Than-a-Picture.aspx - Une maquette n’est qu’une image

http://rules.ssw.com.au/Management/RulesToSuccessfulProjects/Pages/SpecificationByMockUp.aspx - On peut la dessiner à la main

Des écrans détaillés avec une navigation. - Sans la navigation = Mock-up ou Maquette - Cliquable ou flèches = Wireframe ou Fil de fer - Fil de fer (wireframe)

http://www.boardofstudies.nsw.edu.au/syllabus_hsc/ipt-specifications.html - Un fil de fer non-cliquable

http://rules.ssw.com.au/Management/RulesToSuccessfulProjects/Pages/SpecificationByMockUp.aspx - Une page d’un fil de fer

http://www.infoq.com/articles/wireframes-start-development-projects - Fil de fer de CleverCRM à la main

http://www.infoq.com/articles/wireframes-start-development-projects - Fil de fer de CleverCRM avec logiciel

http://wireframesketcher.com/ - http://stackoverflow.com/questions/295589/what-program-should-i-use-to-mock-up-guis - Des outils de fil de fer

http://www.onextrapixel.com/2012/05/11/7-non-web-based-wireframe-tools/ - Des outils de fil de fer

Certains outils donnent plusieurs de ces prototypes à la fois - Combo !