DESIGN GUIDE PART 1: Framework & Layouts

We, at the Starschema Dataviz Team, work a lot with data and information design every day. Our main goal is to make our data visualization output effective, accessible, and provide accurate information to our customers.

With this in mind, we created a Data Visualization Design Guide to serve as a standard for the team. This encompasses the basic principles of data visualization, such as color theory, design basics, dashboard ergonomics, and branding. We provide best practices, share links to useful resources and tools we use.
We thought by sharing certain parts of this guide we can help others working with data. We genuinely hope you will find it useful!

Get in touch if you have any suggestions, questions, or if you would like you to share your own processes.

How to start working on your design ?

Just like with most things, the key to good design is proper planning. Before jumping into Tableau (our preferred data visualization tool in the team), you need to think about how your design will look like. To guide this process there are a couple of practical steps that can help you and your clients along the way to create the desired outcome. First, you should have a clear understanding of the requirements, the story you would like to tell, and the data that is available for you to work with. Then ideally you iterate through each step in the process below to make sure your project will be a success for everyone. Of course, BI cultures differ at every client and there are no two identical projects so you might have to skip a step or two, but we wanted to describe the ideal scenario .

Start by drawing a quick sketch on paper (low fidelity or lo-fi prototypes). These are good because they help you think about the requirements and how you might organize things later on. It’s easy to re-draw your prototypes on paper as they don’t have to look good and paper is a really good medium to facilitate coming up with ideas. Once the general outline is there on paper you can organize it into a wireframe (another lo-fi prototyping step) that will help you see proportions and structure. You can then start adding more and more details and turn it into a high fidelity or hi-fi digital (often clickable) mockup which will serve as the basis of the main product. Digital mockups can be done either in designated prototyping tools or even in Tableau. At each step, it is best to consult with the client to capture ideas, new requirements, and feature requests.

So from paper prototypes that help you think, through wireframes that help you see structure, to clickable mockups that give you an idea on functionality and look-and-feel, there are a number of iterations you ideally walk your client through. This might seem to be a lengthy process but it is the best way to help manage client expectations, time, budget, and stress levels :).

Benefits of prototyping:

• It might seem counter-intuitive but spending time on prototyping actually saves you time on the long run as it helps to avoid mistakes early in the process. The more advanced you are in the process of building a dashboard the more difficult (and time-consuming — thus costly) it is to change things. It’s best to fix the key elements with the client as early as possible.
• Prototypes serve as a common ground for developers, designers, and customers where they all speak the same language (i.e.: a visual representation of ideas or data) and can brainstorm freely.
• Customers can visualize what they’ll get for their money at the end of the process and that creates a higher level of engagement.

Photo credit: Adobe

What are wireframes?

Wireframes are like abstract representations of your dashboard, they are often just sketches on paper but they can be done in professional tools too. Spending 1 hour on drawing a proper wireframe can save you a lot of time. Wireframes help you see the high-level outline of the individual dashboard elements and how they make up a consistent structure. They can help discussions around functionality, the position and size of each dashboard object without spending too much time on moving them around. It is a lot easier to just change monochromatic shapes to better fit the canvas than to fix chart sizes in Tableau. Wireframes are powerful because they also don’t have to be pretty, can ignore look and feel and details, but are still very good means of communicating a clear vision on structure.

You can create these prototypes in any tool (even PowerPoint), but here are some examples: Adobe Illustrator, Figma, Adobe XD, Sketch (only available on Mac.)

To give you an idea of how it all comes together see these steps below:

What are grids and how to use them?

The key to good design is proportions, so that’s where grids come into the picture. A grid is essentially a set of lines (vertical or horizontal) that divide your canvas into orderly spaced areas. They serve as a blueprint for your dashboard objects to align to. You can adjust proportions, whitespace, and rhythm (when design elements are organized in a way that creates a pattern) of your visuals. Gridlines and intersections are like guideposts that help you snap your objects in place and ensure you build a clear and congruent structure. Grids make it easy to place your elements on a screen in a visually appealing way.

In this video you can watch how the anatomy of the grid is constructed and what is it used for.

Anatomy of grid. Source: https://vitorials.net/

Types of grids:

1. Manuscript grid

• Often called a single-column grid, this is the simplest grid structure
• A large rectangular area that takes of most of the dashboard
• As it’s mainly used for layouts with continuous blocks of text, we’re not going to use these in the design process

2. Multi-column grid

• Mainly used for layouts that contain discontinuous information, like paper and digital magazines
• This is not the best option for data visualization either

• A modular grid divides the page not only vertically, but horizontally as well into modules
• It’s a perfect grid for creating complex hierarchies and a good choice for data visualization purposes

• It’s a constructed grid based on modular grids that focuses on the proportions of the elements in the design
• It’s more useful for advanced steps like layout design , here are some examples I collected for dashboard design

Here’s how you can generate your own grid!

Step by step modular grid in the making in Figma

1. Click on Frame and select your canvas size (for standard non-scrolling dashboards we use 1366 x 768). If you decide to modify your canvas size later, the grids will adjust, but for the sake of simplicity we’ll use this standard size.
2. Click on the plus icon in layout grids and add columns: count — 8, type — stretch, margin — 20, gutter — 20
3. Click on the plus icon in layout grids and add rows count — 5, type — stretch, margin — 20, gutter — 20
4. Any shapes you draw on the canvas will snap to the grid automatically
5. Download as image and add to Tableau as a background

Sample layouts created by the Starschema Dataviz Team:

https://hu.pinterest.com/judkacag/layout/

I hope you’ve enjoyed the knit framework and find them helpful. Stay tuned in the next post we will share more practical examples regards to layout design. Feel free to share our post with your friends and jot us a message if you have any questions.

Originally published at https://dataviz.love on July 29, 2020.