Webdesign-Grundlagen: Farben, Typografie und Layout für KMU-Websites
Lerne die wichtigsten Webdesign-Grundlagen kennen: Farbpsychologie, Schriftwahl, Grid-Layout und visuelle Hierarchie – speziell für Schweizer 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.
Farben sind mehr als Dekoration. Sie beeinflussen Emotionen, Vertrauen und Kaufentscheidungen. Studien zeigen, dass bis zu 90 % des ersten Eindrucks allein auf Farben basieren.
Definiere eine Primärfarbe, die zu deiner Branche und deinem Branding passt. Ein Treuhandunternehmen in Solothurn wählt anders als ein Yoga-Studio.
Nutze maximal 2–3 Farben plus Schwarz und Weiss. Zu viele Farben wirken unprofessionell.
Setze eine Akzentfarbe gezielt ein – zum Beispiel für Buttons und Call-to-Actions. Diese Farbe sollte sich klar vom Rest abheben.
Prüfe den Kontrast: Text muss auf dem Hintergrund gut lesbar sein. Tools wie den WebAIM Contrast Checker helfen dabei.
Ein Beispiel: Ein Schweizer Handwerksbetrieb könnte mit einem dunklen Blau als Primärfarbe Vertrauen signalisieren und mit einem kräftigen Orange als Akzent Aufmerksamkeit auf den «Offerte anfordern»-Button lenken.
Gratis Website-Checkliste für KMU
10 Punkte, die jede erfolgreiche KMU-Website braucht. Prüfe deine Website in 5 Minuten.
Die Schriftwahl beeinflusst die Lesbarkeit und den Charakter deiner Website enorm. Eine schlecht gewählte Schrift kann selbst den besten Inhalt zunichtemachen.
Sans-Serif-Schriften (z. B. Inter, Open Sans, Poppins) wirken modern, klar und digital. 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.
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.
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.
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.
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.
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.
Visuelle Hierarchie bestimmt, in welcher Reihenfolge Besucher die Inhalte deiner Website wahrnehmen. Wenn alles gleich aussieht, weiss niemand, wo er anfangen soll.
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.
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: Ü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.
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.
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.
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.
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.
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 Konfigurator und erhalte in wenigen Minuten eine unverbindliche Richtpreisschätzung – massgeschneidert für deine Anforderungen.
