DESIGN GUIDE PART 1: Framework & Layouts

Judit Bekker
Jul 29 · 7 min read

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:

Image for post
Image for post

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:

Image for post
Image for post

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.

Image for post
Image for post

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

Types of grids:

1. Manuscript grid

Image for post
Image for post

2. Multi-column grid

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

Here’s how you can generate your own grid!

Step by step modular grid in the making in Figma

Sample layouts created by the Starschema Dataviz Team:

Image for post
Image for post
Image for post
Image for post

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.

Starschema Blog

Data contains intelligence that can change the world — we…

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store