ONMA Ratgeber

Webdesign: was dazugehört, wo es aufhört und welcher Weg zu welchem Vorhaben passt

Der Ratgeber grenzt Webdesign von UX, UI und Entwicklung ab, erklärt die Teildisziplinen und hilft bei der Wahl von Baukasten, Template oder Agentur.

Webdesign klingt nach einem einzelnen Gewerk, ist aber ein Sammelbegriff. Er bezeichnet die Gestaltung von Websites und einzelnen Webseiten, und zwar in visueller, struktureller und funktionaler Hinsicht zugleich (Quelle: onlinemarketing-praxis.de, Stand 02.07.2026). Genau diese Dreiteilung erklärt, warum zwei Angebote unter demselben Wort kaum etwas gemeinsam haben können: Der eine meint das Erscheinungsbild, der nächste die Seitenstruktur, der dritte das fertig bedienbare System. Diese Seite ordnet den Begriff ein, zieht die Grenzen zu Webentwicklung, UX und UI, benennt die Teildisziplinen dahinter und leitet daraus ab, welcher Umsetzungsweg zu welchem Vorhaben passt.

Was unter Webdesign fällt

In der Praxis sind mit Webdesign vier Ebenen gemeint, die aufeinander aufbauen. Wer ein Projekt plant oder ein Angebot bewertet, sollte sie auseinanderhalten können.

Struktur. Welche Seiten existieren, wie hängen sie zusammen, was steht auf einer Seite oben und was unten. Ein gelungenes Webdesign weist eine gute visuelle Hierarchie auf: Der Aufbau ist klar und wichtige Inhalte stehen im Fokus (Quelle: fuer-gruender.de). Diese Ebene entscheidet mehr über den Erfolg einer Website als jede Farbwahl, weil sie bestimmt, ob Besucher finden, was sie suchen.

Visuelle Gestaltung. Typografie, Farbsystem, Abstände, Bildsprache, Gestaltungsraster. Das ist der Teil, den Laien meist allein mit dem Wort verbinden, und der Teil, über den am häufigsten gestritten wird, obwohl er am einfachsten zu ändern ist. Er legt nicht nur fest, wie eine Startseite aussieht, sondern auch, wie Unterseiten, Formulare und wiederkehrende Komponenten gestaltet sind.

Interaktion. Navigation, Formulare, Filter, Zustände wie Fokus, Fehlermeldung, Ladeanzeige, Bestätigung oder leeres Suchergebnis. Erst mit diesen Details wird aus einem statischen Entwurf etwas Bedienbares.

Technische Rahmenbedingungen. Darstellung auf unterschiedlichen Geräten, Ladeverhalten, Barrierefreiheit, Auffindbarkeit. Diese Anforderungen sind kein nachträglicher Feinschliff, sondern begrenzen von Anfang an, was gestalterisch sinnvoll ist.

Wo Webdesign aufhört

Drei Begriffe werden regelmäßig mit Webdesign gleichgesetzt. Die Abgrenzung ist vor allem beim Einkauf nützlich, weil sie zeigt, was in einem Angebot fehlen kann, ohne dass das Wort es verrät.

BegriffZuständig fürErgebnis
WebdesignGestaltung der Seite in Struktur, Optik und BedienungEntwurf und Gestaltungssystem einer Website
Webentwicklungtechnische Umsetzung: Datenbank, Server, Schnittstellen, Redaktionssystemlauffähige Website oder Anwendung
UX DesignNutzerbedürfnisse, Abläufe, Informationsarchitektur, Prüfung an echten Nutzernbelegte Entscheidungen darüber, was gebaut wird
UI Designkonkrete Oberfläche: Komponenten, Zustände, visuelles DetailKomponentenbibliothek und fertige Bildschirmentwürfe

Vereinfacht gesagt: UX beantwortet die Frage nach dem Warum, UI das Wie im Detail, Webdesign bildet die Klammer über beidem für das Medium Website, und Webentwicklung setzt das Ergebnis technisch um. Diese Trennung beschreibt Verantwortlichkeiten, nicht zwingend verschiedene Personen. In kleinen Projekten deckt eine Person alle vier Rollen ab, und das Wort Webdesign steht dann stellvertretend für das Gesamtpaket. In größeren Vorhaben sind es getrennte Gewerke mit getrennten Budgets. Wer Angebote vergleicht, sollte deshalb zuerst klären, welche dieser vier Spalten jeweils enthalten ist.

