Was ist Webdesign? Aufgaben, Bereiche und Ablauf einfach erklärt

Viele denken bei Webdesign zuerst an Farben, Schriften und Bilder. Das gehört dazu – ist aber nur ein Teil. Eine Firmenwebsite muss vor allem funktionieren: Besucher sollen verstehen, was Sie anbieten, Vertrauen fassen und Sie ohne Umwege erreichen. Damit das klappt, greifen Konzept, Gestaltung, Texte und Technik ineinander.

In diesem Beitrag erklären wir, was Webdesign genau umfasst, wie es sich von verwandten Begriffen abgrenzt, wie ein Projekt typischerweise abläuft und woran Sie als Auftraggeber gute Arbeit erkennen.

Webdesign: eine kurze Definition

Webdesign bezeichnet die Planung, Gestaltung und Umsetzung von Websites. Es verbindet die Frage „Wie sieht die Seite aus?“ mit den Fragen „Wie wird sie benutzt?“ und „Wie wird sie gebaut?“. Das Ergebnis ist nicht nur ein Entwurf, sondern eine funktionierende Website, die im Browser auf Smartphone, Tablet und Laptop gleichermaßen gut nutzbar ist.

Im engeren Sinn meint Webdesign die visuelle Gestaltung: Layout, Farben, Typografie, Bilder, Buttons. Im weiteren Sinn – und so verwenden die meisten Agenturen und Auftraggeber den Begriff – umfasst es den gesamten Weg von der Idee bis zur fertigen Website.

Die Bereiche des Webdesigns im Überblick

Eine professionelle Website entsteht aus mehreren Disziplinen. Nicht jede braucht in jedem Projekt denselben Aufwand – fehlen sollte aber keine.

Konzeption und Nutzerführung

Am Anfang steht nicht der Entwurf, sondern die Frage, wofür die Website da ist. Ein Elektriker, der Fachkräfte sucht, braucht eine andere Website als eine Steuerkanzlei, die neue Mandanten gewinnen will. Aus den Zielen ergeben sich die nötigen Seiten, ihre Reihenfolge und die Wege, auf denen Besucher zur Anfrage kommen.

Wie gut diese Wege funktionieren, lässt sich an bewährten Grundsätzen prüfen. Die bekanntesten sind die zehn Usability-Heuristiken von Jakob Nielsen, die er 1994 in ihrer heutigen Form veröffentlicht hat – etwa „Konsistenz und Standards“ oder „Wiedererkennen statt Erinnern“. Sie gelten für Websites ebenso wie für Software.

Visuelle Gestaltung

Die Gestaltung übersetzt Ihr Unternehmen in eine visuelle Sprache: Logo und Hausfarben werden fürs Web aufbereitet, Schriften auf Lesbarkeit geprüft, Bilder ausgewählt. Gute Gestaltung lenkt den Blick auf das Wichtige – die Hauptaussage, den Kontakt-Button, die Leistungen – und tritt ansonsten hinter den Inhalt zurück.

Inhalte

Texte und Bilder sind kein Füllmaterial für ein fertiges Layout. Sie bestimmen, wie lang Abschnitte werden, welche Elemente nötig sind und welche Fragen beantwortet werden. In Projekten sehen wir oft, dass Websites ins Stocken geraten, weil Inhalte erst am Ende geliefert werden. Planen Sie Texte und Fotos deshalb von Anfang an mit ein.

Technik, Barrierefreiheit und Auffindbarkeit

Unter der Oberfläche entscheidet die Technik über Ladezeit, Sicherheit und Pflegeaufwand. Dazu gehören die Wahl des Systems, das Hosting und die saubere Umsetzung für alle Bildschirmgrößen. Barrierefreiheit sorgt dafür, dass auch Menschen mit Einschränkungen die Seite nutzen können. Das W3C weist ausdrücklich darauf hin, dass davon auch andere profitieren, etwa Menschen mit kleinen Smartphone-Bildschirmen oder ältere Nutzer. Und schließlich sollte die Website so aufgebaut sein, dass Suchmaschinen ihre Inhalte verstehen.

