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 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.

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 

Eine Landingpage richtig gestalten ist eine Herausforderung.

Warum tun sich die Meisten so schwer damit? Im Grunde geht es darum, alle Bestandteile einer Landingpage so aufzubauen und aufeinander abzustimmen, dass der Besucher genau eine Option hat. Nämlich die Aktion (Call to Action) auszuführen, die du vorgesehen hast. Es darf dabei zu keiner Zeit von dieser Aktion abgelenkt werden. Möchtest du, dass sich der Besucher deinen Freebie runterlädt? Dann fokussiere dich auf genau diese konkrete Handlungsaufforderung. Biete ihm nicht gleichzeitig noch dein Buch an oder eine Dienstleitung von dir.

Der Besucher möchte in dem Fall auf der Landingpage erfahren,

• warum er sich deinen Freebie holen soll?
• Warum lohnt es sich für ihn?
• Welche Vorteile hat er?
• Was hat er am Ende für ein Ergebnis, wenn er den Freebie liest/nutzt?
• Und welches Problem hat er gelöst?

Wie sieht es mit der Conversion-Rate aus? 

Die Rate gibt an wie viele Besucher deiner Landingpage die gewünschte Handlung ausgeführt haben. Kennst du deine Zahlen? Wenn weniger als 3-4 % deiner Besucher der Landingpage den Freebie runterladen, solltest du etwas tun. Aber woran kann es liegen?

Viele von Euch haben schon gute Inhalte und einen guten Aufbau. Die Argumente stimmen. Du sprichst mit deiner Zielgruppe und kennst ihre Hürden. Aber dennoch laden sich nur wenige Besucher deinen Freebie runter? Schau dir mal an, wie eine Landingpage typischerweise aufgebaut ist. Welche Elemente sind, in welcher Reihenfolge zu verwenden. Wie sollte man den Button platzieren und wo. Usw.

Einen der größten Conversion-Killer zeige ich dir hier in meinem Webdesign-Snack.

Das Interessante daran ist, dass die meisten den Fehler kennen, aber das Problem nicht beheben kennen, weil sie es technisch nicht umsetzen können. Daher zeige ich dir im Video zwei Wege, wie du diesen Killer auf einer WordPress-Website los wirst.

 Hier ist der CSS-Code aus dem Video:

.page-id-5699 #eut-main-menu{
display: none;}

(den fetten Code mit deinem Code ersetzen)

Vermeide ganz leicht diese 7 Webdesign-Fehler und gewinne so mehr Kunden auf deiner Website!

Wenn der Website-Besucher das erste Mal deine Website betritt, dann hast du in etwa 3-5 Sekunden Zeit seine Aufmerksamkeit zu erregen. Und ihn davon zu überzeugen zu bleiben, um sich dein Angebot näher anzuschauen oder gar zu kaufen. Der erste Eindruck ist also entscheidend und der wird über die reine Optik (also deinem Design) gewonnen. Ist dieser erste Eindruck erstmal im Kopf, kann man ihn ganz schlecht wieder in eine andere Richtung lenken.

Ein gutes Webdesign hilft dir aus Besuchern Interessenten zu machen! Deine Texte/Inhalte entscheiden darüber, ob deine Interessenten zu Kunden werden.

Webdesign hilft dir:

• dein Angebot attraktiv zu verpacken
• kompetent wahrgenommen zu werden
• die Wertigkeit deines Produktes zu steigern
• Qualität und Professionalität auszustrahlen
• den Fuß in die Tür zu kriegen
• Besucher zu Interessenten zu machen

Im Video zeige ich dir die 7 dümmsten Webdesign-Fehler. Für alle, die lieber lesen, gibt es auch den Text dazu weiter unten.

Daher ist das Design deiner Website auch so enorm wichtig.

Ich sehe viele Websites und meist sind es die gleichen Fehler, die gemacht werden. Und oft hör ich auch: „Ich bin kein Designer“, „Ich hab kein Gefühl dafür was schön oder besser aussieht“. Daher möchte ich dir heute zeigen, dass es auch Dinge gibt, die du ganz einfach -ohne Webdesigner oder Programmierer zu sein- richtig machen kannst.

Es gibt ein paar einfache Grundregeln im Webdesign, die deine Website wesentlich professioneller, ästhetischer und strukturierter erscheinen lassen.

Die meisten Regeln beziehen sich auf die Schrift und Lesbarkeit. Also ganz simple Textbearbeitung im weitesten Sinne.
Schau selbst:

Webdesign-Fehler Nr. 1:

So vermeidest du den Fehler:

