Wer Webdesign hört, denkt meist an Farben, Schriften und Bilder. Das gehört dazu, ist aber nicht der wichtigste Teil. Mit gutem Webdesign finden Besucher schnell, was sie suchen, und fragen am Ende an, kaufen oder rufen an. Hier lesen Sie, was Webdesign genau umfasst, wie es sich von Webentwicklung unterscheidet, was eine Webdesign-Agentur macht und wie ein Projekt abläuft.
Was ist Webdesign? Eine Definition
Webdesign ist die Konzeption und Gestaltung von Websites. Es umfasst drei Ebenen: die Struktur, also welche Inhalte wo stehen und wie Besucher sich bewegen; die Funktion, also wie Menüs, Formulare und andere Elemente bedient werden; und die visuelle Gestaltung, also wie die Website aussieht. Für die technische Umsetzung im Code ist meist der Begriff Webentwicklung üblich. In der Praxis greifen beide Bereiche eng ineinander.
Anders als ein gedrucktes Plakat wird eine Website benutzt: Sie erscheint auf einem großen Monitor ebenso wie auf dem Smartphone, in unterschiedlichen Browsern, mal bedient mit der Maus, mal mit dem Finger, mal mit Tastatur oder Screenreader. Webdesign muss deshalb für viele Situationen gleichzeitig funktionieren. Das unterscheidet es vom klassischen Grafikdesign, mit dem es Grundlagen wie Typografie, Farben und Raster teilt.
Wie Webdesign entstanden ist
Webdesign ist eine junge Disziplin. Ab 1989 entwickelte Tim Berners-Lee am Forschungszentrum CERN das World Wide Web. Die ersten Webseiten bestanden fast nur aus Text und Links. Mit grafischen Browsern wie Mosaic und später dem Netscape Navigator kamen Bilder und Farben hinzu. 1994 wurde das World Wide Web Consortium (W3C) gegründet, das bis heute die Standards für das Web entwickelt.
Einige Neuerungen bestimmen die Arbeit bis heute:
- 1995: JavaScript erscheint und macht Webseiten interaktiv.
- 1996: Das W3C veröffentlicht CSS. Gestaltung und Inhalt lassen sich damit trennen, Layouts aus verschachtelten Tabellen werden nach und nach überflüssig.
- 2010: Der Begriff Responsive Webdesign beschreibt die Idee, dass sich eine Website an jede Bildschirmgröße anpasst.
- 2014: HTML5 wird offizieller Standard des W3C. Audio, Video und viele interaktive Funktionen laufen ohne Zusatzprogramme wie Flash.
- 2023: Die WCAG 2.2 erscheinen und bilden die aktuelle Grundlage für barrierearmes Webdesign.
Aus einer Mischung von Grafikdesign und Programmierung ist so eine eigene Disziplin geworden, die Gestaltung, Nutzerführung, Inhalte und Technik zusammenbringt.
Die Bestandteile von Webdesign
Gutes Webdesign besteht aus mehreren Bausteinen, die aufeinander aufbauen. Fehlt einer, merken Besucher das, auch wenn sie nicht sagen können, woran es liegt.
Konzept und Struktur
Am Anfang stehen Fragen, noch bevor es um Farben geht: Wen soll die Website erreichen? Was sollen Besucher tun? Welche Inhalte brauchen sie dafür? Daraus entsteht die Informationsarchitektur: welche Seiten es gibt, wie das Menü aufgebaut ist und wie die Seiten miteinander verlinkt sind. Eine gute Struktur spart später Zeit, weil Design und Texte auf einer klaren Grundlage entstehen.
UX: die Nutzererfahrung
UX steht für User Experience. Gemeint ist das gesamte Erlebnis, das Menschen mit einer Website haben: Finden sie sich zurecht? Verstehen sie die Begriffe im Menü? Kommen sie ohne Frust zum Ziel? UX-Design arbeitet mit Methoden wie Gesprächen mit Nutzern, Wireframes, klickbaren Prototypen und Usability-Tests. So werden Probleme sichtbar, bevor sie programmiert sind. Mehr dazu auf unserer Seite zum UX- und UI-Design.
UI: die sichtbare Oberfläche
UI steht für User Interface, also die Oberfläche mit allen visuellen Elementen: Farben, Schriften, Abstände, Bilder, Icons, Buttons und Formulare. Das UI-Design übersetzt die Marke eines Unternehmens ins Web und schafft eine klare visuelle Hierarchie: Was ist wichtig, was ist klickbar, was gehört zusammen? Dafür nutzen moderne Websites ein Designsystem, eine Sammlung wiederverwendbarer Bausteine, damit jede neue Seite zum Rest passt. Grundlage ist das Corporate Design. Animationen sollten gezielt eingesetzt werden, etwa um zu zeigen, dass ein Formular abgeschickt wurde.
Inhalte
Besucher kommen in erster Linie wegen der Inhalte. Texte, Fotos, Grafiken und Videos müssen deshalb von Anfang an mitgedacht werden. Zu den echten Texten passt ein Layout, das mit Blindtext entworfen wurde, nur selten. Wie Sie Texte schreiben, die im Web funktionieren, lesen Sie im Artikel Website-Texte schreiben.
Technik
Im Browser besteht jede Website aus drei Technologien: HTML für die Struktur der Inhalte, CSS für die Gestaltung und JavaScript für interaktive Funktionen. Dazu kommt meist ein Content-Management-System wie WordPress, mit dem Unternehmen ihre Inhalte selbst pflegen. Webdesign muss die Möglichkeiten und Grenzen dieser Technik kennen, damit Entwürfe schnell laden, auf allen Geräten funktionieren und sich später gut erweitern lassen. Wie die Darstellung auf unterschiedlichen Bildschirmen gelingt, erklärt der Artikel Responsive Webdesign.
Barrierearmut
Eine Website sollte für möglichst alle Menschen nutzbar sein, auch für Menschen mit Seh-, Hör- oder motorischen Einschränkungen. Die WCAG 2.2 beschreiben, worauf es ankommt: ausreichende Kontraste, Bedienung per Tastatur, Alternativtexte für Bilder, verständliche Formulare und eine klare Struktur. Barrierearmut lässt sich am einfachsten von Anfang an einplanen, nachträglich wird sie aufwendiger. Details finden Sie im Artikel zur WCAG und auf unserer Seite zu barrierearmen Websites nach WCAG 2.2.
SEO
Auch die Auffindbarkeit bei Google beginnt im Webdesign. Über die Seitenstruktur entscheidet sich, für welche Themen eigene Seiten entstehen. Überschriften, Ladezeit, mobile Darstellung und sauberer Code beeinflussen, wie gut Suchmaschinen die Inhalte verstehen. Strukturierte Daten helfen Suchmaschinen und KI-Systemen, Angaben zum Unternehmen eindeutig zuzuordnen. Mehr dazu auf unserer Seite zur Suchmaschinenoptimierung.
| Bestandteil | Leitfrage | Typisches Ergebnis |
|---|---|---|
| Konzept | Für wen und wozu? | Zielgruppen, Ziele, Seitenstruktur |
| UX | Kommen Besucher ans Ziel? | Wireframes, Prototyp, Testergebnisse |
| UI | Wie sieht es aus, wie fühlt es sich an? | Entwürfe, Designsystem |
| Inhalte | Was sagen und zeigen wir? | Texte, Bilder, Videos |
| Technik | Läuft es schnell und stabil? | Umsetzung im CMS, kurze Ladezeiten |
| Barrierearmut | Können alle es nutzen? | Umsetzung nach WCAG 2.2 |
| SEO | Wird es gefunden? | Struktur, Seitentitel, strukturierte Daten |
Was gutes Webdesign ausmacht
Ob ein Webdesign gut ist, hängt weniger vom Geschmack ab als von seiner Wirkung. Diese Kriterien helfen bei der Bewertung:
- Besucher verstehen in wenigen Sekunden, was angeboten wird und für wen
- Das Menü nutzt Begriffe der Kunden, nicht interne Abteilungsnamen
- Der nächste Schritt ist auf jeder Seite klar, etwa Anfrage, Anruf oder Kauf
- Die Website funktioniert auf Smartphone, Tablet und Desktop gleich gut
- Seiten laden schnell, auch bei schwacher Mobilfunkverbindung
- Texte sind gut lesbar: ausreichende Schriftgröße, Kontrast und Zeilenlänge
- Die Gestaltung passt zur Marke und wirkt auf allen Seiten einheitlich
- Die Seite lässt sich per Tastatur bedienen und ist mit Screenreader verständlich
- Inhalte lassen sich ohne Programmierkenntnisse pflegen
Gutes Webdesign fällt beim Benutzen kaum auf. Klare Wege und eine vertraute Anordnung schaffen Vertrauen, weil alles dort ist, wo man es erwartet. Trends können frische Impulse geben, sollten aber nie die Bedienbarkeit verschlechtern. Einen Überblick gibt der Artikel zu Webdesign-Trends.
Der Unterschied zwischen Webdesign und Webentwicklung
Webdesign legt fest, was eine Website leisten soll, wie sie aussieht und wie sie sich bedienen lässt. Webentwicklung setzt das technisch um. Häufig wird die Entwicklung noch einmal geteilt:
| Bereich | Aufgabe | Beispiele |
|---|---|---|
| Webdesign | Konzept, Nutzerführung und Gestaltung | Seitenstruktur, Wireframes, Entwürfe, Designsystem |
| Frontend-Entwicklung | Umsetzung dessen, was im Browser passiert | HTML, CSS, JavaScript, responsive Darstellung, Barrierearmut im Code |
| Backend-Entwicklung | Logik und Daten auf dem Server | Content-Management-System, Datenbank, Schnittstellen, Formulare, Shop-Funktionen |
Die Grenzen sind fließend, denn jede Seite braucht Wissen aus der anderen. Wer gestaltet, muss verstehen, was technisch sinnvoll ist, und wer entwickelt, muss Gestaltungsentscheidungen nachvollziehen können. Im Idealfall arbeiten beide Seiten deshalb von Anfang an zusammen.
Ein Beispiel aus unserer Arbeit: Beim Relaunch der Crowdinvesting-Plattform Klimaschwarm gehörten Konzept und Seitenstruktur, das Design für Desktop und Smartphone, ein eigenes WordPress-Plugin für den Datenaustausch mit dem Dienstleister Portagon und eine Benutzerdokumentation für das Team zu einem Projekt. Gestaltung und Entwicklung waren dabei nicht voneinander zu trennen. Mehr dazu im Projektbericht Klimaschwarm.
Was eine Webdesign-Agentur macht
Eine Webdesign-Agentur bündelt die Fähigkeiten, die für eine Website nötig sind, in einem Team. Zu den typischen Aufgaben gehören:
- Beratung und Analyse: Ziele, Zielgruppen, Wettbewerb und die bestehende Website verstehen
- Konzept und Struktur: Seitenstruktur, Nutzerwege und Inhalte planen
- Design: Wireframes, Entwürfe und ein Designsystem passend zur Marke
- Inhalte: Texte und Bilder erstellen oder deren Erstellung begleiten
- Umsetzung: Entwicklung im Content-Management-System, Formulare, Schnittstellen
- Qualitätssicherung: Tests auf verschiedenen Geräten und Browsern, Ladezeit, Barrierearmut
- Livegang und Betrieb: Hosting, Wartung, Updates, Sicherheit und Weiterentwicklung
Nicht jede Agentur deckt alles ab. Manche konzentrieren sich auf die Gestaltung und geben die Programmierung an andere weiter, andere arbeiten vor allem technisch. Fragen Sie vor der Beauftragung, wer im Projekt welche Aufgabe übernimmt und wer nach dem Start Ihr Ansprechpartner bleibt. Bei dpi Design arbeitet ein festes Team aus Markenaufbau und Design, Webdesign und Technik zusammen, ohne Weitergabe an Subunternehmer. Wie Sie zwischen Baukasten und Agentur abwägen, lesen Sie im Artikel Website-Baukasten oder Agentur.
Ablauf eines Webdesign-Projekts
Jedes Projekt ist anders, die Phasen ähneln sich aber. Während der Umsetzung laufen manche Schritte parallel, etwa Texte und Design.
Erstgespräch und Analyse
Ziele, Zielgruppen, Umfang und Rahmenbedingungen klären. Bei einer bestehenden Website gehört eine Bestandsaufnahme dazu: Was funktioniert, was nicht?
Konzept und Seitenstruktur
Die Informationsarchitektur legt fest, welche Seiten es gibt und wie sie zusammenhängen. Für wichtige Seiten entstehen Wireframes.
Inhalte
Texte, Bilder und Videos werden erstellt oder überarbeitet. Je früher sie vorliegen, desto besser passt das Design zu ihnen.
Design
Entwürfe für die Startseite und typische Unterseiten, jeweils für Desktop und Smartphone. Nach der Abstimmung entsteht daraus ein Designsystem.
Entwicklung
Umsetzung im Content-Management-System mit Vorlagen, Bausteinen, Formularen und Schnittstellen.
Tests und Livegang
Prüfung auf Geräten und Browsern, Ladezeit, Barrierearmut, Formulare und Weiterleitungen alter Adressen. Danach geht die Website online.
Betrieb und Weiterentwicklung
Updates, Sicherheit, Backups und Auswertung. Eine Website ist nie ganz fertig, sie entwickelt sich mit dem Unternehmen weiter.
Was in den einzelnen Phasen passiert und was Sie selbst beitragen, beschreibt der Artikel Ablauf eines Webprojekts. Welche Faktoren die Kosten bestimmen, lesen Sie unter Was kostet eine Website?.
Webdesign für Ihr Unternehmen
Von der Struktur bis zum Livegang
Wie wir Konzept, Design und Umsetzung mit WordPress und eigenem Theme verbinden, lesen Sie auf der Seite Website erstellen lassen. Wenn es vor allem um Nutzerführung, Prototypen und Tests geht, ist die Seite UX- und UI-Design der richtige Einstieg. Den Preis nennen wir auf Anfrage: Nach dem kostenlosen Erstgespräch erhalten Sie innerhalb von drei Werktagen ein Festpreisangebot.
Häufige Fragen
Was macht ein Webdesigner?
Ein Webdesigner plant und gestaltet Websites: Seitenstruktur, Nutzerführung und Oberfläche mit Farben, Schriften, Bildern und Bedienelementen. Je nach Arbeitsteilung setzt er die Entwürfe auch selbst technisch um oder arbeitet dafür mit Entwicklern zusammen.
Was ist der Unterschied zwischen Webdesign und Grafikdesign?
Grafikdesign gestaltet meist feste Formate wie Plakate, Broschüren oder Logos. Webdesign gestaltet Oberflächen, die benutzt werden und auf vielen Bildschirmgrößen, in verschiedenen Browsern und mit unterschiedlichen Eingabearten funktionieren müssen. Nutzerführung, Technik und Barrierearmut haben deshalb mehr Gewicht.
Muss ein Webdesigner programmieren können?
Nicht zwingend auf dem Niveau eines Entwicklers. Wer Websites gestaltet, sollte aber verstehen, wie HTML, CSS und JavaScript funktionieren und was ein Content-Management-System leisten kann. Nur so entstehen Entwürfe, die sich sauber und schnell umsetzen lassen.
Was ist responsives Webdesign?
Responsives Webdesign bedeutet, dass sich eine Website automatisch an die Bildschirmgröße anpasst. Inhalte, Menüs und Bilder ordnen sich auf dem Smartphone anders an als auf dem Desktop, ohne dass es dafür eine eigene Mobilversion braucht.
Was kostet Webdesign?
Das hängt vor allem von Umfang, Inhalten, Funktionen, individuellem Design und Anforderungen wie Barrierearmut ab. Was den Preis im Einzelnen bestimmt, erklärt unser Artikel zu den Kosten einer Website. Bei dpi Design erhalten Sie nach dem kostenlosen Erstgespräch innerhalb von drei Werktagen ein Festpreisangebot.
