Voice-over-Künstlerin Jennie Dyer - Landingpage-Analyse und -Optimierung

Auf Englisch lesen

Ich hatte mich mit der Stimmschauspielerin Jennie Dyer im Gravy For The Brain Forum unterhalten und habe mir ihre Website angesehen. Es stellte sich heraus, dass sie überarbeitet werden muss.

Ich zeige dir nun, wie Jennies Website aktuell aussieht.

Dann erkläre ich dir, was ich für gut und nicht so gut halte und was sie auf jeden Fall an ihrer Website verbessern muss.

Im dritten Schritt zeige ich dir schließlich meine Änderungsvorschläge mit ein paar erklärenden Worten.

Jennies Website ist jenniedyervoiceactor.co.uk

Ich habe vier Screenshots von ihrer ursprünglichen Website gemacht:

Jennies Homepage
Jennies Homepage
Jennies Voiceover-Unterseite
Jennies Voiceover-Unterseite
Jennies Schauspiel-Unterseite
Jennies Schauspiel-Unterseite
Jennies Kontakt-Unterseite
Jennies Kontakt-Unterseite

👍 Gut: Klarer Name/Beruf, Farbschema und Navigation

Jennie beginnt mit ihrem Namen, gibt ihren Beruf an (Sprecherin und Schauspielerin), erwähnt ihre Kompetenzfelder im Navigationsmenü, also Voiceover und Schauspiel, und sie heißt dich willkommen.

Vergrößert: Fokus auf das oberste Drittel der Website
Vergrößert: Fokus auf das oberste Drittel der Website

So weit so freundlich.

Das Farbschema passt zu Jennies Alter:

Die Farben passen auch zu ihrem Foto, das einen warmen Hautton, ein freundliches Lächeln, grün-bräunliche Augen und ein schwarzes Kleid mit einem grauen Farbverlauf im Hintergrund zeigt.

😐 Nicht so gut: Schwache Überschrift, falsch platzierter Einleitungstext und geringe Wahrnehmbarkeit des ausgewählten Navigationselements

Das Problem beginnt mit der h1-Überschrift direkt unter ihrem Namen/Beruf und dem Navigationsmenü.

Vergrößert: Fokus auf die h1-Überschrift und den Einleitungstext
Vergrößert: Fokus auf die h1-Überschrift und den Einleitungstext

Das Problem setzt sich mit dem folgenden Fließtext und einem fehlenden Call-to-Action fort, aber eins nach dem anderen.

💡 Tipp: Der Kernnutzen steht am Anfang

In Jennies h1-Überschrift steht:

Willkommen in meiner Welt!

Die Worte oder die Wortwahl selbst sind nicht das Problem.

Aber es ist eine verpasste Gelegenheit, ihre Kernbotschaft an der zweitwichtigsten Stelle ihrer Website zu vermitteln; die wichtigste Stelle ist die linke obere Ecke.

Eine bessere h1-Überschrift könnte lauten:

Warm, authentisch, intelligent und charaktervoll mit einer Altersspanne von 25-45.

Ich habe mir „Warm, authentisch, intelligent und charaktervoll“ usw. nicht selbst ausgedacht. Diese so wertvolle Information war auf einer ihrer Unterseiten vergraben, wo sie niemand finden würde.

Die Überschrift ist besser, weil sie direkt auf den Kern (-Nutzen) von Jennies Voice-over-Service eingeht. Es gibt kein ewig langes „Herumtanzen“. So präsentiert man einen Service, wenn man sich kurzhalten will.

Der folgende Absatz ist ebenfalls problematisch.

💡 Tipp: Deine Homepage ist keine „Über mich“-Seite

Unter der h1-Überschrift stellt sich Jennie mit diesen Worten vor:

Ich bin eine Voice-over-Künstlerin und Schauspielerin aus dem New Forest. Ich arbeite im ganzen Land als Schauspielerin und habe mich vor allem auf Rollenspiele, Forumtheater und immersive Theaterarbeit spezialisiert. Als Sprecherin habe ich ein Heimstudio, in dem ich aufnehmen und bearbeiten kann, um eine qualitativ hochwertige Audioaufnahme in einem Zeitrahmen zu liefern, der dem Kunden passt.

Links zu meinen Sprecher- und Showreels finden Sie auf meinen Unterseiten für Voiceover und Schauspiel.

