Examples of good design
We have collected several examples of existing websites related to climate change that incorporate best design practices. We're not endorsing the views of these sites over those of other sites; we are just providing them as examples of good design.
This page contains several good examples of navigation, including a general navigation bar, grouping by specific subject area, and grouping by audience identification. (from NRCS)
- This example has several good accessibility features: tabs across the top organize the site and allow the user to easily locate information, and the user is given the option of downloading information in multiple formats. (from Environmental Sci & Tech journal)
This site's best practices for clarity include tailoring information to different
audiences, including by age, occupation and geographic location.It also takes advantage of social networking tools. (from EPA)
This site's design includes several elements that make its layout understandable and visually appealing, and also make it interactive.
(from NASA Climate Change)
- This site's About Us page is an excellent example of transparency: the authors' intentions are clearly stated, they discuss how their visuals were created, and they mention the affiliations of site contributors. (from RealClimate)
"Bad to good": an animated look at incorporating best practices
In addition to good design examples, we want to provide you a look at some of the steps your group can take to improve your existing website design. This presentation focuses on a series of "screenshots" from a fake website that will take you through some of the steps for improving your site. We start with some simpler design features, and move through progressively more complex things to do.
Here are the still "screenshots":
- Version 1: the original "bad site"
This site is intentionally poorly designed, containing a mix of design features that leave much to be desired.
- Version 2: focus on design & color
- Changed sidebar and main text window background colors.
- Made all header text the same color, and all lines & text box borders the same color.
- Removed "blinky" border from left sidebar.
- Changed "Save the seals" text from grey to black.
- Version 3: focus on arrangement & navigation
- Created tabs for major categories, and moved most links to a dedicated page.
- Created a search feature.
- Added a logo & updated the title bar.
- Removed broken links and created a "recent updates" section.
- Removed 1 of the 2 donate buttons.
- Changed sidebar & title fonts to a sans serif style.
- Removed "press kit".
- Version 4: final organizational touches
- Removed horizontal bars and "click here" for links: these are "dated" web design features.
- For introductory text, added headers in sans-serif font, and made all text the same size for consistency & readability.
- "Toned down" the introductory text to match the more sober design of the site.
- Added a "Forum" link to the left sidebar, so visitors can get there without reading through the introductory text, and added a note that the forum is moderated.
- Updated "IPGC" report for timeliness.
- Increased the size of the seal photo and video box, and placed this group of items into their own box to visually pull them together.
- Placed "Kids" section into its own box, and changed the name of the educational game from "Charlie the Climate Cockroach" to something with better associations for adults.