WorkshopsKI-Kompetenz für UnternehmenGenerative AI & PromptingKI-Agenten & AutomatisierungKI-PotenzialworkshopZertifikate
KIKI-BeratungKI-AgentenLokale KIUnternehmens-KI
AutomatisierungProzessautomatisierungWorkflow-Automatisierungn8n-AutomatisierungDokumentenautomatisierungVertriebsautomatisierung
ITIT-BeratungSystemintegrationDigitalisierung
E-CommerceE-Commerce-AutomatisierungShop-AutomatisierungAI-CommerceOnlineshop erstellen
MarketingMarketing-AutomatisierungSocial-Media-AutomatisierungAI-Content
WebWebsite erstellenWebdesignDomain & HostingSEOAI-Optimierung
UnternehmenÜber unsReferenzenWissenNordhausenThüringen
Automatisierungspotenzial prüfen
Hierarchie · Kontrast · Mobil zuerst · Barrierefrei

Gestaltung, die man nicht bemerkt — weil sie funktioniert.

Gutes Webdesign ist keine Geschmacksfrage, sondern eine Reihe prüfbarer Entscheidungen: wie groß Schrift ist, wie stark sie kontrastiert, wie lang eine Zeile wird, was zuerst gelesen wird und was passiert, wenn das Bild nicht lädt. Wir entwerfen ab 390 Pixel Breite — und prüfen, statt zu behaupten.

AaÜberschrift 44 px / 800
AaZwischentitel 22 px / 700
AaFließtext 17 px / 400, Zeile unter 70 Zeichen
  • Kontrast ab 4,5:1
  • Bedienung ab 44 px
  • Ohne Bild lesbar
Leistung

Vier Entscheidungen, die alles tragen.

In dieser Reihenfolge — nicht nach Geschmack.

01Hierarchie

Was zuerst gelesen wird

Eine Seite hat eine Aussage, eine Handlung und einen Beweis. Alles andere ordnet sich darunter. Wenn alles gleich wichtig aussieht, entscheidet der Besucher sich für gar nichts.

02Typografie

Größe, Kontrast, Zeilenlänge

17 px Grundschrift, Kontrast über 4,5:1, Zeilen unter 70 Zeichen. Drei Zahlen, die den Unterschied zwischen gelesen und überflogen machen — nachprüfbar mit dem Werkzeug oben.

03Bedienung

Für Finger gebaut

Schaltflächen ab 44 Pixel, Formulare mit sichtbaren Bezeichnungen, Fehlermeldungen im Klartext, Fokus sichtbar für Tastaturbedienung. Das ist Barrierefreiheit im Alltag, nicht als Zertifikat.

04Gewicht

Gestaltung kostet Ladezeit

Jedes Hintergrundvideo, jede Schriftfamilie und jede Bildergalerie hat einen Preis in Sekunden. Wir entwerfen mit diesem Preis im Blick, statt ihn der Technik zu überlassen.

Prüfung

Lesbar oder nur ruhig?

Derselbe Absatz in drei Einstellungen. Die Zahl darunter ist kein Geschmacksurteil, sondern das gemessene Kontrastverhältnis — 4,5:1 ist die Grenze für Fließtext.

Lesbarkeit prüfenKontrast nach WCAG 2.1

Tragwerke, Treppen und Geländer fertigen wir im eigenen Haus. Nach dem Aufmaß vor Ort erhalten Sie eine Zeichnung zur Freigabe; die Montage übernehmen eigene Monteure im Umkreis von 80 km. Bei feuerverzinkten Teilen rechnen wir mit drei bis vier Wochen ab Freigabe, weil das Verzinken extern erfolgt.

Kontrastverhältnis3,2:1
Anforderung 4,5:1durchgefallen
Einstellung

Anwendungsfälle

Woran Seiten scheitern.

