The modernist principle of material honesty—allowing materials to express their true nature rather than imitating something else—has been fundamental to American design. But how does this concept translate to the intangible realm of digital interfaces? This article explores the meaning of material honesty in digital design and how it can create more authentic user experiences.
The History of Material Expression in Digital Interfaces
Digital interfaces have evolved through distinct phases in their approach to materials. Early GUIs heavily relied on skeuomorphism—imitating physical objects like folders, notepads, and calculators to help users understand digital functions through familiar metaphors.
As users became more digitally literate, interfaces moved toward flat design, abandoning physical metaphors entirely. This shift, while visually cleaner, sometimes sacrificed affordances that helped users understand how to interact with interface elements.
The pendulum has since swung toward a middle ground, exemplified by Google's Material Design and Apple's Human Interface Guidelines, which establish digital materials with their own properties rather than simply imitating physical objects or abandoning materiality altogether.
What Are Digital Materials?
If we accept that digital interfaces have their own materials, what are they? Unlike physical materials like wood or steel, digital materials are defined by their behaviors more than their physical properties.
Properties of Digital Materials
/* Digital material properties expressed in CSS */
.digital-surface {
/* Base properties */
background-color: var(--surface-color);
border-radius: 8px;
/* Interaction properties */
transition: transform 0.2s ease, box-shadow 0.2s ease;
cursor: pointer;
/* Elevation/depth properties */
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.digital-surface:hover {
/* Surface responds to proximity */
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
.digital-surface:active {
/* Surface responds to touch */
transform: translateY(1px);
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}Digital materials may include properties like:
- Response to interaction (touch, hover, focus)
- Behavior when moved or transformed
- Visual density and opacity
- Layering and elevation
- Animation and transition characteristics
Material Honesty in Digital Design
True digital material honesty doesn't mean abandoning all metaphors from the physical world—it means creating digital materials with their own integrity that behave in consistent, understandable ways.
Just as modernist architects revealed the structural elements of buildings rather than hiding them behind ornament, honest digital materials reveal their underlying functionality rather than disguising it.
Signs of Material Dishonesty in Digital Design
Digital interfaces can be dishonest in their material expression in several ways:
- Buttons that don't look clickable (or non-buttons that do)
- Elements that appear to be on the same plane but behave as if on different planes
- Excessive ornamentation that disguises function
- Inconsistent behavior for similar-looking elements
- Visual affordances that promise interactions the system doesn't deliver
Case Studies in Digital Material Honesty
The following case studies demonstrate how brands have evolved their digital interfaces to embrace material honesty while maintaining their unique identity: