{"id":3421,"date":"2013-03-19T09:18:32","date_gmt":"2013-03-19T08:18:32","guid":{"rendered":"http:\/\/flaven.fr\/?p=3421"},"modified":"2013-03-19T09:18:32","modified_gmt":"2013-03-19T08:18:32","slug":"ux-wireframe-stencil-omnigraffle-creer-une-bibliotheque-stencil-omnigraffle-pour-faire-des-maquettes-des-ecrans-google-tv","status":"publish","type":"post","link":"https:\/\/flaven.fr\/2013\/03\/ux-wireframe-stencil-omnigraffle-creer-une-bibliotheque-stencil-omnigraffle-pour-faire-des-maquettes-des-ecrans-google-tv\/","title":{"rendered":"UX, Wireframe, Stencil, OmniGraffle &#8211; Cr\u00e9er une biblioth\u00e8que (stencil) OmniGraffle pour faire des maquettes des \u00e9crans Google TV"},"content":{"rendered":"<p><!-- #UX, #LeanUX, #Wireframe, #Stencil #OmniGraffle pour des \u00e9crans #Google #TV --><\/p>\n<p><!--  UX, Wireframe, Stencil, OmniGraffle - Cr\u00e9er une biblioth\u00e8que (stencil) OmniGraffle pour faire des maquettes des \u00e9crans Google TV   --><br \/>\n\t<!--  UX, Wireframe, Stencil, OmniGraffle, Mac, local, agile, V\u00e9locit\u00e9, Lean UX, collaborer, d\u00e9veloppement, application, Android, Google TV, HTML5, javascript, IHM, \u00e9cran, balsamiq, Axure, mockups, mockup --><\/p>\n<p>\tApr\u00e8s avoir con\u00e7u mollement une librairie pour Axure pour faire du wireframe des \u00e9crans d&#8217;une application de Google TV, on se devait de porter la chose sur un autre outil de wireframe \u00e0 savoir <code>OmniGraffle<\/code> en attendant <code>Balsamiq<\/code> qui est aussi sur les starting-blocks ! De fait on a mis au banc d&#8217;essai quelques-uns de tr\u00e8s nombreux outils de wireframing, mine de rien, <code>OmniGraffle, Axure, Balsamiq<\/code> !<\/p>\n<p>A la diff\u00e9rence de deux autres logiciels, OmniGraffle offre une synergie possible avec Illustrator, comme Flash en son temps ! <strong>C&#8217;est finalement la m\u00e9tamorphose de graphiste \u00e0 UX designer : en cr\u00e9ant des objets dans Illustrator, il est possible de les importer dans OmniGraffle au format PDF. OmniGraffle r\u00e9cup\u00e8re alors les PDF tout en conservant le caract\u00e8re vectoris\u00e9 des objets ainsi cr\u00e9es sous Illustrator.<\/strong><\/p>\n<p>Toutefois, nous n&#8217;avons absolument proc\u00e9d\u00e9 de la sorte dans l&#8217;article suivant.  Il existe en effet mille et une fa\u00e7ons de d&#8217;aborder le choix du logiciel pour faire des wireframes, Powerpoint, Photoshop ou Fireworks peuvent faire l&#8217;affaire ! <code>Wireframe, it ain't rocket science<\/code> comme disent les pragmatiques am\u00e9ricains, on est donc en droit d&#8217;utiliser le logiciel de son choix du moment que l&#8217;on pense produit fini et UX, avec une petite dose de collaboration aussi, Agile l\u00e0 encore. Mieux m\u00eame <code>LeanUX<\/code>, syncr\u00e9tisme astucieux entre l&#8217;orientation UX c&#8217;est \u00e0 dire la n\u00e9cessit\u00e9 de d\u00e9livrer une exp\u00e9rience, une \u00e9motion mais dans un cycle humainement et financi\u00e8rement tenable.<\/p>\n<p><i>Source : Lire au sujet du <code>Lean UX<\/code>, l&#8217;excellente expertise de Jeff Gothelf qui en a m\u00eame fait un livre.<br \/><a href=\"http:\/\/www.jeffgothelf.com\/blog\/\" target=\"_blank\">http:\/\/www.jeffgothelf.com\/blog\/<\/a><\/i><\/p>\n<blockquote><p>\n\tPour plus d&#8217;information sur l&#8217;exigence de penser <code>Produit Fini<\/code> voir l&#8217;article de ce blog sur Agile et Scrum : <\/p>\n<ul>\n<li>Agile, Scrum, M\u00e9thodologie \u2013 Un tour d\u2019horizon rapide sur la m\u00e9thode agile<br \/><a href=\"http:\/\/social.hecube.net\/2013\/03\/agile-scrum-methodologie-un-tour-dhorizon-rapide-sur-la-methode-agile\/\" target=\"_blank\">http:\/\/social.hecube.net\/2013\/03\/agile-scrum-methodologie-un-tour-dhorizon-rapide-sur-la-methode-agile\/<\/a><\/li>\n<\/ul>\n<\/blockquote>\n<h4>La marche \u00e0 suivre pour cr\u00e9er une librairie <code>.gstencil<\/code><\/h4>\n<p><b>Cr\u00e9er ces objets sous OmniGraffle ou&#8230; Illustrator via un export PDF<\/b><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2013\/03\/build_stencil_omnigraffle_1.jpg\" alt=\"UX, Wireframe, Stencil, OmniGraffle - Cr\u00e9er une biblioth\u00e8que (stencil) OmniGraffle pour faire des maquettes des \u00e9crans Google TV \" width=\"500\" height=\"313\" \/><\/p>\n<p><b>Le mieux est de grouper vos \u00e9l\u00e9ments pour que les utilisateurs puissent charger un \u00e9cran finalis\u00e9 c&#8217;est souvent le plus intuitif&#8230; enfin c&#8217;est vous qui voyez.<\/b><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2013\/03\/build_stencil_omnigraffle_2.jpg\" alt=\"UX, Wireframe, Stencil, OmniGraffle - Cr\u00e9er une biblioth\u00e8que (stencil) OmniGraffle pour faire des maquettes des \u00e9crans Google TV \" width=\"500\" height=\"313\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2013\/03\/build_stencil_omnigraffle_3.jpg\" alt=\"UX, Wireframe, Stencil, OmniGraffle - Cr\u00e9er une biblioth\u00e8que (stencil) OmniGraffle pour faire des maquettes des \u00e9crans Google TV \" width=\"500\" height=\"313\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2013\/03\/build_stencil_omnigraffle_4.jpg\" alt=\"UX, Wireframe, Stencil, OmniGraffle - Cr\u00e9er une biblioth\u00e8que (stencil) OmniGraffle pour faire des maquettes des \u00e9crans Google TV \" width=\"500\" height=\"313\" \/><\/p>\n<h4>Installer votre librairie <code>.gstencil<\/code><\/h4>\n<p>En double-cliquant sur le fichier <code>.gstencil<\/code>, vous allez lancer l&#8217;installation de la librairie OmniGraffle d\u00e9di\u00e9 \u00e0 la cr\u00e9ation d&#8217;\u00e9cran Google TV que nous venons d&#8217;exporter via un fichier <code>OmniGraffle<\/code> standard.<\/p>\n<p>\t<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2013\/03\/install_stencil_omnigraffle_1.jpg\" alt=\"UX, Wireframe, Stencil, OmniGraffle - Cr\u00e9er une biblioth\u00e8que (stencil) OmniGraffle pour faire des maquettes des \u00e9crans Google TV \" width=\"500\" height=\"313\" \/><\/p>\n<p>\t<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2013\/03\/install_stencil_omnigraffle_2.jpg\" alt=\"UX, Wireframe, Stencil, OmniGraffle - Cr\u00e9er une biblioth\u00e8que (stencil) OmniGraffle pour faire des maquettes des \u00e9crans Google TV \" width=\"500\" height=\"313\" \/><\/p>\n<p>\t<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2013\/03\/install_stencil_omnigraffle_3.jpg\" alt=\"UX, Wireframe, Stencil, OmniGraffle - Cr\u00e9er une biblioth\u00e8que (stencil) OmniGraffle pour faire des maquettes des \u00e9crans Google TV \" width=\"500\" height=\"313\" \/><\/p>\n<p><b>Une fois install\u00e9e, les diff\u00e9rents objets\/\u00e9crans de la librairie sont disponibles dans OmniGraffle<\/b><br \/>\n\t<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2013\/03\/install_stencil_omnigraffle_4.jpg\" alt=\"UX, Wireframe, Stencil, OmniGraffle - Cr\u00e9er une biblioth\u00e8que (stencil) OmniGraffle pour faire des maquettes des \u00e9crans Google TV \" width=\"500\" height=\"313\" \/><\/p>\n<p><i>Note : Les fichiers <code>.gstencil<\/code> comme notre librairie viennent s&#8217;installer \u00e0 cet endroit <code>\/Users\/votre-nom-d-utilisateur\/Library\/Application Support\/The Omni Group\/OmniGraffle\/Stencils<\/code> sur un Mac.<\/i><\/p>\n<p><b>La m\u00eame librairie Google TV au format <code>.gstencil<\/code> mais sous Balsamiq<\/b><br \/>\n\t<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2013\/03\/Google-TV-screens_and_buttons-v5_small.jpg\" width=\"600\" height=\"385\" alt=\"UX, Wireframe, Stencil, OmniGraffle - Cr\u00e9er une biblioth\u00e8que (stencil) OmniGraffle pour faire des maquettes des \u00e9crans Google TV \"><\/p>\n<blockquote><p>\n\tLa version <i>&#8220;\u00e0 la hache&#8221;<\/i> de cette librairie est \u00e0 t\u00e9l\u00e9charger au format <code>.zip<\/code> ici. Pour fonctionner, elle n\u00e9cessite d&#8217;utiliser OmniGraffle Pro 5.4.2 ou +. <a href=\"http:\/\/social.hecube.net\/wp-content\/uploads\/2013\/03\/OmniGraffle_Google-TV-buttons-v1_stencil_4.zip\" target=\"_blank\">T\u00e9l\u00e9charger OmniGraffle_Google-TV-buttons-v1_stencil_4.zip<\/a><\/p>\n<\/blockquote>\n<h2>En savoir plus<\/h2>\n<ul>\n<li>UX, Wireframe, Widget Library, Axure \u2013 Cr\u00e9er une biblioth\u00e8que Widget Library Axure pour faire des maquettes des \u00e9crans Google TV<br \/><a href=\"http:\/\/social.hecube.net\/2013\/03\/ux-wireframe-widget-library-axure-creer-une-bibliotheque-widget-library-axure-pour-faire-des-maquettes-des-ecrans-google-tv\/\" target=\"_blank\">http:\/\/social.hecube.net\/2013\/03\/ux-wireframe-widget-library-axure-creer-une-bibliotheque-widget-library-axure-pour-faire-des-maquettes-des-ecrans-google-tv\/<\/a><\/li>\n<li>Wireframes in Omnigraffle 5 (la synergie Illustrator &#038; OmniGraffle)<br \/><a href=\"http:\/\/pathfindersoftware.com\/2009\/04\/wireframes-in-omnigraffle-5\/\" target=\"_blank\">http:\/\/pathfindersoftware.com\/2009\/04\/wireframes-in-omnigraffle-5\/<\/a><\/li>\n<li>Awesome OmniGraffle stencils | Graffletopia (la sainte chapelle du <code>stencils<\/code> ou la Mecque du <code>stencils<\/code>)<br \/><a href=\"https:\/\/www.graffletopia.com\/\" target=\"_blank\">https:\/\/www.graffletopia.com\/<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Apr\u00e8s avoir con\u00e7u mollement une librairie pour Axure pour faire du wireframe des \u00e9crans d&#8217;une application de Google TV, on se devait de porter la&hellip; <\/p>\n<p class=\"text-center\"><a href=\"https:\/\/flaven.fr\/2013\/03\/ux-wireframe-stencil-omnigraffle-creer-une-bibliotheque-stencil-omnigraffle-pour-faire-des-maquettes-des-ecrans-google-tv\/\" class=\"more-link\">Continue reading &rarr; <span class=\"screen-reader-text\">UX, Wireframe, Stencil, OmniGraffle &#8211; Cr\u00e9er une biblioth\u00e8que (stencil) OmniGraffle pour faire des maquettes des \u00e9crans Google TV<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":9369,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"bf_ai_meta_description":"Cr\u00e9ez une biblioth\u00e8que OmniGraffle pour des maquettes Google TV. Utilisez Illustrator pour des objets UX et des wireframes pr\u00e9cis.","bf_ai_og_title":"Cr\u00e9er une biblioth\u00e8que OmniGraffle","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,3447,3448,3449,3450,3451,3435],"tags":[2194,2238,163,513,465,551,138,562,547,2185,13,567,226,74,563,141,2210,532,520,521,565,2192,558,475],"class_list":["post-3421","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-mobile-devices","category-programming-databases","category-technology-trends","category-tools-productivity","category-tutorials-how-to","category-ux-product-design","category-web-design-front-end","category-web-development","tag-agile","tag-android","tag-application","tag-axure","tag-balsamiq","tag-collaborer","tag-developpement","tag-ecran","tag-google-tv","tag-html5","tag-ihm","tag-illustrator","tag-javascript","tag-jeff-gothelf","tag-lean-ux","tag-local","tag-mac","tag-mockup","tag-mockups","tag-omnigraffle","tag-stencil","tag-ux-experience-utilisateur","tag-velocite","tag-wireframe"],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p3Vuhl-Tb","jetpack_featured_media_url":"https:\/\/flaven.fr\/wp-content\/uploads\/2013\/03\/build_stencil_omnigraffle_b_bf.jpg","_links":{"self":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/3421","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=3421"}],"version-history":[{"count":0,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/3421\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/media\/9369"}],"wp:attachment":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/media?parent=3421"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/categories?post=3421"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/tags?post=3421"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}