Professionelle Webseiten designen: Was 157 Firmen-Websites über die zweite Seite verraten

1. Einführung: Das Design endet nicht auf der Startseite

Professionelle Webseiten designen klingt nach Farbwahl, Schriftmuster und einem starken Bild im Kopfbereich. Genau dort hört das Design in vielen Projekten aber auch schon wieder auf. Wir haben im August 223 Firmen-Domains aus dem Mitgliederverzeichnis eines Fachhandelsverbands geprüft und bei 157 auswertbaren Websites verglichen, ob die erste Folgeseite noch zur Startseite passt. 81 bestanden alle vier Prüfpunkte. Die Startseite war fast nie das Problem.

Auf einen Blick

• Von 157 geprüften Firmen-Websites bestehen nur 81 alle vier Konsistenz-Checks zwischen Startseite und Folgeseite (Kreativschock-Stichprobe, August 2026).
• Häufigster Bruch ist die Überschriften-Hierarchie: 53 der 157 Folgeseiten tragen keine oder mehrere H1 (Kreativschock-Stichprobe, August 2026).
• Nutzer bilden sich ihr erstes Urteil über ein Design in 17 bis 50 Millisekunden und bevorzugen dabei einfache und erwartungskonforme Layouts (Google Research).
• Eine über alle Seiten gleich aufgebaute Navigation ist keine Geschmacksfrage, sondern Erfolgskriterium 3.2.3 der WCAG 2.2 auf Stufe AA (W3C).
• Die britische Verwaltung führt Konsistenz als Gestaltungsprinzip: gleiche Sprache, gleiche Design-Muster (GOV.UK Design Principles).

Professionelle Webseiten designen bedeutet, ein wiederholbares Gestaltungssystem festzulegen. Seitengerüst, Typografie, Farbpalette, Abstände und Bausteine werden einmal definiert und gelten für jede weitere Seite. Über die Wirkung entscheidet nicht der Entwurf der Startseite, sondern die Frage, ob eine dritte Person eine Seite erstellen kann, die ohne Nacharbeit dazu passt.

Dieser Beitrag zeigt, welche Entscheidungen vor dem Entwurf fallen, wie Sie in sieben Schritten eine professionelle Website erstellen und woran Sie erkennen, dass ein Design trägt. Wer den Aufbau der eigenen Website abgeben möchte, kann bei uns Webseiten professionell designen lassen. Wenn Sie selbst starten, hilft vorab ein Blick darauf, wie Sie den Seitenbaum vorher festlegen.

2. Warum das Urteil über ein Design in Millisekunden fällt

Besucher entscheiden schneller, als sie lesen können. Eine von Google veröffentlichte Untersuchung zur visuellen Komplexität von Websites fasst das Ergebnis so zusammen: „users strongly prefer website designs that look both simple (low complexity) and familiar (high prototypicality)“ (Nutzer bevorzugen Website-Designs deutlich, die zugleich einfach und vertraut wirken). Der Effekt setzt laut derselben Quelle in einem Zeitfenster zwischen 17 und 50 Millisekunden ein.

Das ist unbequem für jeden, der eine besonders originelle Gestaltung sucht. Vertrautheit schlägt Überraschung. Für das Design der eigenen Website heißt das: weniger Erfindung, mehr Verlässlichkeit.

Praktisch heißt das: Logo links oben, Navigation nach oben, Kontaktweg dorthin, wo ihn alle vermuten. Wer diese Muster bricht, kauft Aufmerksamkeit mit Orientierungsverlust. Am besten hält man sich an das, was Besucher erwarten. Nachzulesen bei Google Research.

Erwartungskonformität wirkt nicht nur innerhalb einer Seite, sondern zwischen den Seiten. Wer auf der Startseite lernt, dass die Navigation fünf Punkte hat und der Kontaktbutton rechts oben sitzt, erwartet das auf der Leistungsseite genauso. Wird dieses Versprechen gebrochen, wirkt der Auftritt zusammengestückelt. Das fällt niemandem sofort auf. Es sinkt einfach das Vertrauen. Vertiefende Hinweise finden Sie im Ratgeber „Website Navigation“.

Ein Gestaltungssystem funktioniert wie das Sortiment einer Bäckerei: Die Zutaten liegen fest, und trotzdem entsteht daraus jeden Tag etwas anderes. Ohne festes Sortiment wird jede Bestellung ein Einzelfall.

3. Voraussetzungen: Was vor dem ersten Entwurf feststehen sollte

