The world's coolest Laptop

Computing technology

The perfect UI for a logon screen

Communications has made our world tiny

Cant live without one

Friday, March 23, 2012

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:Pointing up

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: Rainbow

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.

                      
17

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 : Light bulb

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.

transparency: aero like effect–windows forms

The NEED:
For PC’s having Windows XP,98 it is not possible to bring in aero effects like Transparency. Since these operating systems don’t have sufficient resources, achieving both backward compatibility and superior aesthetics is going to be really difficult. Therefore workaround’s are the only option.
SMALL STORY:
I was designing a Windows form application – an assignment given by my professor. I wanted to make it backward compatible as he has a system running Windows XP. But I badly wanted to include the Glass effect (found in AERO), since I wanted my user interface  to look really beautiful. So I started looking for workaround’s. I did manage to find one(made me look like a complete idiot, since I couldn’t think of such a simple thing) . I am going to talk about the same in this blog post.
Prerequisites: Visual Studio
METHOD:
Consider a sample Windows 7 form:
It looks like this, completely opaque. To give it some Transparency, view the form’s design(Design view).  Click on the form ( such that the form gets selected not the controls inside the form) and view its properties ( You can do this by click the properties tab available on the right hand side of Visual studio or if its not present press CTRL + W,P). Now scroll down and find the property called Opacity. By default this will be set to 100%. Set this to 90%.
And there you go, you are done. Now press F5 and you can see your form having the beautiful transparency effect. You can adjust the value of opacity to vary the degree of transparency, but make sure you don’t increase transparency to an extent where content cannot be seen.
CONCLUSION:
You can see that the transparency effect has made the UI really better. Try changing the color that suits your application and transparency. This process makes the control’s inside the form(almost all) to exhibit transparency. This can be used in Windows 7 and vista also, if you think that using those Aero DLL’s is a tedious process.
Download the sample source code here. Here I have varied the transparency based on a track bar.