{"id":3154,"date":"2013-02-22T18:32:27","date_gmt":"2013-02-22T17:32:27","guid":{"rendered":"http:\/\/flaven.fr\/?p=3154"},"modified":"2013-09-24T05:17:14","modified_gmt":"2013-09-24T03:17:14","slug":"balsamiq-mockups-mobile-faire-un-mock-up-ou-une-maquette-rapide-des-ecrans-dune-application-mobile-avec-balsamiq","status":"publish","type":"post","link":"https:\/\/flaven.fr\/2013\/02\/balsamiq-mockups-mobile-faire-un-mock-up-ou-une-maquette-rapide-des-ecrans-dune-application-mobile-avec-balsamiq\/","title":{"rendered":"Balsamiq, Mockups, Mobile &#8211; Faire un mock-up ou une maquette rapide des \u00e9crans d&#8217;une application mobile avec Balsamiq"},"content":{"rendered":"<p><!--  Balsamiq, Mockups, Mobile - Faire un mock-up ou une maquette rapide des \u00e9crans d'une application mobile avec Balsamiq --><br \/>\n<!--  OmniGraffle, Balsamiq, Axure, Mockups, mock-up, wireframes, Diagramming, charting, visualization, android, iPad, iOS, mobile, tablette, UX, design, gestion de projet, agile, scrum, iPad, apple, google, iPhone --><\/p>\n<p>R\u00e9aliser de mani\u00e8re agile, intuitive et r\u00e9active les diff\u00e9rentes interfaces d&#8217;une future application mobile ou une application web, voil\u00e0 la promesse tenue par des logiciels de &#8220;mock-up&#8221; comme <code>OmniGraffle<\/code>, <code>Balsamiq<\/code>, <code>Axure<\/code>. Dans cet article, on a choisi pour designer rapidement les services d&#8217;une application mobile, le logiciel <code>Balsamiq<\/code> qui fournit une abondante iconographie pour r\u00e9aliser les \u00e9crans de mobile.<\/p>\n<p>On avait \u00e0 peu de choses pr\u00e8s tent\u00e9 le m\u00eame exercice avec <code>Axure<\/code> dans un article pr\u00e9c\u00e8dent mais dans le cas pr\u00e9sent, il s&#8217;agit de r\u00e9aliser un plus grand nombre d&#8217;\u00e9crans en un minimum de temps afin donner \u00e0 tous les parties prenantes du projet mobile, une vue synth\u00e9tique rapide et ais\u00e9ment modifiable. Dans ce cas pr\u00e9cis, <code>Balsamiq<\/code> se r\u00e9v\u00e8le \u00e9minemment efficace.<\/p>\n<p>Pour voir le comparatif avec <code>Axure<\/code>, voici le lien vers l&#8217;article.<\/p>\n<ul>\n<li>\n\tWireframes, prototypes interactifs, prototypage, UX \u2013 Introduction \u00e0 Axure RP 6<br \/><a href=\"http:\/\/social.hecube.net\/2012\/10\/wireframes-prototypes-interactifs-prototypage-ux-introduction-a-axure-rp-6\/\" target=\"_blank\">http:\/\/social.hecube.net\/2012\/10\/wireframes-prototypes-interactifs-prototypage-ux-introduction-a-axure-rp-6\/<\/a><\/li>\n<\/li>\n<\/ul>\n<h4>Trouver et charger les bons fichiers<\/h4>\n<p>Il est important de trouver les bonnes ressources <code>.bmml<\/code> pour maquetter rapidement et tirer profit au maximum des visuels et objets graphiques disponibles sous <code>Balsamiq<\/code>. Pour r\u00e9aliser les \u00e9crans de notre application, nous avons utiliser 4 fichiers <code>.bmml<\/code> principaux.<\/p>\n<ol>\n<li>Android 4 Controls.bmml<\/li>\n<li>Android Controls.bmml<\/li>\n<li>HTC Desire, v.2.bmml<\/li>\n<li>HTC Desire.bmml\t<\/li>\n<\/ol>\n<p><i>Source : <a href=\"https:\/\/mockupstogo.mybalsamiq.com\/projects\" target=\"_blank\">https:\/\/mockupstogo.mybalsamiq.com\/projects<\/a><\/i><\/p>\n<h4>Les \u00e9crans de notre application<\/h4>\n<p>Sur les \u00e9crans figurent des post-it qui permettent de donner des explications compl\u00e9mentaires aux \u00e9crans aux-m\u00eames, ce qui compense avantageusement la n\u00e9cessit\u00e9 de faire parfois tous les ecrans avec des variations infimes pour bien d\u00e9tailler l&#8217;exp\u00e9rience utilisateur. <\/p>\n\n<h2>En savoir plus<\/h2>\n<h4>Ressources mockup et wireframes pour <code>Android<\/code>, <code>iOS<\/code><\/h4>\n<ul>\n<li>iPad GUI PSD (Retina Display)<br \/><a href=\"http:\/\/www.teehanlax.com\/downloads\/ipad-gui-psd-retina-display\/\" target=\"_blank\">http:\/\/www.teehanlax.com\/downloads\/ipad-gui-psd-retina-display\/<\/a><\/li>\n<li>Inspirational and Useful Resources for App Designers<br \/><a href=\"http:\/\/www.awwwards.com\/inspirational-and-useful-resources-for-app-designers.html\" target=\"_blank\">http:\/\/www.awwwards.com\/inspirational-and-useful-resources-for-app-designers.html<\/a><\/li>\n<li>iPad Axure Widget Library<br \/><a href=\"http:\/\/www.kreativr.de\/ipad-axure-widget-library\/\" target=\"_blank\">http:\/\/www.kreativr.de\/ipad-axure-widget-library\/<\/a><\/li>\n<li>Creating Great iPhone and iPad Mockups<br \/><a href=\"http:\/\/www.iosdevnotes.com\/2011\/03\/creating-great-iphone-ipad-mockups\/\" target=\"_blank\">http:\/\/www.iosdevnotes.com\/2011\/03\/creating-great-iphone-ipad-mockups\/<\/a><\/li>\n<li>OmniGraffle UX Template<br \/><a href=\"http:\/\/konigi.com\/tools\/omnigraffle-ux-template\" target=\"_blank\">http:\/\/konigi.com\/tools\/omnigraffle-ux-template<\/a><\/li>\n<li>iOS Design Stencils for OmniGraffle<br \/><a href=\"http:\/\/www.morford.org\/iphoneosdesignstencil\/\" target=\"_blank\">http:\/\/www.morford.org\/iphoneosdesignstencil\/<\/a><\/li>\n<li>Awesome OmniGraffle stencils | Graffletopia<br \/><a href=\"http:\/\/www.graffletopia.com\/\" target=\"_blank\">http:\/\/www.graffletopia.com\/<\/a><\/li>\n<li>Wireframes Magazine<br \/><a href=\"http:\/\/wireframes.linowski.ca\/\" target=\"_blank\">http:\/\/wireframes.linowski.ca\/<\/a><\/li>\n<\/ul>\n<h4>Exemples, mod\u00e8les et bonnes pratiques pour des application <code>Android<\/code><\/h4>\n<ul>\n<li>15 beautiful Android app designs<br \/><a href=\"http:\/\/www.creativebloq.com\/app-design\/15-beautiful-android-app-ui-designs-11121271\" target=\"_blank\">http:\/\/www.creativebloq.com\/app-design\/15-beautiful-android-app-ui-designs-11121271<\/a><\/li>\n<li>Devices and Displays<br \/><a href=\"http:\/\/developer.android.com\/design\/style\/devices-displays.html\" target=\"_blank\">http:\/\/developer.android.com\/design\/style\/devices-displays.html<\/a><\/li>\n<li>Metrics and Grids<br \/><a href=\"http:\/\/developer.android.com\/design\/style\/metrics-grids.html\" target=\"_blank\">http:\/\/developer.android.com\/design\/style\/metrics-grids.html<\/a><\/li>\n<li>40+ Beautiful Android Application Interfaces and Icons<br \/><a href=\"http:\/\/android.appstorm.net\/roundups\/40-beautiful-android-application-interfaces-and-icons\/\" target=\"_blank\">http:\/\/android.appstorm.net\/roundups\/40-beautiful-android-application-interfaces-and-icons\/<\/a><\/li>\n<li>Designing For Android<br \/><a href=\"http:\/\/coding.smashingmagazine.com\/2011\/06\/30\/designing-for-android\" target=\"_blank\">http:\/\/coding.smashingmagazine.com\/2011\/06\/30\/designing-for-android\/<\/a><\/li>\n<li>Outil de pr\u00e9visualisation pour mobile websites, design mockups, and local HTML on Mac or PC.<br \/><a href=\"http:\/\/www.springbox.com\/mobilizer\/\" target=\"_blank\">http:\/\/www.springbox.com\/mobilizer\/<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>R\u00e9aliser de mani\u00e8re agile, intuitive et r\u00e9active les diff\u00e9rentes interfaces d&#8217;une future application mobile ou une application web, voil\u00e0 la promesse tenue par des logiciels&hellip; <\/p>\n<p class=\"text-center\"><a href=\"https:\/\/flaven.fr\/2013\/02\/balsamiq-mockups-mobile-faire-un-mock-up-ou-une-maquette-rapide-des-ecrans-dune-application-mobile-avec-balsamiq\/\" class=\"more-link\">Continue reading &rarr; <span class=\"screen-reader-text\">Balsamiq, Mockups, Mobile &#8211; Faire un mock-up ou une maquette rapide des \u00e9crans d&#8217;une application mobile avec Balsamiq<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":9381,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"bf_ai_meta_description":"Balsamiq permet de cr\u00e9er rapidement des mockups d'\u00e9crans d'applications mobiles. Utilisez des ic\u00f4nes vari\u00e9es pour des interfaces r\u00e9actives et modifiables.","bf_ai_og_title":"Mockups mobiles avec Balsamiq","footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[3442,3444,3450,3451,3435],"tags":[2194,2238,223,513,465,514,515,516,517,2214,518,426,249,31,519,520,521,522,34,2192,523,475,477],"class_list":["post-3154","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-mobile-devices","category-programming-databases","category-ux-product-design","category-web-design-front-end","category-web-development","tag-agile","tag-android","tag-apple","tag-axure","tag-balsamiq","tag-charting","tag-design","tag-diagramming","tag-gestion-de-projet","tag-google","tag-ios","tag-ipad","tag-iphone","tag-mobile","tag-mock-up","tag-mockups","tag-omnigraffle","tag-scrum","tag-tablette","tag-ux-experience-utilisateur","tag-visualization","tag-wireframe","tag-wireframes"],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p3Vuhl-OS","jetpack_featured_media_url":"https:\/\/flaven.fr\/wp-content\/uploads\/2013\/02\/mobile_viewer_and_design_b_bf.jpg","_links":{"self":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/3154","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/comments?post=3154"}],"version-history":[{"count":1,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/3154\/revisions"}],"predecessor-version":[{"id":9382,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/3154\/revisions\/9382"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/media\/9381"}],"wp:attachment":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/media?parent=3154"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/categories?post=3154"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/tags?post=3154"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}