The National Renewable Energy Laboratory website redesign was a long-overdue overhaul of a huge website. The website had thousands of pages owned and updated by site owners across the lab. Our team undertook a ton of work to streamline, and simplify, and update the site with UX activities that included a content inventory, stakeholder and user interviews, and benchmarking. My vision for the site is that it would be future-friendly—because who knew when the next opportunity would come to redesign such a vast site; the last complete redesign had been in the early 2000’s).
Below is the introduction from the style guide I created for the redesigned NREL.gov, which went live in December 2014.
NREL.gov Design Guide
The visual design of the National Renewable Energy Laboratory website reflects the brand attributes of the lab—unbiased, scientific, authentic, trustworthy, authoritative.
Some basic design principles and guidelines support these attributes:
- Flat design, minimal gradients
- Square corners except for form elements: rounded corners as an affordance for clickability
- Maximize photography
- Present photos in basic shapes (squares, rectangles); no collages
- Simplified and without embellishment (no borders, rounded corners, drop shadows, etc.)
- Circular photo masks permissible for outreach with specific non-technical-only audiences
- Intuitive interface, minimal controls
- Touchable interface
- Contrast bright colors with dark colors; check 508 compliance for all text
- Good typography: thin sans serif headlines, legible serif body copy
- Simplified line icons within content paired with an icon font for utility icons
The design philosophy for the NREL.gov redesign centers around five attributes:
- Mobile first
- Reusable components
Mobile First Design
The very first concepts for the website focused first on the smallest screen width. We wanted to be sure that the content, navigation, and interface elements proposed for the site would work at all screen sizes, and so determined to follow the principles of Luke Wroblewski’s “Mobile First” approach. All of the work in figuring out how the header and top-level navigation might be executed, along with the structure of the design as a whole, was concepted out first at the small screen width, then at larger widths. This ensured that only the most important elements were included from the start, and that those elements would be fully available for all screen sizes.
As work progressed on the corporate portions of the site, it became less important to build small-screen mockups of each page. Once the grid and components system was established, it became easier to see how the content would stack or order based on screen width in most cases, and by that time the content was being written from a very focused perspective as well. With the design of additional components, individual pages sometimes needed to be visualized at the smallest screen size, and often adjustments were made after the initial coding of a page.
The three characteristics of a responsive site are media queries, flexible images, and fluid grids. NREL.gov leverages the Bootstrap framework to incorporate all three of these characteristics:
- Media queries: define x-small, small, medium, and large screen sizes
- Flexible images: resize to adapt to screen widths. Also include @2x images for retina screens
- Fluid grids: adapt to screen sizes and are the foundation for equally adaptable components
Components are the content building blocks that help to create a dynamic, engaging user experience on NREL.gov. The vision for components is that a certain set of them would be defined at the outset, (but could be added to as needs arise) and could be re-used easily with small adaptations for specific content. Items like media blocks or the “content sandwich” have already been configured for maximum impact to users and for digestability of the content. By mixing and matching components within the various available grids (full width page of 12 content columns, left navigation page with 9 content columns, or portions of each) pages can be built to accommodate, organize, and hierarchically order well-formed content. More about components in the Reusable Components section.
The big concept here is that we want NREL.gov to be future-friendly and usable across devices. Increasingly, screens both large and small are also touch-enabled. Therefore, we want to try to make interactive components big enough to touch on all screen sizes.
Generally (not strictly) 40px is the minimum size used for touch controls. This means all form elements are a minimum of 40px tall. Other items, such as links, may end up with a smaller touch area, which is fine, but be cognizant of how links fall within paragraphs or lists. Increased touchability also comes from component block elements linking out rather than single words or phrases within the component block element being the link.
Accessibility is a necessity for NREL.gov as it is for all government websites. The web design and user experience aspects of Section 508 mandate things such as how information is conveyed through color, timing of content changes, color contrast, and design of tables.
Services Provided: UX consultation, visual design, CSS development, documentation