Der Text selbst ist nicht schlecht, aber er ist teilweise an der falschen Stelle. Spar dir den Großteil des Textes für die „Über mich“-Seite.

Das Fehlen von Links zu ihren Voiceover- und Schauspiel-Unterseiten ist ein Problem, das ebenfalls behoben werden sollte.

Außerdem ist das Fehlen einer klaren Aufforderung zur Handlung (Call-to-Action) das größte Problem auf ihrer Website. Die Homepage endet einfach mit zwei Symbolen, die den Leser auffordern, sie entweder per E-Mail zu kontaktieren oder sie anzurufen.

Ich empfehle eine klare Handlungsaufforderung, so etwas wie „Holen Sie sich Ihr Angebot ein“ oder „Jetzt buchen“ oder „Arbeiten Sie mit mir zusammen“.

💡 Tipp: Funktioniert deine Website in Schwarz-Weiß?

Der Kontrast ist der Unterschied zwischen Weiß und Schwarz. Schwarzer Text auf weißem Hintergrund ist sehr gut lesbar.

Aber dunkler Text auf dunklem Hintergrund ist keine gute Idee.

Schauen wir uns die Homepage von Jennie an:

„Schwarz-weiß“ - Jennies Website in Grautönen
„Schwarz-weiß“ - Jennies Website in Grautönen

Kannst du das aktive, schwarz kolorierte Navigationselement „Home“ sehen? Die geringe Wahrnehmbarkeit ist ein Problem.

Selbst auf einem Screenshot in Farbe verschwindet „Home“ fast gänzlich.

Siehst du wie „Home“ visuell zu verschwinden scheint?
Siehst du wie „Home“ visuell zu verschwinden scheint?

Ich würde eine kontrastreiche Farbe empfehlen, die gut zu den vorhandenen Farben passt, und ich würde Weiß wählen.

Farbschema von Jennies Website - einschließlich des roséfarbenen Hintergrunds ihrer Voiceover-Unterseite
Farbschema von Jennies Website - einschließlich des roséfarbenen Hintergrunds ihrer Voiceover-Unterseite

Ein Farbschema ist ein nützliches Hilfsmittel, weil es a) einen Überblick über die tatsächlich verwendeten Farben gibt und b) dabei hilft, zu erkennen, welche Farben zusammenpassen und welche sich beißen.

🔨 Meine Verbesserungen für Jennies Website

In einem ersten Versuch hatte ich alle vier Seiten zu einer Homepage zusammengefasst.

Jennies vier Unterseiten wurden zu einer komprimierten Homepage zusammengeführt
Jennies vier Unterseiten wurden zu einer komprimierten Homepage zusammengeführt

Bei diesem One-Page-Konzept dienen die Navigationspunkte als On-Page-Links.

Ich habe den Text gekürzt und die Liste ihrer Referenzen gekürzt. Der Link „View all credits“ könnte zu einer Unterseite führen, oder ein Klick auf den Link könnte einen zuvor verborgenen Text per Akkordeon-Effekt öffnen.

Schritt 2: Jennies Homepage aufpeppen: Farben, Layout und Design

Später habe ich versucht, Jennies Homepage zu würzen und kontrastreicher zu gestalten.

Mein erster Schritt war, ihre Farbpalette zu verändern:

Aktualisierte Farbpalette für Jennies Homepage
Aktualisierte Farbpalette für Jennies Homepage

Dann habe ich diese Farben auf das bestehende Design ihrer Homepage angewendet:

Mehr Kontrast und Sauberkeit durch andere Farben und ein aufgeräumtes Erscheinungsbild
Mehr Kontrast und Sauberkeit durch andere Farben und ein aufgeräumtes Erscheinungsbild

Ich habe auch die ziemlich altmodischen vertikalen Linien entfernt und die aktive Navigation viel lesbarer gemacht.

Außerdem habe ich in der oberen rechten Ecke ein Sonnen-Emoji (☀️) hinzugefügt, das als Schaltfläche zum Umschalten in den dunklen Modus dienen soll.

Der Wechsel zwischen hellem und dunklem Modus ist nützlich: Tagsüber kannst du deine normale Website anzeigen. Nachts können deine Leser, eine Version deiner Website sehen, die angenehm für die Augen ist.

