2014-2018 — Era

Material Design

Metáforas físicas de Google para interfaces digitales.

Material Design is a design language developed by Google in 2014. Expanding on the “card” motifs that debuted in Google Now, Material Design uses grid-based layouts, responsive animations and transitions, padding, and depth effects such as lighting and shadows. The goal was to create a unified system that could adapt across different devices and screen sizes, from the smallest watch to the largest TV.

The Metaphor of Paper

The core metaphor of Material Design is paper. The UI is imagined as a stack of “quantum paper” sheets. These sheets can expand, contract, reshape, and split, but they follow the laws of physics. They have thickness (1dp), they cast shadows, and they cannot pass through each other.

This physical model provides a consistent logic for the user. If a button casts a shadow, it means it is floating above the content. If a card expands, it pushes other content out of the way. This predictability makes the interface intuitive.

Motion Provides Meaning

Material Design emphasizes that motion should be meaningful. Things shouldn’t just flash on the screen; they should originate from somewhere. When you click a floating action button (FAB), the new screen should expand from that button, showing the connection between the action and the result.

This focus on choreography and transition changed web design. It made animation a functional requirement, not just a decoration.

Material Design 3 Content Design
Fuente: https://m3.material.io/
Material Design 3 UI Elements
Fuente: https://m3.material.io/
Material Design 3 Components
Fuente: https://m3.material.io/
Material Design 3 Layouts
Fuente: https://m3.material.io/

Material You (Material 3)

In 2021, Google introduced “Material You” (Material 3), the next evolution of the system. It focuses on personalization. It extracts colors from the user’s wallpaper and applies them to the entire UI, creating a unique theme for every user. It also introduced larger, more playful shapes and softer typography.

This shift acknowledges that a global design system doesn’t have to be rigid. It can be expressive and personal while still maintaining the underlying logic of the paper metaphor.

Key Characteristics

  1. Shadows and Depth: Using Z-axis to show hierarchy.
  2. Bold Colors: Primary and accent colors used intentionally.
  3. The FAB: The Floating Action Button as a primary call to action.
  4. Ripple Effect: Touch feedback that radiates from the finger.
  5. Cards: Grouping information into digestible containers.