Bevor die erste Farbe fällt, sollten drei Dinge geklärt sein. Sie kosten wenig Zeit und ersparen Korrekturschleifen. Das gilt für Agenturprojekte genauso wie für alle, die zum ersten Mal eine Website bauen und dabei versuchen, eine Website zu erstellen, die auch in zwei Jahren trägt.

3.1 Zielgruppe und Zweck der Seite

Zuerst die Frage, wen die Seite erreichen soll. Eine Zielgruppe, die vergleicht, benötigt Preise und Leistungsumfang. Wer im Notfall sucht, benötigt Telefonnummer und Öffnungszeiten. Daraus folgt die Art von Website, die passt: kompakte Visitenkarte, mehrseitige Firmenseite oder Shop. Die Antwort wird aufgeschrieben, bevor irgendetwas gestaltet wird.

Ziel ist es also, das Design vom Zweck her zu denken statt vom Geschmack. Auch die Branche spielt hinein, weil Erwartungen sich unterscheiden. Ein Handwerksbetrieb wird an anderen Merkmalen gemessen als eine Kanzlei.

3.2 Seitengerüst und die Zahl der Unterseiten

Danach entsteht der Seitenbaum. Notieren Sie jede geplante Unterseite mit einem Satz zu ihrem Zweck. Diese Liste ist wichtiger, als sie aussieht. Sie legt fest, wie viele unterschiedliche Seitentypen vom Design abgedeckt werden müssen. Fünf Seiten mit gleichem Aufbau sind schnell gestaltet. Fünf Seiten mit fünf Sonderlösungen sind es nie.

Typisch für eine Firmenseite sind Startseite, Leistungen, Über uns, Referenzen, Kontakt sowie Impressum und Datenschutzerklärung, und diese sieben Seiten decken für kleine Unternehmen meist alles ab, was Kunden vor einer Anfrage lesen. Mehr Unterseiten benötigen eine Begründung.

3.3 Domain, Hosting und technische Basis

Die Domain ist die Adresse Ihrer Website und sollte kurz und sprechbar sein. Achten Sie darauf, dass Sie selbst als Inhaber der Domain eingetragen sind. Eine eigene Domain statt einer Anbieter-Subdomain ist die Grundlage jeder ernsten Erstellung, denn ein Umzug wird sonst zur Verhandlung statt zum technischen Vorgang.

Dazu gehören ein SSL-Zertifikat für die verschlüsselte Verbindung und ein Hosting, das zur erwarteten Last passt. Beides ist heute Standard. In den meisten Tarifen wird es bereits mitgeliefert. Soll die Ablage der Inhalte offen bleiben, wird ein Content-Management-System statt eines geschlossenen Baukastens gewählt.

4. Schritt für Schritt: professionelle Webseiten designen

Die folgenden sieben Schritte bauen aufeinander auf. Jeder endet mit einer Festlegung, die danach nicht mehr diskutiert wird. Genau diese Festlegungen sind das eigentliche Design, und erst sie erlauben es, später beliebig viele Seiten zu erstellen.

4.1 Schritt 1: Das Seitengerüst zeichnen

Zeichnen Sie zuerst die Anordnung, ohne Farbe und ohne Bilder. Wo steht das Logo, wo die Navigation, wo der Hauptinhalt, wo die Fußzeile? Ein Kasten-Entwurf auf Papier reicht. Wer hier schon Farben setzt, diskutiert später über Rot statt über Reihenfolge.

Legen Sie im selben Zug fest, welche Elemente auf jeder Seite wiederkehren. Sie bilden den Rahmen, alles andere ist Inhalt.

4.2 Schritt 2: Typografie als feste Skala definieren

Zwei Schriften genügen, oft reicht eine mit mehreren Schnitten. Wichtiger als die Auswahl ist die Skala: Legen Sie feste Größen für H1, H2, H3 und Fließtext fest und widerstehen Sie der Versuchung, für eine einzelne Seite eine Zwischengröße einzuführen. Der Fließtext sollte mobil mindestens 16 Pixel groß sein. Welche Schriften sich eignen, steht bei den Schriften für den Webauftritt ausführlicher beschrieben.

Eine feste Skala ist der Unterschied zwischen einem Design und einer Sammlung von Entscheidungen.

4.3 Schritt 3: Farben mit Rollen statt Lieblingsfarben

