Überarbeitet am 6. November 2026: Den Leitfaden zu Planung, Texten, Gestaltung und Bedienbarkeit grundlegend aktualisiert; ein durchgehendes Firmenbeispiel, eine Gestaltungsvorlage und konkrete Schritte für Zeta Producer ergänzt.
Ihre Firmenwebsite soll Besuchern helfen, Ihr Angebot zu verstehen und den passenden nächsten Schritt zu finden. Dafür müssen Texte, Bilder, Farben und Navigation zusammenarbeiten. Ein Styleguide hält die wichtigsten Entscheidungen fest, damit die Startseite, eine neue Leistungsseite und das Kontaktformular wie Teile derselben Website wirken.
Dieser Leitfaden führt Sie von der ersten Seitenidee bis zur Prüfung am Smartphone. Am Ende haben Sie eine kurze Gestaltungsvorlage, die Sie bei jeder Erweiterung wiederverwenden können. Die Beispiele zeigen eine frei erfundene Schreinerei namens Werkraum. Sie sind Gestaltungsvorschläge und keine Kundenreferenz oder gemessene Erfolgsgeschichte.
1. Beginnen Sie mit der Aufgabe Ihrer Besucher
Öffnen Sie Ihre Startseite und beantworten Sie drei Fragen: Für wen ist das Angebot gedacht? Welche Leistung bekommt diese Person? Wie geht es weiter, wenn das Angebot passt? Wenn diese Antworten erst weit unten oder auf mehreren Unterseiten auftauchen, liegt hier Ihr erster Ansatzpunkt.
Unsere fiktive Schreinerei fertigt Einbauschränke für Wohnungen mit Dachschrägen. Ein Besucher möchte zunächst wissen, ob der Betrieb solche Arbeiten übernimmt, wie die Planung abläuft und welche Angaben für eine Anfrage nötig sind. Ein großes Foto einer Werkstatt kann diese Fragen ergänzen. Es kann sie nicht allein beantworten.
Schreiben Sie deshalb einen Arbeitssatz auf: „Wir helfen Wohnungsbesitzern, den Platz unter ihrer Dachschräge mit einem passenden Einbauschrank zu nutzen.“ Daraus ergeben sich die Inhalte: typische Einbausituationen, Materialbeispiele, ein nachvollziehbarer Ablauf und der Weg zur Anfrage. Die Unternehmensgeschichte bekommt einen eigenen Platz unter „Über uns“.
Ordnen Sie jede Seite einer Frage zu
- Startseite: Bin ich bei diesem Betrieb mit meinem Anliegen richtig?
- Einbauschränke: Welche Lösungen gibt es und wie entsteht mein Schrank?
- Arbeiten: Welche vergleichbaren Projekte kann ich mir ansehen?
- Über uns: Wer übernimmt die Arbeit?
- Kontakt: Wie bespreche ich mein Vorhaben?
Das ist eine mögliche Gliederung, keine vorgeschriebene Anzahl von Menüpunkten. Ein anderer Betrieb benötigt andere Seiten. Verwenden Sie Begriffe, die Ihre Kunden kennen, und lassen Sie wichtige Angebote direkt erkennen. „Leistungen“ kann sinnvoll sein; „Unsere Welt“ erklärt dagegen kaum, was hinter dem Menüpunkt liegt.
Wenn mehrere Angebote unterschiedliche Fragen beantworten, geben Sie ihnen eigene Seiten. Für die konkrete Ausarbeitung hilft die vorhandene Anleitung Leistungsseite erstellen: vom Angebot zur passenden Anfrage. Der Styleguide legt fest, wie diese Seiten zusammenpassen.
2. Schreiben Sie zuerst die hilfreiche Aussage
Eine Überschrift wie „Willkommen bei Ihrem kompetenten Partner“ könnte über nahezu jedem Unternehmen stehen. Nutzen Sie den Platz, um Ihr Angebot zu benennen. Ergänzen Sie anschließend die Informationen, die jemand für eine erste Einschätzung benötigt: Einsatzgebiet, Leistungsumfang, Voraussetzungen und Ablauf.
Ein Beispiel für den ersten Seitenabschnitt
Vorher: „Individuelle Lösungen in höchster Qualität. Wir verwirklichen Ihre Träume. Mehr erfahren.“
Nachher: „Einbauschränke für Dachschrägen. Wir planen Ihren Schrank passend zu Raum, Stauraumbedarf und Einrichtung. Senden Sie uns ein Foto der Einbausituation und eine kurze Beschreibung. Anschließend besprechen wir die nächsten Schritte.“ Der Link dazu heißt: „Einbauschrank anfragen“.
Die zweite Fassung nennt das Angebot, erklärt den Einstieg und macht den Link verständlich. Sie benötigt weder einen Superlativ noch eine Zusage, die der Betrieb später nicht einhalten kann. Übernehmen Sie das Muster nur mit Angaben, die für Ihr tatsächliches Angebot stimmen.
Gliedern Sie nach den Fragen vor einer Anfrage
Für die Schrankseite bieten sich Abschnitte wie „Für welche Räume?“, „So läuft die Planung ab“ und „Welche Angaben brauchen wir?“ an. Eine einzelne lange Textfläche wird dadurch zu einer lesbaren Abfolge. Nutzen Sie echte Überschriften im Texteditor, statt einen normalen Absatz nur größer und fett zu formatieren.
Formulieren Sie kurze Absätze mit jeweils einem Gedanken. Kürzen Sie Wiederholungen, erhalten Sie aber entscheidende Informationen. Ein erklärungsbedürftiges Angebot braucht ausreichend Text. Eine pauschale Regel wie „Jeden Text halbieren“ hilft wenig, wenn dabei Lieferumfang oder Voraussetzungen verloren gehen.
Benennen Sie auch Linkziele: „Ablauf der Schrankplanung“ sagt mehr als „Hier klicken“. Diese Verbindung aus klaren Überschriften und verständlichen Links gehört zu den Schreibempfehlungen der W3C Web Accessibility Initiative. Sie erleichtert das Überfliegen und die Orientierung mit unterstützender Technik.
3. Legen Sie wenige verlässliche Gestaltungsregeln fest
Ein Styleguide muss kein umfangreiches Markenhandbuch sein. Für eine kleine Firmenwebsite reicht zunächst eine überschaubare Auswahl: eine Grundschrift, abgestufte Überschriften, klar zugeordnete Farben und wiederkehrende Abstände. Entscheidend ist, dass Sie diese Regeln auf allen Seiten anwenden können.
Geben Sie jeder Farbe eine Aufgabe
Für Werkraum wählen wir beispielhaft dunkles Anthrazit für den Text, Weiß als Hintergrund und ein dunkles Grün für Links und wichtige Schaltflächen. Ein heller warmer Ton darf größere Abschnitte voneinander trennen. Die Farbe des Logos allein entscheidet nicht darüber, welche Kombination gut lesbar ist.
- Text: #24302B auf Weiß.
- Links und Schaltflächen: #245C45; auf gefüllten Schaltflächen weiße Schrift.
- Ruhige Abschnittsfläche: #F3F1E9 mit dunklem Text.
Prüfen Sie jede tatsächlich verwendete Kombination, auch bei Links, Formularhinweisen und Text über Fotos. Für normalen Text verlangt WCAG 2.2 auf Stufe AA ein Kontrastverhältnis von mindestens 4,5:1; für große Schrift und bestimmte Sonderfälle gelten andere Regeln. Die W3C-Erläuterung zu Textkontrast beschreibt diese Unterscheidung. Unsere Farben sind ein Beispiel, keine Pflichtpalette.
Machen Sie Text gut lesbar
Beginnen Sie mit einer gut lesbaren Schriftfamilie und wenigen Schriftschnitten. Für Fließtext können Sie beispielsweise 18 Pixel und einen Zeilenabstand von etwa 1,5 als Ausgangspunkt ausprobieren. Das sind redaktionelle Startwerte: Prüfen Sie das Ergebnis mit Ihrer Schrift, Ihren Texten und auf kleinen Bildschirmen.
Eine Seitenüberschrift darf deutlich größer sein, Zwischenüberschriften sollen erkennbare Abschnitte bilden. Vermeiden Sie lange Texte in Großbuchstaben und zentrierte Fließtextblöcke. Begrenzen Sie die Textbreite so, dass der Blick nach dem Zeilenende leicht zum Anfang der nächsten Zeile findet.
Setzen Sie unterstrichene Links im Fließtext ein. So hängt ihre Erkennbarkeit nicht allein von einer anderen Farbe ab. Unterstreichungen für reine Hervorhebungen würden dieses Signal verwischen; dafür genügt meist sparsame Fettschrift.
Nutzen Sie Abstände für Zusammengehörigkeit
Ein Bild, seine Beschreibung und der zugehörige Link sollen als Gruppe erkennbar sein. Zwischen zwei verschiedenen Leistungen darf mehr Abstand liegen als zwischen einer Überschrift und ihrem Absatz. Richten Sie wiederkehrende Elemente an denselben Kanten aus. Das schafft Struktur, ohne jedes Element mit einem Rahmen zu umgeben.
Im Werkraum-Beispiel bekommen alle Leistungsabschnitte dieselbe Reihenfolge: Überschrift, kurze Erklärung, Beispielbild und nächster Schritt. Diese Wiederholung hilft auch bei der Pflege: Eine neue Leistung lässt sich nach demselben Muster ergänzen.
4. Übertragen Sie Ihre Regeln in Zeta Producer
Arbeiten Sie zunächst an einer repräsentativen Seite, etwa Ihrer wichtigsten Leistung. Dort sehen Sie, ob Überschriften, längere Texte, Bilder und Kontaktwege mit den gewählten Einstellungen funktionieren. Sichern Sie vorher Ihr Projekt; die Anleitung zum Sichern und Wiederherstellen einer Zeta-Producer-Website beschreibt den Ablauf.
- Layout-Designer öffnen: Nutzen Sie „Einstellungen“ → „Layout“ oder Strg + Umschalt + L.
- Passenden Bereich wählen: Stellen Sie die verfügbaren Farben und Schriften in der jeweiligen Kategorie ein. Die Optionen unterscheiden sich je nach Layout.
- Mit echten Inhalten prüfen: Betrachten Sie eine lange Überschrift, mehrere Absätze und einen Link. Ein schönes Vorschaumotiv allein reicht für die Entscheidung nicht.
- Seiten zusammen vergleichen: Prüfen Sie anschließend Startseite, Leistungsseite und Kontakt. Korrigieren Sie gemeinsame Regeln zentral, soweit Ihr Layout dafür Einstellungen anbietet.
Das aktuelle Handbuch zum Layout-Designer erläutert auch die Farbauswahl und die automatisch gespeicherte Layout-Variante. Eine Layout-Variante ist dabei keine vollständige Projektsicherung.
Zusätzliche Webfonts wählen Sie laut Webfont-Anleitung im Feld „Schriftfamilie“ über „Weitere Schriftarten“. Zeta Producer speichert darüber ausgewählte Google Fonts lokal und stellt sie über Ihren eigenen Webserver bereit. Diese Aussage bezieht sich auf die dokumentierte Funktion; separat eingebundene Schriftanbieter und fremde Widgets müssen gesondert betrachtet werden.
Halten Sie individuelle Textformatierungen sparsam. Wenn Sie jeden Absatz einzeln einfärben oder auf eine andere Größe setzen, wird die nächste Änderung aufwendiger. Legen Sie stattdessen zuerst die gemeinsamen Regeln fest und verwenden Sie im Inhalt die passenden Überschriften und Absatzformate.
5. Geben Sie jedem Bild eine konkrete Aufgabe
Ein gutes Bild beantwortet eine Frage: Wie sieht die Arbeit aus? Welche Materialoberfläche ist gemeint? Wie funktioniert ein Schritt? Für die Schrankseite wäre eine echte Aufnahme eines Einbaus unter einer Dachschräge hilfreich. Eine beliebige Geschäftsbesprechung vermittelt darüber wenig.
Stimmen Sie Bildausschnitt und Text aufeinander ab. Soll das Bild die Raumsituation zeigen, darf der mobile Zuschnitt die Dachschräge nicht entfernen. Wenn ein Detail wichtig ist, verwenden Sie zusätzlich eine nähere Aufnahme oder erläutern Sie es im Text. Wesentliche Informationen gehören nicht ausschließlich in eine beschriftete Grafik.
Beschreiben Sie informative Bilder mit einem passenden Alternativtext, zum Beispiel: „Weißer Einbauschrank mit drei Türen unter einer Dachschräge“. Rein dekorative Bilder benötigen einen leeren Alternativtext. Entscheidend ist die Funktion im jeweiligen Abschnitt; die W3C-Hilfe zu dekorativen Bildern zeigt diese Abgrenzung.
Verwenden Sie nur Bilder, deren Nutzung geklärt ist. Stellen Sie ein Symbolfoto nicht als Ihre eigene Arbeit oder Ihr Team vor. Weitere praktische Schritte zu Dateigröße, Zuschnitt und Bildbeschreibung finden Sie unter Bilder für die Firmenwebsite auswählen und vorbereiten.
6. Machen Sie Navigation und Kontaktwege eindeutig
Besucher können direkt auf einer Unterseite einsteigen. Deshalb müssen Angebot, Unternehmen und nächster Schritt auch dort verständlich sein. Verwenden Sie für dieselbe Aktion überall denselben Namen. „Beratung anfragen“ sollte nicht auf einer anderen Seite plötzlich „Projekt starten“ heißen, wenn beide Links zum gleichen Formular führen.
Wählen Sie für jede Seite eine vorrangige Aktion. Auf der Werkraum-Leistungsseite ist das „Einbauschrank anfragen“. Ein zusätzlicher Link zu Beispielarbeiten kann sinnvoll sein. Drei gleich auffällige Schaltflächen für Anfrage, Newsletter und Broschüre würden die Entscheidung dagegen unnötig erschweren.
Prüfen Sie die tatsächliche Bedienung
- Mit der Tastatur: Gehen Sie mit Tab durch Menü, Links und Formular. Der aktuelle Fokus muss sichtbar sein; alle wichtigen Funktionen müssen erreichbar bleiben.
- Am Smartphone: Tippen Sie Menüpunkte und Schaltflächen an. Lassen sich benachbarte Ziele sicher unterscheiden und treffen?
- Beim Formular: Sind Feldnamen dauerhaft sichtbar, Pflichtfelder erklärt und Fehlermeldungen verständlich?
- Nach dem Absenden: Ist klar, ob die Anfrage angekommen ist und was anschließend passiert?
Für wichtige Schaltflächen können Sie etwa 44 Pixel Höhe als praktischen Ausgangspunkt vorsehen und ausreichend Abstand lassen. Die WCAG-2.2-Mindestanforderung für Zielgrößen ist differenzierter: Sie nennt 24 × 24 CSS-Pixel und enthält Ausnahmen, unter anderem für Textlinks. Details stehen in der W3C-Erläuterung zu Bedienflächen.
Fragen Sie im Formular nur Angaben ab, die Sie für diesen Schritt tatsächlich brauchen. Bei Werkraum könnten dies E-Mail-Adresse und eine kurze Beschreibung sein, ergänzt um freiwillige Angaben. Welche Daten nötig sind, hängt vom betrieblichen Ablauf ab. Weniger Felder allein sind keine Garantie für mehr oder bessere Anfragen.
7. Schaffen Sie Vertrauen mit überprüfbaren Angaben
Zeigen Sie nachvollziehbar, wer das Angebot verantwortet und was Interessenten erwarten dürfen. Dazu gehören passende Kontaktinformationen, ein verständlicher Ablauf und reale Beispiele. Wenn Sie Kundenstimmen verwenden, müssen sie echt und zur Veröffentlichung freigegeben sein. Zertifikate und Siegel brauchen einen tatsächlichen Bezug zu Ihrem Unternehmen.
Vermeiden Sie erfundene Angebotsvarianten, künstliche Verknappung und pauschale Versprechen wie „garantiert mehr Umsatz“. Ein zeitlich begrenztes Angebot ist nur dann hilfreich, wenn die Begrenzung tatsächlich gilt und die Bedingungen klar sind. Beschreiben Sie auch bei Preisen, was enthalten ist und welche weiteren Kosten entstehen können.
Für Werkraum könnte ein ehrlicher Ablauf lauten: „Nach Ihrer Anfrage klären wir die Einbausituation. Danach vereinbaren wir bei Bedarf einen Aufmaßtermin und erstellen ein Angebot.“ Das ist für die Entscheidung hilfreicher als ein unbestimmtes Versprechen von Perfektion. Eine Antwortzeit nennen Sie nur, wenn Ihr Betrieb sie zuverlässig einhalten kann.
8. Prüfen Sie kleine Bildschirme mit Ihren eigenen Inhalten
Eine responsive Vorlage ist eine gute Grundlage. Lange Überschriften, breite Tabellen oder ein ungünstiger Bildausschnitt können trotzdem Probleme verursachen. Öffnen Sie in Zeta Producer die externe Browser-Vorschau und wechseln Sie dort zwischen Desktop, Tablet und Smartphone. Das Handbuch zur Responsive-Vorschau beschreibt die Umschaltung und den Wechsel zwischen Hoch- und Querformat.
Lesen Sie die Seite einmal vollständig in schmaler Darstellung. Bleibt die Reihenfolge verständlich, wenn Spalten untereinander stehen? Sind die wichtigen Bildteile sichtbar? Decken schwebende Elemente den Kontaktlink ab? Vergrößern Sie außerdem den Text im Browser und prüfen Sie, ob Inhalte abgeschnitten werden.
Ein sinnvoller zusätzlicher Test ist eine Breite von 320 CSS-Pixeln: Normaler Inhalt sollte dabei ohne seitliches Hin-und-her-Scrollen lesbar bleiben. Die W3C-Anforderung zum Umbruch beschreibt dieses Ziel und Ausnahmen, etwa für bestimmte Tabellen. Die hier genannten Prüfungen sind praktische Einstiegschecks; sie ersetzen keine vollständige Prüfung der Barrierefreiheit.
9. Halten Sie Ihre Entscheidungen auf einer Seite fest
Übertragen Sie die folgenden Punkte in eine kurze Notiz. Ergänzen Sie konkrete Werte und Formulierungen, damit auch einige Monate später klar ist, wie eine neue Seite aussehen soll.
- Zielgruppe und Hauptaufgabe: Für wen ist die Website da, welche Frage soll sie zuerst beantworten?
- Hauptangebot: Welcher Satz erklärt Leistung und Nutzen ohne Werbefloskel?
- Navigation: Welche Seitennamen verwenden Sie verbindlich?
- Schrift: Welche Familie, Größen und Schriftschnitte nutzen Sie für Fließtext und Überschriften?
- Farben: Welche Werte gelten für Text, Hintergrund, Links und Schaltflächen? Welche Kombinationen sind auf Kontrast geprüft?
- Inhaltsmuster: In welcher Reihenfolge stehen Erklärung, Beispiel und nächster Schritt?
- Bilder: Welche Motive und Ausschnitte passen, wie dokumentieren Sie Nutzungsrechte?
- Kontakt: Wie heißt die vorrangige Aktion, welche Angaben benötigt das Formular?
- Prüfung und Pflege: Wer kontrolliert die Seite, wann wurde sie zuletzt geprüft?
Bei Werkraum lautet die Kurzfassung beispielsweise: „Einbauschränke für Dachschrägen; Navigation mit klaren Leistungsnamen; dunkler Text auf Weiß; Grün für Links und Anfrage; echte Arbeitsbeispiele; Anfrageformular mit kurzer Beschreibung; Prüfung auf Desktop und Smartphone vor jeder Veröffentlichung.“ Ergänzen Sie Ihre eigenen Werte. Die Vorlage soll Entscheidungen sichern und spätere Änderungen erleichtern.
10. Stellen Sie zuerst eine wichtige Seite fertig
Setzen Sie die Regeln an Ihrer wichtigsten Leistungsseite um. Lassen Sie anschließend eine Person, die den Text noch nicht kennt, drei Aufgaben lösen: das Angebot erklären, eine offene Frage beantworten und den Kontaktweg finden. Beobachten Sie, wo sie stockt. Das liefert konkrete Hinweise; eine einzelne Rückmeldung ist noch kein Beleg für eine höhere Anfragerate.
Prüfen Sie vor der Veröffentlichung Überschriften, Linkziele, Bilder, Formular und Smartphone-Ansicht. Die Funktion „Links prüfen“ in Zeta Producer unterstützt die Suche nach defekten Verweisen. Ob eine Anfrage tatsächlich zugestellt wird, müssen Sie zusätzlich mit einer eigenen Testanfrage kontrollieren.
Übertragen Sie das funktionierende Muster danach auf weitere Seiten. Bewahren Sie Ihre Gestaltungsvorlage beim Projekt auf und aktualisieren Sie sie, wenn sich Angebot oder Gestaltung ändern. So wird aus einer einmaligen Überarbeitung eine Website, die Sie nachvollziehbar weiterpflegen können.
Wenn Sie Zeta Producer erst kennenlernen, erklärt die Produktübersicht zum Homepage-Baukasten die Arbeit mit der Windows-Software und die Veröffentlichung beim selbst gewählten Hoster. Sie können die Software kostenlos ausprobieren. Für die produktive Firmenwebsite benötigen Sie eine Kaufedition; Domain und Hosting kommen separat hinzu. Die aktuellen Leistungen finden Sie im Editionsvergleich.