In diesem Beitrag erfährst du: 

• worauf du bei der Website Schrift achten solltest

• wie man die richtige Schrift passend zu seiner Website auswählt

• welche Schrift du auf der Website gut kombinieren kannst, damit du sowohl einen individuellen Look als auch eine gute Lesbarkeit der Schrift erhältst

Warum ist die Schrift auf der Website so wichtig?

Die Schrift ist neben der Farbe und den Bildern das Erste, was der Besucher deiner Website wahrnimmt. Du hast also die Chance innerhalb von Sekunden deinen potenziellen Interessenten oder Kunden das richtige Gefühl zu vermitteln, Emotionen zu wecken und ein Szenario zu schaffen, noch bevor er den ersten Satz auf deiner Website liest. Denn eine Schrift kann OHNE, dass sie gelesen wird, über ihren Charakter bereits den ersten Eindruck vermitteln.

Eine Website besteht bis zu 95% aus Schrift.

Und prägt dadurch immens den Charakter deines Designs. Wählt man neben der richtigen Schrift auch die richtige Formatierung (dazu zählen Schriftgröße, Buchstabenabstand, Zeilenabstand und auch Farbe), dann schafft man eine gute Lese Struktur. Und die Website Besucher werden dazu animiert den Text auch wirklich zu lesen oder zumindest die Überschriften zu skimmen ( Fachwort für das Überfliegen der Texte..). Was letztendlich darüber entscheidet, ob der Website Besucher auch eine gewünschte Handlung auf der Website macht: Newsletter-Anmeldung, Termin buchen, Angebot anfragen, Produkt kaufen. 

Das alles passiert nicht, wenn er den Text nicht liest! 

>> Merke! Schlechte Schrift =  schlechte Lesbarkeit = kein Kauf

Eine richtig gewählte Schrift kann deiner Website:

• den richtigen Charakter vermitteln

• zum (Weiter-)Lesen einladen

• deinen Umsatz steigern bzw. überhaupt welchen bringen

• einen individuellen Touch verleihen und unverwechselbar machen

• zum positiven Branding deiner Marke beitragen

• identifizierend wirken

Worauf solltest du bei deiner Schrift für die Website achten: 

Ich sehe leider ganz oft Websites, die mit der Schrift auf Kriegsfuß sind. Ich denke, viele unterschätzen einfach den Stellenwert und Einfluss einer Schrift. Und zugegeben, für mich ist die Schrift die Königsdisziplin beim Branding. Es ist nicht einfach, eine gute Schrift zu finden, die sowohl den passenden Charakter hat, technisch sauber umgesetzt ist und auch eine gute Lesbarkeit mit sich bringt. 

Man kann durchaus mit der Schrift vieles falsch machen. 

Und damit du es besser machst, habe ich alles Wichtige, in diesem Blogartikel zusammengefasst.

Die 3 häufigsten Fehler bei der Wahl der Schriften für die Website:

1. Man nimmt einfach die Schrift, die das Theme (also die Design-Vorlage) mit sich bringt.

Wenn man mit einer Design-Vorlage, also ein sogenanntes Theme nutzt, dann übernimmt man auch immer die vorgegebenen Schriften. Logisch, denn das ist ja der Vorteil von Vorlagen, dass der Designer das vorgibt und man sich selbst darüber keine Gedanken mehr machen braucht.

Aber schaue dir bitte trotzdem die Schrift(en) immer genauer an. Bei Design-Templates wird der Fokus oft nur auf die Ästhetik gelegt. Die Schrift wird hier sehr plakativ eingesetzt, um ein Kunstwerk zu schaffen oder damit das Template einfach nur gut aussieht und sich verkauft. Sobald du aber deine eigenen Texte einsetzt und die Vorlage in real Life testest, funktioniert plötzlich das Look & Feel nicht mehr. Weil die Texte zu lang sind oder die Headlines z.B. über zwei Zeilen gehen - dann geht der schöne Look verloren. 

2. Man nimmt eine sogenannte System-Schrift

Das sind Schriften, die auf allen Websites funktionieren und auf jedem Computer vorinstalliert sind. Früher gab es da nur eine handvoll Schriften, die man nutzen konnte. So konnte man sicherstellen, dass die Website auch bei dem Endverbraucher so aussieht, wie du sie ursprünglich auch gestaltet hast. Und auch alles lesbar ist. Mittlerweile kann man fast jede beliebige Schrift nutzen, wenn man sie richtig einbindet oder auf Google Fonts zurückgreift. Wie du das machst, erkläre ich dir weiter unten genauer. 

3. Man nimmt einfach eine oder mehrere Schriften, die nicht zum Gesamtcharakter der Website bzw. deinem Charakter passen.

Das kann den Website Besucher extrem verwirren und so schnell zum Verlassen der Website bringen. Oft hat man den Fall, dass man ein Bild einsetzt oder eine Farbe und die dazu gewählte Schrift absolut einen gegensätzlichen Eindruck vermittelt. Dadurch wird im Gehirn ein Signal von Verwirrung und somit Unsicherheit getriggert, der Urinstinkt springt an und der Mensch flüchtet. Das ist seine Natur. Da kannst du nicht mehr viel machen. Außer eben darauf zu achten, dass der Charakter der Schrift zum Kontext passt.

So gehst du vor, um die richtige Wahl für deine Website Schrift zu treffen: 

1. Lege den Grundcharakter deiner Website Schriften über die 4 Schrift Kategorien fest

2. Wähle, welche 3-5 weiteren Charakterzüge dich und somit deine Schrift beschreiben

3. Prüfe, ob die Schrift technisch geeignet ist und ob die Schrift mehrere Schriftschnitte hat 

Schritt 1: Stelle fest, welche Schrift Kategorien zu dir passen und welche du kombinieren könntest

Ich unterscheide für die Website zwischen 4 verschiedenen Schriftkategorien:

1. Serifen Schriften
2. Serifenlose Schriften
3. Schreibschrift
4. Display Schrift 

Jede von ihnen hat einen Grundcharakter:

1. Serifen Schriften: 
2. Serifenlose Schriften: 
3. Schreibschrift:
4. Display Schrift: 

Was du auf jeden Fall berücksichtigen solltest, wenn du darüber nachdenkst, welche Schrift du nimmst.

Benutze so wenig Schriften wie möglich. Es sei denn, dein Charakter braucht mehr als eine Schrift.

Das kannst du mit Hilfe meines Design-Codes in meinem Branding Kurs herausfinden und so passende Schriftkategorien und Schriftkombinationen von mir ermitteln lassen. 

Theoretisch ist es möglich, mit nur einer Schriftart deine komplette Website zu gestalten und zu strukturieren. Möchtest du deiner Website noch mehr Charakter verleihen, dann solltest du noch eine Schrift dazu nehmen. Wichtig ist vor allem, dass du eine visuelle Hierarchie schaffst, damit man auch beim Überfliegen der Seite alles wichtige lesen kann.

Aber nicht jede Schrift Kategorie ist für jeden Charakter geeignet und nicht jede Schrift Kategorie lässt sich problemlos miteinander kombinieren.

Die Grundregel beim Kombinieren lautet: Maximal 2 Schriftkategorien miteinander kombinieren. Am einfachsten lassen sich serifenlose Schriften mit allen anderen kombinieren. Nummer 2 und 3 zusammen brauchen ein bisschen mehr Fingerspitzengefühl und von der Kombination einer Schreibschrift und Displayschrift sollte man eher die Finger lassen.

Solltest du dich mit Typografie auskennen, kannst du natürlich mehr als zwei Schriftarten miteinander mischen. Aber da braucht es ein wenig mehr Skills, daher kann ich dir das am Anfang nicht empfehlen. Just keep it simple - dann kannst du nichts falsch machen. 

Für die Copy, also den Lesetext deiner Website, sind lediglich die ersten beiden Kategorien geeignet.

Für Headlines und Zwischenüberschriften kannst du durchaus alle Kategorien nutzen, musst aber darauf achten, dass die Schrift gut lesbar ist und die Sätze nicht zu lang sind. Manche Schreibschriften sind zu verschnörkelt und dadurch nur schwer zu entziffern. Und was dem Gehirn zu lange dauert, wird nicht gelesen. Das Gehirn ist einfach zu faul dafür. 