Deshalb habe ich auch eine dunkle Version von Jennies Website erstellt und dabei das folgende Farbschema verwendet:

Eine mit dem dunklen Modus kompatible Farbpalette
Eine mit dem dunklen Modus kompatible Farbpalette

Durch die Anwendung der neuen Farben hat sich das Erscheinungsbild von Jennies Homepage entsprechend geändert:

Eleganter dunkler Modus mit einem alternativen Farbschema für Jennies Website
Eleganter dunkler Modus mit einem alternativen Farbschema für Jennies Website

Sowohl im hellen als auch im dunklen Farbmodus habe ich mir die Freiheit genommen, allen unnötigen Krismkrams zu entfernen und nur das Wesentliche zu behalten. Außerdem habe ich das Farbschema konsequent angewendet, was bei Jennies ursprünglichem Design nicht der Fall war.

Zudem habe ich mich auf eine einzige Schriftart beschränkt: Proxima Nova.

Schritt 3: Feinschliff von Layout, Design und Text

Ich war nicht zufrieden mit dem dunkelgrauen Rahmen um Jennies Foto und ihren Text. Eine „Fusion“ war nötig. Jetzt befindet sich der Hauptinhalt in einem schönen runden Kästchen.

Dann habe ich den Rahmen um den Jennies angezeigten Namen horizontal vergrößert, damit ihre Name auf einer Zeile ist. Außerdem habe ich meinen aktualisierten Text, ihre drei Voice-Over-Demo-Reels und das Sonnen-Emoji ☀️ hinzugefügt, damit der Leser wieder vom „Nachtmodus“ in den „Farben für den Tag“-Modus wechseln kann.

Sieht das nicht amtlich, edel und repräsentativ aus? Jennies kompakte Homepage mit neuem Text, dunklen Farben und einer neuen Copyright-Zeile à la „© 2021“
Sieht das nicht amtlich, edel und repräsentativ aus? Jennies kompakte Homepage mit neuem Text, dunklen Farben und einer neuen Copyright-Zeile à la „© 2021“

In dieser neuen Version ihrer Website würde sie 4 Unterseiten haben, durch die der Leser navigieren kann.

Jede Unterseite wäre kurz und auf ein bestimmtes Thema fokussiert. Zum Beispiel konzentriert sich die Homepage jetzt auf die Präsentation ihrer Demo-Reels und den Text, der ihre Demo-Reel-Präsentation unterstützt.

Die neue Struktur der Homepage könnte auch gut als Vorbild für ihre anderen Unterseiten funktionieren:

In dieser Version von Jennies Homepage besteht die Aufforderung an den Leser darin, ihre Demo-Reels abzuspielen. Das war’s. Daher könnte es klug sein, einen Link mit dem Titel „Stellen Sie mich ein“ unterhalb der Demo-Reels einzufügen, der auf ihre Kontaktseite verweist.

💡 Anmerkung: Zusätzlich zur Hauptschriftart (Proxima Nova) habe ich auch PT Sans verwendet, um die Abspieldauer von Jennies Reels anzuzeigen. PT Sans hat fast das „computerhafte“ Aussehen einer Monospace-Schriftart, bei der jedes Zeichen die gleiche Breite hat. Monospaced-Schriften werden auch als Schriften mit Zeichen fester Breite (Festbreitenschrift), Fixed Font oder nicht-proportionale Schriften bezeichnet.

Letzter Schritt: Ein aktualisiertes Farbschema für den helllichten Tag

Die neuen Farben für den dunklen Modus haben mich zum Nachdenken gebracht. Deshalb habe ich mich für ein neues Website-Farbschema für die Ansicht bei Tageslicht entschieden:

Eine weitere aktualisierte Farbpalette für Jennies Homepage
Eine weitere aktualisierte Farbpalette für Jennies Homepage

Vielleicht sehe nur ich das so, aber die konsequente Anwendung von Farben (wie im Farbschema definiert) macht eine Website viel sauberer und deutlich angenehmer beim Betrachten.

Jennies Website ist eine Augenweide geworden, ein visuelles Vergnügen, das man sich gerne anschaut.

