Webdesign: Grundlagen, Umsetzung und was es kostet

Was Webdesign umfasst

Webdesign verbindet drei Bereiche, die sich in der Praxis nicht sauber trennen lassen:

Visuelle Gestaltung — Farben, Schriften, Bilder, Abstände. Das, was man zuerst sieht und was den ersten Eindruck prägt.

Struktur und Nutzerführung — Wie sind Inhalte angeordnet? Wie findet jemand von der Startseite zum Kontaktformular? Dieser Teil wird oft unterschätzt und entscheidet am meisten darüber, ob eine Seite funktioniert.

Technische Umsetzung — HTML, CSS, Ladezeit, Barrierefreiheit. Ein Design existiert erst, wenn es im Browser funktioniert.

Ein häufiges Missverständnis: Webdesign und Webentwicklung sind nicht dasselbe. Design legt fest, wie etwas aussehen und sich verhalten soll. Entwicklung baut es. Bei kleinen Projekten macht dieselbe Person beides, bei größeren sind es getrennte Rollen.

Die Bausteine: Layout, Farbe, Typografie

Layout

Das Layout bestimmt, wo was steht. Die meisten Websites folgen bewährten Mustern, weil Besucher diese Muster kennen: Logo links oben, Navigation oben, wichtigste Aussage im sichtbaren Bereich ohne Scrollen.

Abweichungen davon sind möglich, kosten aber Orientierung. Wer die Navigation kreativ versteckt, verliert Besucher, die keine Zeit für Rätsel haben.

Nützliche Faustregel: Freiraum ist kein verschwendeter Platz. Dicht gepackte Seiten wirken unruhig und erschweren das Erfassen. Abstände zwischen Elementen sind ein Gestaltungsmittel, kein Versehen.

Farbe

Farben transportieren Bedeutung, bevor ein Wort gelesen wird. Für die Praxis reichen drei Ebenen:

• Primärfarbe — die Markenfarbe, sparsam eingesetzt
• Sekundärfarbe — ergänzend, für Akzente
• Neutrale Töne — Grautöne für Text, Hintergründe, Trennlinien

Der wichtigste Punkt ist nicht die Farbwahl, sondern der Kontrast. Hellgrauer Text auf weißem Hintergrund sieht in Entwürfen elegant aus und ist für viele Menschen schlecht lesbar. Die Web Content Accessibility Guidelines (WCAG) nennen ein Kontrastverhältnis von mindestens 4,5:1 für normalen Fließtext. Das ist keine Stilfrage, sondern eine Zugänglichkeitsfrage — und in vielen Kontexten inzwischen auch eine rechtliche.

Typografie

Zwei Schriftarten reichen fast immer: eine für Überschriften, eine für Fließtext. Wer mehr einsetzt, braucht einen guten Grund.

Für die Lesbarkeit zählen vor allem drei Werte:

• Schriftgröße im Fließtext: 16 Pixel als Untergrenze, eher mehr
• Zeilenhöhe: etwa das 1,5-fache der Schriftgröße
• Zeilenlänge: 50 bis 75 Zeichen. Längere Zeilen ermüden, weil das Auge den Zeilenanfang schwerer wiederfindet

Responsive Design: Warum Mobile zuerst kommt

Responsive Webdesign bedeutet, dass sich eine Seite an die Bildschirmgröße anpasst — vom Smartphone bis zum breiten Monitor. Das ist seit Jahren kein Zusatzfeature mehr, sondern Grundvoraussetzung.

Zwei Gründe:

1. Nutzung. Ein erheblicher Teil des Webtraffics kommt von mobilen Geräten. Je nach Branche ist es die Mehrheit.
2. Indexierung. Google bewertet primär die mobile Version einer Seite. Was mobil nicht funktioniert, hat auch in der Desktop-Suche ein Problem.

Mobile First heißt: zuerst für den kleinen Bildschirm gestalten, dann nach oben erweitern. Der umgekehrte Weg führt regelmäßig dazu, dass die mobile Version eine gequetschte Notlösung wird.

Praktisch bedeutet das:

• Touch-Ziele wie Buttons groß genug für Finger, nicht für Mauszeiger
• Navigation, die auch mit einer Hand bedienbar ist
• Bilder in passenden Größen ausliefern, statt Desktop-Bilder auf dem Handy zu skalieren
• Formulare kurz halten — Tippen auf dem Smartphone ist mühsam

Was gutes Webdesign ausmacht

Die Frage lässt sich schlecht über Geschmack beantworten, aber gut über Kriterien:

Es ist schnell. Ladezeit ist ein Designfaktor. Große unkomprimierte Bilder, zu viele eingebundene Schriften und überflüssige Skripte kosten Sekunden — und Besucher, die vorher abspringen.

Es ist verständlich ohne Erklärung. Wenn jemand überlegen muss, wo er klicken soll, ist etwas schiefgelaufen. Buttons sollen wie Buttons aussehen, Links wie Links.

Es funktioniert für alle. Ausreichender Kontrast, Bedienbarkeit per Tastatur, Alternativtexte für Bilder. Barrierefreiheit hilft nicht nur Menschen mit Einschränkungen, sondern verbessert die Nutzbarkeit generell.

Es hat ein klares Ziel pro Seite. Was soll der Besucher hier tun? Wenn die Antwort „vieles" lautet, wird er nichts davon tun.

Es ist konsistent. Gleiche Elemente sehen auf allen Seiten gleich aus. Überraschungen im Detail erzeugen Unsicherheit.

Technik: Was hinter dem Design steckt

Design und Technik hängen enger zusammen, als es von außen wirkt.

HTML und CSS bilden die Grundlage. HTML strukturiert Inhalte, CSS gestaltet sie. Semantisch sauberes HTML — also Überschriften als Überschriften und nicht als fett formatierter Text — hilft Suchmaschinen und Screenreadern gleichermaßen.

Content-Management-Systeme wie WordPress, TYPO3 oder Joomla trennen Inhalt von Gestaltung. Das erlaubt Redakteuren, Inhalte zu pflegen, ohne Code anzufassen.

Hosting beeinflusst das Ergebnis direkter, als vielen bewusst ist. Serverstandort, Antwortzeit und PHP-Version wirken sich auf die Ladezeit aus — und damit auf ein Kriterium, das sowohl Nutzer als auch Suchmaschinen bewerten. Ein aufwendiges Design auf einem langsamen Server verliert genau den Vorsprung, für den es gebaut wurde.

Core Web Vitals sind die Messwerte, mit denen Google Nutzererlebnis quantifiziert: Ladezeit des größten sichtbaren Elements, Reaktionszeit auf Eingaben und visuelle Stabilität beim Laden. Alle drei sind über Design und Technik beeinflussbar.

Selbst machen, Baukasten oder Agentur

Es gibt drei Wege, und die Wahl hängt weniger am Budget als an Anspruch und verfügbarer Zeit.

Baukasten lohnt sich, wenn eine solide Standardseite reicht und die Zeit knapp ist. Vorlagen sind responsive, Hosting ist enthalten, die Seite steht in Stunden statt Wochen.

CMS in Eigenregie gibt mehr Freiheit, verlangt aber Einarbeitung und laufende Wartung — Updates, Backups, Sicherheit.

Agentur ist der Weg bei individuellen Anforderungen, komplexen Funktionen oder wenn das Ergebnis unmittelbar auf Umsatz einzahlt.

Was Webdesign kostet

Die Spanne ist groß, weil „Website" alles zwischen einer Visitenkarte und einem Shop mit Warenwirtschaft bedeuten kann. Was die Kosten treibt:

• Umfang — Anzahl der Seiten und Funktionen
• Individualität — Vorlage anpassen oder von Grund auf gestalten
• Inhalte — Texte und Bilder vorhanden oder zu erstellen
• Funktionen — Kontaktformular, Buchungssystem, Shop, Mehrsprachigkeit
• Laufende Kosten — Hosting, Domain, Wartung, Lizenzen