Schritt 2: Beschreibe deinen Charakter und schau, welche Werte dir wichtig sind!

Welche Schrift für dich geeignet ist, kannst du ganz einfach in meinem Branding Kurs herausfinden oder folgendermaßen vorgehen. Schreibe einfach 3 bis 5 Charaktereigenschaften auf, die dich besonders gut beschreiben.

Von deinem Charakter kannst du 1 zu 1 auf den Charakter deiner Schriften schließen. Also schreibe erstmal auf, wie du eigentlich tickst. Und welche Eigenschaften dich besonders gut beschreiben. Die meisten tun sich schwer damit, denn sie kennen sich selbst nicht gut genug, sind zu bescheiden, haben Angst sich zu zeigen oder zumindest tun sie sich schwer damit auszuwählen, welche Eigenschaften sie eigentlich ausmachen und wo ihre Stärken und Talente liegen.

Sollte es dir auch schwer fallen, dich in 3 bis 5 Adjektiven zu beschreiben, dann kann es helfen, deine Kunden, Kollegen, Freunde und deine Familie zu fragen. 

• Was schätzen sie an dir? 
• Was kannst du besonders gut? 
• Welche Talente und Stärken sehen sie in dir? 
• Wofür loben dich deine Kunden, Freunde und deine Familie?

Hast du 3 bis 5 Adjektive festgelegt, dann überlege dir, was deine Eigenschaften zum Charakter der Schrift aussagen?

Da hilft es immer zwei Schriften nebeneinander zu vergleichen: Welche Schrift ist zum Beispiel eher großzügiger, gedrungener, klobiger, weiblicher, kindlicher, weicher, filigraner, härter..etc? 

Siehst du die Unterschiede? 

Nehmen wir ein konkretes Beispiel von meiner Kundin Franzi:

Franzi hat die Eigenschaften: großzügig, kraftvoll, Kumpeltyp, einfühlsam 

Bei Schriftarten eignen sich nicht alle Eigenschaften, um sie einer Schrift zuzuordnen. Aber die Adjektive "großzügig" und "kraftvoll" können einen Schriftcharakter sehr gut beschreiben. Auch Kumpeltyp und einfühlsam geben eine Tendenz an.

Für Franzi heißt das:

• großzügig > spricht gegen schmale Schriften, die gedrungen wirken. Schriften, die weit auseinander laufen und große Einschlüsse haben, wirken großzügig. Gleichzeitig lese ich daraus, dass das Design hier viel Raum braucht und man viele großzügige Abstände nutzen sollte und die Schrift auch groß sein darf. Großzügige Schriften sind außerdem sehr gut lesbar, was für mich schon die Wahl der Leseschrift der Website recht eindeutig festlegt.
• kraftvoll > spricht gegen zu dünne Schriften und Schriftschnitte, und eher für individuelle Schriften wie Schreibschrift und welche, die einen stabilen "Fuß" (im Fachjargon eine Serife) haben oder eher eine mitteldicke Stärke 
• Kumpeltyp > spricht für eine sehr persönliche Schrift, also eine Handschrift oder Handlettering-Schrift
• einfühlsam > spricht ebenso für eine Schreibschrift, aber unterstreicht die weibliche und zarte Note, also eine eher weibliche Handschrift hat, aber dennoch eher kumpelmäßig und weniger romantisch wirkt

So sieht die Schriftauswahl und -Kombination für Franzi aus: 

Du kannst mit dieser Methode dein komplettes Design für die Website bestimmen. Schau dir gerne diesen Blogartikel dazu an. Da habe ich das an Franzis Beispiel Schritt für Schritt beschrieben >>

Schritt 3: Prüfe, ob die Schrift technisch geeignet ist und ob die Schrift mehrere Schriftschnitte hat

Das kannst du insbesondere bei Google Fonts ganz schnell und einfach feststellen:

Du musst zwei Dinge prüfen:

1. Ob der Schrift Zeichensatz komplett ist - sprich alle Buchstaben, Satzzeichen und gängige Sonderzeichen auch vorhanden sind
2. Und ob es mehrere Schriftschnitte gibt, damit du deinen Text ordentlich formatieren kannst. Du brauchst für deine Leseschrift mindestens den Regular/Medium und einen Semibold oder Bold Schriftschnitt

Das kannst du vor allem bei Google Fonts einfach herausfinden. Gehe dazu auf Google Fonts und gebe dazu in dem Vorschau Feld alle Buchstaben und Zeichen ein und schau dir die Vorschau der Schrift an. 

Sollte ein Zeichen oder Buchstabe in der entsprechenden Schrift fehlen, wird es dir folgendermaßen angezeigt. Insbesondere das ß fehlt oft, oder das Ä, Ü und Ö. So wie hier: 

Im zweiten Schritt kannst du auch schauen, wie viele Schriftschnitte die Schrift hat. 

Bei Schreibschriften und Display Schriften reicht dir ein Schriftschnitt. Bei der serifen und serifenlosen Schrift sollte es mindest zwei, besser drei unterschiedliche Schriftschnitte geben. Bestenfalls: Light, Regular und Bold 

Ein weiterer Vorteil von Google Fonts ist, dass du die Schriften technisch einwandfrei auf der Website verwenden kannst. 

Man muss nur beachten, dass die Schrift richtig „eingebunden“ ist.

Das bewirkt, dass jeder Benutzer auch wirklich diese Schrift dargestellt bekommt, weil sie zentral auf dem Server liegt und diese Information auch richtig übermittelt. Sonst wird nur die Standard-Schrift eingeblendet, die typischerweise auf jedem Computer installiert ist. Heutzutage ist das allerdings kein Hindernis mehr, auch mal ausgefallene Schriften einzusetzen. Oder eigene Schriftarten zu benutzen.

Man kann sie auf zwei verschiedene Arten auf der Website integrieren.

Hier ein Auszug dazu aus Wikipedia:

Google Fonts bietet die Option, Schriften auf der eigenen Website zu nutzen, ohne dass diese auf einen eigenen Server hochgeladen werden muss. In diesem Fall wird beim Aufruf der Webseite durch einen Benutzer die Schriften über einen Google-Server nachgeladen. Dieser externe Aufruf bewirkt, dass Daten an Google übertragen werden. Es ist jedoch auch möglich, Schriften lokal auf dem eigenen Server bzw. Webspace einzubinden. Dafür müssen die verwendeten Google Fonts heruntergeladen und auf die eigene Website hochgeladen werden. Damit ist die Verbindung zum Google Server getrennt und die Informationsübertragung gestoppt.

Das bedeutet, dass man im Falle der ersten Option einen entsprechenden Passus in der Datenschutzerklärung haben sollte. Dazu gibt es Hilfe von Thomas Schwenke oder e-Recht 24. Dort kann man sich diesen Abschnitt kopieren und in seinen Datenschutz einfügen.

Wenn du jetzt also merkst, dass deine Website eine neue Schriftart gebrauchen könnte, dann hol dir gerne meinen Branding Kurs und finde heraus, welche Schriften zu dir und deinem Charakter besonders gut passen.

Fazit: Schrift ist ein sehr mächtiges Werkzeug.

Eine Schrift ist ausschlaggebend für das Erscheinungsbild deiner Website, und entscheidet darüber, ob ein Website Besucher auf der Website bleibt und eine von dir gewünschte Handlung ausführt. 

Merke: Wenn niemand deine Website liest, wird er auch nichts kaufen.

Deine Schrift drückt etwas über dich und dein Produkt oder deine Arbeit aus. Sie gibt (meist unbemerkt) Einstellungen, wie z.B. Modernität oder Rückständigkeit, neben den Informationen zum Thema weiter. Schrift polarisiert und erzeugt Stimmungen und Empfindungen beim Betrachter.

Mach also nicht Fehler deine Schriftwahl, dem System, dem Template oder dem Zufall zu überlassen. Wähle sie bewusst, passend zu dir und deinem Charakter und stimmig zum Kontext deines kompletten Designs. 

Was ist überhaupt authentisches Website Design? 

Hast du dich schonmal gefragt, warum manche Website Designs das gewisse Etwas haben und man sofort in ihren Bann gezogen wird, ohne wirklich zu wissen warum? 

