Willkommen im STRATO Blog. Hier gibt es News und Tipps rund ums Hosting.

 

Menu

Veröffentlicht am: 10. Oktober 2013

Buntstifte

Crashkurs Webdesign – Teil 2: Farben und Schrift

Ob eine Website auf den ersten Blick gefällt und zum Verweilen einlädt, hängt maßgeblich von der Optik ab. Im zweiten Beitrag unserer fünfteiligen Webdesign-Reihe erläutern wir, was Farben und Schrift für Online-Projekte bedeuten.

Jeder weiß: Rot steht für die Liebe, Grün für die Hoffnung, Weiß für die Unschuld. Doch Psychologen stellten fest, dass der Mensch noch viel mehr Eigenschaften mit Farben verbindet – positive wie negative. Für den Webdesigner heißt das: Er muss Farben nutzen, die sowohl das Ziel der Website als auch die Gefühle des Publikums am besten treffen.

Ton in Ton oder kunterbunt?

Die Farbenlehre beschäftigt sich detailliert mit zueinander passenden und gegensätzlichen Farben. Mit dem Color Scheme Designer kann man solche Kombinationen online finden. Die Grundfarbe wählt man per Klick in den Farbkreis oder durch Eingabe des Farbwertes aus – das Online-Tool schlägt daraufhin passende Farbschemata vor. Per Klick auf „Light Page Example“ oder „Dark Page Example“ startet man eine Vorschau, wie die Farben in einer Beispiel-Website wirken.

Fürs Webdesign besonders geeignet sind analoge Farbschemata („analogic“). Die Grundfarbe wird mit drei Farben kombiniert, die auf einem zwölfteiligen Farbrad in gleichen Abständen nebeneinander liegen. Ebenfalls gut geeignet sind monochrome Farbschemata („mono“): Farben, deren Unterschied nur in der Helligkeit der liegt. Komplementärfarben („complement“) sind dagegen solche, die miteinander gemischt einen Grauton ergeben. Im klassischen Farbkreis liegen sie sich gegenüber. Sie bilden den stärksten Kontrast und eignen sich daher, wenn etwas besonders betont werden soll.

Wesentlich ist, dass nicht zu viele Farben auf der Website vorkommen. Drei bis fünf Farben reichen in der Regel aus – der Color Scheme Designer schlägt jeweils vier vor. Und diese Farben sollten miteinander harmonieren oder kontrastieren – je nachdem, welche Akzente der Designer setzen will.

Auf die Größe kommt es an

Für die Lesbarkeit ist natürlich auch die Schriftgröße von Bedeutung. Moderne Websites passen sich automatisch dem Bildschirm des Endgerätes an, auf dem sie angezeigt werden. Experten nennen das „responsive Design“: Je nachdem, ob die Seiten auf dem PC, dem iPad oder dem Smartphone betrachtet werden, ändern sich grafische Elemente und Schriftgrößen.

Ob „responsive“ oder herkömmliches Design: Normale Textschrift sollte für die Monitor-Wiedergabe mindestens 16 Pixel groß sein. Damit ist auch die Lesbarkeit auf großen Bildschirmen mit einer hohen Auflösung gewährleistet. Je nach Bildschirm und Auflösung erscheint Schrift aber unterschiedlich groß. Deshalb muss die Grundgröße, zum Beispiel 16 Pixel, per CSS als 100% definiert werden. Für verschiedene Endgeräte kann man dann Prozentangaben festlegen. Trotzdem bleibt der Test der Website auf möglichst vielen Endgeräten keinem Designer erspart.

Überschriften, Menüeinträge und andere wichtige Elemente sollten gegenüber der Textschrift deutlich größer sein. Die Lesbarkeit wird außerdem durch genügend Freiräume zwischen Zeilen, Absätzen und Seitenelementen besser. All diese Angaben lassen sich per CSS definieren, der Design-Sprache fürs Web. Und natürlich auch die verwendeten Schriftarten. Sie bestimmen maßgeblich die Optik. Doch meistens hat der Webdesigner gar keine Wahl, welche Schriftarten er verwenden will.

So wie das STRATO-Blog setzen heute die meisten Websites serifenlose Schriften ein, also Schriften ohne die kleinen Verzierungen an den Buchstabenrändern. Diese Schriftarten wirken technischer als die Serifenschriften, welche im Web gern für Überschriften genutzt werden. Überhaupt liegen schlichte Schriften eher im Trend als üppig verzierte.

