top of page

Welcome
to NumpyNinja Blogs

NumpyNinja: Blogs. Demystifying Tech,

One Blog at a Time.
Millions of views. 

Modern, Sophisticated Tableau dashboard.

In the realm of modern data storytelling, the aesthetic appeal of a dashboard is not merely a matter of "decoration"—it is a critical component of user engagement and cognitive clarity. Most Tableau dashboards, while mathematically accurate and functional, often suffer from what designers call a "sterile" feel. They are defined by flat, utilitarian colors, sharp 90-degree edges, and a lack of visual hierarchy that can make data feel cold and uninviting. When a dashboard looks like a spreadsheet in disguise, users are less likely to explore the data intuitively. To move beyond basic reporting and into the world of sophisticated data applications, we must embrace the principles of modern User Interface (UI) design.

Sophisticated dashboard lies in the balance between depth, softness, and readability. By moving away from stark white backgrounds and solid blocks of color, we can create a "layered" environment that guides the eye naturally. This is achieved through two primary design pillars: gradient backgrounds and translucent, rounded containers.



In this blog, we will explore the technical steps to achieve this look in Tableau, from creating custom background images to using layout containers and padding to simulate rounded edges. We are transforming the dashboard from a sterile report into an inviting, insightful application that users actually want to interact with. By focusing on these design nuances, we ensure that our data isn't just seen—it is experienced.

We can achieve gradient rounded corner container, using annotations in Tableau.

There are three types of annotations in Tableau:

·        Mark - select this option to add an annotation that is associated with the selected mark. This option is only available if a data point (mark) is selected.

·        Point - select this option to annotate a specific point in the view.

·        Area - select this option to annotate an area in the viz, such as a cluster of outliers or a targeted region.

Here, we are going to use Area. To create a background with rounded translucent container.

Step1: Take a new sheet.



Step2: Create a calculative field called Box. Put two quotes in it “”.



Step3: Then drag the created calculative field (Box) to the label.



Step4: Now you could see, when I hover to the sheet, a box with some text in here.



Step5: go to tool tip and remove everything that’s in tool tip editor.



Step6: Now hover the box -->Right click -->Annotate-->Area-->'Edit Annotation’ box will pop-->click okay.

Then set the sheet from standard to entire view.



Now you can see, through following the above step, we created a container on the worksheet.


Step7: Then go to dashboard, fix the width and height of the dashboard, to your required size.



Step8: Now go to dashboard tab, drag our sheet, where we created the container, to the dashboard. Hide the title of the worksheet.



Important point to be remember. We are doing this dashboard from beginning till end in Floating mode.



Once you dragged the sheet inside in floating mode. The sheet will come with its own container. Like shown in the above picture.

 

Step9: click the sheet we dragged. Then after clicking the layout tab. Change the position to 0 &0.

Size to the size of the Dashboard. So, the container will be expanded to the size of Dashboard.



Step10: you should right click between the space of the sheet we dragged and its own container. This is one of the important steps, because in future when we need to annotate new small container, we need to right click between sheet we dragged and its own container.



Step11: Now we should choose background color for both sheet and Its container.

Keep the cursor in the container and right click -->Format-->Shading-->choose the color of the Container.


You could achieve Dashboard background as shown below. You can be paly with the color, by choosing different color and it ’shading intense and opacity.



Step12: To format the sheet.

Right click on the sheet-->format-->Shading-->change the worksheet shade to white and choose the opacity up to 40% (or change the opacity depending on our requirement of the shading effect)


Now we could achieve a double shaded background.



Step13: Now for the rounded corner containers. Follow the step12, instead of shading, go for

Corners-->very rounded.



We can use Canva to create the rounded corner container, but creating directly in tableau using Annotation gives us more flexibility, so we can adjust and move things around as we work with elements.


Step14: Now we can create a layout using the similar method. right click between sheet we dragged and its container.



To reposition the box

  • Click and drag the box of the selected annotation to a new position.



To adjust the size of this rounded corner container, you can see green dots around the container. Move the cursor over it and adjust the size.

To resize the box

  • Click and drag one of the green boxes (resize handles).



To remove the created area

  • Right click the container-->Remove.



There are lot of different ways we can design these containers. To format this container, keep cursor on the container you need to format and right click it.

The true power of this technique lies in layered annotation. Because we can control the transparency of each element, we can stack translucent containers on top of gradient backgrounds. This creates a "frosted glass" effect where the underlying colors subtly bleed through, providing a sense of cohesion across the entire layout.

By following these steps, you have moved beyond the sterile, default settings of the past. You now have a template that feels like a bespoke analytical application—a professional environment where varied opacity and soft edges create an inviting experience that drives deeper data exploration and more intuitive decision-making.

 

I have attached the tableau dashboard link below, with similar layout.

+1 (302) 200-8320

NumPy_Ninja_Logo (1).png

Numpy Ninja Inc. 8 The Grn Ste A Dover, DE 19901

© Copyright 2025 by Numpy Ninja Inc.

  • Twitter
  • LinkedIn
bottom of page