Auswahl eines SEO-relevanten Domainnamens

Einführung

Die Auswahl eines SEO-relevanten Domainnamens stellt einen entscheidenden Schritt auf dem Weg zum Online-Erfolg dar. Ein prägnanter Domainname ist das virtuelle Aushängeschild einer Website. Er formt nicht nur den ersten Eindruck bei den Nutzern, sondern beeinflusst auch wesentlich das Ranking in Suchmaschinen. Da der Domainname häufig der erste Berührungspunkt für potenzielle Kunden ist, verdient seine Auswahl besondere Aufmerksamkeit.

Grundlagen

• TLD (Top-Level-Domain): Dieser Domain-Teil bezieht sich auf Endungen wie .com, .de oder .org. TLDs können geografische Indikatoren sein (z.B. .de für Deutschland) oder generische Begriffe wie .com. Die Wahl der TLD kann den geografischen Fokus der Website betonen und den Nutzern ein Gefühl der Lokalität vermitteln.
• SLD (Second-Level-Domain): Dieser zentrale Bestandteil des Domainnamens (wie ‘google’ in google.com) sollte möglichst eindeutig das Unternehmen oder die Dienstleistung repräsentieren. Ein treffender SLD erleichtert die Wiedererkennung und stärkt die Markenbindung.

Mehr technisches Hintergrundwissen ist bei Wikipedia zu finden. Bitte dem Link folgen.

Kriterien für die Auswahl eines SEO-relevanten Domainnamens

• Relevanz: Ihr Domainname ist oft der erste Kontakt, den ein Benutzer mit Ihrer Seite hat. Wählen Sie einen Namen, der den Inhalt oder das Hauptangebot Ihrer Website treffend beschreibt. Zum Beispiel könnte eine Bäckerei in Berlin den Namen “BerlinerBrotbäckerei.de” wählen, um ihre Spezialisierung und ihren Standort zu verdeutlichen.
• Kürze: Ein prägnanter Domainname, wie “Zalando.de” statt “SchuheUndModeOnlineShop.de”, reduziert das Risiko von Tippfehlern und kann effizienter im Marketing eingesetzt werden. Kurze Domains sind zudem leichter zu merken und können die Wiedererkennung Ihrer Marke steigern.
• Einfache Schreibweise: Ein Name wie “XylophonSpezialist.de” könnte trotz seiner Einzigartigkeit wegen seiner komplexen Schreibweise problematisch sein. Ein einfacher, flüssig auszusprechender Name wie “MusikMax.de” wäre hier vorteilhafter.
• Keywords: Ein Domainname wie “HolzmoebelShop.de” gibt sofort Aufschluss über das Hauptangebot der Seite. Doch Vorsicht: Suchmaschinen haben ihre Algorithmen angepasst und belohnen nicht mehr automatisch Keyword-reiche Domains. Wählen Sie Keywords, die sinnvoll und relevant sind, ohne dabei unnatürlich zu wirken.
• Keine Bindestriche: Ein Name wie “Top-Moebel-Online.de” kann zwar klar sein, aber Bindestriche können oft zu Verwirrung führen, insbesondere wenn sie mündlich weitergegeben werden. “TopMoebelOnline.de” wäre eine klarere Option.
• Lokale TLDs: Eine Domain wie “FloristMünchen.de” mit einer regionalen TLD (.de) betont den lokalen Bezug und kann von Suchmaschinen bevorzugt werden, wenn Nutzer in München nach einem Floristen suchen.

Marken vs. Keywords

Die Entscheidung zwischen Marken- und Keyword-Domainnamen ist eine zentrale strategische Überlegung im digitalen Marketing. Beide Ansätze bieten ihre eigenen Vorteile und potenziellen Herausforderungen.

Markendomains: Der Hauptvorteil von Markendomains liegt in ihrer Einzigartigkeit und Wiedererkennbarkeit. Unternehmen wie “Zalando”, “Dazn” oder “Spotify” haben Namen gewählt, die nicht direkt ihr Angebot beschreiben, sich aber durch ihre Einzigartigkeit von der Konkurrenz abheben. Dieser Ansatz fördert:

• Einzigartigkeit im Markt.
• Stärkung der Markenbindung und Wiedererkennung.
• Geringeres Risiko von Domain-Konflikten oder Markenrechtsverletzungen.
• Potenzial für globale Erkennbarkeit unabhängig von Sprachbarrieren.

Ein potenzielles Problem könnte sein, dass neue Benutzer oder Kunden möglicherweise nicht sofort erkennen können, welches Produkt oder welche Dienstleistung das Unternehmen bietet, besonders wenn der Name völlig abstrakt ist, wie z.B. “Kodak” für Fotografie.

Keyword-Domains: Sie bieten den Vorteil der unmittelbaren Relevanz. Domains wie “FahrradReparaturHamburg.de” oder “OnlineSchuhShop.de” machen sofort deutlich, welche Dienstleistungen oder Produkte sie anbieten. Die Vorteile hierbei sind:

• Schnelle und klare Zuordnung des Angebots durch den Nutzer.
• Mögliche SEO-Vorteile durch gezielte Keyword-Platzierung.
• Erhöhung der organischen Klickraten bei passenden Suchanfragen.
• Einfachere Domain-Auswahl basierend auf Geschäftsmodell und -standort.

Die Herausforderungen bei Keyword-Domains könnten in der eingeschränkten Einzigartigkeit und der potenziellen Konkurrenz bei populären Keywords liegen. Darüber hinaus kann es schwierig sein, sich von der Masse abzuheben, wenn viele ähnliche Domainnamen existieren.