Blau ist verschwunden, Grün ist jetzt die dominierende Hintergrundfarbe für Jennies Tageslicht-Homepage-Design (inspiriert vom Grün in ihren Augen)
Blau ist verschwunden, Grün ist jetzt die dominierende Hintergrundfarbe für Jennies Tageslicht-Homepage-Design (inspiriert vom Grün in ihren Augen)

Ein kurzer Blick auf die rechte Seite der Inhaltsbox zeigt, das ich Geld statt Weiß als Hintergrundfarbe verwendet habe: erstens ist diese Art von Gelb ein warmer Ton, der dem warmen Hautton von Jennie schmeichelt und zweitens beginnt der Fließtext mit dem Wort „Warm“. So fließen Text und Farbe ineinander über.

Die wichtigsten Erkenntnisse von Jennie Dyers Landingpage

  1. Der Kernnutzen steht am Anfang. Die oberste Überschrift nennt einen Nutzen, eine Kuriosität oder etwas anderes, das die Aufmerksamkeit des Lesers erregt, wie eine Dichotomie, in der zwei Dinge einander entgegengesetzt zu sein scheinen, z. B. „Mehr Geld raubt Ihnen die Möglichkeit, persönlich zu wachsen.“
  2. Deine Homepage ist keine „Über mich“-Seite. Ein Leser landet normalerweise zuerst auf deiner Homepage. Sprich dort nur in dem Maße über dich selbst, wie es deinem Geschäftsziel und deinem Call-to-Action dient.
  3. Funktioniert deine Website in Schwarz-Weiß? Mach deine Website für sehbehinderte Leser zugänglich. Erstelle einen Screenshot deiner Website, wandele ihn mit grayscale.imageonline.co in ein Graustufenbild um, und schaue dir den Unterschied zwischen Schwarz und Weiß, also den Kontrast, an. Je größer der Unterschied zwischen Weiß und Schwarz ist, desto höher ist der Kontrast und desto besser ist die Lesbarkeit deiner Website.
  4. Stimme die Farben deiner Website mit den Farben auf den Fotos, die du verwendest, ab. Wähle eine Portrait von dir, das dir am besten gefällt, lade es auf imagecolorpicker.com hoch und wähle dann eine Stelle in dem Bereich des Fotos aus, in dem eine bestimmte Farbe dominiert. Oder wähle eine Farbe, die deutlich hervorsticht, z. B. deine Hautfarbe oder die Farbe deiner Augen. Eine Mischung aus diesen ausgewählten Farben kann dir helfen, die Farbpalette deiner Website zu definieren. 💡 Bonuspunkte gibt’s, wenn die Farbe zu den Wörtern passt, die du geschrieben hast.
  5. Formuliere eine klare Aufforderung zum Handeln. Call-to-Actions wie „Holen Sie sich ein Angebot ein“, „Stellen Sie mich ein“ oder „An die Arbeit!“ sind ausreichend.

Ist etwas unklar?

Hol dir deine Antwort auf eine brennende Frage, indem du dich an der Diskussion auf Twitter beteiligst - klicke einfach auf eines der beiden unteren Bilder:

Schlechtes Beispiel für einen ersten Eindruck als Stimmschauspieler
Schlechtes Beispiel für einen ersten Eindruck als Stimmschauspieler
Gutes Beispiel für einen ersten Eindruck als Stimmschauspieler
Gutes Beispiel für einen ersten Eindruck als Stimmschauspieler

Jetzt dies tun

Heuer mich an, um die Texte deiner Landingpage zum Glänzen zu bringen.

Oder...

Trag dich in meine private E-Mail-Liste ein, damit du mir dabei zusehen kannst, wie ich mein Traum-Storytelling-Unternehmen aufbaue:

    Mit dem Geld, das ich mit dem Schreiben von Texten verdiene, baue ich meine Traumfirma auf, also...

    Du bekommst einen Einblick in die neuesten hochwertigen Story-Produktionen, die Fortschritte, die ich mit susé patrola (meinem Storytelling-Unternehmen) gemacht habe, und in mein unverblümtes Abenteuer als Künstler und Solo-Selbständiger.


    das war naii.de - ich erfinde, spiele, baue susé, reise und schreibe.

    naii.de ist dein Ruhepol😌 an der Schnittstelle von produktiver Kunst und menschlicher Kreativität.

    Abenteuer für mutige Erzählkünstler.

    Es gibt hier nur uns beide, du bist in 👩‍🍼sicheren Händen.