As a designer or an UX professional (or just a web developer who is tasked to do design too), you have to be on the equal or above with the competition in terms of UX design as it plays the biggest percent in user experience, next to functionality.

We cannot effectively have users discover functionality, nor be able to keep the attention from our competitors to us of our clients, so we must put a good effort into the skin of our web applications, online shops, and blog websites.

Today i will introduce everyone to a few of the proven tools that will help you build a solid User Interface for your Web Application. Let’s go!

1 – Twitter Bootstrap

Very popular this year (have seen it implemented in most WordPress themes, on different web applications, and had the chance to use it myself several times) so it sure doesn’t lack popularity.

Let me give you a quick list of features for start:

• Ability to make your website responsive quicker (enabling what to show on desktop or tablet, fluid div’s, expandable containers)
• A big set of UI tools to start with (inputs, badges, search boxes, modals, warnings, server messages)
• A skin that comes with default (Pretty beautiful, i just made some small changes to mine)

Twitter Bootstrap comes as an all-in-one package for your front-end that you can deploy fast and start writing beautiful HTML to present your data to your users. It is my favorite and should be yours too!

2 – Zurb Foundation

These are the guys that fired my friend from their company (he is a Social Marketing Manager), and ironically, they have one of the best HTML5 Rapid Prototyping & Design tools in their hands. Their features are:

• Over 40 JavaScript and HTML5 UI Widgets
• Zepto replacing jQuery, which is much lighter, which helps your webpage load faster
• Support for reducing size for retina displays (this one is simply amazing)
• Used by big companies such as National Graphic, PIXAR etc.

Can’t say outright that i used it as much as Bootstrap but i didn’t have a bad experience with Zurb Foundation at all. These little rapid prototyping tools are a nice way to just get over with your front-end design.

3 – Kendo UI

One of the proprietary HTML5 rapid prototyping tools and UI toolkits, Kendo UI is an awesome way to implement an elegant, feature-rich and good looking interface because it comes out of the box with:

• 6 clean HTML5 themes, from dark to silver
• Over 40 widgets that support MVVM and Ajax methodologies out of the box (i.e updating a table with new info when the last page is reached)
• Available for Web, For building Mobile Applications
• Awesome solution called DataViz to show your users great charts and statistics that were available only for the desktop

As we see, their main purpose here is to make the Web as rich as the desktop platforms in widgets and functionality. And we respect this because they are helping the transition from the Desktop to the Web, my bravo’s go to KendoUI team.

4 – Dojo Toolkit

As their website states: “Dojo saves you time and scales with your development process, using web standards as its platform. It’s the toolkit experienced developers turn to for building high quality desktop and mobile web applications.

From simple websites to large packaged enterprise applications whether desktop or mobile, Dojo will meet your needs.”

Dojo Toolkit makes the web application building experience more like in Desktop Application Development, where you have I/O tools, timers, asynchronious loads and all that stuff that will raise a web application’s power to new levels.

Read their feature list here:

• DOM Functions
•  Query
•  NodeList extensions
•  Events
• Effects & Animation
• Language Helpers
• Behaviors
• Ajax I/O

In this toolkit you will be able to find enough tools to build a perfect web application (meaning, not lacking any features of a desktop application) AND logic to bind your views to your data easily. The toolkit follows the MVVM Design Pattern (Model View ViewModel), enabling you to pass data from views directly to your models and vice-versa using event-driven programming (which is normal for every UI application to be event-driven as you know).

5 – Wireframe.CC

The reason for me to include a wireframing tool in the list is because wireframing, more specifically UX design, can be called the most imp0rtant part of designing the front-end of your web application. You must realize that even if  you have a nice shiny elegant website, a bad layout or a bad UX will be the reason for your users to choose your competitor over you to acquire the goods or services that you provide, hence this prototyping tool. It works out of the box (not even registration required, albeit you have the option to get a premium account). Give it a chance and i am one hundred percent sure that you’ll fall in love with it. You can create boxes, stroke your borders, color your wireframes the way you want, and many other things you can do without a hassle. Overall a great tool and i would recommend it.

Conclusion:

The steps you need to take for a nice HTML5 design, is to choose one of the frameworks and prototyping tools i mentioned, make some simple sketches, wireframe your design (and correct what you deem as wrong in the design you made), do some simple tests (i.e “How will that button look under that box?” try it and you’ll know.).

See you in the next article!