Zusammenfassend lässt sich sagen, dass die Wahl zwischen Marken- und Keyword-Domainnamen von der individuellen Geschäftsstrategie, den Markenzielen und dem geografischen Fokus abhängt. Es ist wichtig, beide Ansätze sorgfältig zu prüfen und die für das eigene Geschäftsmodell am besten geeignete Methode zu wählen.

Historie der Domain

• Alter: Ein älterer Domainname, der seit Jahren besteht, kann als Zeichen für Beständigkeit und Vertrauenswürdigkeit gewertet werden. Dennoch sollten Sie prüfen, ob mit der Domain negative Erfahrungen verbunden sind.
• Backlink-Profil: Ein starkes Profil mit Verlinkungen von renommierten Seiten kann Ihrem SEO enorm helfen. Zum Beispiel wäre ein Link von einer bekannten Nachrichtenseite wertvoller als zehn Links von unbekannten Blogs.
• Strafen: Ein Domainname, der in der Vergangenheit für Black-Hat-SEO-Techniken genutzt wurde, könnte immer noch mit diesen negativen Aktionen in Verbindung gebracht werden. Tools wie Google’s Search Console können helfen, mögliche Strafen zu identifizieren.

Entscheidungscheckliste für die Wahl eines SEO-relevanten Domainnamens

1. Erster Eindruck und Wiedererkennung:
   • Ist der Domainname prägnant und leicht zu merken?
   • Verkörpert er das Image und die Markenbotschaft Ihres Unternehmens?
2. Top-Level-Domain (TLD):
   • Unterstreicht die TLD Ihren geografischen Fokus oder Ihre generische Geschäftsnatur?
   • Ist die TLD verfügbar und rechtlich unbedenklich?
3. Second-Level-Domain (SLD):
   • Repräsentiert der SLD Ihr Unternehmen oder Dienstleistung klar und eindeutig?
   • Ist er kurz, prägnant und frei von potenziell verwirrenden Bindestrichen?
4. Relevanz und Klarheit:
   • Beschreibt der Domainname den Inhalt oder das Hauptangebot Ihrer Website treffend?
   • Ist er frei von komplexen oder schwer zu buchstabierenden Wörtern?
5. Marken- vs. Keyword-Domain:
   • Möchten Sie einen einzigartigen und markanten Namen oder liegt der Fokus auf SEO-Relevanz?
   • Falls Markendomain: Ist der Name einprägsam und hebt sich von der Konkurrenz ab?
   • Falls Keyword-Domain: Wird das Hauptangebot oder die Dienstleistung klar kommuniziert?
6. Historie und Beständigkeit:
   • Ist die Domain schon länger verfügbar und hat einen guten Ruf?
   • Gibt es irgendwelche Strafen oder negative Assoziationen mit der Domain aus der Vergangenheit?
7. Backlink-Profil:
   • Verfügt die Domain über wertvolle und qualitativ hochwertige Backlinks?
   • Gibt es Links von renommierten Seiten oder Branchenexperten?
8. Endgültige Überlegungen:
   • Wurden alle Aspekte sorgfältig geprüft und bewertet?
   • Spiegelt der Domainname Ihre Geschäftsstrategie und Ihre langfristigen Ziele wider?

Nach Durchlaufen dieser Checkliste sollten Sie eine gut informierte Entscheidung über Ihren zukünftigen Domainnamen treffen können.

Entscheidungscheckliste zur Auswahl Eines SEO-Relevanten Domainnamens

Gerne kann auch die Entscheidungscheckliste als Excel-Tabelle heruntergeladen werden. Einfach auf das Bild klicken.

Fazit – Auswahl eines SEO-relevanten Domainnamens

Die Wahl eines geeigneten Domainnamens ist eine Kombination aus Strategie, Forschung und Intuition. Ein gut gewählter Name kann sowohl das SEO verbessern als auch das Markenbewusstsein schärfen. Es ist daher von entscheidender Bedeutung, die Zeit und Ressourcen in diese Entscheidung zu investieren.

Der Beitrag Auswahl eines SEO-relevanten Domainnamens erschien zuerst auf Ilja Schlak InfoSec Blog.

Webdesign – das richtige Konzept

Der zweite Artikel der Reihe befasst sich mit dem Thema “Webdesign und Farbe”. Was ist Farbe? Wie wirkt sie auf uns? Welche Kontraste gibt es und wann sind diese anzuwenden? Und zahlreiche Praxistipps erwarten Sie!

Das Ziel des Onlineauftrittes

Die ersten Fragen, die man sich zu Anfang eines Projekts stellen sollte, sind: „Welches Ziel hat die Website? Was möchte der Auftraggeber damit erreichen?“. Diese fragen fließen mit in das Konzept des Webdesign mit ein.

Zweckbestimmung des Projektes. Einige Beispiele:

• Handelt es sich um eine schlichte Darstellung einer Person, vielleicht für eine Online Bewerbung (Vita, Qualifikationen, Auflistung von Projekten, Fotos, Kontaktdaten etc.)? Soll nur der potentielle Arbeitgeber die Zugangsdaten oder den Link zu der Site bekommen?
• Oder ist es beispielsweise ein lokales Unternehmen, das durch das neue Webdesign, durch eine moderne responsive Website neue Kunden generieren will?
• Soll eine alte Seite erneuert (relaunched) werden?
• Oder soll ein bereits vorhandener und moderner Internetauftritt einen Onlineshop bekommen?
• Ein deutsches Unternehmen eröffnet eine Niederlassung im Ausland und es sind nun folgerichtig mehrere Sprachfassungen nötig?

Das sind zwar übliche und alltägliche Beispiele, dennoch unterscheidet sich die Umsetzung dieser Projekte enorm voneinander. Daher ist es durchaus wichtig folgende Punkte von Anfang an zu klären:

Was ist das Ziel des Projektes?

