Von Ihrer Marke ausgehen
Die meisten Betriebe haben bereits Farben, auch wenn sie nie darüber nachgedacht haben: im Logo, auf dem Firmenauto, auf der Arbeitskleidung, auf dem Schild über der Tür. Kunden verbinden diese Farben mit Ihnen. Die Website sollte sie aufgreifen, damit online und vor Ort ein stimmiges Bild entsteht.
Wenn Ihr Logo veraltet ist oder es gar keines gibt, ist der Website-Start ein guter Anlass, das Erscheinungsbild zu überdenken. Dann sollten Logo, Farben und Schriften gemeinsam entstehen, nicht nacheinander.
Ein einfaches Farbsystem
Statt vieler Farben brauchen Sie ein paar mit klaren Aufgaben:
- Hauptfarbe: prägt den Auftritt, etwa in Kopfbereich und Überschriften.
- Akzentfarbe: nur für das, was auffallen soll, vor allem Schaltflächen und wichtige Links.
- Neutrale Töne: ein dunkles Grau oder fast Schwarz für Text, Weiß oder ein sehr helles Grau für Hintergründe.
- Signalfarben: für Fehlermeldungen oder Hinweise, sparsam eingesetzt.
Eine verbreitete Faustregel aus der Gestaltung: Den größten Teil der Fläche nehmen neutrale Töne ein, einen kleineren die Hauptfarbe, und nur einen kleinen Rest die Akzentfarbe. So bleibt die Akzentfarbe wirksam.
Adresse Ihrer Website eingeben und in wenigen Minuten einen neuen Entwurf Ihrer Startseite sehen.
Farbwirkung und Branche
Farben lösen Stimmungen aus, aber nicht nach festen Gesetzen. Ruhige, helle Töne wirken bei Praxen und Beratung meist angenehm, kräftige Farben passen oft zu Handwerk und Gastronomie. Wichtiger als Farbpsychologie ist, dass die Farbe zu Ihnen passt und Sie sich von Mitbewerbern unterscheiden.
Schauen Sie sich die Websites anderer Betriebe in Ihrer Branche und Region an. Wenn alle Installateure in Blau auftreten, kann eine andere Hauptfarbe helfen, in Erinnerung zu bleiben. Vermeiden Sie aber Farben, die der Erwartung völlig widersprechen.
Kontrast und Lesbarkeit
Die schönste Farbe nützt nichts, wenn der Text darauf nicht lesbar ist. Hellgraue Schrift auf weißem Hintergrund, weißer Text auf hellem Foto oder Gelb auf Weiß sind typische Fehler. Für Fließtext ist dunkle Schrift auf hellem Hintergrund fast immer die beste Wahl.
Prüfen Sie Ihre Farbkombinationen mit einem Kontrast-Rechner, wie es sie kostenlos im Internet gibt, und orientieren Sie sich an den Empfehlungen der WCAG-Richtlinien. Warum das nicht nur Geschmackssache ist, erklärt der Ratgeber Barrierefreie Website. Schaltflächen sollten sich deutlich vom Hintergrund abheben, siehe auch Call-to-Action.
Schriften wählen
Für Bildschirme haben sich klare, serifenlose Schriften für den Fließtext bewährt; Serifenschriften können für Überschriften einen wertigen Akzent setzen. Achten Sie auf diese Punkte:
- Höchstens zwei Schriftfamilien auf der ganzen Website.
- Ausreichende Größe: Fließtext eher größer als kleiner, damit er am Handy ohne Zoomen lesbar ist.
- Zeilenlänge: nicht zu breit, sonst verliert das Auge beim Zeilenwechsel den Anschluss.
- Zeilenabstand: großzügig genug, damit der Text atmen kann.
- Wenige Schnitte: normal und fett reichen meist; jede Variante muss geladen werden.
Schriften technisch und rechtlich richtig einbinden
Viele Websites laden Schriften von externen Servern, etwa von Google Fonts. Dabei wird die IP-Adresse der Besucher an den Anbieter übertragen, was in Österreich und Deutschland bereits zu Abmahnungen geführt hat. Sicherer ist es, die Schriften auf dem eigenen Server abzulegen. Wie das geht, beschreibt Google Fonts lokal einbinden.
Achten Sie außerdem auf die Lizenz: Nicht jede Schrift darf auf Websites verwendet werden. Und jede zusätzliche Schriftdatei verlängert die Ladezeit, siehe Website-Ladezeit verbessern.
Drei Beispiele aus der Praxis
Die Zimmerei: Ein warmes Holzbraun aus dem Logo als Hauptfarbe, ein kräftiges Grün als Akzent für Schaltflächen, viel Weiß und große Projektfotos. Eine robuste, serifenlose Schrift passt zum Handwerk.
Das Kosmetikstudio: Ein zurückhaltendes Altrosa oder Salbeigrün, dazu eine elegante Serifenschrift für Überschriften und eine schlichte für den Text. Die Akzentfarbe ist nur der Buchungsschaltfläche vorbehalten.
Die Steuerberatung: Ein gedecktes Dunkelblau oder Petrol, sehr klare Schriften, ruhige Flächen. Hier steht Seriosität vor Originalität. Wie das in einem ersten Entwurf aussehen kann, zeigt der Gratis-Startseiten-Entwurf von Pipeline AI Solutions; für die vollständige Umsetzung siehe Website erstellen lassen.
Häufige Fragen
Wie viele Farben sollte eine Website haben?
Für die meisten Firmenwebsites reichen eine Hauptfarbe, eine Akzentfarbe und neutrale Töne für Text und Hintergrund, ergänzt um eine Signalfarbe für Fehlermeldungen. Mehr Farben machen die Seite schnell unruhig und schwächen die Wirkung wichtiger Elemente. Entscheidend ist, dass jede Farbe eine klare Aufgabe hat und konsequent gleich verwendet wird.
Welche Schriftart ist am besten für Websites?
Eine einzige beste Schrift gibt es nicht. Für Fließtext haben sich klare, serifenlose Schriften bewährt, die auf Bildschirmen gut lesbar sind und verschiedene Zeichen wie Umlaute sauber darstellen. Für Überschriften kann eine zweite Schrift Charakter geben. Wichtiger als die konkrete Schrift sind ausreichende Größe, guter Zeilenabstand und eine überschaubare Zeilenlänge.
Muss die Website dieselben Farben wie mein Logo haben?
Sie sollte sie aufgreifen, damit Kunden Ihren Betrieb wiedererkennen. Das heißt aber nicht, dass jede Logofarbe großflächig vorkommen muss. Oft wird eine Logofarbe zur Hauptfarbe, eine zweite zur Akzentfarbe, und der Rest der Seite bleibt neutral. Wenn eine Logofarbe auf dem Bildschirm schlecht lesbar ist, wird sie nur für Flächen, nicht für Text verwendet.
Darf ich Google Fonts auf meiner Website verwenden?
Die Schriften selbst dürfen in der Regel frei verwendet werden. Problematisch kann es sein, sie direkt von Googles Servern zu laden, weil dabei Daten der Besucher übertragen werden. Deshalb empfiehlt es sich, die Schriftdateien auf dem eigenen Server abzulegen. Für eine verbindliche rechtliche Einschätzung im Einzelfall wenden Sie sich an die Wirtschaftskammer oder einen Anwalt.