Wie läuft ein Webdesign-Projekt ab?

Die Bezeichnungen unterscheiden sich von Anbieter zu Anbieter, die Abfolge ist aber fast immer ähnlich. Für eine typische Unternehmenswebsite mit fünf bis zwanzig Seiten sieht sie so aus:

1. Briefing und ZieleSie beschreiben Unternehmen, Zielgruppen, Ziele, gewünschte Inhalte, Budget und Zeitrahmen. Wie das gelingt, zeigt unser Leitfaden zum Website-Briefing.
2. Struktur und InhaltsplanungWelche Seiten braucht es, wie hängen sie zusammen, welche Inhalte kommen wohin? Details dazu im Beitrag Seitenstruktur planen.
3. Entwurf (Wireframe)Ein einfaches Raster zeigt Aufbau und Reihenfolge der Inhalte – noch ohne Farben und Bilder.
4. GestaltungAus dem Raster entsteht ein Design für Startseite und wichtige Unterseiten, meist für Desktop und Smartphone.
5. UmsetzungDas Design wird im gewählten System gebaut, Inhalte werden eingepflegt, Formulare und Tracking eingerichtet.
6. TestDarstellung auf verschiedenen Geräten, Formulare, Ladezeit, Links, Pflichtangaben und Einwilligungen werden geprüft.
7. LivegangDie Website wird freigeschaltet. Bei einem Neustart einer bestehenden Seite gehören Weiterleitungen alter Adressen dazu.
8. Pflege und WeiterentwicklungUpdates, Sicherheit, neue Inhalte und Auswertungen sorgen dafür, dass die Website nicht veraltet.

Woran Sie gutes Webdesign erkennen

Ob eine Website gelungen ist, lässt sich auch ohne Fachwissen prüfen. Stellen Sie sich dafür in die Rolle eines Kunden, der Ihr Unternehmen noch nicht kennt:

• Klarheit: Nach wenigen Sekunden ist erkennbar, was angeboten wird, für wen und wo.
• Orientierung: Die Navigation ist verständlich, Menüpunkte heißen so, wie Kunden denken – nicht wie interne Abteilungen.
• Erreichbarkeit: Telefonnummer und Anfrageweg sind auf jeder Seite schnell zu finden, auch auf dem Smartphone.
• Lesbarkeit: Ausreichende Schriftgröße, gute Kontraste, Zwischenüberschriften statt Textwüsten.
• Glaubwürdigkeit: Echte Fotos, Referenzen, Bewertungen und ein vollständiges Impressum.
• Geschwindigkeit: Die Seite lädt auch im Mobilfunknetz zügig, nichts springt beim Laden hin und her.
• Pflegbarkeit: Sie können Texte, Bilder oder Stellenangebote selbst ändern, ohne jedes Mal Hilfe zu brauchen.

Auffällig ist: Fast alle Punkte haben mit Nutzung zu tun, nicht mit Geschmack. Ob Blau oder Grün schöner ist, spielt für den Erfolg meist eine kleinere Rolle als die Frage, ob Besucher den Kontakt-Button finden.

Responsive Design: eine Website für alle Geräte

Eine Website wird heute auf sehr unterschiedlichen Bildschirmen aufgerufen. Responsive Webdesign bedeutet, dass sich Layout, Bilder und Schriftgrößen automatisch an die verfügbare Breite anpassen. Statt einer eigenen Mobilversion gibt es eine Website, deren Elemente sich neu anordnen: Aus drei Leistungskacheln nebeneinander werden auf dem Smartphone drei untereinander, das Menü klappt hinter ein Symbol.

Google bietet mit dem kostenlosen Kurs „Learn Responsive Design“ auf web.dev eine gute Übersicht, was dazu gehört – von Layouts über Typografie und Bilder bis zu Nutzereinstellungen wie dem dunklen Modus. Für Auftraggeber genügt meist die Faustregel: Lassen Sie sich jeden Entwurf auch in der Smartphone-Ansicht zeigen, nicht nur am großen Bildschirm.

