Design Strategies: UI/UX design

Creating for the web or mobile device can provide many opportunities to connect, educate, and mobilize. However, it is important to remember that just because you aren’t using paper, that UI/UX work does still have a negative environmental and social impact. Server farms, for example, that host our online creations and data, can use up to 100 billion KwH of energy (NRDC).

Also, the computers and other electronics utilized in the digital world become an environmental and human health hazard at the end of their lifecycles. However, it is important to point out that this same problem exists in the print design world. We use large and small-scale printers, laptops, scanners, digital cameras, etc. that also end up in the landfill and exported for dangerous disassembly overseas. It’s important when deciding between digital versus print to look at the entire system in which your piece will live and die. This is a project for our engineering and industrial design colleagues to tackle with us.

Practical Strategies to Lower Your Impact

  • Streamline your code, video, and images to reduce download time and consequently energy. You can use CSS sprites or effects instead of images and combine CSS and Javascript files to better organize your code
    • With this in mind, it’s also important to be frugal with the amount of Javascript you use as it can slow down your site and increase energy usage
  • Include a specially formatted print-friendly option designed to minimize paper waste for every web page created (CSS styles make this easy).
  • Be clear and concise in your writing as extra data means more energy used.
  • Content Management Systems (CMS) are great if coding isn’t your thing (we use one!), but if you can code a static site, go for it. It can be more original (less templatized), leaner, and less climate meaner
  • Avoid cookies, advertising, and third party tracking if it all possible for the organization’s mission online. All of this requires extra code and data transfer that increases greenhouse gas emissions
  • Look for web open font format (WOFF or WOFF2) typefaces as they are commonly available, compressed, and have embedded metadata. This will somewhat limit your typeface options, but you’ll create fewer greenhouse gases from data transfer and download times from bulkier typefaces.
  • Keep the audience’s experience of your site simple. The easier it is to navigate to find content, the less time and energy is used. Your audiences of focus will want to come back more often the better your site is designed!
Keep Up-To-Date
  • Use the newest PHP code.
  • Use server caching to avoid dynamically generating your page every time in a CMS. This will decrease server processing and energy used.
  • Create Accelerated Mobile Pages (AMP) as they are optimized for optimal mobile browsing for faster page load. Google also prioritizes AMP content in mobile searches.
Use Renewable Energy
  • Host at a company that powers their facilities with renewable energy or offsets its non-renewable energy use by donating directly to renewable energy projects, or by purchasing certified carbon offsets through a legitimate program (such as Green-e).
    TechRadar ranks the top five green hosting services for 2020 as:

  • Design on Energy-Star-rated equipment (visit US EPA’s Energy Star program).
  • Consider including an environmental-awareness component or message about the environmental impact of the project.
  • If you’re great with technology, you could host your own website on a home server powered by renewable energy.