Golden Ratio and GPdotNET v2 User Interface

Bahrudin — Fri, 21 Sep 2012 15:48:00 GMT

First of all, I am not a designer. In fact I don’t think I can design anything beautiful. Mostly, if I want to design something first asked some of my friends or people who knows about design, before decided to do. So design implementation of GPdotNET v2 was very frustrated for me. Anything I have implemented, I thought it was not so good. I still think that the current design of GPdotNET v2 is not something which I can say very well. But something interesting happen while I have designed current UX. I knew if something needs to be designed well, it must be based on golden ratio. So I have decided to implement golden ration anywhere where is possible in the app.

This blog post is going to present one approach of implementation of golden ratio in Application, as a good recipe for design. If you don’t know what is golden ratio you can found on this link.

So let’s first see the Start Screen.

Start Screen of GPdotNET

The first implementation of golden Ratio was dimension of the main window. So when you open GPdotNET, the size of initial Window is size=(932:579) which means that theheight=579, and width=579*1,61=932, which is depicted on picture below as well.

Then I concentrate on my main toolbar to see if possible to implement golden ratio there. So if you look for example Common group, you can see that the width and height are designed by golden ratio, as well as height = width=H/Φ of tool button.

I have also implement golden ration to parts of group bar. The number a, b, c are implemented based on golden ratio on the following way: c=(a+b)*Φ, b=a*Φ (see picture below).

Other group bars are also implemented with golden ratio by simple adding half width of Common group toolbar for each additional tool button.

Create new Model Dialog

Other full implementation of golden ration was in Create New Dialog
From picture you can see that the size of dialog is based on golden Ration, as well as parts of the dialog. One interesting thing is that the position of Cancel and OK buttons are also based on golden ratio. Length of line a, is the same as length b multiple by Φ.

Export Dialog

Export dialog is pretty simple so golden ration is implemented in 3 element height (a) of ListBox, height (b) and width (c) of dialog in relation b=a*Φ , c= b*Φ, which you can see from the picture below.

I don’t know is my design is better than previous but I know you can find some interesting proportions in form of golden ration. :)

C# & .NET technologies : UX

Golden Ratio and GPdotNET v2 User Interface

Start Screen of GPdotNET

Create new Model Dialog

Export Dialog