Programmers are generally fascinated by the UI design – but a little effort can give them huge returns!

I am a designer, not a developer, and often see that developers don’t mind using Arial (Cummon, that’s basic font! Its our right to use that too :D).

For developers, UI design has been alien language having complicated rules that weren’t written down anywhere plus an unlearnable sense of taste. Although, developers have basic intention of just doing coding part, but here are few set of tips and tricks for you to make your site eternally beautiful and classy.

Fonts

Web fonts are the quickest way of converting a boring site beautiful. Let’s start with Google web fonts.

Just include a clean, distinctive and modern font from Google fonts. Add the file in head tag:

<link href=”https://fonts.googleapis.com/css?family=Raleway:400,900,500,600,800,700″ rel=”stylesheet” type=”text/css”>

This is the one we’ve used in one of our huge project at www.systango.com. No loading of font files from database, no other coding. Just a simple link from Google font and here we are done with our upgraded look!


 

Icons

This is great for the time-pressed coder, because icon fonts are a lot quicker to set up than image-based icons. Plus, you don’t have to design or re-size anything!

A free set of fonts are available for commercial use, popularly known as ‘Font Awesome’, which can be used in any color or size just like fonts.

https://www.isystango.com/ is based on this, reducing the designing and uploading time of image! Isn’t it cool? Being a designer, this has greatly reduced my time as well. It will surely help you.

CSS3

This would need a bit of exploring, but sure you can differentiate your elements by adding text shadow, box-shadow and other few effects. And if you have more time to dig deep, then you can go for gradient property as well for your buttons and background. Check some online gradient generator and splash your site with it!

Make it High Definition – A Twist to Your Site!

This is fascinating! Find any high definition image, suitable to your site and make that your background. Highly expressive, cool colour combination and simply unique. If you can do that, you will greatly impress your designer as well. This is the latest trend in the industry. You can also add any graphic or abstract background with background position as fixed. If you can’t find one, add some elegant texture to your background.

With the above techniques, you can make a site that is starting to look slightly more professional and pretty, quickly. If you have the time to invest, it’s well worth learning some UI design principles. Everyday there is some trend is taking over. As for us – The Designers – we will carry the rest of it! Bring it on…