• Was lassen sich die die Besucher der Webpräsenz definieren, was ist die Zielgruppe?
• Sind bestimmte Funktionen erwünscht?
• Werden Werbebanner geschaltet?
• Sind Newsletter, Call-To-Actions, Leadmagnets geplant?

Ja… Das sind viele Fragen. Denn gerade die aufgeführten Fragen sind relevant für die Bestimmung des Webdesigns, die Platzierung bestimmter Elemente im Layout. Noch mehr Fragen tauchen auf, wenn es um die Funktionalität der Website geht. Dazu mehr hier.

Auftraggeberanalyse – wichtiger Baustein des Webdesign Konzeptes

Die Analyse des Auftraggebers ist mit Sicherheit eins der wichtigsten Punkte um das passende Webdesign zu finden. Was macht der Auftraggeber? Was zeichnet ihn aus? Es hört sich zunächst banal an ein junger, kreativer Hochzeitsfotograf braucht ein ganz anderes Design, als ein Bestattungsunternehmer.

Doch sogar hier findet man oft Fehler oder einfach völlig unpassende Farbkombinationen und Schriftarten. Verspielte Serifenschriftarten und fröhliche Farbkombinationen wären sicherlich fehl am Platz.

Die Zielgruppe, die durch die Website erreicht werden soll, ist ebenfalls ein wichtiges Analysekriterium. Denn gerade um die Zielgruppe geht es. Es sind schließlich die Besucher der Website, die durch die Site angesprochen werden sollen. Es gilt die richtige Balance zu finden. Auf der einen Seite steht die Benutzerfreundlichkeit, auf der anderen Seite das Verlangen nach seriösem Auftreten. Die Texte müssen – im Idealfall – für 11-jährige Schüler verständlich sein, die Sätze kurz und aktiv formuliert werden. Auf der anderen Seite möchte der Auftraggeber (so gut wie immer) seriös und fachlich kompetent wirken. Da gilt es die goldene Mitte zu finden und sowohl den Suchmaschinen, als auch dem Kunden gerecht werden. Mehr zum Thema Suchmaschinenoptimierung hier und im Newsletter.

An dieser Stelle sollte man sich fragen, was der Auftraggeber mit der Website erreichen will und welche Bedürfnisse die Zielgruppe hat.

Merkmale der Zielgruppe

Während der ersten Briefings mit dem Auftraggeber sollte man auf die Merkmale der Zielgruppe eingehen. Die Auswertung dieser Merkmale bringt bereits erste Erkenntnisse über das mögliche Design mit sich. Zum Beispiel wären bei jüngeren Besuchern die Auswahl der Schriftfamilie und der Farbkombination eine andere, als wenn es sich um ein älteres Publikum handele. Des weiteren würde man die Implementierung bestimmter (Design)Elemente bei älteren Browsern gar nicht in Erwägung ziehen. Anders wenn die Besucher überwiegend mit “ever green” Browsern ausgestattet sind.

• Alter
• Geschlecht
• Bildungsstand
• Konsumverhalten
• Erfahrung im Umgang mit Medien
• Endgeräte der Besucher (Leistungsfähigkeit, Alter der Endgeräte)
• Welche Browser werden benutzt (unterschiedliche Frabinterpretationen der Browser beachten)
• Wohnort bzw. der Ort des Zugriffes auf die Seite.

Bei einem Landarzt mitten im Nirgendwo müssen die Medien auf die minimale Bandbreite optimiert werden. Ganz im Gegenteil zu einem Auftraggeber im IT-Bereich mitten in Hamburg und hervorragender Netzabdeckung. Passen Sie auch die Auswahl der Farbe und der Schrift Ihrer Zielgruppe an! Zum Thema Webdesign und Farbe finden Sie hier einen umfassenden Artikel.

Zielgruppenanalyse – Wichtige Merkmale (© ilja-schlak.de)

Am einfachsten fällt die Ermittlung dieser Merkmale bei bereits bestehenden Unternehmen, weil diese statistischen Auswertungen liefern können. Doch auch junge oder in der Gründungsphase befindliche Unternehmen haben ihre Ziele und meistens einen Marketingplan, aus dem sich die Zielgruppe bestimmen lässt.

Unternehmensanalyse und Corporate-Design

Wenn der Kunde bereits über Corporate Design bzw. eine Corporate Identity verfügt, sieht es schon anders aus. Die Übernahme der Farbkombinationen und der Schriftarten wären hier ein absolutes muss. Dieser Umstand gehört zum richtigen Konzept des Webdesign.

