# Golden Ratio and GPdotNET v2 User Interface

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 the

**height=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 ratio is implemented in 3 elements **height (a)** of ListBox, **height (b)** and **width (c)** of dialog in relations **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. :)

Posted on 21/09/2012, in .NET, C#, CodeProject, GPdotNET, Windows and tagged CodeProject. Bookmark the permalink. 1 Comment.

Great job Bahro! .. again…