Aus dem Clubhouse #3: Im Schriftbild nicht zu wild

Daniel und Lars lieben starke Projekte. Und sie können was - nämlich designen und programmieren. Das tun sie beruflich für die Marken der dogado group. Und in ihrer Freizeit leidenschaftlich für weitere gute Ideen. Zum dritten Mal hat das Duo einen Abend mit ambitionierten Website-Betreibern bei Clubhouse verbracht. Und Tipps für UX und Code gegeben. Daniel: "Ich bin begeistert, über die Projekte die wir bei unserem Websitetalk jedes Mal sehen. So viele gute Ideen. Und ich freue mich, wenn wir helfen können, die dazu gehörigen Websites etwas besser zu machen."

Wir stellen euch jede Woche ein Projekt aus unseren Website-Talks vor – die wichtigsten Tipps von Daniel und Lars inklusive.

Websitetalk: Einmal aufräumen bitte!

DAS PROJEKT: Empfehlungsmarketing für ethisch nachvollziehbare, fair gehandelte, vegane Bio-Produkte

Michael ist im Bereich Empfehlungsmarketing für ethisch nachvollziehbare, fair gehandelte, vegane Bio-Produkte tätig. Auf seiner Website wirbt er für den Plan B: work smart – work green! In der Headline hat er sich inhaltlich also auf die Farbe Grün festgelegt. Das attraktive Video im Header führt zudem zu einem regelrechten Wow-Effekt beim User. Anders ist es allerdings beim weiter herunterscrollen: Hier hat sich vermutlich ein kleiner Farbteufel ausgetobt und gleichzeitig diverse Schriftarten ausprobiert: Der User wird überrascht von vielen Formen, Farben und Schriftarten – das Auge weiß nicht genau: Was ist der Webseiten-Fokus? Worum geht es genau? Was ist wichtig?

Durch die vielen Kontraste wirkt die Website sehr unruhig. Es werden diverse Elemente aneinandergereiht, ohne dass eine klare Linie erkennbar ist. Der Leser kommt nur sehr schwer in einen Lesefluss. Und das ist wirklich schade! Es gilt wirklich: Weniger ist mehr!

Hier kommen die 4 wichtigsten Tipps für einen klaren Fokus auf deiner Website:

1. Verwende wenig Kontraste

Das Ziel einer professionellen Webseite sollte sein, dass sie im Gedächtnis bleibt und das möglichst positiv. Um das zu erreichen gibt es einiges zu beachten. Die Farbkontraste zum Beispiel. Farbkontraste bedeutet, dass zwei Farben aufeinander treffen, die auf verschiedenen Seiten des Farbspektrums liegen. Auffällige Kontraste sind beispielsweise ein blauer Hintergrund und darauf eine rote Schrift – aber tut das dem Auge des Webseitenbesuchers gut? Also: gehe möglichst sparsam mit solchen Kontrasten um! Denn: Zu aggressive Kontraste wirken unseriös und unprofessionell.
Außerdem sollte der Text lesbar sein – und das nicht nur „irgendwie“ oder „gerade so“, sondern eben sehr gut lesbar.

Es gibt eine simple Regel für Webseiten: Beschränke dich beim Designen nur auf zwei Farben. Nutze zum Beispiel Schwarz und Weiß oder Dunkelgrau und Weiß.
Zusätzlich kannst du dann gern noch eine dritte Farbe beispielsweise für Call to Actions (kurz CTAs) nutzen. Diese CTAs sollen einerseits mit den anderen Farben harmonieren, aber auch trotzdem auffallen, denn der User soll ja klicken. Eine gute Idee ist zum Beispiel, dass du die Farbe aus deinem Logo aufgreifst.

Was ist sonst noch zu beachten?

Die Farbwahl ist natürlich auch zielgruppenabhängig. Schau dazu gern in unseren Blogbeitrag „Eine Farbe bekennen“.

Pro Tipp:

