Tableau Style Guide

1. Guiding Principles, Not Rigid Rules

The information in this style guide is meant to provide guiding principles for the process of data visualization, but not to rigidly confine the developer’s creativity. The process of dashboard creation will continue to be an individual effort for the developer, but these principles and the brand help to provide a consistent voice for our target audience, emphasizing a singular brand during dashboard development.

The elements in this style guide are constructed with the NC State University Brand and consistency in mind. All academic and support units and offices that serve or support the core mission and their primary target audiences operate under NC State’s core brand signature. This applies to colleges, academic departments, Admissions, University Communications, and Online and Distance Education. Extended brands and sub-brands should follow the guidance found in the brand architecture site for reference.

2. Dashboard Size

Standard dashboard size is fixed at ______________ (Standard Template)

For dashboards intended to be printed in landscape orientation, the size is fixed at _________________ (Landscape Template)

For dashboards intended to be printed in portrait orientation, the size is fixed at _________________ (Portrait Template)

Developers are welcome to use the “automatic” resize function in Tableau to maximize the end-user experience but should configure the layout to account for a range of screen sizes to ensure product quality. Range sizing allows the developer to set a minimum width and height and separate maximum width and height to avoid distorted visualizations or scrollbars depending on the end user’s screen size.

3. Logo

The NC State logo, or “brick”, must be used in all dashboards to identify all NC State data visualizations.

The red “brick” serves as the preferred logo of choice for core brand affiliates. The stand-alone red logotype against a white background and black “brick” are acceptable alternatives for developers.

The 4×1 or 2×2 “brick” should be used in a prominent location, such as the top left header, or bottom left footer depending upon the dashboard project.

Clear Space. As part of the brand guidelines, dashboard developers should not crowd the logo. Text, images, or visualizations should be at minimum the length of the “N” apart.

Alterations and Size. Developers should use the minimum size for the screen during dashboard creation. The logo should be scaled appropriately while maintaining the same proportions to avoid distortion. Developers should never attempt to recreate, add elements, or apply transparency when to the logo.

4. Font

NC State’s primary typeface is Univers. Univers is available to developers on the NC State University Tableau Server and is the preferred typeface for production. As an alternative for developers, Roboto is NC State University’s open-source typeface and is available “out-of-the-box” for Tableau Desktop. In addition, Arial is a suitable substitute for dashboards for internal audiences.

Univers Typeface

Roboto Typeface

5. Color

Extended Palette

NC State University has an extended palette that includes seven colors that complement the core palette. Alternate colors should be used sparingly, but depending on the visualization may be utilized accordingly depending on the number of data elements displayed.

Grey Scale

While the core and extended palette complement each other, developers will often find themselves using a grey scale or grey elements to accentuate data in place of Wolfpack White. The following colors exist in NC State’s Tints and Shades, a subsidiary of the extended palette, for developers to use during dashboard creation.

NC State Tableau Color Palette

Developers may download the NC State Branded by accessing the NC State University Tableau Server Google Shared Drive. Access requests should be sent to ____________ if you are unable to access the resources available.

To install the preferences file:

• Download the NC State-branded preferences.tps file.
• Go to the My Tableau Repository folder in your local computer’s Document directory, and locate the Preferences.tps file.
• Save the NC State-branded preferences.tps file to your My Tableau Repository folder to overwrite the previous version.
• Open Tableau Desktop. When you open the Edit Colors dialog box and choose Select Color Palette, the color palette you added will be at the bottom of the palette list.
  • If Tableau Desktop is running while the new preference.tps file is saved, you must restart Tableau for the changes to take place.

6. Visual Cues & Specifications

All charts and tables published to the NC State University Tableau Server may consist of the following visual cues:

• NC State logo
• Help/download data icon
• Documentation/cookbook icon
• Title
• Subtitle/chart title
• Legend/filter container
• Tooltip(s)
• Y-axis
• X-axis
• Y-axis label
• X-axis label
• Data label
• Footer
• Security icon
• Quality icon

Example Dashboard

Documentation

For documentation, developers may use the following icons. The “Help” icon may be used to provide end-users details regarding how to extract, download, or save dashboard data. Use the “Documentation” icon to either provide the validated Data Cookbook report or other external documentation for your audience.

Data Classification

Following the Data Management Framework guidance from the NC State Office of Information Technology, developers creating dashboards on the Tableau Server should place the appropriate security icon in the location to the right of the footer. The icon conveys the appropriate level of risk associated with the data presented in the dashboard.

Dashboard Quality & Process