Im 1. Teil und 2. Teil haben wir uns um die grundlegende Planung einer Landingpage gekümmert. Dabei ging es vorerst um eine Übersicht, welchen Nutzen eine Landingpage überhaupt liefert und auf welche Inhalte es im Aufbau ankommt. Zudem haben wir die Ziele und Zielgruppe genauer definiert um zu wissen, was die Besucher auf der Landingpage sehen wollen.
In diesem 3. Teil beginnt der für mich spannende Part. Wir fokussieren uns mehr auf den Design-Prozess, starten aber konzeptionell mit Wireframes, bevor wir anschließend das Design umsetzen und die Landingpage gestalten.
Das ist die Phase, in der es um den groben Aufbau und erste Ideen geht. Ich zeige dir, wie du mit Wireframes arbeiten kannst und für was diese überhaupt gut sind.
Ich bin kein Fan davon, dir „nur Theorie” zu vermitteln. Ich möchte auch zeigen, wie du das Gelernte direkt anwenden kannst. Deshalb habe ich diese Beiträge anhand meiner Podcast-Landingpage aufgebaut. Ich beziehe mich dementsprechend immer wieder auf Beispiele, die ich später auch wirklich in die Realität umgesetzt habe.
Im 1. Teil und 2. Teil haben wir uns um die grundlegende Planung einer Landingpage gekümmert. Dabei ging es vorerst um eine Übersicht, welchen Nutzen eine Landingpage überhaupt liefert und auf welche Inhalte es im Aufbau ankommt. Zudem haben wir die Ziele und Zielgruppe genauer definiert um zu wissen, was die Besucher auf der Landingpage sehen wollen.
In diesem 3. Teil beginnt der für mich spannende Part. Wir fokussieren uns mehr auf den Design-Prozess, starten aber konzeptionell mit Wireframes, bevor wir anschließend das Design umsetzen und die Landingpage gestalten.
Das ist die Phase, in der es um den groben Aufbau und erste Ideen geht. Ich zeige dir, wie du mit Wireframes arbeiten kannst und für was diese überhaupt gut sind.
Ich bin kein Fan davon, dir „nur Theorie” zu vermitteln. Ich möchte auch zeigen, wie du das Gelernte direkt anwenden kannst. Deshalb habe ich diese Beiträge anhand meiner Podcast-Landingpage aufgebaut. Ich beziehe mich dementsprechend immer wieder auf Beispiele, die ich später auch wirklich in die Realität umgesetzt habe.
Der richtige Start vor dem Design-Prozess
Der Beginn der Design-Phase ist bei mir persönlich von Projekt zu Projekt unterschiedlich.
Bei kleineren Aufträgen starte ich oft in Sketch und versuche direkt ein paar Ideen loszuwerden.
Bei größeren Projekten teile ich die Ziele des Kunden und die Wünsche der Zielgruppe nochmal in eigene Überschriften auf und mache für mich persönlich erstmal Notizen, wie diese in der Darstellung aussehen könnten und welche möglichen Vorgehensweisen es dafür gibt. Daraus ergeben sich auch ganz leicht Key-Words, die ich später bei der Inspirations-Suche verwenden kann. In abgeschwächter Form mach ich das hier direkt im nächsten Abschnitt mal als Beispiel für dich.
Es schadet nie, als Designer die Anliegen der Zielgruppe und Seitenbesucher nochmal genauer unter die Lupe zu nehmen und für das Layout zu sortieren.
Wie könnten wir das, was die Zielgruppe auf der Landingpage sehen will, gestalterisch darstellen?
Auf die genauen Bedürfnisse und Wünsche meiner Zielgruppe bin ich schon im Beitrag vorher eingegangen.
Hier geht es jetzt darum, nochmal aus der Designer-Sicht aufzuschreiben, welche Inhalte auf jeden Fall in das Layout der Landingpage mit einfließen müssen, um auch die gewollten Ziele zu erreichen.
(Alle Punkte beziehen sich auf meine Podcast Landingpage).
- Landingpage Überschrift → Podcast-Titel einbinden und den Zweck der Landingpage formulieren, maximal zwei Zeilen
- Kurze Podcast Beschreibung → ein oder zwei knappe Sätze um was es im Kern geht
- Podcast Cover zeigen → Wiedererkennungswert
- Mich visuell als den Podcast-Host einbinden → Menschlichkeit und Vertrauen wecken → Link zu "mehr über mich" integrieren
- Auffällige Verlinkung zu Podcast-Plattformen → iTunes, Stitcher, Pocket Casts, Overcast, Soundcloud… → RSS-Feed Link anbieten
- Vorteile und Themenbereiche des Podcasts aufzählen → Qualität und Hochwertigkeit rüberbringen → Unterschied zu anderen Podcasts nennen
- In einen Podcast reinhören → in einem Overlay? → Die neuesten/oder besten anderen Folgen anteasern
- Newsletter SignUp → über neue Beiträge benachrichtigt werden → prominent platzieren
- Rezensionen und Bewertungen von Zuhörern darstellen → eventuell mit Links zu deren Webseiten und einem Bild
- Social Media Verknüpfungen → animiert die Seite zu teilen
- Abschluss Footer → Fragen und Anregungen → Kontaktseite verlinken → Verlinkung zu meinem Blog (in Textform)
Diese Liste gibt mir schon einen guten Einblick, was alles in das Layout integriert werden muss und was ich auch schon in den Wireframes als Elemente anlegen könnte.
Ein großer Teil, der jetzt noch hinzukommt, ist der Inhalt, den dir normalerweise der Kunde bzw. jemand in deinem Team, liefert.
Da ich in diesem Fall selbst derjenige bin, der auch die Texte für die Landingpage verfassen muss, hilft mir diese Liste auch noch mal, einige wichtige Eckdaten für eine richtige Formulierung festzuhalten.
Falls du eine Marketing-Landingpage für deinen Kunden aufbauen sollst, empfehle ich dir auf jeden Fall einen professionellen Texter hinzuzufügen. Gerade die ersten Beschreibungen auf der Seite sind enorm wichtig und als Designer ist es nicht deine Aufgabe, diese Texte zu formulieren(!!).
Wireframes für die Landingpage erstellen
Die erste Phase des Design Prozesses ist oft sehr eintönig und gestalterisch eher zurückhaltend. Es geht mehr darum, alle zuvor geplanten Inhalte für die Landingpage zu strukturieren und sich selbst eine Übersicht zu schaffen, was alles in das Layout mit rein muss.
Diesen groben Aufbau nennt man in der Design-Branche Wireframes. Dabei werden die grundlegenden Elemente der Seite festgehalten und in einem „Gerüst” aufgebaut. Dadurch ist gut zu erkennen, wo und wie etwas angeordnet werden könnte und wie viele Inhalte es überhaupt gibt.
Während dieses Prozesses auf jeden Fall noch nicht an Details festklammern! Ob der Button zum Beispiel einen Schatten hat oder nicht, ist erstmal egal. Es geht vielmehr darum, wie viele Buttons oder Texte es auf der Seite geben soll und wie diese logisch platziert werden könnten.
Warum mit Wireframes arbeiten
Wireframes stellen die grundsätzlichen Layout Elemente der Seite dar. Sie helfen dir außerdem, dich nicht zu lange mit Design Details aufzuhalten, sondern schnell verschiedene Steps auszuprobieren.
Wireframes können unterschiedlich aufgebaut werden. Ich verwende dazu meistens das Programm Sketch. Viele andere Designer skizzieren erst ein paar Elemente auf einem Blatt Papier und digitalisieren alles anschließend.
Was in Wireframes integriert werden sollte
- Content → Was wird auf der Seite an Inhalten gezeigt?
- Struktur → Wie ist der Inhalt der Seite aufgebaut?
- Hierarchien → Postion und Größe → Wie viel Raum wird von Elementen eingenommen?
- Funktionsweise → Wie verhalten sich Elemente zueinander und mit dem User
Was NICHT in Wireframes integriert werden sollte
- Nicht an Design-Elementen festklammern → lenkt zu schnell ab und hält dich zu lange auf. Wireframes sind dazu da, um schnell Dinge auszuprobieren.
- Dummy Texte vermeiden → Kein Lorem Ipsum! Um Klarheit zu schaffen, muss unbedingt der reale Text eingefügt werden. So siehst du sofort, wie viel Platz bestimmte Bereiche brauchen oder ob eventuell an manchen Stellen Inhalte fehlen.
- Wireframes sollten nicht den finalen Look des Layouts oder der Website repräsentieren. Sie sollten besser zeigen, wie die Seite funktioniert und welche Inhalte es gibt.
Inspirations- und Stimmungsbilder finden und mit dem Design deines Layouts starten
Jetzt fängt endlich der Design-Part an! Ich zeige dir Hintergründe zu meinem Gestaltungs-Prozess und wie bei mir die Recherche nach Design-Moods aussieht.
Außerdem geht es um das Seiten- und Baseline-Grid, sowie das Schriftbild und die Farben des Landingpage-Layouts.
Dieser Beitrag enthält eine Podcastfolge!
Diese Kannst du direkt auf Patreon oder in einer Podcast App deiner Wahl anhören.
Dieser Beitrag enthält ein Video!
Das Video wird dir auf Patreon freigeschalten.
Erhalte Zugang zu diesem und weiteren exklusiven Beiträgen
Unterstütze diesen Podcast über Patreon und lerne wöchentlich mehr über Webdesign, das Arbeiten als Design Freelancer und die Zusammenarbeit mit Kunden.
Der richtige Start vor dem Design-Prozess
Der Beginn der Design-Phase ist bei mir persönlich von Projekt zu Projekt unterschiedlich.
Bei kleineren Aufträgen starte ich oft in Sketch und versuche direkt ein paar Ideen loszuwerden.
Bei größeren Projekten teile ich die Ziele des Kunden und die Wünsche der Zielgruppe nochmal in eigene Überschriften auf und mache für mich persönlich erstmal Notizen, wie diese in der Darstellung aussehen könnten und welche möglichen Vorgehensweisen es dafür gibt. Daraus ergeben sich auch ganz leicht Key-Words, die ich später bei der Inspirations-Suche verwenden kann. In abgeschwächter Form mach ich das hier direkt im nächsten Abschnitt mal als Beispiel für dich.
Es schadet nie, als Designer die Anliegen der Zielgruppe und Seitenbesucher nochmal genauer unter die Lupe zu nehmen und für das Layout zu sortieren.
Wie könnten wir das, was die Zielgruppe auf der Landingpage sehen will, gestalterisch darstellen?
Auf die genauen Bedürfnisse und Wünsche meiner Zielgruppe bin ich schon im Beitrag vorher eingegangen.
Hier geht es jetzt darum, nochmal aus der Designer-Sicht aufzuschreiben, welche Inhalte auf jeden Fall in das Layout der Landingpage mit einfließen müssen, um auch die gewollten Ziele zu erreichen.
(Alle Punkte beziehen sich auf meine Podcast Landingpage).
- Landingpage Überschrift → Podcast-Titel einbinden und den Zweck der Landingpage formulieren, maximal zwei Zeilen
- Kurze Podcast Beschreibung → ein oder zwei knappe Sätze um was es im Kern geht
- Podcast Cover zeigen → Wiedererkennungswert
- Mich visuell als den Podcast-Host einbinden → Menschlichkeit und Vertrauen wecken → Link zu "mehr über mich" integrieren
- Auffällige Verlinkung zu Podcast-Plattformen → iTunes, Stitcher, Pocket Casts, Overcast, Soundcloud… → RSS-Feed Link anbieten
- Vorteile und Themenbereiche des Podcasts aufzählen → Qualität und Hochwertigkeit rüberbringen → Unterschied zu anderen Podcasts nennen
- In einen Podcast reinhören → in einem Overlay? → Die neuesten/oder besten anderen Folgen anteasern
- Newsletter SignUp → über neue Beiträge benachrichtigt werden → prominent platzieren
- Rezensionen und Bewertungen von Zuhörern darstellen → eventuell mit Links zu deren Webseiten und einem Bild
- Social Media Verknüpfungen → animiert die Seite zu teilen
- Abschluss Footer → Fragen und Anregungen → Kontaktseite verlinken → Verlinkung zu meinem Blog (in Textform)
Diese Liste gibt mir schon einen guten Einblick, was alles in das Layout integriert werden muss und was ich auch schon in den Wireframes als Elemente anlegen könnte.
Ein großer Teil, der jetzt noch hinzukommt, ist der Inhalt, den dir normalerweise der Kunde bzw. jemand in deinem Team, liefert.
Da ich in diesem Fall selbst derjenige bin, der auch die Texte für die Landingpage verfassen muss, hilft mir diese Liste auch noch mal, einige wichtige Eckdaten für eine richtige Formulierung festzuhalten.
Falls du eine Marketing-Landingpage für deinen Kunden aufbauen sollst, empfehle ich dir auf jeden Fall einen professionellen Texter hinzuzufügen. Gerade die ersten Beschreibungen auf der Seite sind enorm wichtig und als Designer ist es nicht deine Aufgabe, diese Texte zu formulieren(!!).
Wireframes für die Landingpage erstellen
Die erste Phase des Design Prozesses ist oft sehr eintönig und gestalterisch eher zurückhaltend. Es geht mehr darum, alle zuvor geplanten Inhalte für die Landingpage zu strukturieren und sich selbst eine Übersicht zu schaffen, was alles in das Layout mit rein muss.
Diesen groben Aufbau nennt man in der Design-Branche Wireframes. Dabei werden die grundlegenden Elemente der Seite festgehalten und in einem „Gerüst” aufgebaut. Dadurch ist gut zu erkennen, wo und wie etwas angeordnet werden könnte und wie viele Inhalte es überhaupt gibt.
Während dieses Prozesses auf jeden Fall noch nicht an Details festklammern! Ob der Button zum Beispiel einen Schatten hat oder nicht, ist erstmal egal. Es geht vielmehr darum, wie viele Buttons oder Texte es auf der Seite geben soll und wie diese logisch platziert werden könnten.
Warum mit Wireframes arbeiten
Wireframes stellen die grundsätzlichen Layout Elemente der Seite dar. Sie helfen dir außerdem, dich nicht zu lange mit Design Details aufzuhalten, sondern schnell verschiedene Steps auszuprobieren.
Wireframes können unterschiedlich aufgebaut werden. Ich verwende dazu meistens das Programm Sketch. Viele andere Designer skizzieren erst ein paar Elemente auf einem Blatt Papier und digitalisieren alles anschließend.
Was in Wireframes integriert werden sollte
- Content → Was wird auf der Seite an Inhalten gezeigt?
- Struktur → Wie ist der Inhalt der Seite aufgebaut?
- Hierarchien → Postion und Größe → Wie viel Raum wird von Elementen eingenommen?
- Funktionsweise → Wie verhalten sich Elemente zueinander und mit dem User
Was NICHT in Wireframes integriert werden sollte
- Nicht an Design-Elementen festklammern → lenkt zu schnell ab und hält dich zu lange auf. Wireframes sind dazu da, um schnell Dinge auszuprobieren.
- Dummy Texte vermeiden → Kein Lorem Ipsum! Um Klarheit zu schaffen, muss unbedingt der reale Text eingefügt werden. So siehst du sofort, wie viel Platz bestimmte Bereiche brauchen oder ob eventuell an manchen Stellen Inhalte fehlen.
- Wireframes sollten nicht den finalen Look des Layouts oder der Website repräsentieren. Sie sollten besser zeigen, wie die Seite funktioniert und welche Inhalte es gibt.
Inspirations- und Stimmungsbilder finden und mit dem Design deines Layouts starten
Jetzt fängt endlich der Design-Part an! Ich zeige dir Hintergründe zu meinem Gestaltungs-Prozess und wie bei mir die Recherche nach Design-Moods aussieht.
Außerdem geht es um das Seiten- und Baseline-Grid, sowie das Schriftbild und die Farben des Landingpage-Layouts.
