{"id":1194,"date":"2017-02-14T12:00:58","date_gmt":"2017-02-14T11:00:58","guid":{"rendered":"http:\/\/blog.ttoine.net\/?p=1194"},"modified":"2017-02-13T20:06:33","modified_gmt":"2017-02-13T19:06:33","slug":"introduction-to-wireframesketcher","status":"publish","type":"post","link":"https:\/\/blog.ttoine.net\/en\/2017\/02\/14\/introduction-to-wireframesketcher\/","title":{"rendered":"Introduction to WireframeSketcher"},"content":{"rendered":"

WireframeSketcher is based on Eclipse<\/a>\u00a0platform. I use it a lot to create mockups for websites and applications. It helps to focus on content, usability and features, instead of design. When\u00a0your mockup\u00a0is tested with future end users and documented for developers, it’s time\u00a0think about design.<\/p>\n

Overview<\/h3>\n

Eclipse users will not be disappointed, the workbench is quite the same, but in the middle, you draw instead of writing code. Also, instead of just drawing basic shape, there is a style added so everything looks like it has been done on paper with a pen. This way, in the mind of people looking at the mockup, you are sure they think about it as a mockup, and not as a definitive design.<\/p>\n

You can also add annotations for documentation purpose.<\/p>\n

And you can create links on items to other screens, in order to create a live mockup. You can play the live mockup in Wireframesketcher, and also export in HTML to share it.<\/p>\n

\"\"<\/a><\/p>\n

First project<\/h3>\n

Menu: File \/ New \/ Wireframe project<\/p>\n

You can select different type of project, from web to smartphone app, …<\/p>\n

Assets<\/h3>\n

You might want to build a mockup using elements you already have: logo, screenshots or pictures, icons, … You can add them to the “assets” folder of WireframeSketcher folder. They will be available on the right column. When possible add SVG files, so that the software can apply the “hand style”.<\/p>\n

WireframeSketcher provides Stencils, it is libraries of screens, icons, mockups, ready to use. You can find them on their website:
\nhttp:\/\/wireframesketcher.com\/mockups\/index.html<\/a><\/p>\n

Icons<\/h3>\n

You can add an icon alone or with a label, by adding the “Icon” element from the palette.<\/p>\n

It is also possible to add icons in some content (text) or attached to an item (button, input, …). To\u00a0attach an icon\u00a0to an item, you can click on the properties on the left sidebar, and you can browse the different icon librairies available. With text, you can start to type the name of an icon in { } and use ctrl+space to display some help.<\/p>\n

Links<\/h3>\n

Draw at least 2 screens. You can add links to another screen on elements like buttons, but also on text. Text must be between [ ] to be considered as link. You can’t add links to external resource.<\/p>\n

In a screen, select the element. On the left sidebar, next to “Properties”, select “Links”. You will find a list of possible links, just click on the one you want and select the screen to open. That’s all. You will notice the link on the mockup with a special small yellow icon on the item.<\/p>\n

The most difficult part of it is to think about the structure, all the links between all the pages. On a live demo, you can highlight links, so testers can easily find the clickable areas.<\/p>\n

Annotations<\/h3>\n

On the right column you will find annotations elements. You can of course change the colour. If you need to use an other element (a square, a round, …), and make it an annotation, you can do that in the menu: Object \/ Mark as annotation.<\/p>\n

During export, you can choose if you want to see them, or hide them.<\/p>\n

Storyboard<\/h3>\n

A storyboard is what will allow you to run the mockup. Put in it all the screens. Be careful about the order of the screens, so the user starts the mockups at the good place. Once done, you can run or export your live mockup.<\/p>\n

During a live demo, users will be able to click on the links, or to use left and right keyboard arrows.<\/p>\n

Missing features<\/h3>\n

IMHO, there are two issues with the current version of\u00a0Wireframesketcher:<\/p>\n

    \n
  1. You can’t hide annotation\u00a0while working on the screen, so if you have stuff below, you can not select them. It’s really bad for\u00a0productivity. There should be at least a layer management system, so one can put all the annotations in one layer and hide them. This is really a missing feature. I already discussed about it on the user forum<\/a>, the solution they propose is not really useful. And there is no workaround.<\/li>\n
  2. There are a lot of text styling options<\/a>, but no equivalent of the “pre” html tag. It means there is no way to add monotype text<\/a>. \u00a0Let say you want to show how\u00a0command line or code should look in a design, with fixed characters size, this is not possible. If you are interested too, do not hesitate to tell the developers on the forum.<\/li>\n<\/ol>\n

    Conclusion<\/h3>\n

    Despite a few missing features, I really appreciate WireframeSketcher to work on features and UX. I use it\u00a0at the moment mainly for web stuff. However, I really think that would be awesome to have Eclipse Platform stencils. This way, Eclipse developers could use that to work on their UI\/UX before starting to code, collect end user feedback. And also, very important thing, this would be great to share best practice and have a more consistant UI across different Eclipse plugins, applications, tools, …<\/p>\n","protected":false},"excerpt":{"rendered":"

    WireframeSketcher is based on Eclipse\u00a0platform. I use it a lot to create mockups for websites and applications. It helps to focus on content, usability and features, instead of design. When\u00a0your mockup\u00a0is tested with future end users and documented for developers, it’s time\u00a0think about design. Overview Eclipse users will not be disappointed, the workbench is quite […]<\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_locale":"en_US","_original_post":"1194","_jetpack_memberships_contains_paid_content":false,"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}},"categories":[27,28],"tags":[],"class_list":["post-1194","post","type-post","status-publish","format-standard","hentry","category-eclipse","category-open-source","en-US"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":1156,"url":"https:\/\/blog.ttoine.net\/en\/2016\/12\/01\/the-eclipse-user-profile\/","url_meta":{"origin":1194,"position":0},"title":"The Eclipse User Profile","author":"Antoine THOMAS","date":"1 December 2016","format":false,"excerpt":"Following a soft release in October 2016, including several features, the collection of user feedback, related testing and adding improvements, it is officially time to announce the launch of... \"The Eclipse User Profile\" Story The aim of the Eclipse User Profile (previously known as the User Dashboard), is to provide\u2026","rel":"","context":"In "Eclipse"","block_context":{"text":"Eclipse","link":"https:\/\/blog.ttoine.net\/en\/category\/eclipse\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1203,"url":"https:\/\/blog.ttoine.net\/en\/2017\/02\/16\/tutorial-eclipse-marketplace-favourites-list\/","url_meta":{"origin":1194,"position":1},"title":"Tutorial – Eclipse Marketplace & Favourites List","author":"Antoine THOMAS","date":"16 February 2017","format":false,"excerpt":"A few months ago we introduced the Eclipse Marketplace Favourites List. To explain how it works I created a video tutorial. This article will be a more classic tutorial to explain what Eclipse Marketplace is and how you can use the Favourite Lists to your advantage. What is Eclipse Marketplace?\u2026","rel":"","context":"In "Eclipse"","block_context":{"text":"Eclipse","link":"https:\/\/blog.ttoine.net\/en\/category\/eclipse\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/blog.ttoine.net\/files\/2017\/02\/marketplace-1-2-1024x904.png?resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/blog.ttoine.net\/files\/2017\/02\/marketplace-1-2-1024x904.png?resize=350%2C200 1x, https:\/\/i0.wp.com\/blog.ttoine.net\/files\/2017\/02\/marketplace-1-2-1024x904.png?resize=525%2C300 1.5x, https:\/\/i0.wp.com\/blog.ttoine.net\/files\/2017\/02\/marketplace-1-2-1024x904.png?resize=700%2C400 2x"},"classes":[]},{"id":1126,"url":"https:\/\/blog.ttoine.net\/en\/2016\/06\/30\/how-to-add-eclipse-neon-launcher-in-gnu-linux-menus-and-launchers\/","url_meta":{"origin":1194,"position":2},"title":"How to add Eclipse Neon launcher in GNU Linux menus and launchers","author":"Antoine THOMAS","date":"30 June 2016","format":false,"excerpt":"If you are a GNU Linux user, there are of course many distributions, you have your favorite one. And there is two ways to install Eclipse IDE: download the installer from the new eclipse.org download page, and the select the package you want (recommanded) download directly an archive of your\u2026","rel":"","context":"In "Eclipse"","block_context":{"text":"Eclipse","link":"https:\/\/blog.ttoine.net\/en\/category\/eclipse\/"},"img":{"alt_text":"eclipse-in-the-launcher","src":"https:\/\/i0.wp.com\/blog.ttoine.net\/files\/2016\/06\/eclipse-in-the-launcher.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":1106,"url":"https:\/\/blog.ttoine.net\/2016\/05\/13\/uss-and-the-marketplace-client\/","url_meta":{"origin":1194,"position":3},"title":"USS and the Marketplace Client","author":"Antoine THOMAS","date":"13 May 2016","format":false,"excerpt":"Version fran\u00e7aise en cours... Two weeks ago, I started my new job, Product Manager at the Eclipse Foundation. I will be in charge of developing new features and services for the Eclipse user community. Eclipse users and contributors, my plan is to make your life easier ;-) For my first\u2026","rel":"","context":"In "Eclipse"","block_context":{"text":"Eclipse","link":"https:\/\/blog.ttoine.net\/en\/category\/eclipse\/"},"img":{"alt_text":"Java - Boardcluster - website-index.html - Eclipse _129","src":"https:\/\/i0.wp.com\/blog.ttoine.net\/files\/2016\/05\/java-boardcluster-website-index.html-eclipse--129.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":1116,"url":"https:\/\/blog.ttoine.net\/en\/2016\/05\/13\/uss-and-the-marketplace-client\/","url_meta":{"origin":1194,"position":4},"title":"USS and the Marketplace Client","author":"Antoine THOMAS","date":"13 May 2016","format":false,"excerpt":"Two weeks ago, I started my new job, Product Manager at the Eclipse Foundation. I will be in charge of developing new features and services for the Eclipse user community. Eclipse users and contributors, my plan is to make your life easier ;-) For my first blog article about the\u2026","rel":"","context":"In "Eclipse"","block_context":{"text":"Eclipse","link":"https:\/\/blog.ttoine.net\/en\/category\/eclipse\/"},"img":{"alt_text":"Java - Boardcluster - website-index.html - Eclipse _129","src":"https:\/\/i0.wp.com\/blog.ttoine.net\/files\/2016\/05\/java-boardcluster-website-index.html-eclipse--129.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":1241,"url":"https:\/\/blog.ttoine.net\/en\/2017\/05\/23\/its-time-to-organise-eclipse-oxygen-democamps\/","url_meta":{"origin":1194,"position":5},"title":"It’s time to organise Eclipse Oxygen DemoCamps","author":"Antoine THOMAS","date":"23 May 2017","format":false,"excerpt":"The next major release of the Eclipse Oxygen is coming up on June 28 and, it means the start of this year's Eclipse DemoCamps season. If you or your colleagues are considering a DemoCamp for 2017, we would like to help! What\u2019s a DemoCamp? You may be asking yourself what\u2026","rel":"","context":"In "Eclipse"","block_context":{"text":"Eclipse","link":"https:\/\/blog.ttoine.net\/en\/category\/eclipse\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/blog.ttoine.net\/files\/2017\/05\/screen-shot-2017-05-22-at-16.20.42-1024x730.png?resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/blog.ttoine.net\/files\/2017\/05\/screen-shot-2017-05-22-at-16.20.42-1024x730.png?resize=350%2C200 1x, https:\/\/i0.wp.com\/blog.ttoine.net\/files\/2017\/05\/screen-shot-2017-05-22-at-16.20.42-1024x730.png?resize=525%2C300 1.5x, https:\/\/i0.wp.com\/blog.ttoine.net\/files\/2017\/05\/screen-shot-2017-05-22-at-16.20.42-1024x730.png?resize=700%2C400 2x"},"classes":[]}],"_links":{"self":[{"href":"https:\/\/blog.ttoine.net\/wp-json\/wp\/v2\/posts\/1194","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.ttoine.net\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.ttoine.net\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.ttoine.net\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.ttoine.net\/wp-json\/wp\/v2\/comments?post=1194"}],"version-history":[{"count":5,"href":"https:\/\/blog.ttoine.net\/wp-json\/wp\/v2\/posts\/1194\/revisions"}],"predecessor-version":[{"id":1231,"href":"https:\/\/blog.ttoine.net\/wp-json\/wp\/v2\/posts\/1194\/revisions\/1231"}],"wp:attachment":[{"href":"https:\/\/blog.ttoine.net\/wp-json\/wp\/v2\/media?parent=1194"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.ttoine.net\/wp-json\/wp\/v2\/categories?post=1194"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.ttoine.net\/wp-json\/wp\/v2\/tags?post=1194"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}