• Verfügt der Auftraggeber bereits über ein Corporate Design?
• Hat das Unternehmen bestimmte Design Richtlinien (Farbgebung, Farbkombination, Spezifische Schriftarten etc.?
• Gibt es ein Logo?
• Gibt es bereits Bilder und Grafiken?

Infografik: Elemente der Corporate Identity (© ilja-schlak.de)

Corporate Design – als Teil des Webdesign Konzeptes

Das Element des Corporate Designs stellt für eine neue Internetpräsenz wohl das wichtigste Element dar. Dieses Element ist verantwortlich für das visuelle Erscheinungsbild eines Betriebes. Hierzu gehören die sog. Gestaltungskonstanten, anders formuliert: Erscheinungselemente, die – vor allem nach außen – das Unternehmen wiederspiegeln.

Hierzu gehören solche Elemente, wie das Logo, die Farbkombinationen, Ausgestaltung der Briefbögen und nicht zu letzt die Schriftarten (Typografie).

Branche. Was gilt als Branchenspezifisch – Die Konkurrenzanalyse

Hier muss man die passende und vorteilhafte Mischung aus branchenspezifischem Auftreten und anschließend dem Alleinstellungsmerkmal des Kunden gefunden werden. Was genau ist die Branche des Kunden? Was sind ihre wichtigsten Vertreter, Firmen? Welche davon sind die wichtigsten Konkurrenten? Einige Antworten wird der Auftraggeber sicherlich geben könne, jedoch macht auch eine genauere Recherche mit eigenen Mitteln durchaus Sinn. Eventuell findet man die Tendenzen in der Branche heraus. Häufig wird klar, in welche Richtung sich das spezifische Webdesign, die Funktionen, die UX und UI entwickeln. Es soll nichts kopiert werden. Stattdessen macht eine Anpassung an diese Tendenzen durchaus Sinn.

Alleinstellungsmerkmal im Webdesign

Das oben gesagte würde jedoch nichts bringen, wenn der Auftraggeber eine von vielen – für die Branche typische – Website mit unauffälligem Design bekommt. Die Konkurrenzfähigkeit wird dadurch mit Sicherheit nicht gesteigert. Man sollte sich folglich Gedanken um das Alleinstellungsmerkmal des Auftraggebers machen. Was ist bei ihm einzigartig? Was sind seine Stärken, die ihn von seinen Wettbewerbern unterscheidet?

Unique Selling Proposition – USP

Die Marketer sprechen hier von der sog. USP – Unique Selling Propositon. Oft lässt sich das Design oder zumindest einzelne Designelemente an diese USP des Kunden anpassen. Viel komplizierter ist es eher für den Kunden seine USP – seinen Alleinstellungsmerkmal – zu finden. Unternehmen einer Branche sind sich oft sehr ähnlich, denn sie bieten die gleichen Leistungen an, produzieren oder vertreiben oft sehr ähnliche Produkte. Gerade hier kann man sehr viel mit einzigartigem Design erreichen. Denn ein ausgefallenes Logo, positiv wirkende Farbkombinationen, starke Corporate Identity, attraktive Website, all diese Faktoren helfen einen Wettbewerbsvorteil gegenüber anderen Vertretern der Branche zu erreichen! Im Grunde genommen kommt man nicht drum herum funktionierende USP von Marktingspezialisten herausarbeiten zu lassen.

Konzept der Website

Nun sind die Ziele des Projekts klarer geworden. Man weiß, was der Auftraggeber will. Weiterhin ist die Zielgruppe, an die der Onlineauftritt gerichtet sein wird, definiert. Und schließlich wurde der Auftraggeber selbst analysiert.

Jetzt wird das erworbene Wissen über das Projekt zusammen gefasst. Es ist steht das Konzept der Website.

Mindmap: “Konzept einer Website, die ersten Abschnitte” (© ilja-schlak.de)

Grobkonzept

Das Grobkonzept beinhaltet noch keine Webdesign Elemente, obwohl man in bestimmten Fällen durchaus gewisse Skizzierungen und Wireframes anfertigen kann.

Das Grobkonzept beinhaltet vielmehr die Rahmenbedingen der Site und zwar das Ziel, die Zielgruppe, der Funktionsumfang, Vorhandensein des Corporate Designs, Wünsche des Auftraggebers. Und schließlich die verwendeten Medien und Inhalte (zum Beispiel; Texte, Grafiken, Infografiken, Videos etc.). Wie oben bereits dargestellt, können man bereits erste Aufbauschemata und möglicherweise Navigationstendenzen konzipieren. Somit hat man es im späteren Verlauf des Projekts – im Feinkonzept zum Beispiel – einfacher die Vorstellung des Auftraggebers zu erfüllen.

Feinkonzept

Beim Feinkonzept handelt es sich schon dagegen um Details. Herausgearbeitet werden alle relevanten Einzelheiten der Site:

• Design (Visuelles Design)
• Layout
• Typographie
• Struktur der Website
• Navigation
• Funktionen im Einzelnen
  • solche wie Formulare, Buttons, Newsletter, Seitenleisten, Downloads, Login-Bereiche, Online-Shop, E-Mail, Bestätigungsmails etc.
• nicht zu letzt ein Modell der Site (Wireframe, MockUp und ähnliches)

Tipps zum richtigen Konzept beim Webdesign

Bei der Kundenanalyse, im Rahmen eines Kundengesprächs, sollte man unnötige Fachbegriffe vermeiden.

Mit dem Auftraggeber auf einer sprachlichen Ebene kommunizieren. Anders formuliert: auf keinen Fall eigene Überlegenheit im Fachwissen unterstreichen. Das hilft ebenfalls arrogantes und unsympathisches Auftreten zu vermeiden.

Zuhören! Den Auftraggeber reden lassen. Erstens hilft es die Vorstellungen des Kunden herauszufinden. Schließlich erleichtert es das Ziel des Projekts zu ermitteln.

Zuhören aber auch aktiven Part übernehmen. Dem Auftraggeber helfen sich über das Ziel klar zu werden. Denn meistens wissen die Kunden nicht, welche Möglichkeiten eine Onlinepräsenz eröffnet.

Je mehr man über seinen Auftraggeber weiß, umso besser wird das Ergebnis und demzufolge die Kundenzufriedenheit. Es ist also Pflicht den Kunden kennen zu lernen!

Der Beitrag Webdesign – Konzept erschien zuerst auf Ilja Schlak InfoSec Blog.

Doch was ist Farbe? Farben wirken auf uns auf unterschiedliche Art und Weise. Welche Wirkung ist es? Was sind Kontraste? Welche Farbmodelle sollen für den Druck und welche für das Web benutzt werden?

Artikelreihe “Wichtigste Schritte zu Ihrer Website”

Den ersten Artikel, der sich mit dem Thema “Webdesign – Konzept” befasst, finden Sie hier.

Was ist eigentlich Farbe?

Licht! Die Antwort lautet richtigerweise: Licht. Und zwar Licht, das mit einer bestimmten Wellenlänge strahlt. Die Farbe Gelb wird somit nur als gelb von uns wahrgenommen, wenn das Licht mit einer Wellenlänge von ca. 575-585 Nanometer unser Auge trifft.

• Violett ca. 400-450 nm
• Blau ca. 490-490 nm
• Grün ca. 490-560 nm
• Gelb ca. 560-590 nm
• Orange ca. 590-630 nm
• Rot ca. 630-700 nm

Lichtfarbe und Objektfarbe

Die Farbe kann sowohl von der Lichtquelle selbst kommen, als auch von einem Gegenstand, das von den Lichtquellen angestrahlt wird.

Anders formuliert: wenn das Licht in einer bestimmten Wellenlänge einen Gegenstand trifft, strahlt dieser zurück. Ein Teil der ursprünglichen Lichtwellen werden vom angestrahlten Gegenstand absorbiert, reflektiert oder – je nach Oberfläche – verändert. Das Ergebnis nimmt dann unser Auge wahr.

Kommt die Farbe also von einem Leuchtkörper – wie zum Beispiel der Sonne, einer Lampe, einem Blitzgerät, oder für Webdesign relevantem Monitor, nennt man sie Lichtfarbe.

Wenn sie hingegen von einer Sache (Gegenstand, Körper) kommt, spricht man von der sogenannten Körperfarbe. Wichtig ist diese Art der Farbe zwar weniger im Webdesign, im Design an sich, spielt sie jedoch eine enorme Rolle. Die Körperfarbe definiert nämlich den gesamten Bereich der Printmedien.

Nicht weniger wichtig ist die Kenntnis dieser Begriffe, wenn es um die Kalibrierung eines Monitors geht. Hierbei ist es wichtig, dass die Farben des Monitors so gut es eben technisch möglich ist, mit den Körperfarben der “analogen” Welt übereinstimmen.

Farbe im Webdesign

Während man im Printdesign davon ausgehen kann, dass jeder Betrachter die Farben gleich wahrnimmt (mit der Ausnahme der Menschen mit Sehschwächen und Farbenfehlsichtigkeit), ist es im Webdesign etwas anders. Hier weiß man nicht über welche Hard- und Software der User verfügt.

Hier spielt vordergründig die Displaygröße eine Rolle. Die Webinhalte sollten sowohl auf großen, als auch auf kleinen Displays gut aussehen und ihre volle funktion beibehalten.

Dazu kommt jedoch noch der Umstand, dass unterschiedliche Browser die Farben unterschiedlich darstellen. Das sollte man bei jedem Projekt im Hinterkopf behalten und mit dem Auftraggeber besprechen.

Tipps

• Erkundigen Sie sich, ob es Statistiken zur Zielgruppe gibt. Bei vielen Unternehmen gibt es Auswertungen, die zeigen, welcher Browser am meisten von der Zielgruppe benutzt wird. Da macht es durchaus Sinn, das Webdesign und die Auswahl der Farbe für diesen Browser zu optimieren. Lesen Sie mehr zum Thema Zielgruppe.

• Zum Thema Display-, Monitor-, Gerätegröße gilt nur eines: jede Website muss responsive sein. Kein wenn und aber. Wir schreiben nämlich das Jahr 2019.

Eine gibt jedoch auch eine gute Entwicklung. Die Auswahl der Farben stößt heutzutage an keine Grenzen mehr. Über das Thema “websichere Farben” muss man sich daher keine Gedanken mehr machen. Heute kämpft man eher mit der Qual der Wahl. Wie man nun die richtige aus den 16.777.216 zur Verfügung stehenden Farben findet und in ein zum Webdesign passendes Farbschema integriert, erfahren Sie im Laufe dieses Beitrages.

Farbmodelle: Farbe im Webdesign und in der Offline-Welt

Um Farben zu beschreiben und definieren gibt es eine Reihe von Farbmodellen. Die Printmedien verwenden andere Verfahren und Farbmischungen als die digitalen Medien. Die Farbdarstellung auf einem Monitor findet mit Lichtfarben statt, im Print sieht es wiederum ganz anders aus.

Additive Farbmischung und das RGB-Farbmodell – das Farbmodell fürs Webdesign

Bei der additiven Farbmischung handelt es sich um die Entstehung von Farbe durch Vermischung der Grundfarben Rot, Grün und Blau. Im Webdesign entsteht die Farbe grundsätzlich mit Hilfe der Lichtfarben. Denn die Monitore, Handydisplays, Tablets, Laptops etc. sind alles selbstleuchtende Medien, die aus vielen Pixel bestehen.

RGB. Diese drei Buchstaben hat wahrscheinlich nahezu jeder technikaffine Mensch gelesen oder gehört. Doch was steckt nun dahinter?

Am für Webdesign relevanten Beispiel des Monitors:

Jedes Pixel ist in der Lage die drei Grundfarben Rot, Grün und Blau (RGB, auch Lichtfarben genannt) wieder zu geben.  Wenn man diese Grundfarben untereinander mischt, entstehen neue Farben: Grün und Blau ergeben Türkis (Cyan), Rot und Grün ergeben Gelb (Yellow). Anschließend ergeben Rot und Blau Magenta. Und alle drei Grundfarben bilden folglich weiß.

Webdesign und Farbe: Das RGB-Farbmodell: die drei Grundfarben: Rot, Grün, Blau und die Mischergebnisse (© ilja-schlak.de)

Wie oben bereits erwähnt ist das RGB-System die Mischung aus den drei Lichtfarben.

Das RGB-Farbmodell umfasst ca 16,7 Millionen Farben. Für jede dieser drei Farben wird ein Wert von 0 bis 255 angegeben (also 256 Werte insgesamt: für Rot 0-255, für Grün 0-255 und für Blau ebenfalls von 0-255). Die Farbe wird also im RGB-System durch diese drei Werte rgb 0-255 (Rotanteil); 0-255 (Grünanteil); 0-255 (Blauanteil) definiert.

Ein Paar Beispiele

Reines Rot hat den RGB-Wert: 255;0,0

Kastanienbraun hätte den RGB-Wert 138;0;0

Reines Grün: 0;255;00

256 * 256 * 256=16.777.216 Farbkombinationen.

Die subtraktive Farbmischung und das CMYK-Farbmodell

Anders als bei den additiven Farbmischungen sind die Grundfarben der subtraktiven Farbmischung Zyan (Cyan), Magenta, und Gelb (Yellow): CMY. Bei dieser Mischung werden die Lichtwellen subtrahiert: subtraktive Farbmischung.

Wenn man diese Körperfarben CMY mischt, bekommt man als Ergebnis die drei Lichtfarben: RGB:

• Gelb und Magenta ergeben Rot
• Zyan und Gelb ergeben Grün
• Rot und Zyan ergeben Blau

Webdesign und Farbe: Das CMYK-Farbmodell: die drei Grundfarben: Zyan (Cyan), Magenta, Gelb (Yellow) und die Mischergebnisse (© ilja-schlak.de)

Alle drei Farben überlappend ergeben hingegen Schwarz (blacK). In der Theorie zumindest. In der Praxis oder besser gesagt in der realen Welt wird das Schwarz niemals ein reines Schwarz sein. Daher wird beispielsweise in der Druckerei oder gar im Drucker Zuhause, im Büro den drei CMY-Farben, die Farbe Schwarz dazu gegeben. Nur steht das K nicht als letzter Buchstabe im Wort “black”, sondern für Keycolor (oder einfach Key).

Die Zugabe von Schwarz sorgt bei den Druckerzeugnissen für eine gewisse Tiefe und für Kontraste. Es macht natürlich auch Sinn, dass die Druckprozesse für rein schwarze Bereiche – wie Schrift zum Beispiel – nur die schwarze Farbe benutzen.

Bedeutung des CMYK-Farbmodells für das Webdesign

Weit verbreiteter Irrtum besteht darin zu sagen, dass man sich als Webdesigner nur mit den Farben des RGB-Farbmodells beschäftigen sollte. Es ist insofern falsch, da man seine Designs immer auch für Print optimieren sollte. Die Farben, die für das Webdesign verwendet werden, sollten auch mit der Printversion so gut es geht übereinstimmen.

Denn für ein erfolgreiches Unternehmen spielt die Corporate Identity eine wichtige Rolle. Die Hauptfarbe auf der Website sollte mit der im Briefkopf, auf der Visitenkarte, auf den Werbeflyer und ähnlichem übereinstimmen. Der RGB-Farbraum ist jedoch größer als der CMYK-Farbraum, daher sind auch hier Fachkenntnisse und ein gewisses Fingerspitzengefühl vonnöten.

HSB-Farbmodell – Drei Faktoren der Farbe: Farbton, Sättigung, Helligkeit

Neben dem RGB-Modell werden die Farben digital sehr oft und gerne mit dem HSB-Modell bestimmt. Das H steht für “hue” – englisch für Farbwert. Das S steht für “saturation” = Sättigung und schließlich B für “brightness” – Helligkeitswert.

Farbton (hue)

Hue oder Farbton lässt sich einfacher ausgedrückt als “Farbe” bezeichnen. Rot, Gelb, Blau, Grün etc. Diese Eigenschaft lässt uns also die Farbe Rot als Rot, die Farbe Grün als Grün und so weiter voneinander unterscheiden.

Im Grunde genommen können das alles Farben aus dem nachfolgenden Bild sein:

Sättigung (saturation)

Die Eigenschaft Sättigung beschreibt im Grunde genommen die Buntheit, die Kraft der Farbe. Mit der abnehmenden Sättigung erscheint die Farbe lebloser, matter, stumpfer. Eine hohe Farbsättigung verleiht der Farbe mehr Intensität. In der digitalen Bildbearbeitung, so wie im Webdesign, wird die Sättigung oft erhöht um aus matten und kraftlosen Motiven ein interessantes und intensives Bild zu erhalten.

Praxistipp:

Zu viel Sättigung in der Nachbearbeitung führt oft zu unnatürlichen Ergebnissen. Doch auch im Bereich Webdesign und Farbe gilt: Übung macht den Meister!

Wenn die Sättigung komplett herausgenommen wird, dann erhält man die Farbe Grau. Man kann sich die Sättigung also vorstellen wie eine Mischung aus reiner, voll gesättigter Farbe und der Farbe Grau.

Webdesign und Farbe: stufenweise reduzierte Sättigung der RGB-Farben (© ilja-schlak.de)

Helligkeit (brightness)

Schließlich die dritte und letzte Farbeigenschaft des HSB-Modells, die Helligkeit. Diese Eigenschaft ist dafür zuständig, wie hell oder dunkel eine Farbe auf uns wirkt.

Diese Wirkung wird durch die Zugabe entweder von Weiß oder Schwarz erzielt. Die Farbe mit einem hohen Schwarzanteil wirkt dunkler, während der hohe Weißanteil die Farbe heller erscheinen lässt.

Tipp

Beim Webdesign darf man nicht vergessen, dass die Farben an sich heller oder dunkler erscheinen können: das Orange wirkt auf uns heller als das Violett.

Wie wirkt Farbe auf uns? Farbe im Webdesign und in der Offline-Welt

Neben der Wirkung der Farben im Sinne der optischen Wahrnehmung, ist es sehr interessant, wie die Einzelnen Farben auf uns psychologisch und emotional wirken. Die psychologische Wirkung der Farben ist besonders wichtig im Hinblick auf das Webdesign und Konzeption der Website.

Es ist immer notwendig die Zielgruppe und das Ziel des Projektes im Auge zu behalten. Es gibt zwar bestimmte objektive Kriterien, die die Verwendung bestimmter Farbschemata für die eine oder andere Branche zu vermeiden raten, doch diese Kriterien sind eben nur Empfehlungen und es kommt immer auf die Situation, den Kunden, das Ziel des Projektes und die Zielgruppe an.

Neben den rein subjektiven Wahrnehmungen und Emotionen, die jeder Mensch im Laufe seines Lebens entwickelt hat, gibt es des weiteren historisch und kulturell erwachse Assoziationen zu den einzelnen Farben.

Tipp:

Farbe schafft Stimmung, Farbe ruft Emotionen auf, Farbe lenkt unsere Aufmerksamkeit. Benutzen Sie Farbe!

Rot – eine im Webdesign beliebte Farbe

Rot – eine Farbe, die auf uns die größte Wirkung entfaltet. Wir assoziieren mit dieser Farbe viele starke Emotionen und Gefühle, die oft sogar im Gegensatz zueinander stehen.

Rot steht für so vieles. Mit Rot verbindet man:

Leidenschaft und Liebe aber auch Gefahr und Hass. Rot steht für Blut, Krieg und Feuer aber auch Wärme, Nähe und Unruhe auf der anderen Seite.

Des weiteren gehört Rot zu den beliebtesten Farben im Logo-, Print- und Webdesign.

Webdesign und Farbe: Wirkung und Assoziationen mit der Farbe Rot (© ilja-schlak.de)

Gelb

Gelb – als hellste Grundfarbe –  ist die Farbe unserer Sonne und wird mit Licht, Heiterkeit, Fröhlichkeit und Energie in Verbindung gebracht.  Doch andererseits ist es die Signalfarbe für Gefahr und birgt etwas Negatives und Unsicheres in sich. Zu den weiteren Assoziationen zählt man Eifersucht Neid und Verlogenheit.

Webdesign und Farbe: Wirkung und Assoziationen mit der Farbe Gelb(© ilja-schlak.de)

Grün – beliebte Farbe, jedoch Vorsicht: im Webdesign kommt sie oft langweilig rüber

Grün ist eher eine neutrale Farbe mit vielen positiven Assoziationen. Es ist die grüne Ampel, die uns das gefahrlose Fahren signalisiert, es ist jemand, der uns für irgendein Vorhaben “grünes Licht gibt”.

Grün ist ferner die Farbe der Natur, der Pflanzen und dadurch des Lebens, der Hoffnung und der Lebenskraft.

Webdesign und Farbe: Wirkung und Assoziationen mit der Farbe Grün (© ilja-schlak.de)

Doch auch negative Assoziationen sind nicht zu vernachlässigen: Grün ist für uns oft die Farbe des Giftes, des Neides, der Unreife und der Passivität.

Tipp

Mit der Farbe Grün sollte man bei der Realisierung des Webdesign trotzdem vorsichtig sein. Zu viel Grün und monotone grüne Farbkombinationen sorgen oft für langweilige Designs. Mehr zum Thema Farbkombinationen für Webdesign finden Sie hier.

Blau – die beliebteste Webdesign Farbe im Jahre 2015

Blau assoziieren wir mit Wissenschaft, Fortschritt, Zuverlässigkeit und Seriosität. Desweiteren ist es die Farbe der Ferne und des Optimismus. Doch auch der Kälte und Sehnsucht.

Webdesign und Farbe: Wirkung und Assoziationen mit der Farbe Blau(© ilja-schlak.de)

Weitere Farben

Zu den psychologischen und emotionalen Wirkungen der einzelnen Farben und Farbkombinationen auf uns, wird es einen gesonderten Beitrag geben. Um diesen nicht zu verpassen, abonnieren Sie unseren Newsletter!

Farbe und Kontraste

Beim Webdesign, wie auch im Design allgemein, gilt es Kontraste zu schaffen! Die schönste Farbgebung wirkt oft leblos und langweilig, wenn es an Kontrasten fehlt.

Geschickt eingesetzte Farbkontraste können die Aufmerksamkeit des Besuchers auf einen bestimmten Bereich lenken.

Tipps zum Thema Farbe im Webdesign

• Setzen Sie die Kontraste zur Marketingzwecken ein!

• Lenken Sie die Aufmerksamkeit Ihrer Besucher gezielt auf Buttons, Produkte, Newsletter- und Kontaktformen!

Welche Kontraste man einsetzt, kommt natürlich auf die Situation und das übrige Design an.

Die Zielgruppe stellt folgerichtig das Hauptkriterium bei der Auswahl bestimmter Webdesign Tools dar. Das Gleiche gilt für die Kontraste. Im Nachfolgenden einige Bespiele:

Hell-Dunkel-Kontrast – iRd Webdesigns mit Farbe Akzente setzen

Der Hell-Dunkel-Kontrast ist wahrscheinlich der am meisten gesehene und benutzte Kontrast.

Eine (Grund) Farbe die auf uns am hellsten wirkt – Gelb – und die dagegen dunkelste Farbe – Blau – stellen den höchsten Hell-Dunkel-Kontrast der Grundfarben dar.

Tipp zum Thema Webdesign und Farbe:

Auch wenn dieser bunte Hell-Dunkel-Kontrast sehr intensiv ist, kann er trotzdem im Webdesign eingesetzt werden. Die Zielgruppe wäre ein modernes, junges und kreatives Publikum.

Übertroffen wird der Gelb-Blau-Kontrast durch die stärkste Ausprägung des Hell-Dunkel-Kontrastes, nämlich Schwarz-Weiß. Das ist mitunter auch der geläufigste Kontrast, der uns im Alltag nahezu überall begegnet: schwarze Schrift auf weißem Hintergrund.

Tipp

Einzusetzen, um ein seriöses, konservatives Publikum (“Ich glaube das erst, wenn ich es schwarz auf weiß sehe!”) zu erreichen, ein ernstes Thema zu beleuchten. Glaubwürdigkeit, Emotionslosigkeit und Sachlichkeit wird oft mit diesem Kontrast verbunden.

Webdesign und Farbe: Hell-Dunkel-Kontrast. Schwarz-graue Farbpalette mit einem Schuss Gelb. Das Gelb zieht unweigerlich unsere Aufmerksamkeit auf sich.
(© ilja-schlak.de)

Kalt-Warm-Kontrast

Die Farben wie Gelb, Rot, Orange wirken auf uns warm. Die Farben mit hohem Blauanteil  wirken hingegen kalt. Diese Wahrnehmungseigenschaften der Farben sollte man auch im Webdesign einsetzen. Die Verwendung kalter und warmer Farben sorgt für den sogenannten Kalt-Warm-Kontrast.

Webdesign und Farbe: Kalt-Warm-Kontrast.
(© ilja-schlak.de)

Tipps zum Thema Farbe und Webdesign:

• Kalt-Warm-Kontraste helfen Spannungsfelder zu erzeugen
• Sollen perspektivische oder räumliche Effekte geschaffen werden, so ist der Kalt-Warm-Kontrast ebenfalls die richtige Wahl

Bunt-Unbunt-Kontrast

Wie die Überschrift schon sagt, wird die Kontrastwirkung in diesem Falle mit Hilfe von bunten und unbunten, entsättigten Farben erreicht. Die Art von Kontrast hilft den Besucher auf eine bestimmten Punkt aufmerksam zu machen. Das wohl bekannteste Beispiel wäre ein Fernbedingung: der Ein- und Ausknopf hebt sich immer vom Rest der grauen oder schwarzen Fernbedienung mit einem satten Grün oder Rot ab.

Webdesign und Farbe: Bunt-Unbunt-Kontrast.
(© ilja-schlak.de)

Tipp

Nutzen Sie den Bunt-Unbunt-Kontrast unter anderem, um bei Ihrem Webdesign Buttons oder Schaltflächen mit bunter Farbe zu unterstreichen.

Simultankontrast

Weiterhin beliebt bei der Gestaltung von Schaltflächen und Buttons ist der interessante – auf optischer Täuschung beruhende – Simultankontrast.

Hier verändert sich die Wahrnehmung einer Farbe je nachdem, welche Farbe sie gerade umgibt. Die Farbe mit der größeren Fläche wirkt mit ihrer Komplementärfarbe auf die mit der kleineren.

Simultankontrast: Hier sieht man, wie die Farbe mit der größeren Fläche auf den grauen Quadrat wirkt. Die blaue Fläche auf “färbt” das grau gelblich, die gelbe Fläche färbt das Gelb bläulich, obwohl es sich in beiden Fällen um das 30%ige Grau handelt (#c9c9c9). (© ilja-schlak.de)

Komplementärkontrast – ein gefährlicher Farbkontrast für das Webdesign

Die Komplementärfarben (= Farben, die sich im Farbkreis gegenüber stehen) bilden einen sehr häufig angewandten Kontrast.  Doch dieser Kontrast ist sehr oft zu stark und muss demnach mit Vorsicht verwendet werden. Denn bestimmte Farbkombinationen sind schlicht und ergreifend unbrauchbar. Zum Beispiel: grüne Schrift auf rotem Hintergrund möchte man nun wirklich niemandem antun!

Praxistipp:

Auch bei all seiner Beliebtheit sollte dieser Kontrast mit Vorsicht, Übung und Fingerspitzengefühl angewandt werden.

Komplementärkontrast – ein starkes und kraftvolles Mittel. (© ilja-schlak.de)

Farbe-an-sich-Kontrast

Auch dieser Kontrast sollte dezent und mit Vorsicht eingesetzt werden, denn hier werden zwei gesättigte Farben kombiniert. Dadurch entsteht ein sehr starker und emotionaler Kontrast. Die Stärke des Kontrastes erhöht sich, wenn man die Grundfarben kombiniert.

Abhilfe schafft Benutzung von Mischfarben. Diese schwächen die Wirkung ab und sorgen für mehr Harmonie im Screendesign.

Farbe-an-sich-Kontrast. (© ilja-schlak.de)

Qualitätskontrast

Hier geht es darum, gesättigte, kräftige Farben mit Farben des gleichen Farbton aber mit geringerer Sättigung und unterschiedlicher Helligkeiten in Szene zu setzen. Man bekommt demnach die Möglichkeit die eine kräftige und satte Farbe durch den Einsatz derselben Farbtons aber mit dunklerer und entsättigter Farbe zu akzentuieren.

Obendrein ist es dank dieser Methode – Reduzierung der Sättigung und der Helligkeit – möglich, Farbpaletten zu entwerfen, die eine gewisse Ruhe und Harmonie in Ihr Webdesign bringen.

Tipp

Beim Einsatz des Qualitätskontrastes besteht die Gefahr eintönige und langweilige Ergebnisse zu bekommen, darum sollte man nicht nur mit der Sättigung, sondern auch mit Helligkeit experimentieren.

Der Beitrag Webdesign Farbe erschien zuerst auf Ilja Schlak InfoSec Blog.