Wireframing using Eclipse and WireframeSketcher

WireframeSketcher – an Eclipse Wireframe plugin

WireFrameSketcher LogoI came across WireFrameSketcher whilst looking for an easy to use, extensible wireframe tool for help show clients concepts and ideas. This product appealed to me because:

  • WireframeSketcher is an addin to Eclipse
  • WireframeSketcher is easy to use
  • WireframeSketcher is modular – in other words screens and wireframes can comprise other screens and wireframes (effectively templates and masters) which means that one change to the master has the effect of updating all child wireframes – BRILLIANT
  • WireframeSketcher can easily export to both PDF and PNG graphics
  • WireframeSketcher has a Storyboard facility which creates dynamic, hot linkable walk-throughs for the customer that can be easily exported
  • WireframeSketcher works in XML format files, making it easy for me to re-use and create import and exports to other systems
  • WireframeSketcher is plain and simple without so many options it takes weeks to learn
  • WireframeSketcher integrates into most Eclipse based systems including Flex3 from Adobe
  • WireframeSketcher has a free version that is NOT crippled except for an export cross on images

Another think I liked about Peter’s philosophy was that he was open to providing full versions for those people (like myself 🙂 ) who were happy to blog about products that were actually very good at doing what they say they do!


After having used the software within Eclipse Helios, Ganymede and Flex3 Builder I found it very easy to use and integrate with other applications. WireframeSketcher has recently (within the last few days) been updated with ‘Refactoring‘. Refactoring overcomes the problems with linking to master screens and then changing the names or locations of those screens. Any changes are automatically propogated via Eclipse – WireframeSketcher now supports the plugins that support this feature.

In use, refactoring is a MAJOR saving of time… When screens are created they inevitably get created in an unorganised manner. As time goes on the repositories for the screens gets tidied up and re-vamped. Refactoring allows you to move and rename objects without breaking all your wireframe designs – this is VERY useful!

Extensible Palette

The WireframeSketcher’s extensible palette option extends the concepts of assets so that you create and maintain your own repository of objects to be used within your wireframe. These objects can be images or screens (master). The rendering in the palette shows a small preview of the object which can be further divided sown into categories for grouping purposes. This is a great concept and works really well within the whole Eclipse framework.

Other useful WireframeSketcher facilities

Generallyy speaking wireframeSketcher works straight out of the box, it’s simple to use and install within any Eclipse based environment. I was using this tool within minutes and have added it to my essential tools. Wireframing is key to creating good customer feedback and helps so much with the design process; before critical resources have been allocated ideas can be shown for approval.

Overall here are the main aspects I love about WireframeSketcher:

  • It’s EASY to use (I was using this tool within minutes)
  • It uses COMPONENTS. Screens and wireframes are composed of other screens and components, which means one update affects multiple screens instantaly
  • It utilises HOTSPOTS so that links work, and enables a create INTERACTIVE prototype to be demonstrated to the customer.
  • It has support for STORYBOARDS. It will even bundle the storyboard automatically into a single file PDF that can be sent to the customer – including all hotspots.
  • It uses a good selection of generic WIDGETS provided with the installation
  • It’s easy to UPDATE (of course via Eclipse!)
  • It uses a set of WIKI syntax to create options within the WIDGETS – for example in the tab control, you can set which tab is enabled and highlighted, the Treeview control has mutliple otptions for the look and feel that can all be set within the actual widget.
  • There is the start of a MOCKUPS GALLERY that has a small selection of completed screens that would be useful for starting projects (for example there is an iPhone selection for prototyping iPhone applications)
  • WireframeSketcher shows GUIDE LINES on the screen when objects line up properly and also allows nudging, zooming, etc. with keyboard controls for accuracy.
  • WireframeSketcher comes with a great collection (over 140) of icons for contours in various sizes (small, medium, large, extra large) so that adding arrows and icons for forms is merely a question of selecting from a list (again all keyboard controlled if required)
  • There is much much more than discussed here! Lastly I love the fact that the whole system is based on open XML formats – which means that each wireframe could easily be repurposed for other systems.