Jeder Farbe wird eine Aufgabe zugewiesen: Hintergrund, Text, Akzent, Signal. Drei bis vier Farben reichen für fast jede professionelle Website. Prüfen Sie den Kontrast, bevor Sie sich festlegen. Schwacher Kontrast zählt zu den häufigsten Barrierefreiheits-Fehlern. Details stehen im Beitrag zum Aufbau einer Farbpalette.

4.4 Schritt 4: Abstände auf ein Raster legen

Abstände sind der unsichtbare Teil des Designs. Sie verraten Amateurarbeit am schnellsten. Legen Sie eine Skala fest, etwa 8, 16, 24, 40 und 64 Pixel, und verwenden Sie ausschließlich diese Werte. Eine Website ohne festgelegte Abstände wirkt wie ein Regal, bei dem jedes Brett in einer anderen Höhe sitzt. Einzeln fällt das kaum auf. In der Summe wirkt es schief.

4.5 Schritt 5: Bausteine statt Einzelseiten bauen

Jetzt entstehen die wiederverwendbaren Teile: Textabschnitt, Bild mit Text, Aufzählung, Zitat, Kontaktbereich, Handlungsaufforderung. Aus diesen Bausteinen wird jede weitere Seite zusammengesetzt. Ein Baukasten oder ein Website Builder liefert solche Elemente mit. In einem Content-Management-System können sie frei angelegt werden.

Der Test ist einfach. Kann jemand aus Ihrem Team eine neue Seite erstellen, ohne Sie zu fragen, wie sie aussehen soll? Wenn ja, tragen die Bausteine. Wenn nein, existiert nur ein Entwurf. Wer öfter Websites zu erstellen hat, kennt den Unterschied.

4.6 Schritt 6: Inhalte, Bilder und responsive Anpassung

Erst jetzt kommen echte Texte und Bilder hinein. Entwürfe mit Blindtext lügen, weil sie immer perfekt gefüllt aussehen. Prüfen Sie jede Seite in schmaler Breite, denn ein responsive Design entscheidet sich dort, wo Inhalte umbrechen. Danach lässt sich die Website anpassen, ohne das System zu verlassen. Wie das im Detail funktioniert, zeigt unser Beitrag zu Mobile First im Alltag.

Bilder werden in moderne Formate umgewandelt und in der Größe reduziert. Das gehört zum Design, weil eine langsame Seite als schlechte Seite wahrgenommen wird. In unseren Projekten erreichen wir PageSpeed-Werte von 90 und mehr, vor allem durch Bildkomprimierung, Caching und das Entfernen überflüssiger Skripte. Tempo ist Gestaltung.

4.7 Schritt 7: Vor dem Livegang gegen die zweite Seite prüfen

Der letzte Schritt wird fast immer ausgelassen. Öffnen Sie die Startseite und danach eine beliebige Unterseite und vergleichen Sie vier Dinge: gleiche Navigation, genau eine H1, eigener Seitentitel, gleiches Stylesheet. Aus unserer Sicht ist das der aussagekräftigste Test, den ein Laie ohne Werkzeuge durchführen kann.

Wer den Blick von außen möchte, kann seine Seiten auch von uns auf Bedienbarkeit prüfen lassen.

5. Was 157 Firmen-Websites über die zweite Seite verraten

Für diesen Beitrag haben wir im August 2026 das öffentliche Mitgliederverzeichnis eines bundesweiten Fachhandelsverbands ausgewertet. Aus 223 Betriebs-Domains blieben nach Abzug nicht erreichbarer Seiten, Platzhalter und Seiten ohne verlinkte Folgeseite 157 auswertbare Websites übrig, und bei jeder wurden Startseite und erste inhaltliche Folgeseite auf vier maschinell prüfbare Merkmale verglichen. Es ist eine Stichprobe, keine repräsentative Studie.

• Gemeinsame Design-Basis: beide Seiten laden mindestens ein identisches Stylesheet. Erfüllt bei 146 von 157.
• Genau eine H1: die Folgeseite trägt exakt eine Hauptüberschrift. Erfüllt bei 104 von 157.
• Eigener Seitentitel: der Titel unterscheidet sich von dem der Startseite. Erfüllt bei 142 von 157.
• Wiederkehrende Navigation: mindestens 80 Prozent der Menüpunkte tauchen auf beiden Seiten auf. Erfüllt bei 148 von 157.

