How to Create Better Dashboard Layout Designs with Figma

Lines

A line is when two areas, or points, in a space meet. They vary in width, length, direction, and color. They don’t even have to be straight and continuous – they can be rough, curved, and dotted. Lines guide the eyes to specific areas in the design as they create division and constraints among your visual elements. 

Shapes

Shapes are two-dimensional objects that emphasize areas in the architecture because their anatomy – lines – implies boundaries. Shapes help us set apart one content from another when necessary, through the use of containers, cards, or forms. 

Images

Images are the use of shapes and colors to become a visual representation of something. These become the most engaging areas in your design, and you can use them to convey the message without words. In our world, images work the same way data visualizations do. They engage the audience with the content in a more creative and easily digestible way. 

Space

Space is the deciding factor between a relaxed perception of information or an overwhelming one. This might be one of the elements designers and analysts forget most often about. When looking at a dashboard, and we see white space (“negative” space), we are tempted to fill that space with information or content (“positive” space). It is fair to believe the audience will assume empty space as a signifier of missing information or missing data. We quickly jump to the decision of filling that space with something – anything!

Kenophobia, the fear of empty spaces, could easily be suffered by designers, analysts, and stakeholders alike. Negative spaces are just as important as the content itself. When used correctly, it enhances the readability of your dashboard by ensuring there is sufficient space between objects (text, visualizations, shapes, etc.). It also helps to simplify the design, breaking content and areas of the architecture into smaller chunks, so the audience is not overwhelmed – creating breathing spaces. It can even achieve a sense of modern style – giving it a clean look where less is more. Furthermore, it helps to draw attention to specific areas of the page that may be of interest. 

This is how you can explore spacing in Figma:

You can play around with how much whitespace you want to add to your UI elements and quickly explore the layout before taking your dashboard to the next level – development.

Dashboard layout design principles

Beyond the bits and pieces of the layout, there are certain principles or rules of thumb to consider for a successful design: hierarchy, balance, alignment, and proximity. 

Hierarchy

We use hierarchy to arrange the shape of the visual information in a certain way to imply order and importance. There are three ways we can communicate this:

• Size: larger objects will naturally draw the user’s attention, whereas subsequent sizes will help create a direction. 
• Contrast: elements with higher contrast will stand out most among lower contrast elements.
• Placement: positioning elements strategically can communicate hierarchy, where stand-alone objects tend to draw more attention to themselves.  

Balance

Funny enough, there are two ways to achieve an eye-catching design by making your layout balanced and also unbalanced.

A balanced design, where symmetrical or asymmetrical, is when the elements in your layout balance each other out. It makes your content appealing and clean. On the other hand, an unbalanced design, when done correctly, can draw attention to specific areas that may look out of place. When done incorrectly, it can look messy or unorganized. 

Alignment

We use alignment to arrange the different elements of a design in relation to one another. When we do this, we choose between edged alignment – when elements are aligned to the top, bottom, left, or right edge of a layout – or center alignment – when elements are aligned to the centerline. 

Proximity

Depending on how close or far some elements are to one another, we naturally assume a correlation. Being mindful of the distance we add or remove within our content can add to the legibility and understanding of the design. 

The value of dashboard layout design for Tableau projects

Now that we explored the Figma environment and its different tools for better layout design, how does this translate to designing dashboards in Tableau? There are various reasons why sketching a dashboard before engineering is beneficial. Above all things, it will save you time and effort and can make planning and strategizing a lot more efficient. 

At Playfair Data, we refer to our designers as Architects because they ideate, plan, and proof how the product will ultimately look and behave. Dealing with data and tableau engineering can become an overwhelming task. Architects help make data-related projects concise and manageable.

Some aspects where dashboard design can improve your work structure are as follows:

• Discovery & Brainstorming: sketching helps to brainstorm design solutions, evaluate the user experience, communicate with clients to translate the product’s needs and solutions, and assess the success rate of the overall project.
• Resource Planning: designers, engineers, and strategists will conceive the time and level of effort required and assess the engineering feasibilities.
• Development Shortcut: having a design will help guide engineers and save them time when creating the actions and visualizations in Tableau.
• Documentation: design iterations and sketches serve to document changes, client requests, project history and keep the end goal in mind for what the product should solve and achieve.

The takeaway

When designing dashboards, prototyping tools like Figma can serve as the creative space for your team to grasp the scope of a project. A layout plan can help guide everyone in the project towards the same end goal. A great layout design assures your dashboard is readable, enjoyable, and actionable. Keeping the design layout elements and principles in mind improves your workflow and enhances your user’s experience. 

Until next time and have fun!
– Rafael