Es ist eher ein Gefühl als eine konkrete Einschätzung. Man fühlt sich irgendwie direkt wohl oder empfindet es als aufgeräumt oder harmonisch. Oft höre ich in dem Zusammenhang auch die Aussage: "Es ist alles, wie aus einem Guss" 

Und oft gibt es natürlich auch die Websites, die eher "komisch" wirken und nicht "vertrauenserweckend" oder gar "zwielichtig".

Warum ist das so?

Und vor allem, warum kann man eine Website innerhalb von Millisekunden "abstempeln"? Ohne auch nur wirklich einen kompletten Satz gelesen zu haben oder den Menschen oder das Unternehmen dahinter zu kennen? Und trotzdem bereits entschieden haben: Hey, hier bin ich richtig und das ist genau der/die ich gesucht habe? 

Darauf gehe ich in diesem Beitrag ein und zeige dir am Ende an einem konkreten Beispiel, wie auch du es schaffst dein eigenes authentisches Website Design zu finden, damit deine Website in Zukunft eben dieses besondere Etwas ausstrahlen kann.

Authentisches Website Design bedeutet vor allem: 

• deine Website hat etwas Anziehendes und Magisches und die Besucher fühlen sich (emotional) innerhalb von Millisekunden angesprochen
• man hat sofort ein Gefühl dafür: Hier bin ich richtig. Es könnte genau das sein, wonach ich gesucht habe
• man kann sofort positive Eigenschaften fühlen wie harmonisch, vertraut, schön, klar, strukturiert usw. 

Wenn man noch tiefer geht, auf die darunter liegende und eher unbewusste Ebene, bedeutet authentisches Website Design für mich aber noch mehr.

Denn gleichzeitig weiß der Website Besucher folgendes:

• Er erkennt deine Werte und deinen einzigartigen Charakter und kann sofort entscheiden, ob du die für ihn wichtigen Werte mitbringst oder nicht. Er sieht sofort, ob es ein Match ist
• Es "liest", wie du tickst, was dir wichtig ist und wofür du stehst und kann das mit seiner Wertewelt abgleichen und entscheiden, ob sie sich genug überschneiden 
• und nicht zuletzt, kann dein Gegenüber sofort spüren, ob er dir vertraut oder nicht

Warum ist ein authentisches Website Design so wichtig? 

Während früher die Website eher als professionelle, digitale Visitenkarte (nach dem Motto: Mein Haus, mein, Auto, mein Boot..) galt, ist sie heute zu deinem besten Vertriebs- und Marketingtool geworden ( à la ausgeklügelte und personalisierte Vertriebsfunnel, die Tag und Nacht automatisiert Kunden bringen sollen). 

Aber auch die Bedürfnisse der Konsumenten haben sich verändert. 

Sie kennen die "Verkaufsmaschen" und suchen sich ihre Dienstleister und Produkte gezielt aus. Sie möchten nicht lange suchen, wissen schon oft ganz genau, was sie möchten, aber schauen gleichzeitig immer mehr darauf, wer eigentlich dahinter steckt. Gerade bei Dienstleistern, Coaches und Beratern wird es immer wichtiger, dass man sich sympathisch ist und "riechen" kann. Klar, Kompetenz setze ich hier eh voraus. Aber banal gesagt: Wenn du und ich im Kennenlerngespräch feststellen, dass wir beide begeisterte Hundeliebhaber sind und die gleichen Netflix-Serien lieben, dann ist das Band schneller geknüpft und das Vertrauen sofort da, weil hier das Anziehungsgesetz greift.

Ist dir das "Gesetz der Anziehung" bekannt? Wikipedia sagt hier folgendes: 

Als Gesetz der Anziehung (englisch law of attraction), auch Resonanzgesetz oder Gesetz der Resonanz, wird... die Annahme bezeichnet, dass Gleiches Gleiches anzieht...

Quelle: Wikipedia 

Was bedeutet das nun für dich beziehungsweise dein Website Design? 

Das bedeutet, wenn du es schaffst deinen unvergleichbaren Charakter und deine Persönlichkeit in deinem Website Design widerzuspiegeln, dann wirst du die Menschen anziehen, die dir ähnlich sind. Dadurch bleiben automatisch die Website Besucher "hängen", die sich von dir angesprochen fühlen, die dich sympathisch finden und auf Anhieb ein positives Gefühl bei dir haben. 

Warum kommt es hier vor allem auf das passende Design und nicht etwa die Texte oder eine gute Struktur der Website an? 

Das ist ganz einfach zu erklären. Unsere Wahrnehmung ist hier sehr stark auf visuelle Reize ausgelegt, denn von allem, was in unserem Gehirn ankommt und in Reize und somit Emotionen umgewandelt wird, kommt bis zu 83% über unsere Augen rein. Die restlichen Sinnesorgane sind evolutionsbedingt viel weniger ausgeprägt. 

Bei einer Website ist das sowohl Nach- als auch ein Vorteil. 

• Der Nachteil ist, das was du siehst, siehst du! Und das was du siehst, fühlst du!
  Jeder visuelle Reiz triggert nämlich, wie bereits in der Einleitung erwähnt,  ganz automatisch eine Emotion beim Betrachter. Und wenn dein Besucher im ersten Moment eher schlechte oder negative Emotionen, statt Freude, Spaß und Vertrauen empfindet, ist er zu 99% weg von deiner Website und schneller bei der Konkurrenz als du gucken kannst. Und kommt auch nicht so schnell wieder.
   
• Der Vorteil ist, dass du alle visuellen Reize bewusst über dein Website Design beeinflussen kannst. Du entscheidest also, was dein Besucher sieht und fühlt. 
  Deshalb ist dein Website Design ein mächtiges Tool, wenn du genau die richtigen Kunden für dich anziehen möchtest. Nämlich die, die deiner Wertewelt und deinem Charakter entsprechen. Jede Farbe, jede Schrift, jede Form und auch jedes Bild sind hier essenzielle Botschafter deiner Werte und helfen dir genau das Bild von dir zu spiegeln, welches Du auch von dir zeigen möchtest. Im besten Fall sollte das natürlich dein 100% authentisches ICH sein.

Wie findest du DEIN authentisches Website Design? 

Schritt 1: Beschreibe deinen Charakter und schau welche Werte dir wichtig sind!

Vor allem deine Charaktereigenschaften sind die Basis von allem! Also schreibe hier erstmal auf, wie du eigentlich tickst. Und welche Eigenschaften dich besonders gut beschreiben. Die meisten tun sich schwer damit, denn sie kennen sich selbst nicht gut genug, sind zu bescheiden, haben Angst sich zu zeigen oder zumindest tun sie sich schwer damit auszuwählen, welche Eigenschaften sie eigentlich ausmachen und wo ihre Stärken und Talente liegen.

Sollte es dir auch schwer fallen, dich in 5 bis 7 Adjektiven zu beschreiben, dann kann es helfen deine Kunden, Kollegen, Freunde und deine Familie zu fragen. 

• Was schätzen sie an dir? 
• Was kannst du besonders gut? 
• Welche Talente und Stärken sehen sie in dir? 
• Wofür loben dich deine Kunden, Freunde und deine Familie?

Authentisches Website Design Beispiel

Um das Ganze mal ein bisschen anschaulicher zu gestalten, gebe ich dir ein Beispiel von einer Kundin: 

Meine Kundin Franzi beschreibt sich selbst als:

• großzügig
• fürsorglich
• vorausschauend
• einfühlsam
• verantwortungsbewusst
• glaubwürdig
• Kumpeltyp
• kraftvoll
• strukturiert

Schritt 2: Sortiere die Eigenschaften und finde Gruppen

Der erste Schritt ist getan. Nun heißt es ein bisschen sortieren und möglichst ähnliche Eigenschaften in Gruppen zusammenzufassen. Es sollten bestenfalls 2 bis 3 Gruppen sein. Bei Franzi würde ich das folgendermaßen einteilen: 

Gruppe 1:  

• Kumpeltyp 
• großzügig
• fürsorglich
• einfühlsam
• glaubwürdig
• (kraftvoll)

Gruppe 2: 

• vorausschauend 
• strukturiert
• verantwortungsbewusst