Alle vier Punkte bestanden 81 Websites. 76 hatten mindestens einen Befund, davon 66 genau einen und 10 zwei oder mehr. Der Ausreißer ist die Überschriften-Hierarchie: 31 Folgeseiten trugen keine H1, weitere 22 mehr als eine. Die Navigation wurde bei 132 Seiten zu hundert Prozent identisch ausgeliefert. Das Menü sitzt also. Die Struktur darunter nicht.

5.1 Unsere Position zum verbreiteten Ratschlag

Die meisten Ratgeber zu diesem Thema beschreiben das Designen als Gestaltungsakt: Werkzeug wählen, Vorlage aussuchen, Farben und Bilder einsetzen, in wenigen Minuten fertig. Unsere Position ist eine andere. Sichtbar wird ein Design nicht dort, wo es entworfen wurde, sondern dort, wo es wiederholt werden muss. Wer eine professionelle Website zu erstellen versucht, arbeitet deshalb an Regeln, nicht an Bildschirmen. Der Entwurf ist nicht das Design.

Der Beleg steckt in den Zahlen oben. Fast alle Startseiten sahen ordentlich aus, die technische Basis stimmte fast überall: 146 von 157 teilten sich ein Stylesheet. Trotzdem fiel jede dritte Folgeseite bei der Überschriften-Hierarchie durch, also dort, wo eine neue Seite entsteht und nicht dort, wo entworfen wird.

Konsistenz ist dabei nicht bloß Geschmack. Das Erfolgskriterium 3.2.3 der Richtlinien für barrierefreie Webinhalte formuliert auf Konformitätsstufe AA: „Navigational mechanisms that are repeated on multiple web pages within a set of web pages occur in the same relative order each time they are repeated, unless a change is initiated by the user“ (Navigationsmechanismen, die sich auf mehreren Seiten einer Website wiederholen, erscheinen jedes Mal in derselben relativen Reihenfolge, sofern der Nutzer die Änderung nicht selbst auslöst). Nachzulesen beim W3C.

Auch die britische Verwaltung hat den Punkt zum Gestaltungsprinzip erhoben. Unter „Be consistent, not uniform“ heißt es in den GOV.UK Design Principles: „We should use the same language and the same design patterns wherever possible“ (Wir sollten dieselbe Sprache und dieselben Design-Muster verwenden, wo immer das möglich ist). Konsistent heißt dabei ausdrücklich nicht uniform.

6. Häufige Fehler beim Designen und wie Sie sie vermeiden

Die folgenden Muster sehen wir beim Erstellen von Firmenseiten regelmäßig. Keines ist teuer zu beheben, solange es früh auffällt. Später wird es zäh.

1. Die gestaltete Website wird umgebaut statt genutzt. Wer nach dem Kauf jede Seite einzeln anpasst, verliert den Vorteil, für den er bezahlt hat.
2. Überschriften werden nach Optik gewählt. Eine H2 wird zur H1, weil sie größer aussehen soll. Damit kippt die Hierarchie, die Suchmaschinen auswerten.
3. Jede Seite bekommt einen eigenen Kopfbereich. Das wirkt abwechslungsreich und kostet Wiedererkennung.
4. Der Seitentitel bleibt überall gleich. Bei 15 geprüften Seiten war der Titel identisch zur Startseite oder leer. In Suchergebnissen sind solche Seiten kaum unterscheidbar.
5. Bilder kommen zuletzt. Ist das Layout auf perfekte Bilder ausgelegt, die es nicht gibt, wirkt die fertige Seite leerer als der Entwurf.

Das Gegenmittel ist immer dasselbe. Legen Sie die Regel fest, schreiben Sie sie auf und prüfen Sie neue Seiten dagegen. Wer diesen Teil abgibt, findet bei uns Webdesign mit festem Ansprechpartner.

7. Werkzeuge, Kosten und wann sich ein Profi lohnt

Für die Umsetzung gibt es drei Wege, und alle drei können zu einem professionellen Ergebnis führen. Der Unterschied liegt in der Frage, wer die Arbeit übernimmt. Das Werkzeug wird gern überschätzt.

Weg	Passt zu	Aufwand	Grenze
Homepage-Baukasten	kleine Auftritte, wenige Unterseiten	gering, intuitiv bedienbar	Gestaltung endet am Funktionsumfang
Content-Management-System	wachsende Firmenseiten	mittel, Einarbeitung nötig	Pflege bleibt bei Ihnen
Agentur oder Freelancer	Auftritte mit Anspruch an Marke und SEO	gering für Sie, Budget nötig	Abhängigkeit bei schlechter Übergabe

