Free UI Kits

As a web developer initially it is hard to build a cool design. Though you can program well, but if you can’t design well, most of the user will faces issues while using your web-application/website. Remember when ever we are developing something, most of the time we are developing for users, to make their life easier than now using technologies available. So we should have to little bit careful about the design of the application.
To design eye caching website or web-application we can do one thing. We can draw design on paper and go to the designer than he will prepare cool style-sheet for us for our current project. It might be possible that some of elements can be re-used for next project if he/she has prepared in such way. So to avoid this frequency there are some UI toolkit available for designing web pages. Even though after using these tool-kits designer’s job comes in picture at time of customization.But he has clear idea instead of creating whole thing from scratch. So lets look at some available,free,open-source and famous tool-kits available on the Internet.

Below are the list of some famous and cool ui kits

For Desktop:

Twitter bootstrap:

flat-buttons

Twitter bootstrap is a very famous and mature toolkit for designing responsive web pages quickly. Also it is in mind of all designers. It provides awesome grid system so that you can design interface which can run on desktop, tablet and mobile browsers. So lots of development effort can be reduce to achieve responsive feature.
Each and every component is explained in detail on it’s official site so please check below links:
Please visit this this link http://getbootstrap.com/css/ for different basic css clases.
Please visit this this link http://getbootstrap.com/components/ for different components ot widgets.
Please visit this this link http://getbootstrap.com/css/ for different JavaScript widgets.

Polymer:

sampler-paper-square

Polymer is a component based UI library which is currently under development. Though some people have started using it and got success. But in next updates things may change, so polymer team not recommending to use it in production.

Looking at polymer web-components it seems like polymer is a future of the web design. A declarative way of designing web pages with re-usable web-components. The fun is you can also create web-components which can be used later on by you as well if you release as a public open-source project on github, it can be used by other developers.

Below code is an example of creating new polymer element:
<link rel="import"
      href="/components/polymer/polymer.html">

<polymer-element name="proto-element">
  <template>
    <span>I'm <b>proto-element</b>. Check out my prototype.</span>
  </template>
  <script>
    Polymer('proto-element', {
      ready: function() {
        //...
      }
    });  </script></polymer-element>
Below code uses proto-element:
<!DOCTYPE html><html>
  <head>
    <script src="platform.js"></script>
    <link rel="import" href="proto-element.html">
  </head>
  <body>
    <proto-element></proto-element>
  </body></html>

You can see how it is easy to use polymer web-components. For each component you want to use you will have to import HTML file where components is declared. Polymer provides two type of elements.

  1. Polymer core elements
  2. Polymer paper elements
Remember in Polymer everything is a component. JavaScript, css and html template code goes along with component declaration. So you do not have to declare behavior of the component in JavaScript again where are using it. You just have to pass data and use it as a declarative markup in HTML. Also good part in polymer is you will always have backward compatibility so that you can use traditional HTML elements as well. Also you can use any JavaScript library with polymer.

Semantic UI:

Semantic UI

When ever there is a new web-application project, i always try to use twitter bootstrap for fast and rapid prototype. As i see it as handy toolkit which have all basic elements to design a web-page rapidly and easily. But one day i was searching on Google for some templates and i found a link for Semantic UI toolkit. I was really impressed after watching the components provided by semantic ui. Also i found that semantic ui provides things which was difficult during designing web-pages with twitter bootstrap. It provides awesome widgets.

Though i found Semantic UI is a some what better than twitter bootstrap, i am still continue with twitter bootstrap for my existing projects. I should not switch my whole project from twitter bootstrap or other toolkit to semantic ui. But i should see and analyze whether i can use it  or not. Semantic ui components are really looking nice see below example for menu for example.

Menu

A very famous jQuery library also has it’s own UI library which is named jQuery UI. I was using it before i found twitter bootstrap. jQuery UI provides couple widgets like as below.

I was working on one of my client project at current company. We have been provided a wire-frame from client and suggested dojotoolkit to prepare design of wireframe in HTML+CSS. We try to resist some what and recommended jQuery over dojo. Final they have approved our recommendation. We have started building app design from the wire-frame. We have achieved almost nearer to the wire-frame. Than we have started building app logic in JavaScript. Finally app goes to testing team, and they have run accessibility test on it. Most of the tests got failed. I mean keyboard accessibility got failed in jQuery based app. Also some controls that are mentioned in the wire-frame are not directly part of jQuery UI, so we have made them custom that is good, but it is really hard to achieve accessibility. This is one difficulty that we  face using jQuer based ui kit.

Than i review dojotoolkit regarding accessibility. I found djit widgets which are part of dojotoolkit have great keyboard accessibility support. Also dijit has more widgets than jQuery UI with awesome design. Dojo provides more facility than jQuery and have . Accessibility is not the only feature that attracts me, i can say about dojo that

“Once you choose dojo, you have most of the things for your app.”

dojo
Below are some links for Mobile toolkits, Please check it:
In conclusion i have just shared available toolkits and links. Now it depends on your project requirement which toolkit suits best. Think evaluate and decide best suitable option for your project.
Thanks
– Ahesan
Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s