Wire Frame / UI Tools

2342
Note:  This is a re-publication of an article I wrote in June of 2009, I was asked to repost the article here by a member.  There is also some updated info added.
Since New Years, I have found and employed some new tools to speed-up the design phase of our firms design-build process.
GRIDS
Grid Designer 2 :
In an effort to speed up and play with the gird layout an elements, I found a joy of a tool online. Grid Designer 2 (http://grid.mindplay.dk/) is nothing short of an amazing tool, rather tool set. You can quickly play and adjust you grid to need, toss in some typography needs, and the pack it all out in html and css that get you off an running.
Boks: This is a new find ( about a week ago) this is an Adobe Air application ( so far only the second one I found useful to me) That seems to operate much like Grid Designer 2, so so far I am not as impressed, but I have only had a few interaction with it an seems it has some potential as well. (http://toki-woki.net/p/Boks/)
NEW:
960 Grid System:
I have almost entirely switched to using the 960 grid system. It’s extremely power and easy to use an quickly create bullet proof CSS grid design pages.  It also comes with pre-set up templates for Fireworks, Photoshop, InDesign…and more. Its an easy system to learn and use with speed. ( http://960.gs/ )
WIRE FRAME / UI SKETCHING
IPlotz:
This is a supper nice high-end, simple and easy to use, wire-frame online tool.  A tad pricey but the free account will let you mock up five pages for small task or sites. (http://iplotz.com/)
Creately:
Still in beta but it’s got more potential than Iplotz and has alot more to it from charting to layouts and UI wire frames ( with data behind it for building working wire frame models).  I am still just getting time to play with it and the more i do the more I love it.  It has powerful simple to use collaboration tool that make team coordination a snap.  We are seriously loving this new online tool. This is a tool that can speed-up a lotof stuff while making our team much more colabratve with more than task than we currently are. (http://creately.com/)
NEW:
Expression Blend 3 & Silverlight:
Expression Blend 3 revolutionizes the speed and efficiency with which you can take your ideas from concept to completion on the Silverlight and .NET platforms. However, it is Blend’s Sketchflow thats stunning.
SketchFlow revolutionizes how quickly and efficiently you can demonstrate your vision for an application. It provides an informal and quick way to explore, iterate and prototype user interface scenarios, allowing you to evolve your concepts from a series of rough ideas into a living and breathing prototype that can be made as real as a particular client or project demands.
I have had amazing experiences using Blend to create simple and complex wireframes, even though they are not for silverlight but for client websites. ( http://www.microsoft.com/expression/products/Blend_Overview.aspx )
Library collection:
I have be honest in unless the wireframe needs to be complex or interactive, I stick to using Fireworks and an image library of fire framing images. Starting back early last year I started putting together and creating graphic elements for wireframe use for the web and mobile design. This collection has now become a very mature tool with images gathered on layer: web, forms, Jquerry, flash, Samsung, Android, iPhone, and yes even the iPad, and having been a recent Zune HD owner I have even started building one for the later this year release of the win 7 phone interface elements.
I have is set up were i can copy off a copy from the master set, with all the collection layer i typical use for web design, a 960 grid layer, and an blank layer to start working in right away. every time i find or use a new JQuery or script element I will copy it off to the master collection.
I hope this expanded little bit is of some use.  If you use a Wireframe of Grid system or tool that I did not list please share it with the group via comments.

0 comments:

Post a Comment

 
Powered by Blogger | Printable Coupons