Hier zeigt sich für mich, dass sie auf der einen Seite sehr sanft und emotional ist und gerne auf Augenhöhe wahrgenommen werden möchte. Auch sieht sie sich selbst eher als Kumpel und nicht als die Leistungserbringerin (auf Businessebene bezogen). Sie arbeitet gerne in einem eher freundschaftlichen Verhältnis. Außerdem bekommst man bei ihr stets große Zuwendung und Fürsorge. Sie hilft dir selbstlos und hat immer Verständnis für die Situation ihrer Mitmenschen. Kurz: Eine emphatische "Mit-mir-kann-man-Pferde-stehlen-Kumpel-Seele mit ganz viel Helfersyndrom. 

Auf der anderen Seite ist sie sehr strukturiert und denkt immer voraus. Und überlegt stets sehr bewusst, wie die nächsten Schritte aussehen und welche Konsequenzen das hat. 

Schritt 3: Leite Merkmale für deine Designelemente ab!

Hä, bitte was? Das klingt immer erstmal komisch, aber glaub mir, das ist ein entscheidender Schritt für dein individuelles Website Design. Jede Eigenschaft oder auch die Gesamtheit dieser, zeigt dir, welche Farben, Schriften, Formen und Bildstile zu dir passen. Die Kombination daraus ergibt deinen einzigartigen Branding Abdruck. 

Schauen wir uns das mal am Beispiel von Franzi an: 

Wir haben im letzten Schritt zwei Gruppen bei Franzi gefunden. Die erste Gruppe ist etwas gewichtiger, weil da einfach mehr Eigenschaften drin stecken. Also sind das unsere primären Werte, auf die wir uns erstmal konzentrieren.

1. Farben festlegen

Versuche dir nun die Eigenschaften einzeln vorzustellen und dazu passende Farben zu fühlen. Welche Farben kommen dir in den Sinn? Es ist nicht bei jeder Eigenschaft möglich, aber versuche es trotzdem. Gerne kannst du auch einfach googeln. Da gibt es ganz viel Hilfe im Netz, welche Farbe für welche Eigenschaft steht.

So sieht das im ersten Schritt bei Franzi aus:

Wenn man sich die Farben der Häufigkeit nach anschaut, dann geht es in Richtung Rosa, Beige und Gold. Weiß, Grün, Blau und Rot könnten begleitend oder akzentuiert eingesetzt werden. Oder beigemischt werden. 

Schaut man sich alle Farben im Kontext an, dann liegt hier der Fokus auf dem großzügigen und fürsorglichen Kumpeltyp. Was für mich das Gefühl von Wärme und gleichzeitig Bodenständigkeit widerspiegelt. Also auf warme und naturnahe Farben (also eher Erdtöne) schließen lässt. 

2. Welchen Charakter sollte deine Schrift haben? 

Das Gleiche machst du nun mit den Schriften. Was sagen dir deine Eigenschaften zum Charakter der Schrift? Da hilft es immer zwei Schriften nebeneinander zu vergleichen: Welche Schrift ist zum Beispiel eher großzügiger, gedrungener, klobiger, weiblicher, kindlicher, weicher, filigraner, härter..etc? 

Hier sind ein paar Beispiele:

Bei Schriftarten eignen sich nicht alle Eigenschaften, um sie einer Schrift zuzuordnen. Aber die Adjektive "großzügig" und "kraftvoll" können einen Schriftcharakter sehr gut beschreiben. Auch Kumpeltyp und einfühlsam geben eine Tendenz an.

Für Franzi heißt das: 

• großzügig > spricht gegen schmale Schriften, die gedrungen wirken. Schriften, die weit auseinander laufen und große Einschlüsse haben wirken großzügig. Gleichzeitig lese ich daraus, dass das Design hier viel Raum braucht und man viele großzügige Abstände nutzen sollte und die Schrift auch groß sein darf. Großzügige Schriften sind außerdem sehr gut lesbar, was für mich schon die Wahl der Leseschrift der Website recht eindeutig festlegt.
  
  
• kraftvoll > spricht gegen zu dünne Schriften und Schriftschnitte, und eher für individuelle Schriften wie Schreibschrift und welche, die einen stabilen "Fuß" (im Fachjargon eine Serife) haben oder eher eine mitteldicke Stärke 
  
  
• Kumpeltyp > spricht für eine sehr persönliche Schrift, also eine Handschrift oder Handlettering-Schrift
  
  
• einfühlsam > spricht ebenso für eine Schreibschrift, aber unterstreicht die weibliche und zarte Note, also eine eher weibliche Handschrift hat, aber dennoch eher kumpelmäßig und weniger romantisch wirkt

Hier siehst du die 4 Basis-Schrifttypen: Die Serifenschrift, die serifenlose Schrift, die Schreibschrift und die Displayschrift. 

3. Wie sieht es nun mit den Formen und Bildern aus? Und der grundsätzlichen Gestaltung der Website?

Da ist jetzt durchaus ein bisschen Fantasie gefragt, aber man kann vieles schon ausschließen oder auch einen gewissen Rahmen setzen. 

Der Einfachheit halber reicht es für dich hier im ersten Schritt einfach nur zwischen weiblicher und männlicher Formwirkung zu unterscheiden und danach deine Eigenschaften zu gruppieren. Und das gibt die erste Marschroute vor.

Bei Franzi fühlen sich diese Werte sich eher weiblich an:  

• großzügig
• fürsorglich
• einfühlsam

Diese Werte eher männlich: 

• Kumpeltyp 
• großzügig
• (kraftvoll)
  
  Würde man jetzt rein die Formen betrachten, wäre es sehr ausgeglichen zwischen männlich und weiblich. Bedeutet also, eine gute Balance zwischen beiden Formen zu finden.
• Einfühlsam deutet auf weichere und fließende Formen wie lockere Linien, Wellen oder natürliche und organische Formen hin.
• Fürsorglich heißt zwar beschützend, aber nicht einengend. Daher wäre es gut Rahmen zu nutzen, aber diese nicht komplett zu schließen, damit sie einen nicht einengen. 
  
  

Die Bilder sollten viel Natur- und Außenaufnahmen zeigen. 

Das mache ich hauptsächlich an der Großzügigkeit und dem Bodenständigem vom Kumpel fest:  > grün (großzügig und fürsorglich), beige (Kumpel und Freund)  und Erdtöne (bodenständig). Die Motive können auch entweder sehr kumpelhaft, fürsorglich oder einfühlsam rüberkommen

Hier ein Beispiel der Bildauswahl für Franzi: 

Zusammenfassend kann man folgendes für das Website Design von Franzi festhalten:

• Das Design braucht viel Platz (großzügig) und daher sollte man eher helle Flächen nutzen und große Abstände lassen zwischen den einzelnen Elementen und Abschnitten
• die Farben Rosa, Beige und Gold prägen das Design, ohne zu sehr ins weibliche zu gehen (Da steht nämlich der Kumpeltyp und das kraftvolle und strukturierte dagegen. )
• man kann mit kraftvollen Akzenten arbeiten ( vielleicht bei den Aktion-Buttons? oder in den Bildern?) 
• weibliche Schreibschrift, aber nicht zu viel Schnörkel
• als Leseschrift eine großzügige Schrift (vielleicht mit Serifen) 
• die Schriftgröße darf hier ruhig eher größer ausfallen
• fließende und weiche, eher frei gezeichnete organische Formen, aber gute Balance zwischen männlich und weiblich
• keine geschlossenen Rahmen oder Dinge, die geschlossen wirken oder einengen
• Bildmotive eher freundschaftlich, fürsorglich, einfühlsam - möglichst viele Natur- und Außenaufnahmen 
  
  

Schauen wir uns mal an, wie das nun umgesetzt bedeutet:

Entwurf der Startseite

Hier kannst du das Website Design von Franzi fertig ansehen. Die Website ist bereits online >>

So, da sind wir auch schon am Ende und du hast nun eine Anleitung, wie du ein absolut authentisches und individuelles Website Design für dich kreieren kannst. 

Hier sind nochmal die Schritte im Überblick:

1. Schreibe max. 10 Charaktereigenschaften aus, die dich am besten beschreiben
2. Sortiere sie in sinnvolle Gruppe (max. 2 bis 3) 
3. Fokussiere dich auf die Eigenschaftsgruppe, die mehr Eigenschaften in der Gruppe hat
4. Schreibe auf, was dir diese Eigenschaften im Kontext noch sagen und verraten
5. Leite nun von diesen Eigenschaften passende Farben, Schriften, Formen und Bildmotive ab