Lass Platz zwischen einzelnen Textelementen und gib Ihnen Weißraum. Das verbessert die Lesbarkeit und kommt so besser hervor.

Webdesign-Fehler Nr. 2:

So vermeidest du den Fehler:

Unterschiedliche Textgrößen machen deinen Text interessanter und leichter lesbar. Gib deinen Texten eine Hierarchie vor und definiere eine Headline, Subline, Zwischenüberschrift, Fliestext und Button. Deren Design sollte sich über die gesamte Website nicht ändern.

Webdesign-Fehler Nr. 3:

[/vc_column_text][engic_single_image image=“6181″][vc_column_text]

So vermeidest du den Fehler:

Verwende eine einzige Schriftart (max. 2) und arbeite lieber mit unterschiedlichen Schriftstärken und -Größen, um Struktur zu schaffen. Das bringt Ruhe rein.

Webdesign-Fehler Nr. 4:

So vermeidest du den Fehler:

Verwende zwischen 16 Pt. und 18 Pt. für ihren Lesetext, damit man sich beim Lesen nicht anstrengen muss. Und prüfe, ob die Textgröße auf allen Geräten lesbar ist.

Webdesign-Fehler Nr. 5:

So vermeidest du den Fehler:

Wenn du nicht sehr versiert bist mit Farben, bleib am besten bei einer Grundfarbe und nutze weitere Farbabstufungen. Oder nutze den Coolors-Generator, um harmonische Farben zu generieren. In einem anderen Webdesign-Snack zeige ich dir, wie das geht.

Webdesign-Fehler Nr. 6:

So vermeidest du den Fehler:

Mache die Zeilen nicht unnötig lang. Eine Zeile sollte auf dem Desktop etwa 7- 12 Wörter haben. Auch sollte nach 5-7 Zeilen ein Absatz folgen. Am besten mit Zwischenüberschriften gliedern.

Webdesign-Fehler Nr. 7:

So vermeidest du den Fehler:

Wenn du den Zeilenabstand zu gering wählst, verschwimmt der Text eventuell zu einem Textklumpen und erschwert das Lesen. Als Zeilenabstand etwa 140- 150% oder 1.4 – 1.7 em ein (je nach Schrift unterschiedlich) einstellen.

Wisst ihr, was das coole an meinem Job ist? Dass man wirklich sehr viele Dinge lernt und in tolle unterschiedliche Themen reinschnuppern kann. Und manchmal sind die Projekte so toll, dass man glatt vergisst, dass es Arbeit ist. 

So ist es auch bei meinem aktuellsten Projekt, wo ich den Entwurf einer Website machen durfte. Da geht es um Schokolade. Und nicht um irgendeine Schokolade. Nein, es geht um DIE SUPERSCHOKOLADE. Eine gesunde Alternative zu der herkömmlichen Schokolade aus dem Supermarkt.

Gesund und auch noch lecker?

Erst dachte ich ehrlich gesagt: na, das kann ja nicht schmecken. Mit einem etwas mulmigen Gefühl fuhr ich dann zum Kundentermin. Andrea, eine Freundin von mir hatte mich Torsten, dem Gründer von Schoko Kids Club für das Projekt als Website-Beraterin und Webdesignerin empfohlen.

Vor Ort haben wir uns über die Entstehung vom Schoko Kids Club unterhalten und über ihre Mission. Sie lautet: Naschen mit gutem Gewissen. Und das beste war, ich konnte mich davon direkt selbst überzeugen. Tosten packte auf einmal mega leckere selbstgemachte Bruchschokolade aus, die ich dann probieren durfte.

Und ungelogen, die war richtig lecker. Nun war ich restlos überzeugt. Torsten wohl auch, denn er beauftragte mich neben den beiden geplanten Landingpages, auch einen Entwurf für die Website bzw. die Startseite des Online-Shops zu machen. Er brauchte hier zusätzlichen Input einer weiblichen Webdesign-Expertin, die am besten selbst Kinder hat und somit aus Zielgruppen- beziehungsweise Kundensicht näher dran ist. 

Zu Hause angekommen machte ich mich an die Arbeit. Ich sammelte erst einmal alle Infos, die es zu dem Projekt gab. Neben dem, was Torsten mir erzählt hat, schickte mir Andrea auch Fotos und die URL zu der bereits angefangenen Website.

Schritt 1: Ich verschaffte mir einen Überblick und sammelte wichtige Begriffe (Keywords), die meiner Meinung nach die Zielgruppe hören will.

In dem Fall hatte ich einen großen Vorteil. Denn als Mama von 2 Kids im Alter zwischen 4 und 6 Jahren repräsentiere ich genau die Zielgruppe. So konnte ich bei vielen Dingen einfach von mir ausgehen. Andernfalls hätte ich noch mehr Infos zur Zielgruppe gesammelt oder von Torsten und Andrea geholt.

