Design Standards

This styleguide contains design documentation and components for the Natural Resources Revenue Data website (https://revenuedata.doi.gov/). In the pattern library you’ll find the design building blocks of the site, from basics like typography and colors to more intricate components like javascript-generated charts and maps. This guide assumes knowledge of html, css, and other technologies used to build this website.

Goals of this styleguide

• Give insight into the why behind our style decisions
• Promote consistency
• Make it easier to maintain and add new content
• Show how some types of content can be laid out

Design principles for the NRRD site

Let the data speak for itself

Keep graphs free from superfluous embellishment and decorative “chart junk.” Tasteful, minimal illustrations may be used where appropriate, to help make the site more friendly. Infographics here and there can serve to visually explain some concepts and systems. Most of the site’s visuals are in the form of data-driven charts, in keeping with its goals.

Offer depth as-needed

Provide complete documentation and intuitive access to full data sets, but don’t overwhelm users by presenting all levels of data at the same time.

Surface what’s interesting

People want to see the latest information, so always show the most recent data by default. Also, big numbers and dramatic trends often lead to meaningful stories, so choose scannable chart designs that make trends legible without making users poke around to root them out.

Cater to both experts and novices

The site is meant to serve a wide range of users, ranging from experts who know the industry well to interested citizens who are brand new to the concept of extraction on public lands. Experts want all the data, fast, so give them easy access to downloads, and look to build powerful tools that let them customize the information. Less-experienced visitors need more guidance and background information. Work to meet their needs without dumbing down the site, or impacting the experience for those who rely on this information as part of their job.

Make it work on their device

It’s a challenge to design complex data-heavy content for mobile. Everyone uses a smartphone, though, so do the design work necessary to make everything responsive. For example, collapse longer content into accordions, or disable map hover behavior on mobile in favor of state selectors.

Make it accessible

Use the guidelines and 508 standards listed on the Accessibility page.

Styles

See our pattern library for styles.