Fluid UI is a new browser based, HTML5, mobile app prototype tool released the other month by a small and skillful team from Dublin and Berlin. The tool is blazing fast and at the outset allows users to work in two modes. One of which provides an overview of various screens and their links from a bird’s eye view – great for screen flow design. The other more detailed page level view is accessed by clicking on any particular screen, which then brings a close up of it – great for detailing, and actually designing the screens. In the screen design view, users can rearrange standard iPhone, Android and Windows 8 (their newest addition) elements and components by dragging and dropping from a wide wireframing library. A great number of wireframe samples from their libraries can be seen in their extensive flickr stream. The transition between these two views also happen pretty seamlessly as well which adds to the experience.

As users zoom back out to the screen flow design view, all of the links between pages are explicitly made visible as directional arrows – something I’ve come to like and also very much do in my personal style while designing.

Other features also include the ability to incorporate gestures and design for hand-held devices. Out of the box screens are available for a number of mobile platforms, with precanned components for iPhone, iPad, Android, and Windows 8. For those designers that wish to work with their own assets, the tool also allows to upload custom images for use across screens. Mockups can also be previewed and exported as HTML, PNGs or PDF. With the tool being native in the browser, a degree of collaboration and sharing is also possible. More so, the guys have also release an Android App to allow previewing of your work, as well as the ability to setup and scan QR codes related to projects.

Pretty Slick! Give it a try (in Chrome & Safari).

Credits: Dave Kearney & Ian Hannigan

Posted in Tools | 1 Comment »