Nach dem ersten Brainstorming ließ ich das alles erst einmal sacken. 2 Tage habe ich mich mit dem Projekt nicht weiter befasst. Und das rate ich euch auch. Ideen sammeln, alles aufschreiben, Fotos anschauen etc. Und dann erstmal was komplett anderes machen. Wenn man dann wieder mit frischem Kopf an das Thema rangeht, sieht man plötzlich Strukturen und neue Dinge, die man vorher nicht wahrgenommen hat. Man merkt auch schnell, was eventuell nicht gut passt oder noch nicht zu Ende gedacht ist.

Die Herausforderung bei dieser Startseite war das Angebot vom Schoko-Kids-Club möglichst schnell erfassbar zu machen. Mir war z.B. ganz lange nicht klar, was das eigentliche Angebot ist.

Und das muss man solange hinterfragen, bis man entweder das Produkt in einem Satz beschreiben kann oder merkt, dass das Produkt zu komplex ist und es ändern. Bei Schoko Kids gibt es einen Online-Shop. Aber was gibt es darüber hinaus? Hinter dem eigentlichen Konzept steckt noch viel mehr. Als großes Überthema steht „Naschen mit gutem Gewissen“.

Bei Schoko Kids kann man:

• z.B. ein Zutatenset online kaufen, um Schokolade selbst herzustellen.
• Darüber hinaus kann man eine Schoko Party feiern, entweder als Geburtstagsparty oder einfach mit Familie und Freunden. Dafür gibt es verschiedene Tipps, einen groben Fahrplan und Vorlagen, damit die Feier ein unvergessliches Erlebnis wird.
• Man kann auch ein Start-Set kaufen. Das besteht aus dem Buch „Das Geheimnis der Superbohne“, einer Silikonform für Schokolade und einem Baumwollrucksack. So können die Kids und ihre Eltern die Welt der Schokolade kennenlernen und das Geheimnis der Superbohne lüften.
  
  

Schritt 2: Mit diesen Infos fertigte ich nun eine Skizze, ein sogenanntes Wireframe an.

So eine Skizze kannst du ganz einfach auf dem Blatt oder an einem Whiteboard für dich skizzieren. Für Kunden fertige ich so ein Wireframe mit dem Programm Adobe XD an. Alternativ ist Sketch auch sehr beliebt bei den Profis. Beides kostet allerdings und lohnt sich daher nur, wenn man es öfter nutzen möchte.

Ich schaute als, was hat Priorität, was ist wichtig, was weniger. Ganz wichtig ist es von Anfang an ein Ziel für die Startseite festzulegen. Die klare Handlungsaufforderung, auch Call-to-Action (kurz CTA) genannt, sollte in diesem Fall der Sprung zum Shop sein. Aber man muss auch innerhalb kürzester Zeit vermitteln, dass es noch weitere Angebote gibt, nämlich die oben genannten. Daraus versuchte ich 2-3 große Kategorien zu „stricken“, die man auf einen Blick erfassen kann. So entstand dann die folgende Skizze der Startseite.

Diese stimmte ich mit Torsten ab. Er war mit der Struktur zufrieden und so konnte ich jetzt einen konkreten Design-Vorschlag ausarbeiten.

Für die Shopseite existierte bereits eine Design-Vorlage, die man auf der WordPress-Seite installiert hatte. (so sieht übrigens die Original-Vorlage aus: hier klicken) Daher gab es schon bestimmte Vorgaben, die ich berücksichtigen musste. Die Farben und die Schrift war größtenteils festgelegt. Ich formulierte zuerst die Headline und die Subline. Der Einstieg muss wirklich auf den Punkt sein. Daher sollte man sich für die Formulierung Zeit lassen. Auch die Navigation war ein wichtiges Thema. Hier sollte man keine Experimente machen und lieber bei der Bezeichnung bleiben, die jeder web-affine Mensch kennt und versteht. Und es dürfen auch nicht zu viele Punkte sein, sonst wird es unübersichtlich. (max. 5-7)

Nach dem Header folgt ein unwiderstehliches Verkaufsargument. Gib dem Besucher einen richtig guten Grund weiter auf der Website zu bleiben. Danach folgt die Produktübersicht. D.h. 3 große Überkategorien, von denen ich eben sprach. Der Schoko Kids Club engagiert sich auch für die Umwelt. Das sollte ebenfalls nicht unerwähnt bleiben. Danach folgt ein Auszug der beliebtesten Produkte aus dem Shop. Und der aktuellste Artikel aus dem Blog.

