Saturday, January 28, 2012

Rocket UI Launches As A Web Application To Create Complex Navigation Widgets Without Coding

Rocket UI is a great tool for designers, bloggers, and website owners that have no coding knowledge. The founder, Sung Park, and his business partner have gone through different iterations, tweaks, and pivots to create this product. When we first chatted four months ago they were about a week away from a private beta. A short while after completing it they decided to change direction after getting a "lukewarm" response from industry professionals. They narrowed the scope and target audience to better fit with what people needed.

The wait was well worth it! (As a side note; I commend them for not launching a product that would have probably faltered just because they had completed it. Sure, they would have had some use and may have even found success, but their research showed there was a better chance for failure. Acting on feedback when working on a startup is essential, as is not getting emotionally attached to a specific version.

Rocket UI is a web application that allows you to design interactive navigation, prototypes, and self contained interactive widgets. After finishing a design the widget is easily added into your website by copying and pasting a bit of code; much like embedding a YouTube video. Their motto is:
  • 01. Design It - Rocket UI makes it easy to create interactive navigation, prototypes, content, banner ads and more with no coding.
  • 02. Embed It - After you're finished you copy and paste one line of code to embed your Rocket UI widget into any website.
  • 03. Forget It - It just works. It works on all modern browsers (doesn't work on IE 6), smart phones and tablets.

I created the below widget containing three buttons in about 10 minutes. First I specified the dimensions of the overall item, then began work on the buttons. Once the first button was complete I was able to clone it to cut down on the creation time of the other buttons. Everything is controllable such as the color, gradient, font, and size. Specific sets of rules and customizations can be given for when you hover over it and click on it. You will notice the button is black, then turns to blue when you mouse over it, then goes red upon clicking it. There are different actions available for when you click them; I chose to have the user directed to a webpage for the first two then to send an email for the third. Give it a try:


As you can see from the below videos and their home page there is a lot you can do in addition to the simple navigation widget I created. Their YouTube page has a lot of tutorials to help you get started. Join them on Facebook, Twitter, and Tumblr to learn more; sign up and try it out today. I envision people having a lot of fun creating things with this as well as seeing it used in a professional setting.

What can you make? Share a description of what you created in the comments below and add a link to the page it is on so everyone can take it for a test drive.