Sparsh – UI Components

UI/UX design project

Concept

Sparsh is hindi word which means touch. The purpose of this project is to make UI/Web designing and prototyping easier. This software helps designers / developers to generate UI components as they want.

As a name suggests, the purpose of this initiative is to make these components touch friendly.

As a designer and developer I always need to use UI components (buttons, check boxes, option buttons, text boxes etc.) in my projects. So rather than writing a code for these components each time, I have developed a piece of software, which will generate a code of these components for you. This tool provides user interface to generate these components as per your needs.

As this project is under development it only supports creation of buttons as of now. Further components are in release queue. If you are interested you can contribute in development to make this tool better. I have shared a link of github repository at the end of this page.

Prototype

User interface mockup
HTML Buttons

I started by deciding how the interface will look like for a button creation module. I decided which properties of button to be included inside the interface, starting from button background color to text shadow and fonts. While designing the module I done research and analysis about latest trends going on in web industry. So I included 3D and flat button creation option.

I have written the whole code for this tool in JavaScript, HTML and CSS.

One can choose the custom icons and custom fonts. To integrate custom web fonts and iconic fonts, I used google web fonts API and fontello respectively.

Source Code