Data Visualization: Building Template Layouts for Your Mock-Up

By Mico Yuk, Stephanie Diamond

Whether you’ve chosen to use pencil and paper or a software mock-up tool, the good news is that you don’t need to reinvent the wheel. Building and using templates is the quickest and smartest way to approach designing your mock-ups.

The elements shown in the following figure make up your first mock-up template. Each element corresponds to one of the following steps:

image0.jpg

  1. Start with a frame.

    Start by drawing a simple, square frame. Think of this frame as being the home of all your data visualization elements.

  2. Determine where to place the logo.

    Company branding is a top priority for most organizations.

  3. Add a title.

    The title of your mock-up is very important and should be housed in the top-right corner or center of your frame. The title is the first thing that most users will see, and you want to make it very clear what they’re viewing.

  4. Provide a help menu section.

    You may want to include a set of help buttons in your data visualization. Some of the most popular options include

    • Print button: Allows users to print the data viz from their devices as needed

    • Reset button: Allows users to start from the beginning

    • Help button: Provides helpful information about the data viz

    • FAQ button: Provides information about various aspects of the data viz

  5. Add a navigation area.

    The easiest way to tackle this section is to think about your favorite three websites. The navigation elements of those sites are probably along at the top, on the left side, or in both places. Because users read in a backward Z pattern, these areas are the most effective places for any navigational menus.

  6. Add a copyright line.

    This line usually goes at the bottom of the data visualization to ensure that users see that the work is copyrighted.

Now that you’ve included the main elements, it’s time to decide on a layout to display your data elements, as shown in the following figure.

image1.jpg

Your layout is the body of your mock-up, where the visualizations are housed. All the elements that are described in the first figure of the article are elements that surround the layout.