While most QlikView Designers are familiar with the works and principles of data visualization gurus such as Stephen Few and Edward Tufte, when it comes to dashboard layout many (including myself) are more likely to follow the design principles of that other visualization expert: Bob Ross.
I plot different objects on the sheet, basing their location on my experience, sound judgement and the overall aesthetic appeal. “Maybe in our world there lives a happy little treemap over there.” Apply a little horizontal and vertical alignment and I’ve finished another ‘masterpiece’. It’s much more of an art than a science, or at least that’s what I like to think.
While this approach is a lot of fun, it’s not a very fast way to get things done. Not every layout works immediately, and reshuffling objects after “happy little accidents” can take a lot of time.
Grid layouts
Enter the Grid layout, a more “paint by the numbers” approach that let’s you quickly create visually balanced layouts. I won’t go too much into the details of how and why you would want to use them as other Qlik bloggers like Patrick Tehubijuluw have done this quite nicely already.
Some might worry that using a methodical approach might take away some of the creativity (and fun!) of designing QlikView applications. I definitely have not found this to be the case, there are still many areas where you can focus your creativity. Of course YMMV.
Actually using the Grid layout
While I was quickly convinced of the benefits of using a grid layout, it took me a little longer to actually start applying them. For two reasons:
- Available grids didn’t meet my needs. The 12-column grid that is included with QlikView Desktop is very cool if you happen to be designing for a 940 pixel wide display, but not so useful otherwise.
- Online tools focus on columns only. There are many online grid calculators out there. Unfortunately not one of them meets my needs, as I’d like to have both columns and rows in my grid, to make both horizontal and vertical alignment easier.
Manually creating a grid is a hassle, so I’d only create one for projects (and resolutions) where I knew that I would need it frequently. For all the others; the Bob Ross technique.
Introducing GridMaker
A few weeks ago I came across Karl Pover’s post about a Grid System Tool based on macros (which was triggered by my earlier post about macro use cases). While I liked the tool, there were a few minor things nagging me. The main thing was that it starts from the column/row width/height instead of the overall width and height. My requirements are usually in the form of “design for a resolution of X by Y”. I’d like to take that as the starting point and determine column width/row height from there. I also prefer using a background image instead of text objects, as the text objects interfere with lasso’ing multiple objects.
So, I decided to use Karl’s idea of a macro-based solution, add what I thought would be improvements and create my own version of a grid generator: GridMaker. A tool that creates a custom grid based on your specifications and saves it as an image. You can then use this image as a temporary document background while you design your application.
While it’s still not perfect, it creates pretty big BMP files instead of smaller PNG files, I’ve decided to put it out there. Perhaps someone will improve upon it further 😉
I’d like to wish you happy Qlik’ing!
Still here?
Still reading? Good! Research has shown [citation needed] that only the most hardcore Qlik enthusiasts (with matching attention spans) make it this far. So, I thought this would be the only logical place to mention that we have a new Masters Summit for Qlik coming up on April 5 – 7 2016, in Milan, Italy. An intense 3 day training that will take both your QlikView and Qlik Sense skills to the next level!
It’s not just about training though, you will also have ample opportunity to network with your peers, exchange success and horror stories, discuss (and expand upon!) ideas and just plain have some fun!
Can’t make it this time? In fall 2016 we will also be visiting Johannesburg, South Africa and Austin, Texas. More information can be found on our website. See you there?
12 Comments
Nice update to my design grid generator and one hell of a macro. My only complaint is that you didn’t superimpose your head-shot over Bob Ross’s afro and beard.
Karl
My Photoshop skills only go so far… 😉
Hi Barry,
When I’m trying to generate a grid with the application, then it just opens the macro when I click on the “Generate Grid” button and nothing else happens. Do I need to do anything to make it generate the grid?
I’m not experienced in working with macros in qlikview, so maybe I’m just missing something obvious?
Hi Steen,
The macro requires system access to write the file to disk, did you allow this when you first opened the QVW? Alternatively, if you chose “Open with” instead of “Save to” (or something similar) then the file may have ended up in a temp folder that the macro cannot write to.
Kind regards,
Barry
Very recognizable issues and an excellent tool for UI designers.
Nice. I like it, thanks for sharing this.
Hi
Useful tool.
If you try to use more than 1000 pixels in the width or height it just opens the edit module window.
Hi Vekku,
So it works fine for anything 1000 pixels? That’s very strange. I am able to generate whatever size I need, so am not sure what the issue could be.
Kind regards,
Barry
We don’t make mistakes, just happy accidents