Eine kostenlose Website ist technisch möglich, für eine private Homepage reicht das. Kostenlose Tarife laufen aber meist auf einer Subdomain, blenden Werbung ein und begrenzen den Funktionsumfang. Wer eine eigene professionelle Website möchte, beginnt bei den Inhalten.

Wix und vergleichbare Anbieter erleichtern den Start. Eine Website von Wix lässt sich in Stunden erstellen und veröffentlichen, ohne eine Zeile Code. Die Grenze zeigt sich später. Eine individuelle Website ist im Baukasten schwerer umzusetzen, ebenso bei einer mehrsprachigen Website. Dann wird die Erstellung der Website teurer als geplant.

Der Preis hängt an der Zahl der Unterseiten, am Funktionsumfang, an der Frage, wer die Texte schreibt, und an der gewünschten Geschwindigkeit. Wer eine Website erstellen lassen möchte, sollte ein Angebot verlangen, das diese vier Posten getrennt ausweist. Den Ablauf einer solchen Website Erstellung beschreiben wir im Beitrag zu den Etappen bis zum Livegang.

Programmierkenntnisse sind für keinen Weg zwingend. Wer die Website selbst erstellen möchte, benötigt vor allem Sorgfalt. Tools für Kontrastprüfung, Bildkomprimierung und Ladezeit helfen mehr als jede gekaufte Vorlage. Bei einer barrierefreien Website gehören Kontrast und Tastaturbedienung von Anfang an zum Konzept der eigenen Website.

Ein Punkt fehlt noch. Eine neue Website für Suchmaschinen zu optimieren beginnt beim Aufbau, nicht danach. Titel, Beschreibung und Überschriften jeder Seite anzupassen ist Teil des Designs. Eine bestehende Website zu optimieren bleibt jederzeit möglich, dass die Website aber gefunden wird, hängt an sauberen Inhalten. Die Pflege wird auf Wunsch von uns als Betreuung nach dem Launch übernommen.

8. Fazit

Professionelle Webseiten designen ist weniger eine Frage des Geschmacks als eine Frage der Festlegung. Wurden Seitengerüst, Typografie, Farben, Abstände und Bausteine einmal sauber definiert, können danach beliebig viele Seiten erstellt werden, ohne dass der Auftritt auseinanderfällt. Wer diese Festlegungen überspringt, gestaltet jede Seite neu. Auffallen wird das erst, wenn die Website gewachsen ist.

Unsere Stichprobe zeigt, wie oft das passiert. Nur 81 von 157 Firmen-Websites bestanden alle vier Prüfpunkte, obwohl praktisch alle Startseiten in Ordnung waren. Warum eine eigene Website wichtig ist, weiß fast jeder Betrieb. Wie sie über zwölf Seiten hinweg zusammenhält, offenbar nicht.

Das Ziel ist ein konkretes Bild: Sie legen eine neue Leistungsseite an, setzen drei Bausteine untereinander, tippen den Text hinein und veröffentlichen, und die fertige Seite sieht aus wie der Rest Ihrer Website, ohne dass jemand nachgebessert hätte. Dieser unspektakuläre Moment ist der Beweis, dass das Design funktioniert.

9. Anhang: Checkliste vor dem Livegang

• Seitengerüst steht und gilt für alle Seitentypen
• Typografie-Skala festgelegt, Fließtext mindestens 16 Pixel
• Farbpalette mit klaren Rollen, Kontraste geprüft
• Abstände folgen einer festen Skala
• Bausteine vorhanden, neue Seiten ohne Nacharbeit zu erstellen
• Jede Seite hat genau eine H1 und einen eigenen Seitentitel
• Navigation auf allen Seiten identisch aufgebaut
• Schmale Breite geprüft, Bilder komprimiert
• Eigene Domain eingetragen, SSL-Zertifikat aktiv
• Impressum und Datenschutzerklärung von jeder Seite erreichbar

Kontakt aufnehmen

Sie möchten Ihre Webseiten professionell designen lassen statt jede Seite einzeln zu bauen? Schreiben Sie uns, wir melden uns innerhalb von 24 Stunden:

Disclaimer: Alle genannten Zeitangaben, Kostenfaktoren und Erfahrungswerte stammen aus der Agentur-Praxis und aus der im Beitrag beschriebenen Stichprobe. Sie können je nach Branche, Anbieter und Projektumfang abweichen. Rechtsbindende Aussagen zu Impressum, Datenschutz und Bildrechten ersetzen keine fachjuristische Beratung.