Alles sollte nur angeteast werden und dann auf die jeweiligen Unterseiten weiterleiten. Ihr müsst euch das so vorstellen, wie bei einem Kino-Trailer. Spannung aufbauen, Appetit machen und dann wenn es am spannendsten wird aufhören bzw. In diesem Fall weiterschicken.

Ganz unten auf der Website gibt es noch die Möglichkeit sich für den Newsletter alias Ellis Schokopost anzumelden. Wobei die Überlegung an der Stelle war, diesen Bereich als Exit-Pop-Up zu integrieren, damit der Fokus noch mehr auf den CTA gelenkt wird.  Das bedeutet, die Anmeldung zum Newsletter als Pop-Up einzurichten, der erst aufklappt, wenn ein Website-Besucher die Seite verlassen will. Das kann man bei WordPress ganz einfach entweder mit dem Tool Thrive Leads bewerkstelligen oder z.B. mit dem Plug-In Convert plus. Man könnte auch mit einem A/B-Test rausfinden, welche Variante eine bessere Anmelderate (Conversion-Rate) für den Newsletter hat. Das kann man ebenfalls mit Thrive Leads einrichten. Der einfachste Weg wäre aber eine Variante für z.B. 3 Monate laufen zu lassen und  die nächsten 3 Monate die zweite Variante. Und vergleicht dann einfach die Anmelderate. (Das als Quick-Tipp am Rande)

Bei der Gestaltung bediente ich mich der Elemente, die das WordPress-Theme (also die Design-Vorlage) mit sich brachte und versuchte bestimmte Elemente nur dezent einzusetzen.

Diese Wellen zum Beispiel sind ein schönes auflockerndes Element, aber wenn man damit übertreibt sieht man sich daran irgendwie satt. 

Auch der gestrichelte Rahmen sollte nicht zu oft auftauchen, dann nutzt sich das einfach ab und wird zu viel des Guten. An dieser Stelle gilt immer: weniger ist mehr.

Wenn ihr also eine Design-Vorlage nutzt – wozu ich euch definitiv auch raten würde- schaut euch an, welche Stilmittel dort eingesetzt werden und nutzt diese ruhig. Meist haben sich die Entwickler viel Mühe mit dem Design gemacht und davon könnt ihr nur profitieren.

Wie ihr übrigens eine gute WordPress-Vorlage findet könnt ihr in diesem Blogartikel nachlesen.

Hier könnt ihr euch den fertigen Entwurf der Startseite anschauen. Und zum Vergleich habe ich euch noch den aktuellen Stand der Website eingefügt. Ihr seht, es haben sich noch ein paar Elemente leicht verändert.

Links: Vorher
Rechts: Nachher ( Umsetzung noch nicht abgeschlossen) 

Das Foto im Header wurde noch nachträglich eingefügt, weil es mir zu dem Zeitpunkt noch nicht vorlag. Meine Empfehlung war auf jeden Fall lachende Kinder beim Schokolade Essen abzubilden als Aufhängerbild.

Auch das Anmeldeformular für den Newsletter wurde etwas angepasst, damit das Design mit der Landingpage übereinstimmt. Die Landingpage ist bereits online. Schau mal hier >>

Aktuell wird noch an der Website und dem Online-Shop fleißig programmiert und gearbeitet. Am 01. Oktober 2019 ist der offizielle Start. Und ich darf schonmal aus dem Nähkästchen plaudern: es wird schokotastisch!!!

Möchtest du mehr über den Schoko Kids Club erfahren? Hier gehts zur Facebook-Seite, wo du alle Neuigkeiten und Infos findest.

Webdesign spielt eine entscheidende Rolle, um aus deinen Website-Besuchern auch wirklich Kunden zu machen.

Du solltest also das Design deiner Website nicht unterschätzen. Im Gegenteil.

Webdesign hilft dir überhaupt erst den sogenannten „Fuß in die Tür zu kriegen“. Was ich damit meine und warum ich gerne den Vergleich zu einem Blind Date mache, wenn ich vom Erstkontakt spreche erfährst du im Video.

Fazit:
Du hast also nur 3-5 Sekunden Zeit, um den Erstkontakt für dich zu nutzen. Und der Erstkontakt findet zu 90% auf der Startseite deiner Website statt. Deine Startseite ist daher enorm wichtig und sollte auf den Punkt genau überlegt aufgebaut sein. Dabei geht es um bestimmte Elemente, die unabdingbar sind für die Startseite. Es geht um optische Hilfsmittel, die es dir möglich machen den Fokus auf bestimmte Dinge zu lenken.