Der häufigste Kalkulationsfehler ist, nur die Erstellung zu rechnen. Eine Website ist kein einmaliges Projekt: Updates, Sicherheitspatches, inhaltliche Pflege und gelegentliche Überarbeitungen laufen weiter.

Redaktionshinweis (vor Veröffentlichung entfernen): Konkrete Preisspannen wurden bewusst nicht ergänzt. Falls gewünscht, müssen sie gegen aktuelle Marktdaten geprüft und mit Stand-Datum versehen werden — es wurden keine Zahlen geschätzt.

Aktuelle Entwicklungen

Trends im Webdesign sind mit Vorsicht zu behandeln: Was heute modern wirkt, datiert eine Seite in drei Jahren. Diese Entwicklungen haben allerdings einen funktionalen Kern und dürften bleiben:

Barrierefreiheit als Standard. Getrieben durch gesetzliche Anforderungen und die Einsicht, dass zugängliche Seiten für alle besser funktionieren.

Performance als Gestaltungsprinzip. Weniger Skripte, schlankere Seiten, bewusster Umgang mit Schriften und Bildern.

Dark Mode. Nutzer erwarten zunehmend, dass Seiten ihre Systemeinstellung respektieren.

Reduzierte Bewegung. Animationen werden sparsamer eingesetzt, auch weil Betriebssysteme eine Einstellung für reduzierte Bewegung anbieten, die respektiert werden sollte.

Was dagegen kommt und geht: bestimmte Farbverläufe, Illustrationsstile, Scroll-Effekte. Wer darauf ein komplettes Design aufbaut, plant den nächsten Relaunch mit ein.

Häufige Fragen

Was ist der Unterschied zwischen Webdesign und Webentwicklung?

Webdesign legt fest, wie eine Website aussieht und sich bedienen lässt: Layout, Farben, Nutzerführung. Webentwicklung setzt das technisch um und baut Funktionen. Bei kleinen Projekten übernimmt oft eine Person beides.

Brauche ich Programmierkenntnisse für Webdesign?

Für einen Homepage-Baukasten nicht. Für Arbeit mit einem CMS wie WordPress sind Grundkenntnisse in HTML und CSS hilfreich, aber kein Muss. Wer beruflich gestaltet, kommt ohne CSS-Verständnis nicht weit.

Was macht eine Website benutzerfreundlich?

Klare Navigation, schnelle Ladezeit, lesbare Schrift mit ausreichendem Kontrast, funktionierende mobile Darstellung und ein erkennbares Ziel pro Seite. Besucher sollen nicht überlegen müssen, was sie als Nächstes tun.

Wie lange dauert die Erstellung einer Website?

Mit einem Baukasten und vorhandenen Inhalten wenige Stunden bis Tage. Eine individuell gestaltete Unternehmensseite mit Konzept, Texten und Abstimmungen liegt eher bei mehreren Wochen bis Monaten. Der größte Zeitfaktor sind fast immer die Inhalte, nicht das Design.

Muss meine Website barrierefrei sein?

Für öffentliche Stellen gelten bereits verbindliche Anforderungen, und für Teile der Privatwirtschaft greifen zunehmend gesetzliche Vorgaben. Unabhängig von der rechtlichen Lage verbessert Barrierefreiheit die Nutzbarkeit für alle. Ob und in welchem Umfang du konkret betroffen bist, klärt eine rechtliche Prüfung — dieser Artikel ersetzt sie nicht.

Fazit

Webdesign ist kein Geschmacksthema, sondern eine Frage der Funktion. Die Kriterien lassen sich prüfen: Lädt die Seite schnell? Findet man, was man sucht? Funktioniert sie auf dem Smartphone? Ist der Text lesbar?

Für die Umsetzung gibt es keinen richtigen Weg, nur einen passenden. Wer schnell online sein will und mit einer soliden Standardlösung auskommt, fährt mit einem Baukasten gut. Wer individuelle Anforderungen hat, braucht ein CMS oder professionelle Unterstützung. In beiden Fällen gilt: Das beste Design bringt wenig, wenn die technische Basis darunter nicht stimmt.