Was ist überhaupt ein Slider?

Sicher kennst du diese Art der Elemente auf der Website, wo das Bild im Header automatisch wechselt? Meist sind es 3-4 verschiedene Bilder mit Headlines und einem Button oder Link. Und der Slider wechselt dann alle paar Sekunden. Und wiederholt sich endlos. Das nennt man Slider oder auch Karussell. Man nutzt sie oft direkt zum Einstieg, um dem Nutzer möglichst schnell eine Übersicht des Portfolios oder des aktuellen Angebots zu geben. Und da liegt das große Problem.

Wenn der Nutzer auf deine Website kommt, möchte er nicht von einem Marktschreier überfallen werden. Und Slider sind in unserer digitalen Welt nichts anderes. Du bietest im Prinzip alles gleichzeitig an. Laut und aufdringlich schreist du ihm deine Angebote entgegen, ohne dass er danach gefragt hat.

Der Besucher will aber eigentlich zunächst herausfinden:

• Bin ich hier richtig?
• Was wird mir hier konkret angeboten?
• Und was habe ich davon?

Nutze auf keinen Fall einen Slider für den Einstieg auf deiner Website. Er hat den falschen Fokus.

Warum gibt es Slider dann überhaupt?

Die ersten Slider kamen ca. 2007 auf. Damals waren viele Websites noch komplette Textwüsten und plötzlich war es dem Webdesigner möglich recht unkompliziert und ohne viel Aufwand emotionale und bildgewaltige Websites abzubilden. Das war definitiv etwas, was die damaligen Besucher eingefangen hat, weil es neu, spannend und emotional war.

Mittlerweile kommen alle WordPress-Seiten (aber auch andere) schon mit einem Slider daher. Sie sind für jeden mit einem Klick zu installieren und leicht befüllbar. Daher kommt inzwischen fast jede Website standardmäßig mit einem Slider im Header daher.

Warum das aber deiner Website eher schadet, möchte ich dir nun erklären:

Es gibt gute Gründe, warum du keine Slider auf deiner Website einsetzen solltest:

1. Slider sind out und jeder nutzt sie

Slider sind überall. Egal ob Onlineshop oder Image-Website, sie werden nahezu flächendeckend überall eingesetzt. Weil es „cool“ ist und weil man „ein wenig Dynamik“ auf die Website bringen möchte. Fast jede zweite Website nutzt einen Slider im Header, aber ohne wirkliche Relevanz für den Nutzer.

Und da ist auch schon das Problem. Niemand denkt wirklich darüber nach, wie man einen Slider sinnvoll nutzen könnte. Sondern versucht so viel Informationen wie möglich in kürzester Zeit beim Besucher abzuladen, denn schließlich muss er ja die komplette Produktpalette sofort präsentiert bekommen, bevor er die Aufmerksamkeit verliert. Im Gegenteil. Je mehr Information, desto weniger Aktion. Weil der Mensch bei zu vielen Möglichkeiten eher gar keine Entscheidung trifft.

2. Entspricht nicht unserem angeborenem oder gelerntem Konsumverhalten

Es gab mal ein Experiment im Supermarkt. Man baute zwei verschiedene Stände mit Marmeladengläsern auf. Bei dem ersten Stand waren 6 Marmelandengläser  aufgestellt, beim zweiten Stand waren es 24 Marmeladengläser. Am ersten Stand haben 40% und am zweiten Stand 60 % der vorbeigehenden Menschen angehalten. Überraschenderweise haben am ersten Stand 30% von 40% gekauft und am zweiten Stand nur 3 % von 60%. Das zeigt uns, dass wir zwar immer davon ausgehen, dass unsere Kunden viel Auswahlmöglichkeiten haben möchten und alle Infos auf einmal, aber genau das Gegenteil der Fall ist.

Zu viele Möglichkeiten führen dazu, dass sie sich gar nicht entscheiden (können). Hier kann man also sagen, dass weniger Auswahlmöglichkeiten definitiv erfolgsversprechender sind.

Quelle: Human Factors International, 7 principles that make your website more engaging, Video 

Oder ein anderes Beispiel. Du möchtest dir eine Currywurst am Imbiss holen. Du hast zwei Buden zur Auswahl. An dem ersten Imbisswagen steht eine längere Schlange, an dem zweiten Imbisswagen steht niemand. Wo stellen sich 90% der Menschen an? Richtig! Da wo viele andere Menschen stehen. Denn der typische Käufer denkt: Wenn der Andrang so groß ist, dann ist die Currywurst wohl sehr gut. Das ist der sogenannte Herdentrieb. Wir möchten nichts verpassen und gehen immer mit der Masse.

Das sind nur zwei Beispiele, wie unser Gehirn unsere Entscheidungen unterbewusst beeinflusst. Mittlerweile ist es wissenschaftlich belegt, dass bis zu 95% unserer Entscheidungen unbewusst entschieden werden, und dann aber auf der rationalen/bewussten Ebene argumentiert oder begründet werden. 

3. Die Statistik zeigt, dass sie überhaupt nicht gelesen werden

Die Nielsen Norman Group fand bei einer Studie heraus, dass große Slider-Elemente ignoriert werden, weil sie wie Banner aussehen. Und wir den Aufbau eines solchen Sliders oft als aufdringliche Werbung empfinden.

Und die University of Notre Dame hat bei einer Studie festgestellt, dass nur 1 bis 2 % der Nutzer einen Slider anklickten, obwohl das der prominenteste Bereich auf der Website war. Nämlich above the fold, den Bereich, den der Nutzer als Erstes sieht. Und von diesen 1 bis 2% klickten auch nur 84 % auf den zweiten Slider. Weitere Slider wurden fast vollständig ignoriert.

Es macht auch keinen Unterschied, welche Art von Website man hat. Dass Slider für keinen Zweck wirklich funktionieren zeigt Harrison Jones von der Digital Marketing-Firma MWI. Er wertete die Klickraten für drei verschiedene Websites aus, mit denen seine Firma zusammengearbeitet hatte. Jede Website nutze Slider für einen anderen Zweck. Alle drei hatten sehr niedrige Klickraten, die von 0,65% bis zu 0,16% reichten.

Der erste Slider wurde für reines Branding eingesetzt. Die zweite Website nutze den Slider, um für Webinare zu werben und die dritte Website bewarb damit ihre Dienstleistungen. Wie man in der Tabelle sieht, klickte kaum jemand auf die Slider.

Quelle: www.searchengineland.com

4. Sie sind schlecht für das Ranking und die Suchmaschinenoptimierung

Slider machen die Website langsamer. Viele große Bilder, gerade am Anfang der Seite kosten sehr viel Zeit. Das macht die Seite extrem langsam. Und je länger deine Besucher auf irgendwas warten, desto höher ist die Wahrscheinlichkeit, dass sie wieder abspringen. Das erhöht die Absprungrate. Was wiederum Google schlecht bewertet und dich im Ranking abstuft.

Zudem wissen die Meisten nicht, wie man die Slider suchmaschinengerecht anlegt. Jede Einzelseite auf einer Website darf z.B. nur eine H1 Überschrift haben. Viele machen den Fehler, dass alle Slider jeweils ein H1 Element haben. (Meist schon so voreingestellt oder gar nicht erst editierbar für den Nicht-Programmierer.) Das bedeutet, dass du unter Umständen 3 H1-Überschirften hast, wenn du 3 Slider im Header hast. Das mag Google gar nicht und bewertet dein SEO schlecht.

5. Slider sind nicht geeignet für Smartphones

Immer mehr Websites werden über das Handy aufgerufen. Dort hat man eine wesentlich kleinere Bildfläche und somit sind Slider natürlich sehr klein abgebildet. Was wiederum bedeutet, dass z.B. der Text gar nicht mehr innerhalb des Bildes platziert werden kann, weil man das Bild im Hintergrund nicht mehr erkennt.
Das heißt, dass man meist noch zusätzlich eine mobile Variante gestalten muss und den Inhalt vom Slider in Text und Bild unterteilen muss. Spätestens hier muss man sich für einen Slider entscheiden. Welchen Effekt hat dann ein Slider noch?