Graue Schrift auf WeißSieht in der Entwurfsansicht ruhig aus und ist draußen auf dem Handy nicht lesbar. Der häufigste Mangel in gekauften Themes — und der am einfachsten zu behebende.
Text über FotosFunktioniert bei einem Bild und fällt beim nächsten auseinander. Wenn Text über Bildern stehen soll, braucht er eine eigene Fläche, keine Hoffnung.
Menü mit zwanzig PunktenWas in der Navigation steht, wird zur Struktur der Seite. Mehr als sieben Punkte bedeuten, dass die Struktur nicht entschieden wurde.
Formulare, die abschreckenPflichtfelder für Angaben, die ein Interessent noch nicht kennt. Jedes zusätzliche Feld kostet Anfragen — zwei Felder und ein Freitext reichen fast immer.
Alles in BewegungElemente, die beim Scrollen einfliegen, wirken einmal modern und danach nur langsam. Wir setzen Bewegung als Hinweis ein, nicht als Schmuck.
Kein Zustand für „leer“Keine Referenzen, keine Stellen, kein Beitrag — gestaltete Seiten haben auch dafür eine Form, sonst wirken sie unfertig.
Einordnung

Prüfbar statt Geschmackssache.

Diskussionen über Gestaltung enden schnell bei „gefällt mir“ und „gefällt mir nicht“. Das ist der unproduktivste Teil jedes Projekts. Deshalb legen wir vorher Maßstäbe fest, die man messen kann: Kontrastverhältnisse nach WCAG 2.1, Schriftgrößen, Zeilenlängen, Berührflächen, Ladezeit im Mobilnetz und Bedienbarkeit per Tastatur. Was diese Maßstäbe erfüllt, ist nicht automatisch schön — aber alles, was sie verletzt, ist unabhängig vom Geschmack falsch.

Barrierefreiheit ist dabei kein zusätzliches Modul. Gute Kontraste helfen allen bei Sonnenlicht, große Berührflächen helfen allen mit Handschuhen, klare Beschriftungen helfen allen in Eile. Wer für den Grenzfall entwirft, baut für den Normalfall mit. Für öffentliche Auftraggeber und ab 2025 für viele Unternehmen ist das zusätzlich eine rechtliche Anforderung — wir bauen von Anfang an so, dass spätere Nachrüstung nicht nötig wird.

Unsere festen Maßstäbe

4,5:1Kontrast für Fließtext, 3:1 für große Überschriften — gemessen, nicht geschätzt.
17 pxGrundschrift, Zeilenabstand 1,6 bis 1,7, Zeilen unter 70 Zeichen.
44 pxkleinste Berührfläche, mit Abstand zwischen zwei Zielen.
390 pxals erste Entwurfsbreite, danach 768 und 1280 — nie umgekehrt.
Tastaturallein muss durch jedes Formular und jedes Menü führen, mit sichtbarem Fokus.
Fragen

Häufige Fragen zur Gestaltung.

Bekommen wir mehrere Entwürfe zur Auswahl?

Zwei Richtungen für die Startseite und eine Leistungsseite — mehr führt erfahrungsgemäß zu Gremienarbeit statt zu einer Entscheidung. Die Richtungen unterscheiden sich in Haltung und Struktur, nicht in der Farbe eines Knopfes. Danach wird eine ausgebaut.

Können Sie unser Corporate Design umsetzen?

Ja. Vorhandene Farben, Schriften und Logos setzen wir um und prüfen sie auf Lesbarkeit im Web — Hausfarben sind oft für Druck definiert und erreichen am Bildschirm zu geringe Kontraste. In diesem Fall ergänzen wir eine dunklere Variante für Text und behalten die Hausfarbe für Flächen.

Wie wichtig ist Barrierefreiheit wirklich?

Praktisch: rund jeder zehnte Besucher hat eine eingeschränkte Sehfähigkeit, und alle Besucher sind irgendwann in einer Situation mit Blendung, Zeitdruck oder schlechter Verbindung. Rechtlich: für öffentliche Stellen verpflichtend, für viele Unternehmen seit 2025 ebenfalls. Technisch: Nachrüsten ist teurer als von Anfang an richtig bauen.

Warum kein Hintergrundvideo?

Es kostet je nach Länge zwei bis acht Megabyte, verzögert die erste Textanzeige und wird auf Mobilgeräten oft nicht abgespielt. Wenn ein Video die Aussage trägt, binden wir es als bewusst gestartetes Element mit Vorschaubild ein — das ist schneller und wird tatsächlich angesehen.

Weiter

Verwandte Themen.

Welche Seite soll zuerst geprüft werden?

Nennen Sie uns eine Adresse. Sie bekommen Kontrastwerte, Schriftgrößen, Zeilenlängen und die mobile Ladezeit als kurze Liste zurück.

Entwurf besprechenAntwort am selben Werktag