Webdesign-Begriffe einfach erklärt

Wer zum ersten Mal ein Website-Projekt begleitet oder beauftragt, trifft schnell auf Begriffe, die nach Agentur-Insiderwissen klingen: Wireframe, Persona, User Journey, Handoff, Informationsarchitektur, Design System. Das klingt komplizierter, als es ist.

Denn hinter jedem Begriff steckt kein Buzzword, sondern ein konkreter Schritt im Projekt. Und jeder dieser Schritte entscheidet mit darüber, ob Deine Website später nur gut aussieht – oder ob sie verständlich führt, Vertrauen aufbaut und Anfragen generiert.

Dieses Glossar erklärt die wichtigsten Begriffe rund um UX Design, UI Design und Webdesign in der Reihenfolge, in der sie Dir in einem typischen Website-Projekt begegnen. Du bekommst kurze Definitionen, eine praktische Einordnung und konkrete Hinweise darauf, wo Projekte häufig unnötig Zeit oder Budget verlieren.

Ein Website-Projekt beginnt nicht mit Farben, Bildern oder Buttons. Es beginnt mit Konzeption: Wer soll erreicht werden, welches Ziel verfolgt die Website und welche Inhalte braucht der Nutzer wirklich?

Aus dieser Strategie entstehen Personas, User Journeys, Sitemap und Informationsarchitektur. Erst danach werden Inhalte sichtbar geordnet: über Wireframes, Moodboards, Layouts und Prototypen. Zum Schluss sorgen Styleguide, Design System und Handoff dafür, dass aus dem Design eine sauber umsetzbare Website wird.

Kurz gesagt:
UX klärt, wie die Website funktioniert. UI klärt, wie sie aussieht. Webentwicklung macht daraus ein nutzbares digitales Produkt.

Konzeption

Kurzdefinition: Die Konzeption ist die strategische Phase vor Design und Entwicklung. In ihr werden Ziele, Zielgruppen, Kerninhalte, Seitenstruktur und funktionale Anforderungen einer Website definiert.

Warum es wichtig ist: Ohne saubere Konzeption wird oft an einer Lösung gearbeitet, bevor das eigentliche Problem verstanden ist. Das Ergebnis sieht dann vielleicht modern aus, bringt aber keine Anfragen, weil Inhalte, Struktur und Nutzerführung nicht zur Zielgruppe passen.

Eine gute Konzeption beantwortet Fragen wie:

• Was soll die Website messbar erreichen?
• Welche Zielgruppen müssen überzeugt werden?
• Welche Informationen brauchen Nutzer vor einer Anfrage?
• Welche Inhalte sind wirklich entscheidend?
• Welche Funktionen müssen technisch eingeplant werden?

GRAND DIGITAL Insight: In B2B-Projekten zeigt sich fast immer: Die teuersten Korrekturen entstehen nicht, weil ein Button die falsche Farbe hat, sondern weil Ziele, Inhalte oder Nutzerwege zu spät geklärt wurden. Konzeption ist deshalb kein zusätzlicher Schritt, sondern die günstigste Form der Fehlervermeidung.

Persona

Kurzdefinition: Eine Persona ist eine fiktive, aber datenbasierte Beschreibung eines typischen Nutzers oder Entscheiders einer Zielgruppe. Sie bündelt Ziele, Erwartungen, Einwände, Informationsbedarf und Verhalten.

Warum es wichtig ist: Personas helfen dabei, Entscheidungen nicht aus dem Bauch heraus zu treffen. Statt zu fragen „Finden wir das gut?“, stellt man die bessere Frage: „Hilft das unserer Zielgruppe wirklich weiter?“

In B2B-Projekten ist besonders wichtig: Es gibt selten nur eine Zielgruppe. Eine Geschäftsführung achtet beim Scannen einer Website häufig auf andere Informationen als eine Fachabteilung, ein Einkaufsteam oder eine operative Nutzerin.

GRAND DIGITAL Insight: Wir arbeiten in komplexeren B2B-Projekten meist mit zwei bis drei klar getrennten Personas. Ein Geschäftsführer sucht schnelle Sicherheit über ROI, Aufwand und Vertrauen. Eine Fachkraft prüft eher, ob die Lösung im Alltag funktioniert. Eine gute Website muss beide abholen – aber nicht mit denselben Argumenten an derselben Stelle.

User Journey Map

Kurzdefinition: Eine User Journey Map zeigt die typischen Phasen und Berührungspunkte, die ein Nutzer vom ersten Kontakt bis zur Anfrage, Buchung oder Conversion durchläuft.

Warum es wichtig ist: Sie macht sichtbar, welche Fragen der Nutzer in welcher Phase hat, welche Inhalte Vertrauen schaffen und an welchen Stellen Unsicherheit entsteht. Dadurch wird aus einer Website keine Sammlung einzelner Unterseiten, sondern ein geführter Entscheidungsprozess.

Typische Phasen einer B2B-User-Journey sind:

1. Problem erkennen
2. Lösungsoptionen vergleichen
3. Anbieter prüfen
4. Vertrauen aufbauen
5. Kontakt aufnehmen oder Angebot anfragen

GRAND DIGITAL Insight: Unternehmen vermuten Absprunggründe oft bei Preisen oder Design. In der Praxis liegt das Problem häufig früher: Nutzer brechen ab, weil im entscheidenden Moment eine einfache, klärende Information fehlt – zum Beispiel zum Ablauf, zur Umsetzbarkeit, zu Referenzen oder zum nächsten Schritt.

Struktur und Architektur

Sitemap

Kurzdefinition: Im Webdesign ist eine Sitemap die hierarchische Übersicht aller geplanten Unterseiten einer Website. In der SEO bezeichnet „Sitemap“ zusätzlich oft eine technische XML-Datei, die Suchmaschinen beim Auffinden von URLs hilft.

Warum es wichtig ist: Im Designprozess sprechen wir meistens von der strukturellen Sitemap. Sie entsteht früh und bildet das Fundament für Navigation, Seitenlogik und spätere Inhalte.

Eine gute Sitemap beantwortet:

• Welche Hauptseiten braucht die Website?
• Welche Unterseiten sind sinnvoll?
• Welche Inhalte gehören zusammen?
• Welche Seiten sind für Nutzer und Suchmaschinen besonders wichtig?

GRAND DIGITAL Insight: Eine erfolgreiche Sitemap folgt nicht Deiner internen Abteilungsstruktur, sondern der Logik Deiner Nutzer. Kunden denken nicht in Zuständigkeiten, sondern in Fragen, Problemen und gewünschten Ergebnissen.

Informationsarchitektur

Kurzdefinition: Informationsarchitektur beschreibt das logische System zur Benennung, Gruppierung und Anordnung von Inhalten, damit Nutzer Informationen schnell finden und richtig einordnen können.

Warum es wichtig ist: Informationsarchitektur geht über die reine Sitemap hinaus. Sie entscheidet, wie Inhalte benannt, priorisiert, verknüpft und geführt werden.

Eine schwache Informationsarchitektur ist einer der häufigsten Gründe, warum Nutzer Inhalte nicht finden – selbst wenn die Information technisch auf der Website vorhanden ist.

GRAND DIGITAL Insight: Gute Informationsarchitektur fühlt sich für Nutzer unsichtbar an. Niemand lobt später die perfekte Seitenlogik. Aber jeder merkt sofort, wenn sie fehlt.

Navigationskonzept

Kurzdefinition: Das Navigationskonzept definiert die sichtbaren Wegeführungselemente einer Website, zum Beispiel Hauptmenü, Footer, Breadcrumbs, Sticky-Buttons oder interne Verlinkungen.

Warum es wichtig ist: Die Navigation ist nicht identisch mit der Sitemap. Eine Sitemap kann 50 Seiten umfassen, während das Hauptmenü bewusst nur fünf klare Einstiegspunkte zeigt.

Ein gutes Navigationskonzept entscheidet:

• Welche Seiten gehören ins Hauptmenü?
• Welche Inhalte werden im Footer erreichbar gemacht?
• Wo braucht der Nutzer Orientierung über Breadcrumbs?
• Wo sind Call-to-Action-Elemente sinnvoll?
• Welche Wege führen zur Anfrage?

GRAND DIGITAL Insight: Wird das Navigationskonzept erst während des Designs diskutiert, kostet es unnötig Zeit. Dann geht es plötzlich nicht mehr nur um Gestaltung, sondern um Strategie, Prioritäten und interne Abstimmung.

Design und Visualisierung

Moodboard

Kurzdefinition: Ein Moodboard ist eine kuratierte Sammlung aus Farben, Schriften, Bildstilen, Formen, UI-Beispielen und visuellen Referenzen. Es legt die gewünschte Stilrichtung fest, bevor konkrete Layouts entstehen.

Warum es wichtig ist: Ein Moodboard reduziert Geschmacksdiskussionen. Statt abstrakt über „modern“, „hochwertig“ oder „dynamisch“ zu sprechen, entsteht eine visuelle gemeinsame Richtung.

