Click here to Skip to main content
15,867,568 members
Articles / Programming Languages / C# 4.0

Golden Ratio and GPdotNET v2 User Interface

Rate me:
Please Sign up or sign in to vote.
5.00/5 (3 votes)
8 Oct 2012CPOL2 min read 10.4K   2  
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.

Image 1

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).

Image 2

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 Φ.

Image 3

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:

Image 4

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. Smile | <img src=

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

License

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


Written By
Software Developer (Senior)
Bosnia and Herzegovina Bosnia and Herzegovina
Bahrudin Hrnjica holds a Ph.D. degree in Technical Science/Engineering from University in Bihać.
Besides teaching at University, he is in the software industry for more than two decades, focusing on development technologies e.g. .NET, Visual Studio, Desktop/Web/Cloud solutions.

He works on the development and application of different ML algorithms. In the development of ML-oriented solutions and modeling, he has more than 10 years of experience. His field of interest is also the development of predictive models with the ML.NET and Keras, but also actively develop two ML-based .NET open source projects: GPdotNET-genetic programming tool and ANNdotNET - deep learning tool on .NET platform. He works in multidisciplinary teams with the mission of optimizing and selecting the ML algorithms to build ML models.

He is the author of several books, and many online articles, writes a blog at http://bhrnjica.net, regularly holds lectures at local and regional conferences, User groups and Code Camp gatherings, and is also the founder of the Bihac Developer Meetup Group. Microsoft recognizes his work and awarded him with the prestigious Microsoft MVP title for the first time in 2011, which he still holds today.

Comments and Discussions

 
-- There are no messages in this forum --