How we obtain information

Our eyes are looking for structure. So why not help our readers with what we want them to see? I do not know about you, but even the best book becomes annoying to read if the layout is going against what we are used to. For me, at least, it takes so much longer to read a text that is not better formatted compared to one, where the author have to spend time on this matter. I think the same goes for designing dashboards. Of course, we need to be aware of the Z-shape in which we tend to obtain information. It simply means that we read from left to right, then down, and then again from left to right. That means that it will be useful to place the information in that shape. But besides from structuring in which order to read the data, we can also do a lot in terms enclosure to structure the canvas itself. That is why I think using grids and guidelines are so important to create a nicely looking dashboard.

Using Grids to make the visual structure

Some applications have guidelines we can use so we know where to place our “data items”, however, I find it increasingly difficult to get margin and spacing just right. To solve that problem I normally create a new New Guide Layout in Photoshop.

No alt text provided for this image

We can here select the number of Columns and Rows that corresponds to the design, which I normally sketch out beforehand.

No alt text provided for this image

To make sure that the elements are placed according to the design-grid, it is, of course, important that the Photoshop canvas is the same size as the dashboard you are working on. If so, then we can use the X- and Y-values to place our elements.

When the guidelines are created we will get the correct spacing in the top, bottom, left and right. To me this a very simple trick to create space and structure in the dashboards, as well as having control over the placement of each element on the dashboard.

Leave a Reply