Design language

This page will speak to the goals and principles that will inform all design decisions for the HoPE Climate Wall.

Goals

Climate wall goals

  1. Teach climate change - specific lessons and messages about climate and climate change should be delivered by viewing and interacting with the Climate Wall. In particular:
    • Climate is a complex system
    • Climate change is happening
    • Human activity is the primary driver of climate change, in particular the burning of fossil fuels
    • Climate change has and will have significant human impacts
  2. Leave an impression - the experience of viewing and interacting with the Climate Wall should be memorable, fun, and exciting
    • Give visitors an aha! moment
  3. Be inclusive - the experience should be universally accessible by a broad and diverse audience without special adaptation to specific needs. This can be accomplished through being:
    • Simple and intuitive - easy to understand regardless of knowledge, cognitive abilities, language skills, or focus levels
    • Perceptible - information is communicated regardless of ambient conditions or sensory abilities

The primary function of the wall is to teach climate change (Goal 1.) Goals (2) and (3) is more about the “how.” Usually, the better Goals (2) and (3) are executed, the better Goal (1) is fulfilled, i.e. all three goals are complementary.

Design principles

Based on the goals above, this section will set forth a general design strategy for representing content on the Climate Wall. Examples for good and bad implementations are given using existing media.

  1. Clear and bold, graphic by default - Graphic over illustrative or photographic where possible, intentional use of color, type, and space Clear and bold, graphic by default
  2. Say more with less - Eliminate unnecessary design elements, reduce complexity, give emphasis to essential design elements Say more with less
  3. Leverage metaphors - Use familiar concepts and cues to create intuitive experiences Leverage metaphors

  4. Use motion and sound sparingly and intentionally - Motion and sound should convey and reinforce meaning, leave an impression

    No Yes
    Say more with less Say more with less

Design patterns

The following section will speak broadly to how we will communicate certain ideas using graphics, color, images, text, interaction, motion, and sound.

  1. Time graphs
    • Time is along the horizontal
    • Amount is along the vertical
    • Use color for emphasis
    • Use plot to show measured data
    • Use line to show trends
    • Label only what is necessary to communicate message
  2. Information on a globe or map
    • Use a globe when communicating localized information
    • Use a map when illustrating global patterns
    • Use color to communicate data values
    • For interactive globes, label magnetic north and south with arrows to orient user
    • Label equator to orient
  3. Comparing data
    • Use color to differentiate data
  4. Sliders
    • Use horizontal sliders to:
      • Move through time
      • Zoom in and out
      • Change speed
    • Use vertical sliders to change amount
    • Use continuous sliders for many or continuous values
    • Use incremental sliders to move through few discrete values
  5. Dials
    • Use dials for long, scrolling content
    • Use dials to move precisely
  6. Track balls
    • Use track balls to rotate a globe
  7. Buttons
    • Use buttons sparingly
    • Use buttons to navigate through a set of unknown or variable length
    • Use buttons for acceptance; alternatively, use a delay for implicit acceptance if possible