Beachte nicht nur die Farbkontraste, sondern lege auch Wert auf harmonische Formkontraste: Auch hier sollten nicht allzu viele verschiedene Formen auf deiner Webseite vorkommen. Es wirkt sonst überladen und der User ist vom eigentlichen Inhalt deiner Webseite abgelenkt. Und das wäre sehr schade!

2. Nutze eine lesefreundliche Schrift

Du solltest ebenfalls dein Augenmerk auf die Typographie legen: Nutze unbedingt eine Schriftart, die leicht zu lesen. Schnörkel an den Buchstaben sehen vielleicht mitunter großartig aus, aber kann wirklich jeder User schnell erkennen, um welchen Buchstaben es sich handelt?

Es gilt bei der Auswahl der Schriftart: Wichtiger als die Ästhetik ist tatsächlich die Lesbarkeit. Teste deine Wunschschriftart auch immer mit allen Buchstaben durch: kleine UND große Buchstaben. Bei manchen Schriftarten sind zwar die Großbuchstaben gut lesbar, dafür sind aber die kleinen Buchstaben schwer erkennbar – oder andersherum.

3. Strukturiere die Texte auf deiner Webseite

Und nun zu den Texten auf deiner Webseite: Die Lesbarkeit deiner Texte solltest du nicht mit zu langen Zeilenlängen erschlagen. In Abhängigkeit deiner gewählten Schriftart und Schriftgröße solltest du also schauen, ob die Zeilenlänge nicht zu groß ist.

Außerdem gilt: Niemand mag ellenlange Fließtexte im Internet! Das kannst du vermeiden, indem du mit Bullet-Points arbeitest. Strukturiere deine Gedanken, deinen Text, deine Aussage und arbeite knackige Fakten heraus.

Pro Tipp:

Wähle eine Schriftgröße in angenehmer Größe! Der Trend geht ganz klar zu größeren Schriften im Web.

4. Gestalte die Call-to-Actions klickfreudig

Das Ziel deiner Website? Der User soll auf einen Call to Action (kurz CTA) klicken. Er soll entweder eine Infografik herunterladen, ein Produkt in den Warenkorb legen, deinen Newsletter abonnieren oder einfach „Mehr erfahren“. Ein CTA kann ein Button, eine Textzeile, ein Bild oder ein Icon sein. Wichtig ist, dass du genau weißt, was deine Zielgruppe möchte: Möchten sie erst einmal etwas testen? Dann schreib „Kostenlos testen“ oder „Teste ohne Risiko“ auf deinen Button. Möchten sie erst einmal mehr Infos bekommen? Dann nutze „Zum Newsletter anmelden“, „Jetzt Infos anfordern“ oder „Ja, ich will mehr erfahren“. Vieles ist möglich. Du musst nur wissen: Was möchtest du erreichen? Und was möchten deine Kunden oder potenziellen Kunden?

Wie soll der Call to Action aussehen?

Er soll auffallen! Ganz klar! Er sollte aber auch zum sonstigen Design deiner Webseite passen. Probiere verschiedene Designs aus: rot, grün, blau – als Button, als Textlink… Schau einfach, welche Variante auf deiner Webseite an verschiedenen Stellen am besten funktioniert. Nutze dabei wiederkehrende Elemente in Bezug auf Formen, Farben, Schriften und Hintergründe.

Pro Tipp:

Verwende bei Call to Actions unbedingt aktive Sprache und nutze auffordernde Worte.

Am allerwichtigsten ist: Teste! Teste! Teste! Dein Call to Action kann noch so „schön“ sein - wenn keiner klickt, ist er wertlos.

Wir wünschen dir viel Erfolg!

Weitere Websitetalks findest du hier:

Aus dem Clubhouse #1: Wie du mit deiner Website die richtige Message sendest

Aus dem Clubhouse #2: (Eine) Farbe bekennen

Aus dem Clubhouse #4: Setz den Fokus auf das Leadtool

Du suchst noch nach dem richtigen Webhosting-Tarif für deine Website? Oder möchtest du mit einer schlanken Web-Visitenkarte im Netz vertreten sein? Unser Support-Team hilft dir gern bei der Entscheidung! Hier findest du alle Kontaktdaten.