Webdesign-Grundlagen: Farben, Typografie und Layout für KMU-Websites

Du hast bestimmt schon Websites besucht, die sofort professionell und vertrauenswürdig wirkten – und andere, bei denen du nach zwei Sekunden weggeklickt hast. Der Unterschied liegt oft nicht im Inhalt, sondern im Design. Farben, Schriften und Layout bestimmen, wie deine Besucher dein Unternehmen wahrnehmen.

Gerade für Schweizer KMU ist gutes Webdesign kein Luxus, sondern eine Notwendigkeit. In einem Markt, in dem Qualität und Präzision zählen, muss deine Website diesen Anspruch visuell transportieren. In diesem Beitrag zeige ich dir die wichtigsten Grundlagen, die du kennen solltest.

Dieser Artikel ist Teil des umfassenden Perfekte-Website-Guides für Schweizer KMU – dort findest du alle 17 Kapitel im Überblick.

Farbpsychologie: Welche Farben wirken und warum

Farben sind mehr als Dekoration. Sie beeinflussen Emotionen, Vertrauen und Kaufentscheidungen. Eine vielzitierte Marketing-Studie kommt zum Schluss, dass bis zu 90 % der ersten spontanen Einschätzung eines Produkts allein auf Farben basieren können.

Die wichtigsten Farbbedeutungen im Überblick

Praktische Tipps für deine Farbwahl

1. Definiere eine Primärfarbe, die zu deiner Branche und deinem Branding passt. Ein Treuhandunternehmen in Solothurn wählt anders als ein Yoga-Studio.
2. Nutze maximal 2–3 Farben plus Schwarz und Weiss. Zu viele Farben wirken unprofessionell.
3. Setze eine Akzentfarbe gezielt ein – zum Beispiel für Buttons und Call-to-Actions. Diese Farbe sollte sich klar vom Rest abheben.
4. Prüfe den Kontrast: Text muss auf dem Hintergrund gut lesbar sein. Tools wie der WebAIM Contrast Checker helfen dabei.

So sieht der Unterschied in der Praxis aus – derselbe Satz in drei Graustufen:

Für die Verteilung der Farben auf der Seite gibt es eine bewährte Faustregel – 60 % Grundfarbe, 30 % Sekundärfarbe, 10 % Akzent. Ein Beispiel: Ein Schweizer Handwerksbetrieb könnte mit einem dunklen Blau als Sekundärfarbe Vertrauen signalisieren und mit einem kräftigen Orange als Akzent Aufmerksamkeit auf den «Offerte anfordern»-Button lenken:

Typografie: Die richtige Schrift macht den Unterschied

Die Schriftwahl beeinflusst die Lesbarkeit und den Charakter deiner Website enorm. Eine schlecht gewählte Schrift kann selbst den besten Inhalt zunichtemachen.

Serif vs. Sans-Serif

• Sans-Serif-Schriften (z. B. Inter, Open Sans, Poppins) wirken modern, klar und digital – «Sans-Serif» heisst «ohne Serifen», also ohne die kleinen Endstriche an den Buchstaben. Sie eignen sich hervorragend für Bildschirme und sind für die meisten KMU-Websites die richtige Wahl.
• Serif-Schriften (z. B. Merriweather, Playfair Display) wirken klassisch und seriös. Sie passen zu Anwaltskanzleien, Traditionsunternehmen oder Premium-Marken.

Typografie-Regeln für deine Website

• Verwende maximal zwei Schriftarten: eine für Überschriften, eine für Fliesstext. Mehr als zwei Schriften wirken unruhig.
• Setze die Schriftgrösse richtig: Fliesstext mindestens 16 px, besser 18 px. Überschriften klar grösser und in einer hierarchischen Abstufung (H1 > H2 > H3).
• Zeilenhöhe beachten: Eine Zeilenhöhe von 1.5 bis 1.7 verbessert die Lesbarkeit massiv.
• Schriftstärke variieren: Nutze Bold für Überschriften und wichtige Begriffe, Regular für den Fliesstext.

