UX & UI Design
Glossary
German – English Terms
From A to Z. English technical term in small print above the German term.
All technical terms from the course from A to Z, including their English equivalents as used in Figma, design systems and specialist articles.
0–9
12-COLUMN GRID
12-column grid
Most common desktop grid, as it can be divided by 2, 3, 4, and 6.
A
Affordance
Affordance
The action an element offers, such as pressing a button.
ATOMIC DESIGN
Atomic Design
A model that builds interfaces from atoms, molecules, and organisms.
B
CONTROL
Control element
Element that accepts input: button, checkbox, slider, dropdown.
BREAKPOINT
Breakpoint
Screen width at which a layout changes.
BUTTON HIERARCHY
Button hierarchy
Hierarchy of primary, secondary and text buttons by importance.
C
CALL TO ACTION
Call to Action
The call to the most important action of a view, usually as a primary button.
Thu
DESIGN SYSTEM
Design System
A collection of tokens, components, and rules that share design and code.
DESIGN TOKEN
Design token
Named value for colour, font, spacing or radius, used consistently throughout.
F
FOCUS STATE
Focus state
Visible indication of the element currently receiving keyboard input.
G
LAW OF PROXIMITY
Law of proximity
Things that are close to each other are perceived as belonging together.
H
HOVER
Hover
State when the mouse pointer is over an element. It does not exist on touchscreens.
K
COMPONENT
Component
Reusable component with fixed properties and variants.
CONSISTENCY
Consistency
Identical elements look and behave the same, throughout the entire product.
L
LAYOUT
Layout
The arrangement of content on a surface, supported by grids and spacing.
Empty state
Empty state view, such as an empty list; explains what belongs here and suggests the first step.
M
MICROCOPY
Microcopy
Short interface copy: button labels, tags, tooltips, error messages.
MOBILE FIRST
Mobile First
An approach where the narrowest view is designed first.
MOCK-UP
Mock-up
Static, detailed design of a view.
P
PLACEHOLDER
Placeholder
Grey placeholder text in the field. Never replaces the label, as it disappears when you start typing.
PRIMARY ACTION
Primary action
The single most important action of a view.
PROTOTYPE
Prototype
Clickable model of a workflow used for testing prior to implementation.
Responsive Design
A layout that adapts to the screen width: columns stack, and navigation and images change shape.
S
TYPE SCALE
Font scale
Defined sequence of font sizes based on a base size and a ratio.
SIGNIFIER
Signifier
A visible indicator showing that and how something can be operated.
GUTTER
Pier
Space between the columns of a grid.
SYSTEM FONT
System font
Operating system font, such as SF Pro or Roboto. Loads instantly.
V
VARIANT
Variant
Variant of a component, such as a primary or secondary button.
Z
STATE
Condition
How an element currently looks: default, hover, focus, pressed, disabled, error.