GRAND DIGITAL Insight: Moodboards sind besonders hilfreich, wenn mehrere Entscheider beteiligt sind. Sie schaffen früh Klarheit darüber, welche Stilwelt passt – und welche bewusst ausgeschlossen wird.

Wireframe

Kurzdefinition: Ein Wireframe ist eine reduzierte, meist graue Skizze eines Seitenlayouts. Er zeigt die funktionale Platzierung von Inhalten, Modulen und Call-to-Actions – ohne finale Farben, Bilder oder Gestaltung.

Warum es wichtig ist: Beim Wireframe geht es um Struktur, nicht um Ästhetik. Genau deshalb bleibt er bewusst reduziert. So diskutiert das Projektteam zuerst die wichtigen Fragen:

• Ist die richtige Information an der richtigen Stelle?
• Versteht der Nutzer die Seite schnell?
• Gibt es einen klaren nächsten Schritt?
• Fehlen Inhalte, bevor Designaufwand entsteht?

GRAND DIGITAL Insight: Wireframes verhindern, dass man sich zu früh in Farben, Bildern und Details verliert. Sie sind der Moment, in dem die Website zum ersten Mal logisch sichtbar wird.

Prototyp

Kurzdefinition: Ein Prototyp ist eine klickbare Simulation der künftigen Website. Mit ihm lassen sich Navigation, Seitenwechsel, Interaktionen und Nutzerführung testen, bevor programmiert wird.

Warum es wichtig ist: Ein Prototyp macht die Website erlebbar. Statt über einzelne Screens zu sprechen, kann das Team durch den späteren Ablauf klicken und prüfen, ob die Führung funktioniert.

Es gibt unterschiedliche Detailstufen:

• Low-Fidelity-Prototyp: schnell, grob, ideal für frühe Konzepttests
• High-Fidelity-Prototyp: visuell nah am finalen Design, ideal für Freigaben und Übergabe

GRAND DIGITAL Insight: Korrekturen im Prototyp dauern oft Minuten. Korrekturen nach der Programmierung kosten deutlich mehr Abstimmung, Testing und Entwicklungszeit. Deshalb ist Prototyping kein Spielzeug, sondern Budgetschutz.

Responsives Design

Kurzdefinition: Responsives Design bedeutet, dass sich Layout, Inhalte und Bedienung einer Website flexibel an unterschiedliche Bildschirmgrößen anpassen – zum Beispiel Desktop, Tablet und Smartphone.

Warum es wichtig ist: Nutzer erleben Deine Website nicht nur am großen Bildschirm. Gerade Erstkontakte entstehen häufig mobil. Eine Website muss deshalb auf jedem Gerät verständlich, lesbar und bedienbar bleiben.

GRAND DIGITAL Insight: Responsives Design ist mehr als „alles wird kleiner“. Gute mobile Gestaltung priorisiert Inhalte neu. Was auf dem Desktop nebeneinander funktioniert, muss mobil oft bewusst umsortiert werden.

Layout, Header und Menü

Kurzdefinition Layout: Das Layout beschreibt die visuelle Anordnung von Inhalten, Abständen, Spalten, Bildern, Texten und Call-to-Actions auf einer Seite.

Kurzdefinition Header: Der Header ist der obere, meist globale Bereich einer Website. Er enthält häufig Logo, Menü, Kontaktmöglichkeit und den wichtigsten Call-to-Action.

Kurzdefinition Menü: Das Menü ist das sichtbare Navigationselement, über das Nutzer zwischen zentralen Website-Bereichen wechseln.

Warum es wichtig ist: Webseiten werden selten Zeile für Zeile gelesen. Nutzer scannen. Ein gutes Layout führt den Blick, priorisiert Inhalte und macht den nächsten Schritt intuitiv sichtbar.

GRAND DIGITAL Insight: Ein gutes Layout wirkt oft „einfach“. Genau das ist der Punkt. Die Arbeit steckt nicht darin, alles zu zeigen, sondern das Richtige im richtigen Moment sichtbar zu machen.

Fertigstellung und Qualität

Styleguide

Kurzdefinition: Ein Styleguide dokumentiert die visuellen Grundregeln einer Marke oder Website, zum Beispiel Farben, Schriften, Buttons, Bildsprache, Abstände und UI-Grundelemente.

Warum es wichtig ist: Ein Styleguide sorgt dafür, dass die Website konsistent bleibt – auch wenn später neue Seiten, Landingpages oder Kampagnen ergänzt werden.