Die Teildisziplinen dahinter

Unterhalb des Sammelbegriffs haben sich Spezialgebiete gebildet. Sie tauchen in Suchergebnissen und Angeboten als eigenständige Themen auf, sind aber Blickwinkel auf dieselbe Arbeit.

  • Responsives Webdesign. Ein Layout, das sich an die Bildschirmbreite anpasst. Der Begriff wurde am 25. Mai 2010 von Ethan Marcotte im Fachmagazin A List Apart geprägt. Heute ist das kein Zusatzmerkmal mehr, sondern Grundvoraussetzung jedes Entwurfs.
  • Barrierefreies Webdesign. Gestaltung, die auch mit Tastatur, Screenreader oder eingeschränktem Sehvermögen funktioniert. Maßstab sind die Web Content Accessibility Guidelines: WCAG 2.2 ist seit dem 5. Oktober 2023 offizielle W3C-Recommendation und ergänzt WCAG 2.1 unter anderem um Kriterien zur Sichtbarkeit des Tastaturfokus und zur Mindestgröße von Bedienelementen.
  • Performance-orientiertes Design. Gestaltungsentscheidungen mit Blick auf Ladeverhalten und Reaktionszeit. Google hat am 12. März 2024 den Core-Web-Vital First Input Delay durch Interaction to Next Paint ersetzt. Damit ist die Reaktion der Oberfläche auf Eingaben messbarer Teil der Bewertung, und Gestaltung beeinflusst sie direkt, etwa über die Zahl eingebundener Schriften, Skripte und Animationen.
  • Content-Design und Informationsarchitektur. Die Gliederung der Inhalte, die Benennung der Navigationseinträge, der Aufbau der Einzelseite.
  • Interaction Design. Abläufe, Rückmeldungen und Zustände interaktiver Elemente.
  • Conversion-orientiertes Design. Gestaltung mit Blick auf eine konkrete Handlung, etwa Anfrage, Kauf oder Terminbuchung.

Welche dieser Schwerpunkte zählen, hängt vom Vorhaben ab. Ein redaktionelles Angebot braucht eine belastbare Inhaltsstruktur, bei einer Anwendung stehen Abläufe und Zustände im Vordergrund, und in einem Online-Shop treffen Conversion, Barrierefreiheit, mobile Bedienung und Technik unmittelbar aufeinander.

Zwei Anforderungen, die nicht verhandelbar sind

Erstens die mobile Darstellung. Seit dem 5. Juli 2024 crawlt Google Websites ausschließlich mit dem Smartphone-Googlebot. Ein Design, das nur am Desktop funktioniert, wird nicht mehr indexiert. Ein Entwurf, der ausschließlich als breite Desktop-Ansicht präsentiert wird, ist damit unvollständig; nach der Smartphone-Ansicht sollte bei jeder Präsentation gefragt werden.

Zweitens die rechtliche Lage bei Barrierefreiheit. Das Barrierefreiheitsstärkungsgesetz gilt seit dem 28. Juni 2025 und verpflichtet unter anderem Betreiber von Online-Shops und viele digitale Dienstleistungen im Verbrauchergeschäft zu barrierefreier Gestaltung. Wer darunter fällt, kann Barrierefreiheit nicht als Zusatzposten behandeln, sondern muss sie in die Gestaltungsentscheidungen ziehen: Farbkontraste, Fokusdarstellung, Formulare, Tastaturbedienbarkeit.

Die vier Umsetzungswege

Für die Umsetzung eines Webdesigns werden üblicherweise vier Wege unterschieden: selbst designen, eine Webdesign-Vorlage nutzen, einen Webdesigner beauftragen oder eine Kombination aus Vorlage und Webdesign-Service (Quelle: fuer-gruender.de).

WegPasst, wennTypische Grenze
Selbst designen, etwa im Baukastenwenige Seiten, kein ausgeprägtes Markenbild nötig, Zeit vorhanden und Budget knappStruktur und Barrierefreiheit bleiben an den Vorgaben des Systems hängen
Vorlage oder ThemeStandardvorhaben mit klarem Seitentyp, zügiger Start gewünschtAnpassungen jenseits der Vorlage werden schnell teurer als ein eigener Entwurf
Auftrag an eine Webdesignerin oder einen Webdesignereigenes Markenbild, viele Seitentypen, rechtliche Anforderungen, messbare Zielesetzt klare Aufgabenstellung und Entscheidungsfähigkeit auf Auftraggeberseite voraus
Kombination aus Vorlage und Servicedie Vorlage trägt den Rahmen, Fachleute passen Struktur, Zugänglichkeit und Marke anVerantwortung muss sauber geteilt werden, sonst fühlt sich niemand für das Ganze zuständig

