{"id":3283,"date":"2013-03-04T08:40:02","date_gmt":"2013-03-04T07:40:02","guid":{"rendered":"http:\/\/flaven.fr\/?p=3283"},"modified":"2013-09-24T05:02:04","modified_gmt":"2013-09-24T03:02:04","slug":"mockflow-wireframe-maquette-realiser-des-ecrans-interactifs-avec-mockflow","status":"publish","type":"post","link":"https:\/\/flaven.fr\/2013\/03\/mockflow-wireframe-maquette-realiser-des-ecrans-interactifs-avec-mockflow\/","title":{"rendered":"Mockflow, wireframe, maquette &#8211; R\u00e9aliser des \u00e9crans interactifs avec Mockflow"},"content":{"rendered":"<p>\t<!--  Mockflow, wireframe, maquette - R\u00e9aliser des \u00e9crans interactifs avec Mockflow  --><br \/>\n\t<!--  OmniGraffle, Balsamiq, Axure, Mockups, wireframes, Diagramming, charting, visualization, android, iPad, iOS, mobile, tablette, UX, weddoc, webdocumnetaire, HTML5  --><\/p>\n<p>Collaboratif, Intuitif, Compatible HTML5 et d&#8217;autres formats, Riche graphiquement, Ergonomique en clair tous les b\u00e9n\u00e9fices du logiciel bien pens\u00e9 et qui est qui plus est en SaaS ! Une r\u00e9ussite, ce <code>Mockflow<\/code>.<br \/>\nCet outil peut tout aussi bien servir \u00e0 concevoir des applications mobiles, sites web, narrations interactives et enrichies, des webdocumentaires&#8230; C&#8217;est une arme suppl\u00e9mentaire \u00e0 votre arsenal pour \u00eatre sur d&#8217;\u00eatre compris avec le langage universel que devient le <code>UX design<\/code><\/p>\n<p>Les graphistes (<code>merci Alain<\/code>) ne s&#8217;y sont d&#8217;ailleurs pas tromp\u00e9s comme d&#8217;ailleurs certains d\u00e9veloppeurs chevronn\u00e9s (<code>&#x441;&#x43F;&#x430;&#x441;&#x438;&#x431;&#x43E; Yakov<\/code>)<\/p>\n<p><i>A noter, qu&#8217;il existe un autre tr\u00e8s bon logiciel nomm\u00e9 <code>Moqups<\/code>, totalement gratuit et totalement HTML5.<\/i><\/p>\n<p>Vous pouvez d&#8217;ailleurs comparer ce <code>Mockflow<\/code> et ce <code>Moqups<\/code>  aux deux autres logiciels, principaux concurrents du march\u00e9 en vous reportant aux deux articles consacr\u00e9s aux logiciels de <code>wireframe<\/code> et de maquettage.<\/p>\n<ul>\n<li>Balsamiq, Mockups, Mobile \u2013 Faire un mock-up ou une maquette rapide des \u00e9crans d\u2019une application mobile avec Balsamiq<br \/><a href=\"http:\/\/social.hecube.net\/2013\/02\/balsamiq-mockups-mobile-faire-un-mock-up-ou-une-maquette-rapide-des-ecrans-dune-application-mobile-avec-balsamiq\/\" target=\"_blank\">http:\/\/social.hecube.net\/2013\/02\/balsamiq-mockups-mobile-faire-un-mock-up-ou-une-maquette-rapide-des-ecrans-dune-application-mobile-avec-balsamiq\/<\/a><\/li>\n<li>Wireframes, 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<\/ul>\n<p><b>La baseline de <code>Moqups<\/code><\/b><\/p>\n<blockquote><p>\n\tThe most stunning HTML5 App for creating high fidelity, resolution independent SVG mockups and wireframes!\n<\/p><\/blockquote>\n<p><i>Source : <a href=\"http:\/\/www.mockflow.com\/\" target=\"_blank\">http:\/\/www.mockflow.com\/<\/a><\/i><\/p>\n<h4>Les principaux \u00e9crans de <code>Mockflow<\/code><\/h4>\n<p>Il est inutile de faire un tutorial, le logiciel parle de lui-m\u00eame, il ne vous reste donc qu&#8217;\u00e0 d\u00e9brider votre cr\u00e9ativit\u00e9.<\/p>\n<p><b>Les diff\u00e9rents &#8220;packages&#8221; disponibles<\/b><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2013\/03\/using_www_mockflow_com_1.jpg\" alt=\"Mockflow, wireframe, maquette - R\u00e9aliser des \u00e9crans interactifs avec Mockflow\" width=\"500\" height=\"313\" \/><\/p>\n<p><b>L&#8217;offre tarifaire si vous abandonnez la version payante<\/b><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2013\/03\/using_www_mockflow_com_2.jpg\" alt=\"Mockflow, wireframe, maquette - R\u00e9aliser des \u00e9crans interactifs avec Mockflow\" width=\"500\" height=\"313\" \/><\/p>\n<p><b>Des biblioth\u00e8ques de mod\u00e8les en pagaille<\/b><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2013\/03\/using_www_mockflow_com_3.jpg\" alt=\"Mockflow, wireframe, maquette - R\u00e9aliser des \u00e9crans interactifs avec Mockflow\" width=\"500\" height=\"313\" \/><\/p>\n<p><b>Deux \u00e9crans iPhone issus d&#8217;un mod\u00e8le<\/b><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2013\/03\/using_www_mockflow_com_4.jpg\" alt=\"Mockflow, wireframe, maquette - R\u00e9aliser des \u00e9crans interactifs avec Mockflow\" width=\"500\" height=\"313\" \/><\/p>\n<p><b>La sauvegarde en ligne<\/b><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2013\/03\/using_www_mockflow_com_5.jpg\" alt=\"Mockflow, wireframe, maquette - R\u00e9aliser des \u00e9crans interactifs avec Mockflow\" width=\"500\" height=\"313\" \/><\/p>\n<p><b>Un choix s\u00e9lectif des \u00e9crans pour faire diff\u00e9rents documents<\/b><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2013\/03\/using_www_mockflow_com_6.jpg\" alt=\"Mockflow, wireframe, maquette - R\u00e9aliser des \u00e9crans interactifs avec Mockflow\" width=\"500\" height=\"313\" \/><\/p>\n<p><b>Une multitude de format d&#8217;export (PDF, Images, Word, PowerPoint, HTML5), du grand art !<\/b><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2013\/03\/using_www_mockflow_com_7.jpg\" alt=\"Mockflow, wireframe, maquette - R\u00e9aliser des \u00e9crans interactifs avec Mockflow\" width=\"500\" height=\"313\" \/><\/p>\n<p><b>Notre \u00e9cran export\u00e9 en <code>.png<\/code><\/b><br \/>\n<img decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2013\/03\/using_www_mockflow_com_sample_small.png\" alt=\"Mockflow, wireframe, maquette - R\u00e9aliser des \u00e9crans interactifs avec Mockflow\" idth=\"600\" height=\"560\" \/><\/p>\n<h2>En savoir plus<\/h2>\n<ul>\n<li>MockFlow &#8211; Online Wireframe Tool<br \/><a href=\"http:\/\/www.mockflow.com\/\" target=\"_blank\">http:\/\/www.mockflow.com\/<\/a><\/li>\n<li>Online Vector Based Mockup &#038; Wireframing Tool &#8211; Moqups<br \/><a href=\"https:\/\/moqups.com\/#!\/\" target=\"_blank\">https:\/\/moqups.com\/#!\/<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Collaboratif, Intuitif, Compatible HTML5 et d&#8217;autres formats, Riche graphiquement, Ergonomique en clair tous les b\u00e9n\u00e9fices du logiciel bien pens\u00e9 et qui est qui plus est&hellip; <\/p>\n<p class=\"text-center\"><a href=\"https:\/\/flaven.fr\/2013\/03\/mockflow-wireframe-maquette-realiser-des-ecrans-interactifs-avec-mockflow\/\" class=\"more-link\">Continue reading &rarr; <span class=\"screen-reader-text\">Mockflow, wireframe, maquette &#8211; R\u00e9aliser des \u00e9crans interactifs avec Mockflow<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":9373,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"bf_ai_meta_description":"Mockflow cr\u00e9e des \u00e9crans interactifs pour applications mobiles, sites web et webdocumentaires. Collaboratif, intuitif, riche graphiquement, ergonomique, compatible HTML5.","bf_ai_og_title":"Mockflow, wireframe, maquette","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":[3440,3442,3444,3445,3447,3450,3451,3435,3452],"tags":[2238,513,465,514,516,2185,518,426,31,520,521,34,2192,523,543,477],"class_list":["post-3283","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-cloud-infrastructure","category-mobile-devices","category-programming-databases","category-seo-web-marketing","category-technology-trends","category-ux-product-design","category-web-design-front-end","category-web-development","category-wordpress-cms","tag-android","tag-axure","tag-balsamiq","tag-charting","tag-diagramming","tag-html5","tag-ios","tag-ipad","tag-mobile","tag-mockups","tag-omnigraffle","tag-tablette","tag-ux-experience-utilisateur","tag-visualization","tag-weddoc","tag-wireframes"],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p3Vuhl-QX","jetpack_featured_media_url":"https:\/\/flaven.fr\/wp-content\/uploads\/2013\/03\/using_www_mockflow_com_b_bf.jpg","_links":{"self":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/3283","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=3283"}],"version-history":[{"count":1,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/3283\/revisions"}],"predecessor-version":[{"id":9374,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/3283\/revisions\/9374"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/media\/9373"}],"wp:attachment":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/media?parent=3283"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/categories?post=3283"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/tags?post=3283"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}