Zum Inhalt springen
Peak Atlas

Leitfaden · Gestaltung

Landingpage-Design, das
die Entscheidung leitet.

Landingpage-Design ohne Designstudium: Hierarchie, Abstände, Marke und mobile Ansicht. Wie die festen Abschnitte, Schriften und Markenfarben von Peak Pages das Layout sauber halten.

Was soll ein Besucher auf deiner Seite zuerst sehen?

2 Fragen im Plan. Erste Frage: Was soll ein Besucher in den ersten drei Sekunden sehen?

Deine Designfragen sammeln
Für
Teams ohne eigene Designerin oder eigenen Designer
In Peak Pages
Feste Abschnitte, Markenfarben, 21 Schriften, mobile Vorschau
Bewusst nicht
Freie Positionierung von Elementen

Ordnung vor Effekt

Groß. Mittel. Klein.

Arbeitsbeispiel · Blickführung

Was soll ein Besucher in den ersten drei Sekunden sehen?

Das wird das größte Element auf der Seite. Nur eins.
Gutes Landingpage-Design macht die Reihenfolge der Entscheidung sichtbar, nicht den Geschmack des Teams.
Design für Landingpages · PEAK ATLAS / R03
Der Ausgangspunkt

Eine Landingpage ist kein Plakat.

Design auf einer Landingpage hat eine Aufgabe: den Blick in der richtigen Reihenfolge zu führen, von der Überschrift über den Nutzen zur Handlung. Dafür braucht es klare Größenunterschiede, genug Abstand, eine Markenfarbe für das Wichtige und Text, der auf dem Handy lesbar bleibt. Peak Pages nimmt dir viele Fehler ab, weil Abschnitte feste Layouts haben und jede Seite automatisch mobil ist. Was auf die Seite kommt und in welcher Reihenfolge, entscheidest du.

Kontext → Frage → nächster Schritt

Vom Lesen ins Machen

Deine Designfragen. Für deine Seite.

Lokale Arbeitsvorlage
Was soll ein Besucher auf deiner Seite zuerst sehen?
Deine Auswahl.
Dein nächster Schritt.
Dein Arbeitsblatt

Vor dem Gestalten klären.

2 Fragen ausgewählt

  1. Was soll ein Besucher in den ersten drei Sekunden sehen?

    Das wird das größte Element auf der Seite. Nur eins.

  2. Wofür setzt du deine Markenfarbe ein?

    Am wirksamsten für die eine Handlung. Überall eingesetzt, verliert sie ihre Wirkung.

Lokales Arbeitsblatt · keine Produktaktion
Eine Frage, genauer betrachtet

Womit du in Peak Pages
gestaltest.

Peak Pages gibt bewusst keine freie Positionierung. Du wählst aus kontrollierten Optionen; das Layout bleibt dadurch auf jedem Gerät sauber.

Redaktionelles Arbeitsbeispiel
01 / Blickführung

Was soll ein Besucher in den ersten drei Sekunden sehen?

Das wird das größte Element auf der Seite. Nur eins.

A

AbschnitteFertige Abschnitte mit Varianten zentriert, geteilt oder Raster; per Drag & Drop sortiert.

B

FlächenHell, Elfenbein, Markenfarbe oder dunkel, dazu Abstand und Breite je Abschnitt.

C

MarkeLogo, Farben und 21 Schriften (oder eigene woff2-Dateien) gelten für die ganze Website.

D

MobilJede Seite ist automatisch mobil; Vorschau bei 100 %, 768, 390 und 320 px.

E

BewegungDezente Einblendungen, Schrittübergänge und Konfetti auf der Danke-Seite; reduzierte Bewegung wird respektiert.

Das Playbook

So gestaltest du eine Seite in Ruhe.

Ein Lernweg. Drei Perspektiven.
Vom Wissen zum nächsten Schritt

Hierarchie, Marke,
Lesbarkeit.

Ordnen → Markieren → Prüfen

  1. 01

    Eine klare Hierarchie.

    Leg fest, was groß, mittel und klein ist. Der Kopfbereich hat genau ein Hauptelement.

    Beispiel

    Fünf gleich große Kacheln im Kopfbereich

    Eine Überschrift, ein Bild, ein Button.
  2. 02

    Marke einmal festlegen.

    Setz Logo, Farben und Schrift in den Website-Einstellungen. Sie gelten dann für jede Seite, und du musst sie nicht pro Abschnitt wählen.

    Einen Abschnitt beruhigen

    Drei Hintergründe, zwei Schriften

    Eine Fläche, eine Schrift, Markenfarbe nur am Button
  3. 03

    Auf allen Breiten prüfen.

    Schalte die Vorschau zwischen 100 %, 768, 390 und 320 px um. Was auf dem kleinsten Bildschirm nicht trägt, kürzt du.

    Vor dem Livegang

    Sieht es auf dem kleinsten Handy gut aus?

    Vorschau bei 320 px geprüft, Button sichtbar.

Dein Qualitätscheck

Führt dein Design zur Handlung?

Hake ab, was du geprüft hast. Deine Auswahl bleibt nur in dieser Ansicht.

00/ 04deine Prüfpunkte

0 von 4 Punkten geprüft

Führt dein Design zur Handlung?
Quellen & Einordnung

Worauf dieser Beitrag beruht.

Allgemeiner Leitfaden mit erfundenen Beispielen. Kontrollierte Abschnitts-Layouts, Flächen, Abstände und Breiten, Logo, Farben, 21 Schriften, automatische mobile Darstellung mit Vorschau in vier Breiten und dezente Bewegung gibt es heute in Peak Pages.

  • Redaktionelles Demo

    Redaktionelles Beispiel mit erfundenen Musterdaten. KI-Entwurf, Abschnittseditor, Funnels auf der Peak-Forms-Engine, Terminbuchung, Einwilligung vor Trackern, SEO-Felder, Versionen und Leads im Peak CRM gibt es heute in Peak Pages; alles Weitere ist als Beispiel oder geplant gekennzeichnet.

Der nächste Schritt

Ein sauberes Layout ist eingebaut.

Starte Peak Pages, setz Logo und Farben einmal und sieh deine Seite in allen Vorschaubreiten.

Peak Pages kostenlos starten

Häufige Fragen

Kann ich das Layout frei verschieben?

Nein. Peak Pages arbeitet mit festen Abschnitten, damit die Seite auf jedem Gerät lesbar bleibt.

Wie prüfe ich die mobile Ansicht?

In der Vorschau mit den Breiten 100 %, 768, 390 und 320 Pixel.

Kann ich meine Markenfarben nutzen?

Ja. Farben, Schriften und Logo legst du einmal für die Site fest.

Weiter in Peak Pages