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!

Refactoring

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

Free CSS based website templates

Some links to free CSS website templates.

website css templates FREE

Free CSS based website templates
——————————–
http://www.solucija.com/free-templates
http://templatefusion.org/
http://www.styleshout.com/free-templates.php
http://www.templatemo.com/page/1
http://www.opensourcetemplates.org/
http://www.getcsstemplates.com/
http://www.free-css-templates.com/css-templates/
http://www.csstemplatesfree.org/
http://www.csstemps.info/templates.php
http://www.freecsstemplates.org/
http://www.my-free-css-templates.com/CSS_Templates/index.html
http://www.sixshootermedia.com/free-templates/
http://mitchbryson.com/free-css-templates
http://templates.arcsin.se/category/website-templates/
http://www.zeroweb.org/vc/1
http://www.csstemplates.net/
http://www.mycelly.com/
http://www.freecsstemplate.net/free-css-templates.php
http://csscreme.com/freecsstemplates/
http://openwebdesign.org/
http://www.bestfreetemplates.info/
http://www.templateworld.com/free_templates.html
http://ramblingsoul.com/downloads/
http://www.spyka.net/web-templates
http://www.freetemplates4u.co.cc/
http://www.cssdesigncenter.com/
http://www.csstemplateheaven.com/
http://freecssxhtmltemplates.com/
http://www.infscripts.com/
http://www.templatesrain.com/free-templates/css-templates/
http://www.templateyes.com/css-templates.htm
http://www.atemplatefree.com/
http://www.free-css-layouts.com/free-layouts/
http://css4free.com/
http://csstemplatesfree.net/
http://www.thefxworld.com/
http://www.opensourcecsstemplates.com
http://www.templatekingdom.com/Web-Templates/special/Free/ (needs registration)
http://www.oswd.org/
http://www.nuviotemplates.com/templates.php

D*I*Y Planner

Brilliant aid for anyone interested in organising their days activities. This site contains great free planners in most sizes. It’s an invaluable resource for those who don’t want to have to recreate templates, etc.

“We are a community of people who see the value of paper as a medium for planning, productivity, creative expression, and exploring ideas. We encourage visitors to share advice and inspiration, and we love to see submissions for templates, kit images and story articles. We are also the official home of the D*I*Y Planner kits. Please enjoy your stay, and make yourself at home!”