Eine Vorlage sollte nie nach der Startseitenansicht allein ausgewählt werden: Navigation, Unterseiten, Formulare und mobile Bedienung entscheiden darüber, ob sie trägt. Und eine brauchbare Faustregel lautet: Je mehr unterschiedliche Seitentypen ein Vorhaben braucht und je stärker rechtliche Anforderungen greifen, desto weiter rückt die Entscheidung nach unten in der Tabelle. Ein Internetauftritt mit fünf Seiten braucht keinen individuellen Entwurf. Ein Shop im Verbrauchergeschäft mit gesetzlicher Pflicht zur Barrierefreiheit ist im reinen Baukasten selten gut aufgehoben, weil die Haftung beim Betreiber liegt, nicht beim Systemanbieter.

Vier Fragen, die die Entscheidung vorwegnehmen

  1. Wie standardisiert ist das Vorhaben? Je typischer Aufbau und Funktionen, desto eher reichen Baukasten oder Vorlage.
  2. Wie eigenständig muss der Auftritt wirken? Ein unverwechselbares Markenbild braucht mehr gestalterischen Spielraum als eine reine Informationsseite.
  3. Wie komplex sind Inhalte und Abläufe? Viele Seitentypen, Rollen, Formulare oder verknüpfte Prozesse sprechen für individuelle Konzeption.
  4. Welche Anforderungen sind verbindlich? Barrierefreiheit, mobile Nutzbarkeit und technische Anbindungen gehören von Anfang an in die Planung.

Wie ein Webdesign-Projekt abläuft

Unabhängig vom gewählten Weg folgt die Arbeit einer wiederkehrenden Reihenfolge. Ein typischer Redesign-Prozess wird in Etappen beschrieben: Website-Konzeption und Auswahl des Content-Management-Systems, Moodboards, Website Frame, Wireframes, Go-live und Kick-off-Kampagne (Quelle: bee.digital). Moodboards legen die visuelle Richtung fest, Website Frame und Wireframes zeigen die Anordnung der Elemente ohne fertige Grafik. Wichtig ist weniger die einzelne Etappe als die Reihenfolge: Struktur und Rahmen stehen vor der visuellen Ausarbeitung. Wer mit Farben und Bildern beginnt, diskutiert Geschmack, bevor geklärt ist, was auf der Seite überhaupt passieren soll, und jede spätere Strukturänderung trifft dann bereits fertig gestaltete Entwürfe.

Warum die Suchergebnisse zum Begriff so durcheinander sind

Der Begriffsnebel zeigt sich in den Suchergebnissen selbst: Die zum Keyword ausgewerteten Top-Ergebnisse mischen Glossar-Definitionen, Inspirationsgalerien und lokale Agenturseiten, ihr Textumfang reicht von 29 bis 4.306 Wörtern bei einem Median von 897 Wörtern (DataForSEO SERP-Analyse, Standort Deutschland, 23.09.2026). Wer sich orientieren will, sollte jede Quelle zuerst einem dieser drei Typen zuordnen. Eine Galerie zeigt Ergebnisse, aber keine Entscheidungslogik. Eine Agenturseite beschreibt ein Angebot, nicht das Fach. Eine Definition erklärt das Wort, aber nicht den Weg zur Umsetzung.

Die kurze Antwort

Webdesign ist die Gestaltung einer Website in Struktur, Optik und Bedienung. Webentwicklung baut sie, UX klärt, was gebaut wird, UI gestaltet die Oberfläche im Detail. Die Teildisziplinen von responsiv über barrierefrei bis conversion-orientiert sind Blickwinkel auf dieselbe Arbeit, keine separaten Produkte. Und die Wahl zwischen Baukasten, Vorlage, Auftrag und Kombination hängt nicht am Geschmack, sondern an drei Fragen: Wie viele verschiedene Seitentypen braucht das Vorhaben, wie wichtig ist ein eigenes Markenbild, und welche rechtlichen Anforderungen greifen. Wer diese drei Fragen beantwortet, hat die Entscheidung im Kern bereits getroffen.