Die wichtigsten Begriffe aus Grafikdesign, Typografie, Markendesign, UI Design, Webdesign und Barrierefreiheit, kurz erklärt.
A
Above the Fold
Der Bereich einer Seite, der ohne Scrollen sichtbar ist. Hier sollte klar werden, worum es geht und was der nächste Schritt ist. Mehr im Themenhub Webdesign
Affordance
Die Eigenschaft eines Elements, die zeigt, wie es benutzt wird. Ein Button, der wie ein Button aussieht, lädt zum Klicken ein. Mehr im Themenhub Webdesign
Alternativtext
Eine Textbeschreibung eines Bildes für Screenreader und für den Fall, dass das Bild nicht lädt. Rein schmückende Bilder bekommen einen leeren Alternativtext. Mehr im Themenhub Barrierefreiheit
Anschnitt
Elemente, die bis an den Rand eines Druckprodukts reichen, legst du rund 3 mm über das Endformat hinaus an. So entstehen beim Schneiden keine weißen Ränder (Blitzer). Mehr im Themenhub Gestaltung
ARIA
WAI-ARIA ergänzt HTML um Rollen, Zustände und Eigenschaften für assistive Technologien, etwa „aufgeklappt“. Erste Regel: natives HTML geht vor ARIA. Mehr im Themenhub Barrierefreiheit
Atomic Design
Eine Methode von Brad Frost, Interfaces aus kleinen Teilen aufzubauen: Atome, Moleküle, Organismen, Templates und Seiten. Mehr im Themenhub Webdesign
Auflösung (ppi, dpi)
Die Zahl der Bildpunkte pro Zoll. Für den Offsetdruck gelten 300 ppi in Endgröße als Richtwert; am Bildschirm zählen die Pixelmaße des Bildes. Mehr im Themenhub Gestaltung
B
Barrierefreies PDF
Ein getaggtes PDF mit Struktur, Lesereihenfolge, Alternativtexten und Sprache, damit Screenreader es vorlesen können. Die Norm dafür heißt PDF/UA (ISO 14289). Mehr im Themenhub Barrierefreiheit
Barrierefreiheit
Barrierefreiheit heißt, dass Menschen mit und ohne Behinderung digitale Angebote ohne fremde Hilfe nutzen können. Maßstab für Websites sind die Web Content Accessibility Guidelines (WCAG). Mehr im Themenhub Barrierefreiheit
Barrierefreiheitserklärung
Eine Seite, die beschreibt, wie barrierefrei ein Angebot ist, welche Teile es noch nicht sind und wie man Barrieren melden kann. Öffentliche Stellen müssen sie veröffentlichen. Mehr im Themenhub Barrierefreiheit
Brailleschrift
Eine ertastbare Punktschrift aus bis zu sechs Punkten je Zeichen. Blinde Menschen lesen digitale Texte oft über eine Braillezeile. Mehr im Themenhub Barrierefreiheit
Brand Manual
Das Regelwerk einer Marke, auch Styleguide genannt: Logo-Anwendung, Farben, Schriften, Bildsprache, Tonalität und Beispiele. Es sorgt dafür, dass alle gleich gestalten. Mehr im Themenhub Markendesign
Breakpoint
Eine Bildschirmbreite, ab der sich das Layout einer Website ändert, etwa von einer auf zwei Spalten. Mehr im Themenhub Webdesign
Briefing
Die Auftragsbeschreibung eines Designprojekts mit Ziel, Zielgruppe, Inhalten, Rahmen, Budget und Terminen. Ein gutes Briefing spart Korrekturschleifen. Mehr im Themenhub Gestaltung
C
Call to Action (CTA)
Eine Handlungsaufforderung, meist als Button, etwa „Broschüre holen“. Pro Abschnitt sollte eine Hauptaktion klar erkennbar sein. Mehr im Themenhub Webdesign
CMYK
Das Farbmodell des Vierfarbdrucks aus Cyan, Magenta, Gelb (Yellow) und Schwarz (Key). Druckdaten legst du in CMYK an, weil der druckbare Farbraum kleiner ist als der des Bildschirms. Mehr im Themenhub Gestaltung
Consent-Banner
Das Fenster, das die Einwilligung für nicht notwendige Cookies und Dienste einholt (DSGVO). Ablehnen sollte so einfach sein wie Zustimmen. Mehr im Themenhub Webdesign
Content-Management-System (CMS)
Eine Software, mit der du Inhalte einer Website ohne Programmierkenntnisse pflegst. Das verbreitetste CMS ist WordPress. Mehr im Themenhub Webdesign
Core Web Vitals
Kennzahlen von Google für das Nutzungserlebnis: Ladezeit des größten Elements (LCP), Reaktion auf Eingaben (INP) und visuelle Stabilität (CLS). Mehr im Themenhub Webdesign
Corporate Design
Das Corporate Design ist das einheitliche visuelle Erscheinungsbild einer Organisation: Logo, Farben, Schriften, Bildsprache und Gestaltungsregeln. Mehr im Themenhub Markendesign
Corporate Identity
Die Identität einer Organisation aus Haltung, Werten, Verhalten, Kommunikation und Erscheinungsbild. Das Corporate Design ist ihr sichtbarer Teil. Mehr im Themenhub Markendesign
D
Dark Pattern
Eine Gestaltung, die Nutzer:innen zu Entscheidungen gegen ihr eigenes Interesse drängt, etwa eine versteckte Abo-Kündigung. Der Digital Services Act der EU verbietet solche manipulativen Oberflächen auf Online-Plattformen. Mehr im Themenhub Webdesign
Design Thinking
Ein nutzerzentrierter Innovationsprozess: verstehen, beobachten, Sichtweise definieren, Ideen finden, Prototyp bauen und testen, oft in mehreren Runden. Mehr im Themenhub Webdesign
Design Token
Ein benannter Gestaltungswert wie eine Farbe, ein Abstand oder eine Schriftgröße, der in Design und Code gleich verwendet wird. Ändert sich der Wert, ändert er sich überall. Mehr im Themenhub Webdesign
Designsystem
Eine Sammlung aus Regeln, Design Tokens und wiederverwendbaren Komponenten. Damit gestalten und entwickeln Teams Produkte einheitlich und schneller. Mehr im Themenhub Webdesign
Domain und Hosting
Die Domain ist die Adresse einer Website, das Hosting der Server, auf dem ihre Dateien liegen. Beides buchst du meist bei einem Provider. Mehr im Themenhub Webdesign
E
European Accessibility Act (EAA)
Die EU-Richtlinie 2019/882 über Barrierefreiheitsanforderungen. Seit 28. Juni 2025 gilt sie für bestimmte Produkte und Dienstleistungen, etwa Onlineshops. Österreich setzt sie mit dem Barrierefreiheitsgesetz (BaFG) um, Deutschland mit dem BFSG. Mehr im Themenhub Barrierefreiheit
F
Favicon
Das kleine Symbol einer Website im Browser-Tab und in Lesezeichen, meist aus dem Logo abgeleitet. Mehr im Themenhub Webdesign
Flattersatz und Blocksatz
Im Flattersatz sind die Zeilen links bündig und rechts unterschiedlich lang, im Blocksatz sind beide Ränder bündig. Am Bildschirm liest sich linksbündiger Flattersatz besser, weil Blocksatz ungleichmäßige Wortabstände erzeugt. Mehr im Themenhub Gestaltung
Fokusindikator
Die sichtbare Markierung des Elements, das gerade per Tastatur bedient wird. Er muss sichtbar sein und darf nicht von anderen Inhalten verdeckt werden. Mehr im Themenhub Barrierefreiheit
G
Generative Engine Optimization (GEO)
Die Optimierung von Inhalten für KI-Antwortmaschinen. Klare Fakten, eine saubere Struktur, Quellen und strukturierte Daten erhöhen die Chance, zitiert zu werden. Mehr im Themenhub Webdesign
Gestaltgesetze
Wahrnehmungsprinzipien wie Nähe, Ähnlichkeit, Geschlossenheit und Kontinuität. Sie erklären, warum wir Elemente als zusammengehörig sehen, und helfen beim Ordnen von Layouts. Mehr im Themenhub Gestaltung
Gestaltungsraster
Ein unsichtbares System aus Spalten, Zeilen und Abständen, an dem sich alle Elemente ausrichten. Es sorgt für Ordnung und einen einheitlichen Auftritt über viele Seiten hinweg. Mehr im Themenhub Gestaltung
Goldener Schnitt
Ein Teilungsverhältnis von etwa 1 : 1,618, das als harmonisch empfunden wird. In Layout und Logo dient es als Orientierung, nicht als feste Regel. Mehr im Themenhub Gestaltung
Grundlinie
Die gedachte Linie, auf der die Buchstaben stehen. Ein Grundlinienraster richtet Text über Spalten hinweg auf dieselbe Höhe aus. Mehr im Themenhub Gestaltung
H
HTML und CSS
HTML beschreibt Struktur und Bedeutung von Inhalten (Überschrift, Absatz, Liste), CSS ihr Aussehen (Farben, Schriften, Layout). Mehr im Themenhub Webdesign
K
Kapitälchen
Großbuchstaben in der Höhe der Kleinbuchstaben. Echte Kapitälchen sind eigens gezeichnet und wirken ausgewogener als verkleinerte Versalien. Mehr im Themenhub Gestaltung
Kerning
Kerning ist der Ausgleich des Abstands zwischen zwei bestimmten Buchstaben, damit ein Wort optisch gleichmäßig wirkt, etwa bei „AV“ oder „To“. Mehr im Themenhub Gestaltung
Komponente
Ein wiederverwendbares Interface-Element wie Button, Eingabefeld oder Karte, mit festgelegten Zuständen (etwa Hover, Fokus, deaktiviert) und Varianten. Mehr im Themenhub Webdesign
Kontrast
Der Unterschied zwischen Elementen in Größe, Farbe, Helligkeit, Form oder Gewicht. Kontrast schafft Hierarchie und lenkt den Blick. Für die Lesbarkeit zählt besonders der Helligkeitskontrast (siehe Kontrastverhältnis). Mehr im Themenhub Gestaltung
Kontrastverhältnis
Das Helligkeitsverhältnis zwischen Vorder- und Hintergrund. WCAG AA verlangt mindestens 4,5 : 1 für normalen Text und 3 : 1 für großen Text sowie für Bedienelemente und Grafiken. Mehr im Themenhub Barrierefreiheit
L
Landingpage
Eine eigenständige Seite mit genau einem Ziel, etwa einer Anmeldung. Besucher:innen kommen meist über eine Anzeige oder einen Newsletter dorthin. Mehr im Themenhub Webdesign
Laufweite (Tracking)
Die gleichmäßige Veränderung aller Buchstabenabstände eines Wortes oder Textes. Versalien und sehr kleine Schriftgrade brauchen meist etwas mehr Laufweite. Mehr im Themenhub Gestaltung
Lazy Loading
Bilder und Videos werden erst geladen, wenn sie in den sichtbaren Bereich kommen. Das beschleunigt den ersten Seitenaufbau. Mehr im Themenhub Webdesign
Leichte Sprache und Einfache Sprache
Leichte Sprache folgt festen Regeln wie kurzen Sätzen und Erklärungen schwieriger Wörter und wird mit der Zielgruppe geprüft. Einfache Sprache ist weniger streng und richtet sich an ein breites Publikum. Mehr im Themenhub Barrierefreiheit
Lesbarkeit und Leserlichkeit
Leserlichkeit beschreibt, wie gut sich einzelne Zeichen einer Schrift unterscheiden lassen. Lesbarkeit beschreibt, wie mühelos ein ganzer Text zu lesen ist, abhängig von Satz, Zeilenlänge und Abständen. Mehr im Themenhub Gestaltung
Ligatur
Die Verbindung von zwei oder mehr Buchstaben zu einem Zeichen, etwa fi oder fl. Ligaturen verhindern, dass sich Buchstabenteile unschön berühren. Mehr im Themenhub Gestaltung
Logo
Das zentrale Erkennungszeichen einer Marke. Man unterscheidet Wortmarke (nur Schrift), Bildmarke (nur Zeichen) und Wort-Bild-Marke (beides kombiniert). Mehr im Themenhub Markendesign
M
Mikrointeraktion
Eine kleine, gezielte Rückmeldung im Interface, etwa ein Häkchen nach dem Speichern oder ein Herz, das sich beim Antippen füllt. Mehr im Themenhub Webdesign
Mobile First
Ein Vorgehen, bei dem du zuerst für kleine Bildschirme gestaltest und das Layout dann für größere erweiterst. Mehr im Themenhub Webdesign
Mockup
Eine realistische Darstellung eines Entwurfs im Einsatz, etwa ein Logo auf der Visitenkarte oder ein Screen im Smartphone. Mockups helfen, Entwürfe überzeugend zu präsentieren. Mehr im Themenhub Gestaltung
Moodboard
Eine Collage aus Bildern, Farben, Schriften und Texturen, die die Stimmung eines Projekts sichtbar macht, bevor gestaltet wird. Mehr im Themenhub Gestaltung
P
Page Builder
Ein Werkzeug wie Elementor, mit dem du Seiten visuell zusammenbaust. Bequem, erzeugt aber oft zusätzlichen Code, der die Ladezeit erhöht. Mehr im Themenhub Webdesign
PDF/X
Eine ISO-genormte PDF-Variante für den Austausch von Druckdaten. Sie legt unter anderem fest, dass Schriften eingebettet und Farbräume eindeutig definiert sind. Mehr im Themenhub Gestaltung
Persona
Eine fiktive, auf Recherche gestützte Beschreibung einer typischen Nutzerin oder eines typischen Nutzers mit Zielen, Bedürfnissen und Hürden. Mehr im Themenhub Webdesign
Positionierung
Die klare Antwort darauf, wofür eine Marke steht, für wen sie da ist und worin sie sich von anderen unterscheidet. Gutes Markendesign macht die Positionierung sichtbar. Mehr im Themenhub Markendesign
POUR-Prinzipien
Die vier Grundprinzipien der WCAG: Inhalte müssen wahrnehmbar (perceivable), bedienbar (operable), verständlich (understandable) und robust sein. Mehr im Themenhub Barrierefreiheit
Prototyp
Ein klickbares Modell eines Produkts, mit dem du Abläufe testest, bevor entwickelt wird. Er reicht von der Skizze (Low Fidelity) bis nahe ans fertige Produkt (High Fidelity). Mehr im Themenhub Webdesign
R
Rastergrafik
Ein Bild aus einzelnen Bildpunkten (Pixeln), etwa ein Foto im Format JPG, PNG oder WebP. Beim Vergrößern verliert es an Schärfe. Mehr im Themenhub Gestaltung
Reinzeichnung
Die technisch saubere, finale Ausarbeitung eines Entwurfs als druck- oder produktionsfertige Datei. Mehr im Themenhub Gestaltung
Responsive Webdesign
Ein Layout, das sich mit flexiblen Rastern, Bildern und Media Queries an jede Bildschirmgröße anpasst. Mehr im Themenhub Webdesign
RGB
Das additive Farbmodell aus Rot, Grün und Blau, mit dem Bildschirme Farben darstellen. Gestaltungen für Web und Social Media legst du in RGB an. Mehr im Themenhub Gestaltung
S
Satzspiegel
Die Fläche einer Seite, auf der Text und Bilder stehen. Die Ränder rundherum bleiben frei und bestimmen Ruhe und Proportion der Seite. Mehr im Themenhub Gestaltung
Schriftfamilie und Schriftschnitt
Eine Schriftfamilie umfasst alle Varianten einer Schrift. Jede Variante, etwa Light, Regular, Bold oder Italic, ist ein Schriftschnitt. Mehr im Themenhub Gestaltung
Schriftgrad
Die Größe einer Schrift. Im Druck wird sie in Punkt (pt) angegeben, am Bildschirm in Pixel (px) oder relativ in rem. Mehr im Themenhub Gestaltung
Screenreader
Eine Software, die Bildschirminhalte vorliest oder auf einer Braillezeile ausgibt, etwa NVDA, JAWS oder VoiceOver. Mehr im Themenhub Barrierefreiheit
Semantisches HTML
HTML-Elemente, die nach ihrer Bedeutung eingesetzt werden: Überschriften, Listen, Navigation, Buttons. So verstehen Screenreader und Suchmaschinen den Aufbau einer Seite. Mehr im Themenhub Barrierefreiheit
Serife
Die kleinen Querstriche an den Enden von Buchstaben. Schriften ohne diese Striche heißen serifenlos oder Sans Serif. Mehr im Themenhub Gestaltung
Sonderfarbe (Volltonfarbe)
Eine Druckfarbe, die vorab exakt gemischt wird, statt sie aus CMYK aufzubauen. Systeme wie Pantone oder HKS machen Markenfarben über Druckereien hinweg gleich. Mehr im Themenhub Gestaltung
SSL/TLS-Zertifikat
Es verschlüsselt die Verbindung zwischen Browser und Website, erkennbar an https. Ohne Zertifikat warnen Browser vor der Seite. Mehr im Themenhub Webdesign
Strukturierte Daten
Maschinenlesbare Angaben nach Schema.org, meist als JSON-LD. Sie sagen Suchmaschinen und KI-Systemen, ob eine Seite etwa einen Kurs, eine Person oder FAQ beschreibt. Mehr im Themenhub Webdesign
Stylescape
Ein weiterentwickeltes Moodboard, das Markenelemente schon in Anwendungen zeigt. Es macht eine Designrichtung greifbar, bevor alles ausgearbeitet ist. Mehr im Themenhub Gestaltung
Suchmaschinenoptimierung (SEO)
Alle Maßnahmen, mit denen eine Website in Suchmaschinen besser gefunden wird: passende Inhalte, saubere Technik, klare Überschriften und gute Verlinkung. Mehr im Themenhub Webdesign
SVG
Ein vektorbasiertes Bildformat für das Web. SVGs bleiben in jeder Größe scharf, sind klein und lassen sich per CSS einfärben. Mehr im Themenhub Webdesign
T
Tastaturbedienbarkeit
Alle Funktionen lassen sich ohne Maus bedienen, mit Tabulator, Eingabe, Leertaste und Pfeiltasten, in einer logischen Reihenfolge. Mehr im Themenhub Barrierefreiheit
Tonalität
Die Art, wie eine Marke spricht: förmlich oder locker, sachlich oder emotional. Sie wird im Brand Manual festgehalten, damit Texte wie aus einem Guss klingen. Mehr im Themenhub Markendesign
Touch Target (Zielgröße)
Die Fläche, die man antippen oder anklicken kann. WCAG 2.2 verlangt mindestens 24 × 24 CSS-Pixel (Kriterium 2.5.8); 44 × 44 Pixel gelten als gute Praxis. Mehr im Themenhub Webdesign
U
Untertitel und Audiodeskription
Untertitel machen gesprochene Inhalte für gehörlose Menschen zugänglich, Audiodeskription beschreibt wichtige Bildinhalte für blinde Menschen. Mehr im Themenhub Barrierefreiheit
Usability-Test
Nutzer:innen lösen typische Aufgaben mit einem Produkt, während beobachtet wird, wo sie zögern oder scheitern. Schon fünf Tests decken viele Probleme auf. Mehr im Themenhub Webdesign
User Experience (UX)
Das gesamte Erlebnis vor, während und nach der Nutzung eines Produkts. UX Design gestaltet Abläufe so, dass sie verständlich, nützlich und angenehm sind. Mehr im Themenhub Webdesign
User Flow
Die Abfolge der Schritte, die Nutzer:innen gehen, um ein Ziel zu erreichen, etwa vom Produkt bis zur Bestellung. Mehr im Themenhub Webdesign
User Interface (UI)
Die Benutzeroberfläche eines digitalen Produkts mit allem, was man sieht und bedient: Layout, Typografie, Farben, Buttons, Formulare. Mehr im Themenhub Webdesign
UX Writing
Das Schreiben der Texte im Interface: Buttons, Hinweise, Fehlermeldungen. Gute Mikrotexte sind kurz, eindeutig und sagen, was als Nächstes passiert. Mehr im Themenhub Webdesign
V
Variable Font
Eine Schriftdatei, die stufenlose Zwischenstufen entlang von Achsen wie Gewicht oder Breite enthält. Im Web ersetzt sie mehrere einzelne Schnitte und spart Ladezeit. Mehr im Themenhub Gestaltung
Vektorgrafik
Eine Grafik aus mathematisch beschriebenen Pfaden, die sich ohne Qualitätsverlust beliebig skalieren lässt. Logos und Icons entstehen als Vektor (etwa SVG, AI, EPS oder PDF). Mehr im Themenhub Gestaltung
Versalien
Großbuchstaben. Für kurze Auszeichnungen wie Überschriften-Kicker eignen sie sich gut, längere Texte in Versalien lesen sich schwerer. Mehr im Themenhub Gestaltung
Visuelle Hierarchie
Die Rangordnung von Inhalten durch Größe, Gewicht, Farbe und Position. Sie sorgt dafür, dass Betrachter:innen das Wichtigste zuerst sehen. Mehr im Themenhub Gestaltung
W
WCAG
Die Web Content Accessibility Guidelines des W3C, aktuell Version 2.2. Sie beschreiben prüfbare Erfolgskriterien in den Stufen A, AA und AAA; rechtlich gefordert ist meist AA. Mehr im Themenhub Barrierefreiheit
Webfont
Eine Schrift, die eine Website mitlädt, meist im Format WOFF2. Achte auf die Lizenz und hoste Schriften selbst, statt sie von Drittservern zu laden (DSGVO). Mehr im Themenhub Gestaltung
WebP und AVIF
Moderne Bildformate, die bei gleicher Qualität deutlich kleinere Dateien liefern als JPG oder PNG. Mehr im Themenhub Webdesign
Weißraum
Weißraum ist die unbedruckte oder leere Fläche zwischen und um Gestaltungselemente. Er gliedert Inhalte, lenkt den Blick und verbessert die Lesbarkeit. Mehr im Themenhub Gestaltung
Wireframe
Ein schematischer Entwurf eines Screens ohne Gestaltung. Er legt Struktur, Inhalte und Funktionen fest, bevor Farben und Schriften dazukommen. Mehr im Themenhub Webdesign
WordPress
Ein weit verbreitetes Open-Source-CMS. Mit dem Block-Editor baust du Seiten aus Blöcken, Themes bestimmen die Gestaltung, Plugins erweitern die Funktionen. Mehr im Themenhub Webdesign
X
x-Höhe
Die Höhe der Kleinbuchstaben ohne Ober- und Unterlängen. Schriften mit großer x-Höhe wirken in kleinen Größen besser lesbar. Mehr im Themenhub Gestaltung
Z
Zeilenabstand
Der Abstand zwischen den Grundlinien zweier Zeilen. Für Fließtext am Bildschirm ist etwa das 1,4- bis 1,6-Fache der Schriftgröße üblich. Mehr im Themenhub Gestaltung
Zeilenlänge
Die Zahl der Zeichen pro Zeile. Für Fließtext gelten etwa 45 bis 75 Zeichen als angenehm zu lesen. Mehr im Themenhub Gestaltung