So sieht eine saubere Abstufung gerendert aus:

Ein typisches KMU-Setup: Poppins für Überschriften (modern, freundlich) und Inter für den Fliesstext (klar, gut lesbar). Beide Schriften sind kostenlos über Google Fonts verfügbar.

Grid-Layout und Weissraum: Ordnung schafft Vertrauen

Ein gutes Layout gibt deiner Website Struktur. Besucher wissen instinktiv, wo sie hinschauen sollen, und finden Informationen schnell. Das Geheimnis: ein durchdachtes Grid und genug Weissraum.

Was ist ein Grid-Layout?

Ein Grid (Raster) teilt deine Seite in gleichmässige Spalten und Zeilen. Die meisten professionellen Websites nutzen ein 12-Spalten-Grid. Das ermöglicht flexible Layouts, die auf jedem Gerät gut aussehen.

Warum Weissraum so wichtig ist

Weissraum (oder «Negative Space») ist der leere Raum zwischen Elementen. Viele KMU machen den Fehler, ihre Website mit Informationen vollzupacken. Aber:

• Mehr Weissraum = bessere Lesbarkeit: Texte und Bilder können atmen.
• Mehr Weissraum = mehr Fokus: Wichtige Elemente stechen hervor.
• Mehr Weissraum = höhere Wertigkeit: Premium-Marken arbeiten bewusst mit viel Freiraum.

Praktische Layout-Tipps

• Halte Textblöcke schmal: Ideal sind 60–75 Zeichen pro Zeile. Zu breite Textblöcke sind schwer lesbar.
• Gruppiere zusammengehörende Elemente: Nutze das Gestaltprinzip der Nähe – was zusammengehört, steht zusammen.
• Setze klare Abstände: Zwischen Sektionen sollte deutlich mehr Platz sein als zwischen Elementen innerhalb einer Sektion.
• Nutze Karten: Card-basierte Layouts eignen sich perfekt, um Services oder Produkte übersichtlich darzustellen.

Visuelle Hierarchie: Den Blick lenken

Visuelle Hierarchie (= was das Auge zuerst sieht, gezielt gesteuert) bestimmt, in welcher Reihenfolge Besucher die Inhalte deiner Website wahrnehmen. Wenn alles gleich aussieht, weiss niemand, wo er anfangen soll.

So baust du eine klare Hierarchie auf

1. Grösse: Grössere Elemente werden zuerst wahrgenommen. Deine Hauptüberschrift sollte das prominenteste Element sein.
2. Farbe und Kontrast: Farbige Elemente auf neutralem Hintergrund ziehen den Blick an. Nutze deine Akzentfarbe für das Wichtigste.
3. Position: Inhalte oben links werden in westlichen Kulturen zuerst gelesen (F-Muster). Platziere dort deine wichtigste Botschaft.
4. Gewichtung: Fettgedruckter Text fällt mehr auf als normaler Text.

Das F-Muster verstehen

Eye-Tracking-Studien zeigen, dass Besucher Websites typischerweise im F-Muster scannen:

• Zuerst die obere horizontale Linie (Header, Navigation)
• Dann eine zweite horizontale Linie etwas weiter unten
• Schliesslich scannen sie die linke Seite vertikal nach unten

Das bedeutet: Deine wichtigsten Inhalte (Nutzenversprechen, Call-to-Action) gehören in den oberen Bereich und linksbündig.

Branding konsistent umsetzen

Deine Website ist die digitale Visitenkarte deines Unternehmens. Jedes visuelle Element sollte dein Branding stärken.

Checkliste für konsistentes Branding