Zudem wird auf dem Handy gewohntermaßen von oben nach unten „gewischt“. Das „swipen“ von links nach rechts ist eher unnatürlich und ungewohnt. Was die Nutzung sehr unintuitiv macht. Und die Wahrscheinlichkeit, dass sich jemand die Slider anschaut, geht fast gegen Null.

6. Der Nutzer möchte zu jeder Zeit die volle Kontrolle

Der Nutzer ist ungeduldig und möchte schnell die Information, die er sucht. Er wird sich also nicht vor den Bildschirm setzen und ganz geduldig abwarten, bis er alle Slider gelesen und erfasst hat. Im Gegenteil. Wird er nicht innerhalb von 3 bis 5 Sekunden verstehen, um was es auf deiner Website geht, dann ist er wieder weg und geht zur Konkurrenz.

Zudem will der Nutzer zu jeder Zeit selbst entscheiden wann und wie schnell er klickt, liest oder wieder geht. Er möchte die Kontrolle haben und möchte auch wissen, was als nächstes passiert. Wenn die Slider zu schnell rotieren, wird er unter Umständen nicht schnell genug lesen können. Sind die Slider zu langsam, verliert er die Geduld. Man kann hier nicht allen gerecht werden. Besser wäre es dem Nutzer zu überlassen, wie schnell er weitersliden kann. Jede automatische Rotation nimmt dem Nutzer die individuelle Nutzerfreiheit.

7. Slider empfinden die Menschen zu werblich und redundant

Sobald wir ein rotierendes Bild sehen, nehmen wir es als Werbung war. Wir haben gelernt, dass solche Elemente meist irgendwelche Angebote als Banner anzeigen. Und daher ignorieren wir gerne solche Elemente. Der Aufbau ist zudem wirklich sehr werblich und plakativ. Was diese Empfindung zusätzlich bestärkt. Diese Heatmap zeigt, dass die meisten Besucher entweder auf das Submenü schauten, was den Slider überlagert oder direkt unter den Slider schauen.

Quelle: Orbitmedia

Wie kannst du deine Besucher stattdessen abholen?

Nutze statische Fotos mit einem emotionalen Nutzenversprechen. Der Besucher sollte also in kürzester Zeit verstehen, welches unwiderstehliche Ergebnis er bei dir bekommt.

Folgende 3 Dinge könnten dir dabei noch helfen:

1. Geschichten und Emotionen:

Versuche mit dem Bild und der kurzen Headline dazu eine Geschichte zu erzeugen bzw. Emotionen zu wecken. Es geht oft darum den Schmerzpunkt deines Besuchers zu treffen. Dazu solltest du natürlich vorher rausfinden: Was ist sein größtes Bedürfnis und was ist sein größter Schmerzpunkt?

Finde es raus und versuche ihm dieses Dilemma vor Augen zu führen. Klingt jetzt fies, aber du musst nochmal in der Wunde bohren, damit du ein Gefühl bei ihm auslöst. Damit es ihm so unangenehm wie möglich wird und er sofort eine Lösung dazu haben möchte. In dem Fall deine, die du natürlich auch im Header erwähnst oder direkt darunter.  Du kannst auch direkt die Lösung abbilden und ihm ein gutes Gefühl vermitteln, damit er Sehnsucht danach bekommt. Blöderweise reagiert unser Gehirn besser auf Gefahr und Angst. Daher funktioniert die erste Option oft besser.

Quelle: Christina Ehms 

2. Kraft der Gesichter:

Es gibt im Gehirn ein Areal, dieFusiform Facial Area (FFA), der NUR menschliche Gesichter verarbeitet. Unser Gehirn ist quasi auf Gesichter programmiert. Daher solltest du im Header möglichst Gesichter abbilden. Wenn du eine Personenmarke bist, dann solltest du ein Bild von dir wählen. Am besten funktioniert es, wenn die Person auf dem Bild einen direkt anschaut. Untersuchungen haben ergeben, dass wir uns bei Gesichtern am ehesten auf die Augen konzentrieren.

Quelle: Haux Marketing 

3. Essen, Sex oder Gefahr:

Wie in Punkt 1 schon erwähnt reagieren wir eher auf Gefahr als auf „schöne Bilder“. Zudem sind wir jeher auf das Überleben programmiert. Das bedeutet, dass wir auf fressen und nicht gefressen werden und fortpflanzen programmiert sind. Das sind unsere Urinstinkte, wie man so schön sagt. Diese Themen sind also meist unbewusst mächtige Auslöser für unser Gehirn.

Quelle: adidas 

Mittlerweile wird ein Moodboard meist aber digital erstellt, was natürlich noch wesentlich schneller geht.

Der einfachste Weg ist, du nutzt einfach ein Programm, mit dem du dich auskennst und wo man Bilder und Texte einsetzen und frei anordnen kann. Es ist also auch mit Word oder PowerPoint ganz einfach umzusetzen. Gerne kannst du dafür auch Apps oder Design-Programme nutzen. Wie z.B. Adobe InDesign.

Ich kann dir Canva dafür ans Herz legen.

Canva ist eine Grafikdesign-Plattform, mit der man Grafiken, Präsentationen, Poster, Dokumente und andere visuelle Inhalte für soziale Medien oder die Website erstellen können. Man kann aus vielen professionell gestalteten Vorlagen auswählen, die Designs bearbeiten und auch eigene Fotos hochladen. Die Plattform ist in der Basisvariante kostenlos.

Wie macht man selbst ein Moodboard?

So gehst du vor:

Ein digitales Moodboard zu erstellen ist ziemlich unkompliziert. Es gibt hier auch sehr viele unterschiedliche Wege und du musst schauen, was für dich am besten zu deinem Work-flow passt. Ich zeige dir den Weg, den ich gehe. Probiere es einfach mal aus, ob es für dich auch klappt.

Zunächst muss man ganz viele Bilder sammeln. Aber woher weiß ich wonach ich suchen soll?

Schritt1:
Alles basiert auf deinen Werten. Schreibe dir zunächst Charaktereigenschaften auf, die dich beschreiben und die deine idealen Kunden von dir wahrnehmen sollen.

Beispiel: strukturiert, kreativ, methodisch, organisiert, pragmatisch, ehrgeizig, ehrlich, authentisch, flexibel, pfiffig, perfektionistisch, lösungsorientiert

Schritt 2:
Versuche dich auf 5 davon zu beschränken.

Beispiel: strukturiert, kreativ, authentisch, pfiffig, lösungsorientiert

Schritt 3:
Diesen Begriffen ordnest du nun passende Farben zu (den Schritt kannst du auch später noch machen, aber wenn du schon eine Farbpalette hast, hilft es dir bei der Bilderauswahl nachher)

Beispiel: kreativ = türkis, orange | authentisch = braun, sand | pfiffig = lila, türkis | lösungsorientiert/praktisch = grau | strukturiert = türkis

Schritt 4:
Danach schreibst du dir zu jeder Charaktereigenschaft alles auf, was dir dazu einfällt. Ganz klassisches Brainstorming. Aber werde dabei ruhig kreativ und abstrakt. Nimm Abstand vom Buchstäblichen und werde symbolischer, mit Bildern, die als visuelle Metaphern fungieren. Zum Beispiel ein schnelles Auto für „schnell“, ein Tiger, der synonym für „Wildheit“ ist, ein Schloss, das für „Sicherheit“ steht oder Mineralwasser, um „Erfrischung“ darzustellen.

Beispiel: strukturiert = Schachbrett, Fingerabdruck, Feder, Blatt, Iris, Pixel, Gehirn, Stoff, wiederholend, gleichmäßig, symmetrisch, spießig, Technik usw. 

Schritt 5:
Wenn du genug Begriffe gesammelt hast, dann kannst du loslegen und bei einer oder mehreren Bilderplattformen deiner Wahl die Begriffe eingeben und nach Bildern suchen.

Ich nutze gerne shutterstock und unsplash, aber auch Canva und Pinterest bei der Suche.

• Shutterstock hat neben Fotos auch eine sehr breite Palette an Illustrationen und Vektorgrafiken, Mustern und auch Hintergrundbildern.
• Bei Unsplash findet man tolle Stimmungsbilder, mit sehr hohem, fotografischen Anspruch.
• Canva ist ähnlich wie Unsplash, hat aber auch tolle Icons und Collagen etc.
• Pinterest bietet viel Inspiration, was das Design angeht, hat aber weniger Fotos.

