How to design a great Ui

This blog post is some what different from my regulars. I am going to share my views on how to design a great UI. Primarily I will be focusing on Windows and Windows phone based applications but this can be applied to other types also.  This post is not for professionals. Its for amateurs who are just getting into programming. I am an amateur myself and I don’t claim that this blog post is perfect. It’s the guidelines that I chose to follow.

Most of the applications I have seen possess robust functionality, but they fail to impress the user simply because the UI isn’t pleasing(often complicated) . Programmer’s often tend to give lesser importance to UI design.

1. Don’t be satisfied till you like it:

Designing an UI is a tedious process. It involves a lot of imagination and lesser logic. But just because designing is a tedious process jus don’t leave it as such. If the creator doesn’t like it, the user is definitely not going to like it. Try putting in a lot of effort till you like it.

2. Colors:

Play around with colors. Experiment with them, see how every color suits your application both background and foreground. But make sure you select those such that they form a great combination. Don’t choose colors that are flashy unless and until its for a specific purpose.

3. Background Picture :

If your application is going to involve a background pic, it is going to play a crucial role in the design. I have spent days finding the right background pic for my windows phone 7 applications. There are some rules while you are choosing the background pic. Don’t choose a background Pic just because the picture is great.  It should be chosen in such a way that the application theme, foreground and the control colors match. Another important thing is, even if the pic is great make sure it doesn’t hide any of your content. This can happen say, when the font is white and a small portion of the pic is white (obviously if both of them overlap).  Normally , an abstract pic is the best for a background.

                      

I used a simple stainless screen background to design an UI for my application – Med prompter pro.

4.Design tools:

Use design tools like Expression blend etc. for a rich UI. If you feel that expression blend and other software's can be complex try doing it with simple software's like paint and Microsoft Word. You can do a lot with the basic shapes in these applications. For example, in word take a rectangle go to format and fill it with a metallic blue.  You can then print screen this, crop the rectangle alone using paint and use it for various backgrounds.You can combine different shapes into one giving 3d effects to form a beautiful image and use to same process to create a stand alone picture. Its all left to your creativity. If you are looking for cheap alternatives try online editors like picknik or software's like GIMP,PAINT.NET

I designed the above pattern using Word really quick. All you need to need to do is make your imagination go crazy. This pattern I designed using a smart art list(with a single element) in a text box. I chose the color, selected the metallic design and rotated it. I created Multiple copies of the text box, arranged them properly. Then I printed the screen, pasted it in paint and cropped it properly.

5.Free pictures and icons:

Internet is a huge collection of resources. You can search the internet for free pictures and icons that suit your theme. You can use them legally in your application depending on the license terms. Download a lot of them, test them , play around with them , rotate them , combine them. You can use even Word to play around with them . Download an icon. Create a rectangle in word, fill it with a suitable color and place the icon in the middle! Print screen, copy paste in paint, crop to center. And there you go a simple picture with a nice background. 

I have downloaded a free picture here. If you observe the background more closely, you will notice there is a beautiful pattern plus there is lot of space. This space can be used for displaying your content (Great for Pivot and Panaroma)

            

 

My favorite  source - for Pictures : http://www.freedigitalphotos.net  

                                      for icons :http://www.commons.wikimedia.org/wiki/Crystal_Clear

6. Get Inspired :

Search of design samples based on the theme of the application. Make sure that UI is designed to match your theme. Get inspired by things like Metro design and AERO. They make your application feel really brilliant. If you think effects like AERO are complicated, there are always workaround’s (I have given one for transparency in my blog), try using those. I want to conclude my post saying keep your UI as simple as possible.

Posted in: Others