Making and Breaking the Grid

Thoughts on Structure: An introduction
[...]
Like items are arranged in similar ways so that their similarities are made more apparent and, therefore, more recognizable. The grid renders the elements it controls into a neutral spatial field of regularity that permits accessibility - viewers know where to locate information they seek because the junctures of horizontal and vertical divisions act as signposts for locating that information. The systems helps  the viewer understand its use. In one sense, the grid is like a visual filing cabinet.

I read about the typographical grid (an organizing principle in graphic design) in the book About Face 3: The Essentials of Interaction Design, Part II: Designing Behavior and Form. Whoa! I was struck by a bolt of lightning. I learned something really useful and powerful at the same time. From that moment, I see graphic interfaces from a totally different perspective. Now I consider grid a must in my designs. Not only it arranges elements in more appealing, to human eye, positions but it also gives you a form to work with. To learn more about the grid and get a feeling of how professional designers make use of that technique, I bought a copy of the book, which I already mentioned,  Making and Breaking the Grid.

Well, I began to use that technique and manually arrange, and resetting, the GUI elements. By manually,  I mean that I had to write extra code. Unfortunately, the programming environment I used did not support grid-like behavior.

And then the Qt framework came.

A couple of weeks ago I decided to stop wasting time with inferior programming frameworks and switch to a better one. I choose Qt. Every time I explore Qt,
I have a that's great, that's cool, that's f*cking awesome, moment.
( I had a similar experience with the Lisp programming language.)

Yeap, Qt has layout managers; Qt classes that do all the dirty work for us.
You can either write code to handle the layout objects or use the Qt Designer,
which is of course much easier, especially for beginners.






Qt Designer in action. Watch and observe the grid structuring and the
auto arrangement of the objects, while we are resizing the form.




Bonus link: Let's Build a Grid