One of the major concepts when studying graphic design is designing to a grid. The concept involves designing a page layout in way that connects it with an imaginary grid. Designers often show this grid when they are designing. For example, using Adobe InDesign they can make a grid appear under "Grid and Guides" in the "View" menu (and CTRL + semicolon to toggle) . Here are a few short videos that explain this concept and how it can be used in design.
This year, I've spent some time studying and coaching with a professional graphic designer. He is a former professor of the University of Cincinnati's renowned College of Design, Architecture, Art, and Planning (DAAP) where he also completed his graduate work before joining the faculty. For a grid design exercise, he asked me to layout some specific text in a grid, an exercise that he used to have his students do at UC. I designed a number of variations using InDesign. Here is one simple example.
Text with a grid:
Text without the grid:
This concept also applies to data visualizations and can be used in a number of different ways. For example, Stephen Few discuss the visual emphasis of the different dashboard regions in his book Information Dashboard Design (Second Edition, pages 107-108). He shows a four-quadrant dashboard layout where the top-left quadrant is the "emphasized" section of the dashboard and the bottom-right quadrant is "de-emphasized". Here's an example of the four-quadrant grid overlaid on top of his CIO Dashboard (page 223). In this case, it's clear that the system availability is the most important element of this dashboard.
So the grid can be used for design purposes and it can also be used to place emphasis on certain elements of visualization. Unfortunately, there are no grid options to display in Tableau. Hopefully in a future version of Tableau we can setup grids and be able to snap objects to those grid. In the meantime, I've been thinking about how best to do this in Tableau with its current capabilities and have come up with this solution.
Leverage transparent PNG images as a floating tile
By using a PNG image file with a transparent background as a floating tile it's possible to show a grid on top of a visualization and design underneath it. Here are the steps for adding a grid on top of a dashboard in Tableau:
1. Create the desired grid in Adobe Photoshop. I created various grids that are the same size as Tableau's default "Desktop" dashboard canvas size (1000 x 800 pixels). The background is set to transparent so that when it is saved as a PNG file it will only show the grid and no background.
2. Add the image created in step 1 to the Tableau dashboard as a floating tile. This is important, because the floating tile will sit on top of all of the other elements on the dashboard.
3. Set the "position" of the floating tile as x = 0 and y = 0.
4. Set the "size" of the floating tile to match the size of the dashboard. For example, w = 1000 and h = 800.
Note - by doing this, the menu bar for the floating tile will appear off screen. From this point forward we will control everything from the Layout window in Tableau. For example, if you need to adjust the image to "Center image" or "Fit image" then you can right-click on the PNG file in the "Layout" window.
5. Adjust your visualization as needed to design to the grid. Since the floating tile is on top of the dashboard you will not be able to move or adjust your other windows by clicking and dragging. However, simply select the object that you wish to adjust from the Layout window and the focus will set on that specific object (tiled or floating). You can then drag, move and re-size the object as needed and you will be able to do that while the image of the grid is still displayed on top of the dashboard.
Below is an example using a simple four quadrant grid on a dashboard.
If you would like to try this yourself, click on the links below to download a few sample grids that I made in Photoshop.
