Design VocabularyDesign vocabulary · Edition 01

VOCABULARY / ENTRY

Sustainable Design

sustainable-design

Add to comparison +
Ideas & philosophiesScope: Whole experiencesustainable-design · v0.1.0

Deliberately reduce a digital product's demand on transferred bytes, compute, and devices across its life cycle, including the behavior the product encourages, instead of relying on device replacement to keep the experience working.

Illustration · Editorial artwork, no interactive specimen yet
An editorial illustration: a fictional FIELDNOTES page on the left, and on the right a row of weight-like blocks shrinking from left to right, with a simple leaf motif and the silhouette of an older device still in use.
An editorial illustration: a fictional FIELDNOTES page on the left, and on the right a row of weight-like blocks shrinking from left to right, with a simple leaf motif and the silhouette of an older device still in use.

Recognizing it

  • Measure actual transferred bytes before and after a change, rather than relying on intuition
  • Keep core tasks usable on existing older devices, reducing forced upgrades
  • Label energy or carbon claims as a specific model's estimate, not a measured fact

Concept boundary

Not the same as calm technology: calm technology optimizes whether information interrupts attention, while sustainable design optimizes resource costs such as transferred bytes, compute, and device lifespan; the two can coexist but target different things. It is also not a generic sustainability slogan — every change should be backed by a measurement such as transferred bytes, and any energy or carbon figure must name the model it comes from rather than being presented as a precise measurement.

When to consider it

  • The product's data, battery, or heat cost has become a real pain point for users or operations
  • Design review needs to trade off visual richness against transferred bytes and compute cost
  • A large share of the target audience uses low-end or older devices

When to be cautious

  • Using sustainability as a marketing slogan without measuring any actual bytes or energy data
  • Presenting a carbon-model estimate to the public as a precise measurement
  • Cutting resource use at the cost of accessibility or core functionality

Tradeoff

Reducing resource demand often means trimming visual richness, animation, or high-resolution assets, which must be weighed against experience goals, brand expression, and accessibility needs.

Conditional rules · Editorial advice

When Reviewing a new asset or feature's resource impactMustMeasure its actual impact on transferred bytes first, then decide whether to trim, lazy-load, or replace it.
When Describing energy or carbon impact publiclyMustState that the figure is an estimate from a named model; never present it as a measured fact.
When Designing interaction and visuals for long-term maintenanceRecommendedPrioritize keeping functionality usable on existing older devices rather than defaulting to assuming newer hardware.

Related entries

Calm Technology ↗Related, but different · When both attention and resource cost matter at once

Calm technology optimizes interruption and attention; sustainable design optimizes transferred bytes and device lifespan. The goals differ and should be assessed separately, not substituted for each other.

Privacy by Design ↗Related, but different · When deciding what data to collect and transmit by default

Collecting and transmitting less data by default typically reduces transferred bytes and the user's privacy exposure at the same time.

Universal Design ↗Works with · When designing the core experience for users on varied devices and networks

Keeping core tasks achievable on older devices and weak networks aligns with universal design's goal of achievable outcomes for all users.

Sources and what they support

W3C · Web Sustainability Guidelines (Group Note Draft) ↗

Published 2026-07-03 as a Group Note Draft, explicitly not a W3C Recommendation; it gives concrete guidance to minify code and data files, reduce unnecessary computation, and avoid planned obsolescence by keeping compatibility with older devices for as long as reasonably possible.

Retrieved: 2026-09-15 · Archived 2026-09-16
web.dev · Reduce network payloads using text compression ↗

Explains that compressing and minifying text-based assets such as CSS, JavaScript, and HTML can cut their transferred bytes by roughly 65-86%, a concrete way to control page transfer weight.

Retrieved: 2026-09-15 · Archived 2026-09-16

Definitions reference these sources. Digital specimens, selection advice, relationships, and recipes are editorial work and have not been validated through user research.

Type extensions and implementation notes

This entry has no working demo yet; the illustration is editorial. Before applying this to a real product, measure that product's own transferred bytes and real-device energy and performance; do not reuse the example figures in this entry.

{
  "values": [
    "Resource restraint",
    "Long-term usability"
  ],
  "tension": "Visual and feature richness versus resource cost",
  "questions": [
    "How many measurable transferred bytes or compute cycles does this change add or remove?",
    "Does this experience require users to replace their device to keep using it?",
    "Is any energy or carbon claim labeled with the model it relies on?"
  ]
}

Open the Agent JSON file for this entryThis file repeats every field of this entry verbatim and adds its sources, archive status, and editorial scope.