Webdesign und System: womit wird gebaut?

Webdesign ist an kein bestimmtes Werkzeug gebunden. Gängige Wege sind:

• Content-Management-Systeme wie WordPress: flexibel, erweiterbar, Inhalte lassen sich selbst pflegen; Hosting und Updates müssen organisiert werden.
• Website-Baukästen wie Wix oder Jimdo: schneller Einstieg mit Vorlagen, dafür weniger Gestaltungsfreiheit und eine stärkere Bindung an den Anbieter.
• Individuelle Entwicklung: sinnvoll bei besonderen Funktionen, etwa Kundenportalen oder Konfiguratoren.

Welcher Weg zu Ihnen passt, hängt von Umfang, Budget und Pflegeaufwand ab. Eine ausführliche Gegenüberstellung finden Sie im Vergleich WordPress oder Baukasten.

Wer macht Webdesign – und was kostet es?

Grundsätzlich gibt es drei Möglichkeiten: selbst bauen, einen Freelancer beauftragen oder mit einer Agentur arbeiten. Selbst bauen spart Geld, kostet aber Zeit und setzt voraus, dass Sie sich mit Gestaltung, Texten und Technik beschäftigen wollen. Freelancer sind oft auf einen Bereich spezialisiert, etwa Gestaltung oder Programmierung. Eine Webdesign Agentur deckt in der Regel alle Bereiche ab, von Konzept und Texten bis zu Hosting und Pflege.

Die Kosten hängen stark vom Umfang ab: Anzahl der Seiten, Texterstellung, Fotos, Funktionen und laufende Betreuung. Eine Einordnung mit typischen Preisspannen finden Sie in unserem Leitfaden Webdesign-Kosten.

Typische Missverständnisse über Webdesign

• „Hauptsache modern.“ Trends veralten. Eine klare Struktur und gute Texte halten deutlich länger als ein auffälliger Effekt.
• „Die Website ist fertig, wenn sie online ist.“ Ohne Updates und neue Inhalte veraltet sie technisch und inhaltlich.
• „Um SEO kümmern wir uns später.“ Seitenstruktur, Überschriften und URLs werden im Webdesign festgelegt. Nachträgliche Korrekturen sind aufwendiger.
• „Texte schreiben wir am Ende.“ Gestaltung ohne echte Inhalte führt fast immer zu Nacharbeit.
• „Je mehr Funktionen, desto besser.“ Jede Funktion muss gepflegt werden. Was Kunden nicht nutzen, kostet nur Ladezeit.

Checkliste: Ist Ihre Website gut gestaltet?

• Auf der Startseite ist ohne Scrollen klar, was Sie anbieten und für wen.
• Die Navigation hat wenige, verständliche Menüpunkte.
• Telefonnummer und Kontaktweg sind auf jeder Seite schnell erreichbar.
• Die Website funktioniert auf dem Smartphone genauso gut wie am Laptop.
• Texte sind gegliedert, gut lesbar und beantworten typische Kundenfragen.
• Es gibt echte Fotos, Referenzen oder Bewertungen.
• Die Seite lädt zügig, auch mobil.
• Impressum und Datenschutzerklärung sind von jeder Seite aus erreichbar.
• Jede Seite hat einen eigenen, beschreibenden Titel und eine klare Hauptüberschrift.
• Sie können Inhalte selbst ändern oder haben eine geregelte Betreuung.

Häufige Fragen

Quellen

1. Nielsen Norman Group: 10 Usability Heuristics for User Interface Design – Grundsätze von Jakob Nielsen, überarbeitete Fassung von 1994
2. W3C WAI: Introduction to Web Accessibility – Definition von Barrierefreiheit und Nutzen für alle
3. web.dev: Learn Responsive Design – Kostenloser Kurs von Google zu responsivem Webdesign
4. Google Search Central: SEO-Leitfaden für Anfänger