Wichtig: Auf jeden Fall sollte man Standard-Schriften wie Verdana, Arial oder Times New Roman einsetzen, die in jedem Browser zur Verfügung stehen. Eine Alternative sind so genannte Webfonts wie die Google Fonts, die jedoch speziell definiert werden müssen. In der Regel setzt man eine Hauptschriftart und maximal eine weitere auf der Website ein, die dann zum Beispiel Überschriften hervorhebt.

Corporate Design als Rahmen

Viele Unternehmen besitzen ein Corporate Design (CD) – feste Regeln für das optische Erscheinungsbild. Vom Briefpapier über PowerPoint-Präsentationen bis hin zur Gestaltung der Firmengebäude zeigt das verwendete Design eine einheitliche Linie. In Verbindung mit einem einprägsamen Logo steigt so der Wiedererkennungswert des Unternehmens. Gelungenes Corporate Design steht für Professionalität. Also muss sich auch die Firmen-Website nach diesen Regeln richten. Das betrifft Farben und Schriften.

Tags: Webdesign

Der Autor:

Autor: Sven Hähle

Mein Name ist Sven Hähle. Ich arbeite seit vielen Jahren als Fachjournalist und schreibe für diverse Zeitschriften und Online-Portale über Digitalkultur, eBusiness und Technik.

4 Kommentare

  1. Maik sagte am 24. Oktober 2013 um 16:46:

    Das Corporate Design spielt in den meisten Seiten eine große Rolle, der so genannte Wiedererkennungswert ist für alle wichtig… Ich selbts schraube seit Jahren an Seiten mit CMS rumm wo man die CSS Files definieren kann… farblich geht der Trend mehr ins hellblaue.. dies wirkt auch sehr professionell

    Danke nochmals für den Beitrag

    Antworten
  2. Fotografie Erfurt sagte am 1. November 2015 um 16:35:

    da gehe ich vollkommen mit. Die Farbe Blau ist im Trend, alle große Firmen haben die Farbe Blau im Logo, also muss ja was drann sein

    Antworten
  3. claus peterson sagte am 22. Dezember 2016 um 17:30:

    wie kann ich die schrift einer mal in grösse und farbe bei glückwunsch mails verändern

    Antworten
    • Philipp Wolf sagte am 28. Dezember 2016 um 11:40:

      Hallo claus peterson,

      das hängt davon ab, welches Programm Du benutzt. Bei vielen Mailprogrammen kannst Du direkt die Einstellungen über den Editor vornehmen. Du könntest natürlich auch über HTML arbeiten.

      Welches Programm benutzt Du denn?

      Viele Grüße
      Philipp

      Antworten

Hinterlasse eine Antwort

Bitte beachte, dass sich Dein Kommentar auf den Artikel beziehen sollte. Wenn Du ein persönliches Kundenanliegen besprechen möchtest, wende Dich bitte an unseren Kundenservice auf Facebook, Twitter oder über Hilfe & Kontakt.
Wir freuen uns, wenn Du uns Deinen Namen hinterlässt. So wissen wir, wie wir Dich bei unserer Antwort ansprechen können.
Wenn Du Deine E-Mail-Adresse einträgst, wirst Du per Mail über unsere Antwort informiert. Sie wird zum Schutz Deiner Daten aber nicht veröffentlicht. Beide Angaben sind freiwillig.

Hier bloggen

Lisa Kopelmann
Ist Ansprechpartnerin für den Blog und berichtet über aktuelle STRATO Themen

Oliver Meiners
Schreibt über alles, was für Dich als STRATO Kunde wichtig ist

Michael Poguntke
Schreibt über den Online-Speicher HiDrive, den Homepage-Baukasten, Webshops und Server

Thomas Ritter
Berichtet über Neuigkeiten aus dem Unternehmen

Bianca Restorff-Adrion
Schreibt über Karriere & die Menschen bei STRATO

Christian Lingnau
Bloggt über WordPress & andere CMS

Franz Neumeier
Gibt Tipps zum erfolgreichen Bloggen

Sven Hähle
Kennt sich bei Domains hervorragend aus

Patrick Schroeder
Erzählt die Stories unserer Kunden

Ann-Christin Schmitt
Schreibt über HiDrive, den Homepage-Baukasten und guten Websitecontent

Christian Rentrop
bloggt über Software-Themen