When building interactive websites or applications, it’s important to create robust user interfaces before starting the design process. You need to solve any interaction or navigation problems before they crop up in the design phase, or both you and your project will suffer.

In the past, I’ve either hand-sketched the wireframes or used software such as Adobe Illustrator or OmniGraffle for my projects. Lately, I’ve been using the new batch of online user interface design tools to test and refine user experiences. Below are a selection of online user interface tools that can help you develop and deploy quickly. Feel free to add your thoughts below.

Balsamiq

Balsamiq is a rapid wireframe and prototyping tool that focuses on speed and simplicity. It’s available as both an online and desktop version. Balasmiq also come with a good library of pre-made UI stencils (windows, buttons, sliders). Other features include auto-complete search functions, element property editor and a snap-to grid. There’s also a small, but growing online community of new UI stencils at MockupsToGo.  One nice touch is that Balsmiq uses a sketchbook visual style so that the work doesn’t seem too “finished”, which helps invite discussion with your client.

http://www.balsamiq.com

Cost: $79, Free Trial.

 


FlairBuilder

FlairBuilder is similar in many ways to Balsamiq, but uses a more traditional software application interface. Although the tool is desktop-based, you can share your creations through Flairbuilder’s free online viewer. The design pattern library is good, though not exhaustive–but unlike Balasmiq, users can create wireframes in either traditional technical wireframe or a more sketchy style with the tool.

One good feature is the ability to create a master template file, which helps save time if you are building several versions of a similar page. Flexbuilder also has the ability to show user interactions in the protoype, like non-modal popups, rollovers and Ajax interactions.

http://www.flairbuilder.com

Cost: $24/month or $99/year. Free Trial.


iPlotz

iPlotz has a silly name, but it’s robust wireframe tool. It offers a good selection of UI stencils which are organized between Web and iPhone elements.  Like Balsamiq, the visual style of the mocks are hand drawn. iPlotz also offers a small database of user submitted UI elements, called snippets, that you can import into your projects from the website.

The biggest difference between the other tools I listed here is that iPlotz also has a built-in project management function. With it, you can assign tasks to project members who are working on various parts of the coding and design.

http://www.iplotz.com/

Cost: $15/month or $75 for Desktop version. Free Trial.

 


Other online user interface design tools:

MockFlow – http://www.mockflow.com/

Axure – http://www.axure.com/

MockupScreens – http://www.mockupscreens.com/

MockFlow – http://www.mockflow.com/

Mockingbird – http://gomockingbird.com/

ProtoShare – http://www.protoshare.com/

HotGloo – http://www.hotgloo.com/

Pencil – http://pencil.evolus.vn/

Enhanced by Zemanta