Was machst du nun mit den Bildern?

Du kannst sie ganz klassisch erst einmal in einem Ordner auf deinem Computer sammeln.

Oder auch ein hilfreiches Tool nutzen. Es nennt sich niice. Damit kannst du in deinem Browser (am besten funktioniert Chrome) ein Add-on installieren und dann von jeder Bilderplattform aus, das Bild per Drag & Drop in Niice ziehen. Damit sparst du dir ein paar Mausklicks.

Wenn du alle Begriffe durch hast und denkst, dass du genug Material hast. Dann kannst du nun mit Canva weitermachen.

Bei Canva findest du bereits vorgefertigte Moodboard-Vorlagen. Gerne kannst du dir auch eine eigene erstellen. Wie so ein Moodboard aussehen kann, kannst du dir hier sehen.

Ich habe dir ein paar weitere Beispiele in Pinterest zusammengestellt. Lass dich gerne davon inspirieren.

Nun kannst du deine gesammelten Bilder in Canva hochladen und versuchen sie in dem Moodboard anzuordnen. Vergiss nicht deine Farben dort auch einzufügen.

Worauf solltest du beim erstellen vom Moodboard achten?

Konzentriere dich auf deine Botschaft. Verwende keine Bilder oder Wörter, nur weil du sie magst. Jedes Mal, wenn du etwas zu deinem Moodboard hinzufügst, frage dich „Kommuniziert dies meine Marke?“ und „Ist dies etwas, was meiner Zielgruppe gefallen würde?“

Bei jedem Element, was du auf dein Moodboard ziehst, solltest du dich fragen:

• Passt es zu meinen Werten
• definiert es auch deine Marke
• spricht es meine Zielgruppe an

Beispiel Blumen: Du findest ein schönes Blumenbild, was deine Natürlichkeit unterstreichen könnte. Spricht es aber auch deine Zielgruppe an? Wenn du eher Männer als ideale Kunden hast, dann wird das Bild vermutlich nicht deine gewünschte Wirkung haben. Und du musst überlegen, wie der Begriff Natürlichkeit mit deiner Marke in Verbindung steht. Warum bist du natürlich? Was steckt dahinter? Bist du authentisch, dann solltest du vielleicht eher dezent geschminkte Personen abbilden und keine Hochglanzmodels (was ich sowieso hinterfragen würde). Oder du nutzt viele geschwungene Formen und Muster, also naturgegebene Formen für die Gestaltung. Auch deine Farben sind dann eher dezent und nicht so aufdringlich. Z.B. ein Wald-Grün, Brauntöne und Beige.

Fazit:

Ein Moodboard hilft dir deine Idee visuell zu beschreiben. Damit sparst du dir viele Worte und vor allem Zeit und Geld. Bevor du also dein Design für die Website komplett ausarbeitest, solltest du mithilfe eines Moodboards prüfen, ob der Look & Feel zu dir und deiner Zielgruppe passt. Dafür musst du kein Designer sein, denn dafür brauchst du wirklich nur sehr wenige Vorkenntnisse und auch keine teuren Grafikprogramme.

Für den Erfolg deiner Website bzw. deinem Erfolg ist es wichtig, dass du die richtigen Produkte anbietest. Und zwar solche, die deine potenziellen Kunden sich wirklich wünschen und brauchen.

Aber wie findest du denn heraus, welche Angebote oder Produkte es konkret sein sollen?

Anfang 2020 stand ich auch an dem Punkt, dass ich zwar Angebote hatte, aber sie noch nicht wirklich funktioniert haben. Ich hab viele Dinge probiert, geändert und immer wieder überlegt, was ich noch anbieten sollte. Es gab einen Online-Tageskurs, es gab ein Webinar und auch einen Website-Check hatte ich entwickelt und angeboten. Aber irgendwie hat sich niemand dafür interessiert.

Also ging ich auf die Suche nach den „Fehlern“. Woran liegt es? Ist es zu teuer? Ist das Angebot nicht konkret genug? Ist es die falsche Zielgruppe? Fragen über Fragen. Aber wie bekommt man Antworten?

Um das herauszufinden habe ich mir Karin Cvrtila von TILADIGITAL an meine Seite geholt. Karin hat über 30 Jahre in der Marktforschung gearbeitet und kennt sich mit Zielgruppen und Analysen richtig gut aus.

Dank Karin hab ich meine Zielgruppe nun fest vor Augen und kann endlich wirklich passende Produkte für sie anbieten.

Wie wir dabei vorgegangen sind und was daraus konkret entstanden ist, haben wir in einem kleinen Interview nochmals reflektiert.

Wenn du also mit deiner Zielgruppe noch schwankst und nicht weißt, was genau sie haben möchten, und mit welchem Angebot du ihnen konkret helfen kannst? Dann solltest du dir das Interview mal anschauen:

Möchtest du auch rausfinden, welches Angebot deine Zielgruppe braucht?

Dann kann ich dir Karins Programm „Was Kunden wollen“ sehr ans Herz legen. Alle Infos dazu findest du auf ihrer Website. Hier klicken >>

Welche Farben passen zu dir und deiner Website?

Wann immer ein Interessent deine Website besucht, löst das ein ganz bestimmtes Gefühl in ihm aus. Du kannst nicht nicht kommunizieren. Unbewusst werden immer, und ich meine IMMER, Emotionen, Gefühle oder Assoziationen von deinem Besucher wahrgenommen. Ob sie nun positiv oder negativ ausfallen, und vor allem ob man dich im richtigen Licht sieht, kannst du bewusst steuern.

Die Farben deiner Website haben ganz besonders großen Einfluss darauf, wie du wahrgenommen wirst.

Denn Farben und die menschliche Erfahrung mit Ihnen haben sich tief in unser kulturelles Verständnis eingebrannt.
Sie enthalten Informationen, die das gesamte Denken, Fühlen und Handeln von Menschen unbewusst prägen und steuern. Daher haben Farben und die hierdurch ausgelösten Assoziationen großen Einfluss, wie du auf deiner Website wahrgenommen wirst. Sie können Markenimages aufbauen und verstärken, vorausgesetzt, sie werden richtig im Sinne der beabsichtigten Informations- und Emotionsvermittlung eingesetzt. – Eine falsch gewählte Farbe reduziert hingegen die wahrgenommenen emotionalen und faktischen Angebotsleistungen sowie die Umsätze.

Um die richtige Wirkung mit den Farben deiner Website zu erzielen, habe ich eine ganz bestimmte Vorgehensweise: 

Du musst herausfinden, welche Farben deinen Charakter widerspiegeln und deine idealen Kunden von dir wahrnehmen sollen?

Welche Werte möchtest du mit deiner Website vermitteln?

Das ist gar nicht so einfach, denn unbewusst verknüpfen wir zwar immer eine Assoziation mit einer Farbe. Aber wir machen uns das nicht zunutze und unterschätzen die Wirkung.

Wie gehst du also vor, um die passenden Farben für deine Website zu finden?

Schritt 1:

Finde heraus, welche Farben deinen Charakter unterstreichen!
Dafür musst du erstmal beschreiben wie du tickst. Schreibe emotionale Adjektive auf, die dich beschreiben. Schreibe so viele auf, wie dir einfallen. Du kannst auch gerne Freunde, Verwandte und Kollegen bitten dich zu beschreiben. Sich selbst zu beschreiben, fällt nicht immer leicht. Daher lass dir Zeit und vervollständige die Liste in Ruhe.

Schritt 2:

Wenn du genug gesammelt hast, kannst du nun überlegen, welche Eigenschaften davon dir besonders in Bezug auf deine Arbeit und Arbeitsweise wichtig sind. Geh deine gesammelten Adjektive nochmal durch und schreibe die Eigenschaften auf, die darauf zutreffen.

Schritt 3:

Als nächstes wählst du aus diesen Adjektiven maximal 5 Eigenschaften aus, die deine idealen Kunden mit dir und deiner Marke in Verbindung bringen sollen.

Schritt 4:

