Das ist der vierte Teil meiner Landingpage Reihe, die ich in den letzten Wochen veröffentlicht habe.
Im ersten Teil lag der Fokus auf den wichtigen Inhalten und dem grundlegenden Aufbau einer Landingpage.
Im zweiten Teil haben wir uns mit der Zielgruppe und verschiedenen Use-Cases beschäftigt. Dadurch haben wir erfahren, was die Besucher auf der Landingpage sehen wollen und was ich dementsprechend mit einbinden muss.
Nach der Vorbereitung ging es anschließend dann um das Konzept und die Wireframes der Landingpage. Und heute geht es endlich um das finale Design.
Damit du auch wirklich aus praktischen Beispielen lernen kannst, zeige ich dir am besten in einer Schritt für Schritt Anleitung, wie ich das Design meiner Landingpage starte und wie dabei mein Denk- und Arbeitsprozess ist.
Wir beginnen zuerst mit der Recherche nach sogenannten Design-Moods, die wir in unserem Landingpage-Prozess als Inspiration verwenden können.
Danach geht es um das Seiten- und Baseline-Grid, sowie das Schriftbild, die Farben und das Design der ganzen Landingpage im allgemeinen.
Das ist der vierte Teil meiner Landingpage Reihe, die ich in den letzten Wochen veröffentlicht habe.
Im ersten Teil lag der Fokus auf den wichtigen Inhalten und dem grundlegenden Aufbau einer Landingpage.
Im zweiten Teil haben wir uns mit der Zielgruppe und verschiedenen Use-Cases beschäftigt. Dadurch haben wir erfahren, was die Besucher auf der Landingpage sehen wollen und was ich dementsprechend mit einbinden muss.
Nach der Vorbereitung ging es anschließend dann um das Konzept und die Wireframes der Landingpage. Und heute geht es endlich um das finale Design.
Damit du auch wirklich aus praktischen Beispielen lernen kannst, zeige ich dir am besten in einer Schritt für Schritt Anleitung, wie ich das Design meiner Landingpage starte und wie dabei mein Denk- und Arbeitsprozess ist.
Wir beginnen zuerst mit der Recherche nach sogenannten Design-Moods, die wir in unserem Landingpage-Prozess als Inspiration verwenden können.
Danach geht es um das Seiten- und Baseline-Grid, sowie das Schriftbild, die Farben und das Design der ganzen Landingpage im allgemeinen.
Nutze das Konzept und die Wireframes als Grundlage um dich jetzt auf das Design und die Details konzentrieren zu können
Viele überspringen den im letzten Teil behandelten Wireframe Prozess und setzen direkt Ideen im Design um.
Die Wireframes helfen mir aber, mich jetzt nicht mehr unbedingt auf den Aufbau oder Inhalt konzentrieren zu müssen. Jetzt geht es um das Aussehen und die Harmonie aller Landingpage Elemente zueinander.
Gibt es also zum Beispiel ein „Call to Action” Bereich an einer bestimmten Stelle, muss ich mir jetzt nicht mehr die Frage stellen, ob er dort auch Sinn macht. Das wurde zuvor mit den Wireframes durchdacht.
Ich kümmere mich jetzt darum, dieses Element zu gestalten und Details auszuarbeiten.
Fangen wir aber damit an, ein paar Inspirations-Moods zu sammeln, um uns den Start in den Design-Prozess zu erleichtern.
Inspiration für dein Design suchen und Stimmungsbilder für das Layout sammeln
Diese Inspirations- und Ideensuche muss nicht unbedingt erst jetzt passieren. Du kannst auch schon während des Planungsprozesses oder beim Aufbauen der Wireframes auf anderen Seiten vorbeischauen und Gedanken sowie Stimmungen festhalten. Manchmal helfen sie dir auch schon während des Konzepts, um überhaupt auf gute Ideen zu kommen.
Unterscheide einfach, für was du recherchierst:
- Inhalte → Was gibt es zu dem Thema, was bieten andere an (würde auch schon in der Konzeptphase hilfreich sein)
- Funktionsweise → Animationen oder Verhaltensweisen von Elementen im Layout → Beispiele, die du auch dem Entwickler zeigen kannst
- Design → Inspiration zur Gestaltung (von anderen Layouts oder Webseiten, die dir gefallen)
Ich befinde mich jetzt gerade beim Design der Landingpage und fang deshalb an auf verschiedenen Design-Webseiten Inspirationen zu sammeln und zu schauen, in welche Richtung das Layout gehen könnte.
Wenn mir unterwegs auch gute Animationen auffallen (Funktionsweise), halte ich diese ebenfalls fest.
Üblicherweise lege ich mir dafür eine neue Seite in meinem digitalen Notiz-Programm an und beginne, verschiedene Bilder einfach dort reinzuziehen. Manchmal sind es Screenshots von ganzen Seiten aber oft auch nur kleinere Ausschnitte aus einem anderen Layout.
Seiten, die dir bei der Design-Inspirationssuche helfen können:
Durch diesen Research-Prozess kommen einige gute Stimmungsbilder (Moods) zusammen, die mir selbst ganz gut zeigen, wie Elemente und Styles aussehen könnten.
Schauen wir uns mal an, was ich für meine Podcast-Landingpage bisher gesammelt habe:
Das Design
Merke dir: Auch die Struktur der Seite kann sich nach den Wireframes und während des Design-Prozesses noch ändern.
Ich arbeite hier an meiner eigenen Landingpage und das Gute daran ist, dass ich flexibel bleiben kann. Gute Ideen entstehen nicht, wenn man einen bestimmten Ablauf oder eine Reihenfolge einhält. Sie kommen dir meistens einfach so nebenbei.
Deshalb sei am besten offen dafür, auch während des Designs nochmal Änderungen bezüglich Inhalt oder Aufbau anzusprechen.
Ein Grid aufbauen
Ich nutze für das Design der Landingpage das Programm Sketch und lege ein Artboard mit 1280px Breite an. Außerdem nutze ich ein 12 Spalten Grid mit einer Baseline von 6px.
Die Typografie der Landingpage
Da sich meine Landingpage innerhalb meiner Website befindet, versuche ich das Layout und vor allem die Typo an das vorhandene Schriftbild anzupassen.
Ich nutze also keine neue Font sondern verwende auch auf der Podcast-Landingpage die „Source Sans Pro”.
Außerdem kopiere ich mir auch schon meine angelegten Text-Styles von meinem Website Redesign in dieses Dokument und passe diese eventuell hier und da ein bisschen an.
Zum Beispiel die Größe von Fließtexten möchte ich bei der Landingpage reduzieren. Das hat den Grund, dass ich aus SEO-Sicht viel Text geschrieben habe, diesen bei den unterschiedlichen Landingpage-Abschnitten aber nicht zu lang werden lassen möchte.
Die passenden Farben finden
Es gibt viele verschiedene Werkzeuge, um die passenden Farbkombinationen für dein Layout zu finden. In folgendem Artikel habe ich meine beliebtesten Tools zusammengefasst, mit denen du schnell und einfach Farben für deine Landingpage sammeln kannst:
→ 10+ Werkzeuge um die richtigen Farben für dein Layout zu finden
Auch wenn sich bei meiner Landingpage das Schriftbild an meiner vorhandenen Website orientiert, möchte ich mit der Farbgestaltung gerne einen anderen Weg gehen. Ich finde, es stellt kein Problem dar, eine Unterseite farblich von den anderen zu unterscheiden. Wichtig ist aber, dass das Schriftbild insgesamt auf der Website einheitlich bleibt.
An dieser Stelle kann man sich auch nochmal seine zuvor in den Notizen gesammelte Inspirationen zu Hilfe holen und dann anfangen, Details auszuarbeiten und ein stimmiges, benutzerfreundliches und Zielgruppen orientiertes Layout zu designen.
Mehr Informationen zu meinem Designprozess findest du in dem oben eingebundenen Video.
Falls du meine Gedanken hinter den einzelnen Schritten noch ausführlicher erklärt haben willst, schau dir am besten diese dreistündige Video zum Aufbau des Layouts an. Das ist sozusagen eine Schritt für Schritt Anleitung und du kannst mir von vorne bis hinten über die Schulter schauen.
Mobile und Tablet Varianten anlegen
Dieser Prozess ist bei einer Landingpage für einen Kunden sicherlich sinnvoll und sollte auch auf jeden Fall eingehalten werden.
Viele Landing-Pages sind darauf optimiert, genau in einem bestimmten Viewport wichtige Informationen zu zeigen. Reduzierst du das Layout dann aber auf Smartphone-Größe, ist es oft nicht mehr möglich, Elemente, die man zuerst sehen sollte, auch oben anzuzeigen.
Heutzutage gestalten wir einfach für so viele unterschiedliche Displaygrößen und es ist beinahe unmöglich, für alle gleich gute Ergebnisse zu liefern.
Wichtig ist: Untersuche deine Zielgruppe gut genug um zu wissen, mit welchen Geräten sie voraussichtlich deine Landingpage am meisten besuchen. Fokussiere dich bei deinem Design-Prozess dann auch primär auf diese Display-Größe.
In meinem Fall und der Podcast-Landingpage weiß ich, dass viele meiner Seitenbesucher mit einem Laptop und somit einer Desktop-Größe auf die Seite kommen (1024px Breite aufwärts). Deshalb konzentriere ich mich auf diese Layout Variante und adaptiere anschließend einfach auf die darunter liegenden Größen.
Hast du aber eine Zielgruppe, von denen die meisten über Social Media Kanälen auf deine Landingpage kommen, da du viel mit sozialen Netzwerken wirbst, ist die Wahrscheinlichkeit hoch, dass sie eher ein Smartphone benutzen. Eventuell solltest du also auch primär mit diesem Layout beginnen oder eine spezielle Version dafür anlegen.
Landingpage auswerten und optimieren
Nach dem Design folgt üblicherweise die Programmierung der Seite. Da sich in meinem Blog aber alles um Web und Interface DESIGN dreht, überspringe ich diesen Teil und gehe direkt zur Auswertung über.
Die Auswertung von User-Verhalten und Statistiken zeigt dir, ob du deine Ziele auch wirklich erreicht hast und was du in Zukunft besser machen musst.
Das ist der letzte und abschließende Teil dieser Landingpage Serie.
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.
Nutze das Konzept und die Wireframes als Grundlage um dich jetzt auf das Design und die Details konzentrieren zu können
Viele überspringen den im letzten Teil behandelten Wireframe Prozess und setzen direkt Ideen im Design um.
Die Wireframes helfen mir aber, mich jetzt nicht mehr unbedingt auf den Aufbau oder Inhalt konzentrieren zu müssen. Jetzt geht es um das Aussehen und die Harmonie aller Landingpage Elemente zueinander.
Gibt es also zum Beispiel ein „Call to Action” Bereich an einer bestimmten Stelle, muss ich mir jetzt nicht mehr die Frage stellen, ob er dort auch Sinn macht. Das wurde zuvor mit den Wireframes durchdacht.
Ich kümmere mich jetzt darum, dieses Element zu gestalten und Details auszuarbeiten.
Fangen wir aber damit an, ein paar Inspirations-Moods zu sammeln, um uns den Start in den Design-Prozess zu erleichtern.
Inspiration für dein Design suchen und Stimmungsbilder für das Layout sammeln
Diese Inspirations- und Ideensuche muss nicht unbedingt erst jetzt passieren. Du kannst auch schon während des Planungsprozesses oder beim Aufbauen der Wireframes auf anderen Seiten vorbeischauen und Gedanken sowie Stimmungen festhalten. Manchmal helfen sie dir auch schon während des Konzepts, um überhaupt auf gute Ideen zu kommen.
Unterscheide einfach, für was du recherchierst:
- Inhalte → Was gibt es zu dem Thema, was bieten andere an (würde auch schon in der Konzeptphase hilfreich sein)
- Funktionsweise → Animationen oder Verhaltensweisen von Elementen im Layout → Beispiele, die du auch dem Entwickler zeigen kannst
- Design → Inspiration zur Gestaltung (von anderen Layouts oder Webseiten, die dir gefallen)
Ich befinde mich jetzt gerade beim Design der Landingpage und fang deshalb an auf verschiedenen Design-Webseiten Inspirationen zu sammeln und zu schauen, in welche Richtung das Layout gehen könnte.
Wenn mir unterwegs auch gute Animationen auffallen (Funktionsweise), halte ich diese ebenfalls fest.
Üblicherweise lege ich mir dafür eine neue Seite in meinem digitalen Notiz-Programm an und beginne, verschiedene Bilder einfach dort reinzuziehen. Manchmal sind es Screenshots von ganzen Seiten aber oft auch nur kleinere Ausschnitte aus einem anderen Layout.
Seiten, die dir bei der Design-Inspirationssuche helfen können:
Durch diesen Research-Prozess kommen einige gute Stimmungsbilder (Moods) zusammen, die mir selbst ganz gut zeigen, wie Elemente und Styles aussehen könnten.
Schauen wir uns mal an, was ich für meine Podcast-Landingpage bisher gesammelt habe:
Das Design
Merke dir: Auch die Struktur der Seite kann sich nach den Wireframes und während des Design-Prozesses noch ändern.
Ich arbeite hier an meiner eigenen Landingpage und das Gute daran ist, dass ich flexibel bleiben kann. Gute Ideen entstehen nicht, wenn man einen bestimmten Ablauf oder eine Reihenfolge einhält. Sie kommen dir meistens einfach so nebenbei.
Deshalb sei am besten offen dafür, auch während des Designs nochmal Änderungen bezüglich Inhalt oder Aufbau anzusprechen.
Ein Grid aufbauen
Ich nutze für das Design der Landingpage das Programm Sketch und lege ein Artboard mit 1280px Breite an. Außerdem nutze ich ein 12 Spalten Grid mit einer Baseline von 6px.
Die Typografie der Landingpage
Da sich meine Landingpage innerhalb meiner Website befindet, versuche ich das Layout und vor allem die Typo an das vorhandene Schriftbild anzupassen.
Ich nutze also keine neue Font sondern verwende auch auf der Podcast-Landingpage die „Source Sans Pro”.
Außerdem kopiere ich mir auch schon meine angelegten Text-Styles von meinem Website Redesign in dieses Dokument und passe diese eventuell hier und da ein bisschen an.
Zum Beispiel die Größe von Fließtexten möchte ich bei der Landingpage reduzieren. Das hat den Grund, dass ich aus SEO-Sicht viel Text geschrieben habe, diesen bei den unterschiedlichen Landingpage-Abschnitten aber nicht zu lang werden lassen möchte.
Die passenden Farben finden
Es gibt viele verschiedene Werkzeuge, um die passenden Farbkombinationen für dein Layout zu finden. In folgendem Artikel habe ich meine beliebtesten Tools zusammengefasst, mit denen du schnell und einfach Farben für deine Landingpage sammeln kannst:
→ 10+ Werkzeuge um die richtigen Farben für dein Layout zu finden
Auch wenn sich bei meiner Landingpage das Schriftbild an meiner vorhandenen Website orientiert, möchte ich mit der Farbgestaltung gerne einen anderen Weg gehen. Ich finde, es stellt kein Problem dar, eine Unterseite farblich von den anderen zu unterscheiden. Wichtig ist aber, dass das Schriftbild insgesamt auf der Website einheitlich bleibt.
An dieser Stelle kann man sich auch nochmal seine zuvor in den Notizen gesammelte Inspirationen zu Hilfe holen und dann anfangen, Details auszuarbeiten und ein stimmiges, benutzerfreundliches und Zielgruppen orientiertes Layout zu designen.
Mehr Informationen zu meinem Designprozess findest du in dem oben eingebundenen Video.
Falls du meine Gedanken hinter den einzelnen Schritten noch ausführlicher erklärt haben willst, schau dir am besten diese dreistündige Video zum Aufbau des Layouts an. Das ist sozusagen eine Schritt für Schritt Anleitung und du kannst mir von vorne bis hinten über die Schulter schauen.
Mobile und Tablet Varianten anlegen
Dieser Prozess ist bei einer Landingpage für einen Kunden sicherlich sinnvoll und sollte auch auf jeden Fall eingehalten werden.
Viele Landing-Pages sind darauf optimiert, genau in einem bestimmten Viewport wichtige Informationen zu zeigen. Reduzierst du das Layout dann aber auf Smartphone-Größe, ist es oft nicht mehr möglich, Elemente, die man zuerst sehen sollte, auch oben anzuzeigen.
Heutzutage gestalten wir einfach für so viele unterschiedliche Displaygrößen und es ist beinahe unmöglich, für alle gleich gute Ergebnisse zu liefern.
Wichtig ist: Untersuche deine Zielgruppe gut genug um zu wissen, mit welchen Geräten sie voraussichtlich deine Landingpage am meisten besuchen. Fokussiere dich bei deinem Design-Prozess dann auch primär auf diese Display-Größe.
In meinem Fall und der Podcast-Landingpage weiß ich, dass viele meiner Seitenbesucher mit einem Laptop und somit einer Desktop-Größe auf die Seite kommen (1024px Breite aufwärts). Deshalb konzentriere ich mich auf diese Layout Variante und adaptiere anschließend einfach auf die darunter liegenden Größen.
Hast du aber eine Zielgruppe, von denen die meisten über Social Media Kanälen auf deine Landingpage kommen, da du viel mit sozialen Netzwerken wirbst, ist die Wahrscheinlichkeit hoch, dass sie eher ein Smartphone benutzen. Eventuell solltest du also auch primär mit diesem Layout beginnen oder eine spezielle Version dafür anlegen.
Landingpage auswerten und optimieren
Nach dem Design folgt üblicherweise die Programmierung der Seite. Da sich in meinem Blog aber alles um Web und Interface DESIGN dreht, überspringe ich diesen Teil und gehe direkt zur Auswertung über.
Die Auswertung von User-Verhalten und Statistiken zeigt dir, ob du deine Ziele auch wirklich erreicht hast und was du in Zukunft besser machen musst.
Das ist der letzte und abschließende Teil dieser Landingpage Serie.
