Using shape widgets for layout

You can often create an attractive dashboard layout with just the built-in shape widgets. Here's an example where we've added translucent grouping shapes and labels on top of an airplane image.

Similarly, strategy maps have Perspective widgets that act as a background for the objective shape widgets.

Background images

Images are a great choice for backgrounds too. In this example we have an image of Europe with colored bubbles on top showing live performance of various cities.

Or, you can choose to make an image fill your entire dashboard background. This allows you to create a precise layout that perfectly matches the presentations your leadership team is used to seeing. This is just a screenshot of a PowerPoint slide with dashboard widgets on top.

You can even create great-looking infographics that display live data in photorealistic settings.

Creating a background image

Let's start with example of a strategic planning and management system. How would you get something like this into Spider Impact?

First, let's remove all of the information on the slide that we don't want to show up in Spider Impact. In PowerPoint that means hiding background graphics. This removes the slide header and footers.

Now we're going to remove all information on this slide that we want to automatically update based on live data in Spider Impact. We end up with this:

Finally we need to turn that slide into an image, and there are a variety of ways you can do this. PowerPoint has the ability to export slides as images, but if you do that, you'll need to edit the image to crop off the extra white space on the edges. Instead, we're going to take a screenshot of just the relevant part of the slide.

In Windows you can do this by Windows Key + Shift + S, selecting the region you want, and then pasting it into Paint. On Mac you can do this with CMD + Shift + 4 and it will save the image to your desktop.

Make sure the image is large enough so that it doesn't look pixelated on your dashboard. You'll usually be in good shape if your image is at least 1,600 pixels wide. In this example the screenshot is actually 3,200 pixels wide because I want it to look good on high resolution screens.

For our infographic the idea is exactly the same. We've created an image in PhotoShop with blanks where we can place our live data.

Compressing the Image

Large dashboard images load slowly, so we want to make sure the file size isn't too big. Most dashboard background images will work best in the PNG format because they're made of solid colors. If yours has a lot of gradients or photos, however, JPEG may be a better choice.

Raw PNG images can be very large, though, so we're going to reduce the file size before we use our screenshot in Spider Impact. There are a variety of tools to do this, including free online utilities you can find by doing a google search on "image compression online".

Creating Your Dashboard

Now it's time to add your dashboard. Be sure to resize it large enough so that there's plenty of room to add content, and the lock it in place.

And finally we'll add widgets. Here we've added bubbles for the objectives, measures, targets, and initiatives. For the Measures, Targets, and Initiatives we've turned off the bubble background so only the text shows up. That way you can click on the text to drill down for more information.

When we're done we have a fully interactive dashboard showing live data, all in a format that our organization is familiar with.

Removing edge padding for full-screen images

By default, dashboards have padding on all sides of the dashboard. This padding provides comfortable spacing around dashboard content, which works well for standard data displays with widget arranged in a grid.

However, when a dashboard has a single background image filling the entire canvas, this automatic padding around the dashboard creates unwanted space between the background image and the dashboard edges.

You can fix this by turning off Edge Padding to allow widgets and backgrounds to extend all the way to the dashboard edges. With Edge Padding disabled, you can create immersive, edge-to-edge dashboard designs perfect for presentations and displays with full-bleed backgrounds.

Removing dashboard edge padding is particularly noticeable when exporting dashboards with background images to PowerPoint.