Diese Eigenschaften ordnest du dann Farben zu. Versuche dabei deinem ersten Impuls zu folgen und einfach aufzuschreiben, welche Farb-Assoziationen du z.B. zu der Eigenschaft „kreativ“ hast. Manchmal hat man mehrere Farbassoziationen zu einem Begriff. Das macht nichts. Trotzdem erstmal notieren. (Wenn du dir nicht sicher bist, ob du das richtig machst, komme gerne in mein LIVE Webinar. Mehr dazu >>)

So könnte das zum Beispiel aussehen: 

Schritt 5:

Nun geht es an die Auswertung:
Sortiere die Farben nach Häufigkeit und schreibe die Eigenschaften dazu.

Taucht eine Farbe besonders oft auf?

Dann hast du deine Hauptfarbe gefunden.
Hier ein Beispiel:
Grau und Schwarz tritt am häufigsten auf. Daher ist das die Hauptfarbe. Die anderen beiden Farbbereiche Blau/Türkis und Gold/Beige könnte man als Zweitfarbe und Kontrastfarbe einsetzen. Mehr zum Aufbau der Farbpalette findest du weiter unten.

Wenn noch keine Farbe eindeutig hervorsticht, hast du folgende Möglichkeiten, um deiner Hauptfarbe näher zu kommen:

Gleichstand?
Kommt eine Farbe gleich oft vor? Dann kannst du dir folgende Fragen stellen, um dich für eine Farbe zu entscheiden:

• Mit welcher Farbe fühlst du dich wohler? Findest dich eher in ihr wieder?
• Welche Farbe findest du eher in deinem Kleiderschrank?
• Wenn du dir eine Wand in dieser Farbe streichen würdest, welche wäre das?
• Frage deine Familie und Freunde, welche Farbe eher zu dir passt.
• Eine Richtung erkennbar? Kommen z.B. oft kalte Farben vor wie Blau oder Türkis. Oder eher warme Farben wie gelb, rot, orange, pink? Oder gar neutrale wie grau, schwarz, weiß oder braun? Grenze deine Farbe auf einen dieser Farbräume ein: kalt, warm, neutral.

Für einen professionellen Look auf deiner Website, solltest du neben deiner Hauptfarbe auch weitere Farben definieren, um eine perfekte Farbpalette zusammenzustellen.

Folgenden Aufbau würde ich dir empfehlen:

1. Hauptfarbe: Das ist die präsenteste Farbe deiner Website. Oft ist es auch die Farbe, die sich im Logo und deinem kompletten Branding primär widerfindet und sofort zu erkennen ist.

2. Abstufung der Hauptfarbe: Diese Farbe kannst du gut als Hintergrundfarbe oder zur Auflockerung benutzen. Probiere einfach mal deine Hauptfarbe in verschiedenen Transparenzstufen zwischen 5% bis 40 %.

3. Kontastfarbe/oder zweite Abstufung der Hauptfarbe: Ist kein Muss, aber wird oft gebraucht, wenn man seine Website etwas dynamischer und spannender gestalten möchte. Es sollte eine Farbe sein, die gut mit deiner Hauptfarbe harmoniert. Nutze dafür gerne das Tool coolors.co (dazu gibt es ein Video, wo ich dir das Tool vorstelle. Schau mal rein >> )

4. Textfarbe: Es muss nicht immer Schwarz und Weiß sein als Textfarbe. Ein Grauton, Dunkelblau, Dunkelgrün wirkt oft auch im Zusammenspiel mit deinen anderen Farben lockerer/ edler/ wertiger. Und Weiß kann man mit einem ganz hellen Beige-Ton ersetzen, dann wirkt der Kontrast nicht so hart.

5. Akzentfarbe (Call-to-Action): Die Akzentfarbe wird nur akzentuiert eingesetzt. Möglichst nur für deine Handlungsaufforderung, also z.B. den Anmeldebutton für den Newsletter oder der Kauf-Button für dein Produkt.

Umstyling-Tipp Nr 1: Verändere deine Farbpalette

Du kennst es vom Friseur. Eine Haarfarbe kann einen komplett anderen Menschen aus dir machen. So ist es auch bei einer Webseite und den Farben. Probier es einfach mal aus. Wenn du bisher 3-4 Farben nutzt, dann versuche es mal mit nur 2. Oder verändere die Farben an sich. Nutzt du z.B. bisher ein Kirschrot, dann mach die Farbe heller oder dunkler. Je nachdem welche Wirkung du für deine Zielgruppe brauchst, wirkt es romantischer und weiblicher oder edler und gediegener. In Kombination mit ein paar dunklen Hintergrundflächen gibt es widerrum eine komplett andere Richtung vor.

Oder du bist ganz mutig und nutzt ab jetzt eine komplett andere Farbe.
Wenn du nicht weißt, welche Farben zu deinen Farben passen könnten, empfehle ich dir das Tool „Coolors“, um das rauszufinden. Schau dir gerne mal an, wie ich das Tool für meine Arbeit nutze: Coole Farben für Website mit Coolors-Generator

Umstyling-Tipp Nr 2: Verändere deine Schriftart(en)

Grundsätzlich sollte man nicht zu viele unterschiedlich Schriftarten für eine Webseite nutzen. Es reicht meist eine Schriftart aus, die dann in verschiedenen Ausprägungen eingesetzt wird (dick, dünn, Großbuchstaben etc.). Möchte man noch ein bisschen mehr Charakter, nutzt man oft für die Überschriften noch eine etwas auffälligere Schrift.
Und so wie mit den Farben, kannst du mit einer Schrift einen komplett anderen Look auf deiner Webseite kreieren. Hier habe ich dir 3 Beispiele von Schriftkombinationen vorbereitet, die super zusammen wirken. Es sind alles Google fonts, also kostenfrei und auf jeder Webseite leicht zu integrieren. Bei den meisten WordPress-Seiten ist es bereits Standard.

Headline: Muli Black
Copy: Rosario Light, Rosarion Light Italic

Headline: Julius Sans One
Copy: PT Sans

Headline: Parisienne
Copy: Montserrat Light, Montserrat Bold

Wenn für dich hier nichts passendes dabei ist, dann schau einfach mal bei Pinterest.

Du kannst übrigens auch ganz leicht rausfinden, welche Schriftarten andere Webseiten nutzen. Ich nutze z.b. das Bookmark-Tool WhatFont. Der Entwickler Chengyinliu bietet das Tool für den Safari, Chrome und Firefox-Browser an.

Umstyling-Tipp Nr 3: Modernisiere dein Logo

Ein etwas aufgefrischtes Logo bringt neuen Wind für deinen Look. Manchmal lohnt es sich zu überlegen, ob das Logo so noch dem Produkt und der Zielgruppe entspricht, wie vorher. Wie hast du dich weiterentwickelt. Manche hängen sehr an ihrem Logo. Oft haben sie auch viel Geld dafür bezahlt. Aber wichtig ist zu hinterfragen, was es aussagt. Trifft das Logo noch die Botschaft und passt es auch rein visuell zum Rest? Manchmal genügt es sogar einfach die Schrift moderner zu gestalten oder einzelne Elemente wegzunehmen und es zu vereinfachen.
Lass im Zweifelsfall einen Profi da ran. Aber das Logo darf auch ruhig mal geändert werden, wenn es eingestaubt oder nicht passend daherkommt.

Hier ein Beispiel:

Quelle: http://www.inztitut.de/blog/marken-relaunch-logo-relaunch/

Mein Logo hat sich auch etwas verändert:

Fazit:

Es muss nicht immer ein Neustart sein. Schließlich hast du schon seht viel Zeit in deine Webseite gesteckt. Und ich kann mir vorstellen, dass sich bei dir ein dicker Kloß im Hals bildet, wenn du daran denkst neu anzufangen. Deine Webseite braucht manchmal einfach nur ein kleines optisches Umstyling, damit der Rest wieder passt. Überleg dir also genau wen du mit deiner Webseite ansprechen möchtest? Wer ist deine Zielgruppe? Und dann schau, ob dein Style noch zu deiner Zielgruppe passt. Wenn nicht, probier erst einmal die 3 genannten Möglichkeiten aus. Gerne auch alle 3 gleichzeitig.
Aber bei allem was du auf deiner Webseite ausprobierst. Mach vorher immer ein Back-UP!!! So kannst du im Zweifel immer zum alten Style