• Logo: Immer an derselben Stelle (typisch: oben links), in hoher Qualität, mit genügend Freiraum drumherum.
• Farbpalette: Definiere deine Farben als exakte Werte (z. B. HEX #1A73E8) und nutze sie durchgehend.
• Bildsprache: Verwende einen einheitlichen Fotografiestil. Stockfotos sollten zusammenpassen – nicht bunt zusammengewürfelt aus verschiedenen Quellen.
• Ton und Stil: Auch die Sprache ist visuell. Kurze, knackige Headlines passen zu einem modernen Layout, längere Texte zu einem klassischen Design.

Bei D3 Webstudio achten wir bei jedem Projekt darauf, dass Design und Branding eine Einheit bilden. Denn nur wenn Farben, Schriften und Layout konsistent sind, wirkt deine Website professionell und vertrauenswürdig.

Häufige Designfehler, die du vermeiden solltest

Zum Schluss die grössten Fehler, die wir bei KMU-Websites immer wieder sehen:

• Zu viele Schriften und Farben: Weniger ist mehr. Halte dich an dein definiertes Set.
• Fehlender Kontrast: Hellgrauer Text auf weissem Hintergrund ist kaum lesbar – und ein Zugänglichkeitsproblem.
• Kein responsives Design (responsiv = passt sich an Handy, Tablet und Computer an): Über 70 % der Besucher kommen mobil. Dein Design muss auf dem Smartphone genauso gut funktionieren. Mehr dazu in unserem Beitrag zu Mobile-First Webdesign.
• Überladene Seiten: Jede Sektion braucht ein klares Ziel. Wenn du alles auf einmal zeigen willst, sieht der Besucher nichts.
• Inkonsistentes Design: Wenn jede Unterseite anders aussieht, fehlt die Wiedererkennung.

FAQ – Häufig gestellte Fragen

Welche Farben eignen sich für eine Firmenwebsite?

Das hängt von deiner Branche ab. Grundsätzlich sind Blau (Vertrauen), Grün (Nachhaltigkeit) und Dunkelgrau (Professionalität) sichere Wahlen. Wichtiger als die Farbe selbst ist die konsistente Anwendung und ein guter Kontrast. Für ein Schweizer KMU empfehle ich, maximal drei Farben zu definieren.

Muss ich einen Grafiker beauftragen?

Nicht zwingend. Mit einem modernen Website-Baukasten oder einem professionellen Webdesign-Partner kannst du auch ohne eigene Grafikkenntnisse ein ansprechendes Design umsetzen. Wichtig ist, dass die Grundlagen (Farbwahl, Typografie, Layout) stimmen.

Wie finde ich die passende Schriftart?

Starte bei Google Fonts und teste zwei bis drei Kombinationen. Achte darauf, dass die Schrift zu deiner Branche passt und gut lesbar ist. Moderne Sans-Serif-Schriften sind für die meisten KMU die sicherste Wahl.

Wie viel kostet professionelles Webdesign?

In der Schweiz variieren die Kosten stark – von wenigen hundert bis mehreren tausend Franken. Entscheidend ist nicht der Preis, sondern ob das Design zu deinem Unternehmen passt und deine Ziele unterstützt. Wenn du dir unsicher bist, kannst du eine professionelle Website erstellen lassen und dich im Vorfeld ausführlich beraten lassen.

Nächster Schritt: Dein professionelles Webdesign

Gutes Webdesign ist kein Hexenwerk, aber es erfordert ein bewusstes Vorgehen. Wenn du die Grundlagen aus diesem Artikel beachtest – durchdachte Farben, passende Typografie, klares Layout und konsequentes Branding – hast du bereits einen grossen Vorsprung gegenüber vielen Mitbewerbern.

Du möchtest wissen, was eine professionelle Website für dein KMU kosten würde? Nutze unseren Kostenrechner und erhalte in wenigen Minuten eine unverbindliche Richtpreisschätzung – massgeschneidert für deine Anforderungen.

Für den kompletten Überblick über alle Aspekte einer erfolgreichen Website empfehle ich dir den Perfekte-Website-Guide für Schweizer KMU.