What I learned in Grad School Is…pt1(series)

Experimenting with QT Designer

Spongebob “What I learned in boating school is…” picture

Small Intro:

Hello, I wanted to start writing about things that I am currently experimenting with during my time in graduate school. I am currently an HCI (Human Computer Interaction) Master’s student. This is PART 1 of a series, and I will keep updating as I go so that I can keep track of the things I’ve learned, as well as providing the opportunity to initiate conversations, and inspire others to learn more about anything. So without any further ado, here we go…


About 2–3 weeks ago, I was told that I would be finally joining a project and help design the front-end or interface. As part of the deliverable, I had to do this through the QT Creator program, more specifically the QT Designer tool inside of the program.

Before I go any further, let me define what QT Creator and QT Designer is.

According to wiki, QT is…

Is a cross-platform C++, JavaScript and QML integrated development environment which is part of the SDK for the Qt GUI Application development framework. It includes a visual debugger and an integrated GUI layout and forms designer.

And according to the QT Designer Manual, QT Designer is…

Qt Designer is the Qt tool for designing and building graphical user interfaces (GUIs) with Qt Widgets. You can compose and customize your windows or dialogs in a what-you-see-is-what-you-get (WYSIWYG) manner, and test them using different styles and resolutions.

Alright, so now that we are all clear on terminology, I’ll move on. Before this project, I had only heard of QT once, and had never used it or bother to even look into it, then the day I had to work with it came around. For the last couple of weeks, I have been searching HIGH and LOW for tutorials that could teach me how to use QT Designer. Sure, I could open the program and start poking around the examples, but I’ve always liked to look at tutorials just to get a sense of what I’m getting myself into.

Here are some of the things I’ve worked on:

Fig. 1 Working with alignments
Fig. 2 Dropdown windows with icons (1/2)
Fig. 3 More Icons and dropdowns (2/2)
Fig. 4 Working with responsive windows (1/2)
Fig. 5 Working with responsive windows (2/2)
Fig. 6 CSS Stylesheets and changing things around

Things I’ve learned:

QTD(QT Designer) provides the opportunity to do a lot of things with less effort. Some of the things I’ve loved so far (also provided in the pictures) include:

  • The ability to align almost everything (Fig. 1) This proved to be very helpful whenever I needed certain widgets to group together and stay together.
  • I can personalize buttons and similar options by adding visual cues such as icons(Fig. 2 and 3) I cannot emphasize the importance of this when designing interfaces; overloading the window with just text is just bad design.
  • IT’S RESPONSIVE! (Fig. 4 and 5) I was surprised and relieved that QTD has the ability to make the windows responsive; although it might not be the best at it, it does a good job at it(it shows progress, and that a good start).
  • Styling with css (Fig. 6)I found this to be the most pleasant surprise when experimenting with QTD. I have some experience working with CSS, and knowing that I could change the horrible default look with CSS was the cherry on top. It takes some time to figure out certain things, but once you do, you can definitely create very unique looking interfaces.

In conclusion:

A couple of tutorials later, I feel like I can do enough here to continue experimenting on my own. So now the adventure of working on that interface that was asked of me begins…

ps: If you’d like to experiment with QT Creator and QT Designer, here are some helpful links to start experimenting and learning:

http://qt.developpez.com/doc/4.6/stylesheet-examples/

https://www.youtube.com/watch?v=GLqrzLIIW2E

https://www.youtube.com/watch?v=LYF0spYkXUs

https://www.youtube.com/watch?v=_sAGY_4Ptsw

https://www.youtube.com/watch?v=JOuCuLHmk3o