Affordance
Design Affordance
A visual cue suggesting how an element should be used (e.g. a raised button affords clicking).
Technical Detail
Affordance is a foundational concept in visual design theory. It influences how users perceive and interact with interfaces, affecting readability, hierarchy, and aesthetic appeal. The design principles behind affordance are codified in systems like Material Design 3, Apple's Human Interface Guidelines, and the W3C's Web Content Accessibility Guidelines. Implementing affordance correctly requires balancing aesthetic intent with accessibility requirements and cross-platform consistency.
Example
```css
/* Affordance: design specification example */
.component {
font-family: Inter, system-ui, sans-serif;
font-size: 1rem;
line-height: 1.5;
color: #1a1a1a;
padding: 1rem 1.5rem;
}
```
Related Tools
C
Color Palette Generator
T
Type Scale Generator
S
Spacing Scale Generator
R
Responsive Breakpoints
A
Aspect Ratio Calculator
C
Color Shade Generator
F
Font Pairing Suggestions
C
Contrast Checker
D
Design Tokens Generator
S
Social Media Size Guide
G
Golden Ratio Calculator
A
App Icon Size Guide
S
Shadow System Generator
M
Multi-Stop Gradient Generator
C
CSS Pattern Generator
Related Terms
Accessibility
Analogous Colors
Baseline Grid
Color Blindness
Color Temperature
Color Wheel
Complementary Colors
Contrast Ratio
Design System
Design Token
Fitts's Law
Font Weight
Gestalt Principles
Golden Ratio
Grid System
Hick's Law
HSL
Information Architecture
Material Design
Mockup
Modular Scale
Monochromatic Color
Negative Space
Prototype
Responsive Design
Rule of Thirds
Split-Complementary
Tracking
Triadic Colors
Typeface
Visual Hierarchy
Wireframe