Click here to Skip to main content
13,002,000 members (74,256 online)
Click here to Skip to main content
Add your own
alternative version


1 bookmarked
Posted 30 Sep 2012

Golden Ratio and GPdotNET v2 User Interface

, 8 Oct 2012
Rate this:
Please Sign up or sign in to vote.
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, I first ask some of my friends or people who knows about design, before decided to do it. So design implementation of GPdotNET v2 was very frustrating 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 happened while I designed the current UX. I knew if something needs to be designed well, it must be based on golden ratio. So I decided to implement golden ration anywhere it 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 find it at 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 in the 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 implemented 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 simply 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 the 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 whether my design is better than the previous one, but I know you can find some interesting proportions in the form of golden ration.

Filed under: .NET, C#, CodeProject, GPdotNET, Windows
Tagged: CodeProject


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Bahrudin Hrnjica
Software Developer (Senior)
Bosnia and Herzegovina Bosnia and Herzegovina
Senior Software Developer at and Microsoft MVP for Visual C#.

You may also be interested in...

Comments and Discussions

-- There are no messages in this forum --
Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170624.1 | Last Updated 8 Oct 2012
Article Copyright 2012 by Bahrudin Hrnjica
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid