This styleguide contains design documentation and components for the Natural Resources Revenue Data website (https://revenuedata.doi.gov/). Here 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
We also adhere to accessibility guidelines laid down in Section 508, so those with impaired vision can access all of the information on the site in some way.