GRAND DIGITAL Insight: Ohne Styleguide entstehen mit der Zeit kleine Abweichungen: ein anderer Button-Stil, andere Abstände, neue Farben, uneinheitliche Überschriften. Jede Abweichung wirkt für sich harmlos. Zusammen schwächen sie den Markenauftritt.

Design System

Kurzdefinition: Ein Design System erweitert den Styleguide um wiederverwendbare Komponenten, Regeln, Zustände und technische Logik. Es verbindet Design, Entwicklung und Skalierung.

Warum es wichtig ist: Ein Design System sorgt dafür, dass wiederkehrende Elemente nicht jedes Mal neu gestaltet oder neu entwickelt werden müssen. Buttons, Formulare, Karten, Navigationselemente oder Content-Module werden als konsistente Bausteine gepflegt.

Ein Design System enthält typischerweise:

• Farben und Typografie
• UI-Komponenten
• Abstandsregeln
• Zustände wie Hover, Active, Error oder Disabled
• Dokumentation zur Nutzung
• technische Komponenten oder Code-Bezüge

GRAND DIGITAL Insight: Ein Design System ist für wachsende Websites keine Kür. Wenn neue Landingpages, Kampagnen oder Produktseiten entstehen, hält es den Auftritt konsistent und senkt zukünftige Entwicklungs- und Abstimmungskosten.

Barrierefreiheit

Kurzdefinition: Barrierefreiheit bedeutet, dass digitale Inhalte und Funktionen für möglichst viele Menschen nutzbar sind – unabhängig von Einschränkungen, Gerät, Eingabemethode oder Nutzungssituation.

Warum es wichtig ist: Barrierefreiheit verbessert nicht nur die Nutzung für Menschen mit Behinderungen. Klare Kontraste, verständliche Formulare, Tastaturbedienbarkeit und saubere Struktur helfen vielen Nutzern – auch mobil, unterwegs oder in stressigen Situationen.

GRAND DIGITAL Insight: Barrierefreiheit sollte nicht erst am Ende geprüft werden. Wenn Kontraste, Fokuszustände, Formularlogik und semantische Struktur früh berücksichtigt werden, wird die Umsetzung sauberer und günstiger.

Handoff

Kurzdefinition: Der Handoff ist die strukturierte Übergabe vom Design an die Entwicklung. Dabei werden Designs, Komponenten, Abstände, Assets, Zustände, Breakpoints und technische Hinweise so dokumentiert, dass die Website sauber umgesetzt werden kann.

Warum es wichtig ist: Ein schönes Design allein reicht nicht. Entwickler brauchen klare Informationen, wie sich Elemente verhalten, welche Varianten es gibt und welche Details technisch relevant sind.

Ein guter Handoff enthält:

• finale Designs
• Komponenten und Varianten
• Abstände und Größen
• Farben und Schriften
• Assets und Icons
• Responsive Breakpoints
• Hover-, Fehler- und Ladezustände
• Hinweise zu Animationen und Interaktionen

GRAND DIGITAL Insight: Der Handoff ist kein Datei-Export, sondern ein Qualitätsprozess. Je klarer die Übergabe, desto weniger Interpretationsspielraum gibt es in der Umsetzung.

Tools im Projekt

Figma

Kurzdefinition: Figma ist ein cloudbasiertes Design-Tool für UI-Design, Prototyping, Zusammenarbeit und Übergabe an die Entwicklung.

Warum es wichtig ist: Kundinnen und Kunden erhalten einen Live-Link, sehen jederzeit den aktuellen Stand und können Feedback direkt im Design platzieren. Das reduziert unübersichtliche PDF-Versionen und verstreute E-Mail-Kommentare.

GRAND DIGITAL Insight: Figma macht Abstimmung konkreter. Feedback hängt nicht mehr abstrakt an „Seite 7 im PDF“, sondern exakt an der Stelle im Design, um die es geht.

FigJam

Kurzdefinition: FigJam ist das digitale Whiteboard von Figma. Es wird für Workshops, Ideen, Strukturen, User Journeys und frühe Projektphasen genutzt.

Warum es wichtig ist: FigJam eignet sich für gemeinsames Denken, Figma für konkretes Gestalten.

GRAND DIGITAL Insight: In Workshops hilft FigJam dabei, Wissen aus verschiedenen Teams sichtbar zu machen. Oft liegen wichtige Informationen bereits im Unternehmen – sie müssen nur strukturiert zusammengebracht werden.