In summary, WireframeSketcher is a comprehensive system that allows effective wireframing within the Eclipse environment. For any developer out there using Eclipse, I would say without hesitation that this addin should be at the top of your list and your design process. It is worth every penny of the official registration, and allows another dimension to the development cycle – especially if you already use Eclipse for your development platform. 5 out of 5.

Goto: http://wireframesketcher.com/index.html

TheDogFiles blog, Balsamiq mockups (prototype and design tool), TeamViewer (Free desktop sharing), IdeaMason (Idea management).

thedogfiles Great video blog about dogs – a well laid out wordpress theme for quality video using Viddler video. Refreshing to see a good use of the WordPress blog and well laid out themes to provide an excellent blog about dogs.

The video production is excellent and recently featured on Leo Laportes TWIT network (Net@Night). He was right when he said that the site is clean and extremely well laid out. This guy is obviously passionate about his dogs and his photography/video.

All the key information for the blog is located in the top part of the screen making this a very user friendly site. Full of technical photography and video tips – well work a visit!

(tags: wordpress webdesign video social reference podcasts podcast player dogs)

Balsamiq Studios LLC is a fresh little software company, focused on adding flavor to your Web Office suite.

The “Mockups” application is an Adobe Air application that allows you to create really wonderful, free format mockups and layouts. The layouts have an earthy feel as they are all based on hand drawn controls (buttons, containers, tab controls, scroll bars, etc.).

These layouts can be saved as either XML format (for inclusion in other programs) or as PNG files (graphic images).

Overall the program is a joy to use and fully covered by numerous YouTube video tutorials on Balsamiq.

The interface is easy to use and slick; I could easily move things around and create impressive layouts very quickly. The software is free to bloggers and charitable organisations plus those who are willing to spread the word (seminars or exhibitions, etc.). I only put links to products on my blog that are worthy and this product certainly falls into that category. The software comes with an impressive array of pre-built graphics that are all scaleable; so any layout can be quickly created and discussed.

I see the product as a great prototyping tool that is ‘fun’ to use and fast (Adobe Air). The complete layout can be exported in XML format and easily reformatted into other formats, for example XAML code within Microsoft WPF or C# programming.

Finally the software integrates well with some opensource wiki’s enabling you to create layouts for the customer and then even let the customer use the tool online and change the layouts – brilliant!

Life’s too short for bad software. Most applications have too many buttons, are ugly and boring. We focus on small problems, so that we can solve them really well.

(tags: wireframes wireframe webdev webdesign web2.0 web ux usability jpcweb)

teamviewer Desktop Sharing – Remote Control – SupportTeamViewer establishes connections to any PC all around the world within just a few seconds. You can remote control your partner’s PC as if you were sitting right in front of it. Find out why more than 15.000.000 users trust TeamViewer!

Simple – fast – secure.

The one-stop solution for remote access

TeamViewer is the fast, simple and friendly solution for remote access over the Internet – all applications in one single, very affordable module

(tags: teams remoteaccess remotesupport vnc utilities teamviewer support windows jpcutils)

IdeaMason is software for the way you think and write!

ideamason IdeaMason brings together the database elements of both a bibliographical and information management tool in combination with a virtual writing platform. Store and categorize ideas and research in one comprehensive portfolio. Collect and manage sources in a virtual library.

Then use IdeaMason’s revolutionary Composition tool to organize your ideas and manage referenced sources in a single efficient step. When you are ready IdeaMason exports your work into a fully-formatted document complete with footnotes and citations.

IdeaMason automatically generates a complete bibliography (including annotations) in your choice of the following major styles APA, MLA, Harvard Citations (UK & Austrialian variations supported), Chicago Notes-Bibliography, & Chicago Author-Date.

(tags: tool software research ideas thoughts capture writing thinking jpctutils)