Entwerfen Sie eine elegante "Dankbarkeitsprotokoll" Landungsseite mit Photoshop

In diesem Tutorial führe ich Sie durch den Prozess der Gestaltung einer eleganten Landungsseite für einen fiktiven "Dankbarkeitslog"-Service.  Wir beginnen völlig neu und entwerfen das Layout mit Adobe Photoshop in kürzester Zeit.  Wir verwenden einige grundlegende und fortgeschrittene Techniken, um dieses Design unter Berücksichtigung der Konvertierung zu erstellen.  Lassen Sie uns anfangen!

Tutorial-Assets

Um folgen zu können, benötigen Sie einige (frei verfügbare) Assets:

• Chillin 'in der Sonne Foto von Skitterphoto
• PT Serif Schriftart von Font Squirrel
• Playfair Dislay Schriftart von Font Squirrel
• Source Sans Pro Schriftart von Font Squirrel
• Benutzeravatare von User Inter Faces

Holen Sie das Dokument bereit

Schritt 1

Beginnen Sie mit der Erstellung eines neuen Photoshop-Dokuments (Datei > Neu (File > New) ...) mit den unten gezeigten Einstellungen.  Sie können eine Leinwand in jeder gewünschten Größe verwenden - das Web hat schließlich keine feste Breite.

Schritt 2

Lassen Sie uns einige Hilfslinien einstellen, damit unser Layout genügend Platz hat und ausgewogen aussieht.  Ich verwende nicht immer ein vordefiniertes Raster, aber die Festlegung einiger Richtlinien sorgt für Ordnung und hilft, die Breite unserer Website zu definieren.  Gehen Sie zu Ansicht > Neuer Leitfaden (View > New Guide)... und legen Sie einige Richtlinien fest.  Ich wähle normalerweise 1000px als Website-Breite und füge einige Richtlinien von den Ecken hinzu, damit es Platz zum Atmen gibt.

Hinweis: Für dieses Tutorial verwendete Richtlinien: vertikal bei 200px, 500px, 700px, 900px und 1200px.

Tipp: Sie können das GuideGuide Photoshop-Plugin auch verwenden, um diesen Vorgang noch schneller zu machen.

Schritt 3

Indem wir uns an die Etikette von Photoshop halten, werden wir die Dinge organisieren und daher einfach zu navigieren und zu bearbeiten.  Erstellen wir drei Ebenengruppen mit den Namen Kopfzeile, Inhalt und Fusszeile.  Um Gruppen zu erstellen, gehen Sie zu Ebene > Neu > Gruppieren (Layer > New > Group) ... und geben Sie jedem einen Titel wie erwähnt.  Um schnell eine Gruppe zu erstellen, klicken Sie einfach auf das Ordnersymbol.

Entwerfen des Kopfzeilebereichs

Die Kopfzeile oder Bereich "über dem Falz" (wo auch immer diese heutzutage sind) spielt eine sehr wichtige Rolle bei der Interaktion mit Benutzern und stellt sicher, dass Besucher auf der Website bleiben.  Für dieses Landungsseite-Layout verwende ich eine Einstellung von zwei Personen, die auf einer Bank sitzen; eine von ihnen, die Hände in der Luft halten, die positive Gefühle und Glück schildert.

Schritt 1

Lassen Sie uns zuerst den Hintergrund des Blogs erstellen.  In der Gruppe "Kopfzeile" zeichne eine schwarze #000000 farbige Rechteckform mit dem Rechteckwerkzeug (U).  In meinem Fall zeichnete ich ein 1400x728px großes Rechteck und platzierte es am oberen Rand des Dokuments.

Laden Sie das Foto Chillin 'in die Sonne, ziehen Sie es in das Photoshop-Dokument und legen Sie es über die Rechteckebene.  Benennen Sie die Bild-Ebene in etwas um, das Sie später wiedererkennen werden. In meinem Fall habe ich IMG verwendet.  Halten Sie danach die Alt-Taste gedrückt und bewegen Sie die Maus über die Fotoebene, bis Sie einen kleinen Pfeil sehen, der nach unten zeigt, und lassen Sie ihn los.  Sie haben gerade eine Schnittmaske erstellt.  Reduzieren Sie die Opazität der IMG-Ebene schließlich auf 70%, damit der Text, den wir einfügen, besser lesbar ist.

Drücken Sie nun CMD+T und passen Sie das Foto an Ihre Bedürfnisse an.

Tipp: Halten Sie die Shift-Taste gedrückt, um proportional zu transformieren.

Schritt 2

Erstellen Sie nun eine globale Navigation für unsere Zielseite, damit Nutzer durch die Website navigieren können.

Erstellen Sie eine neue Gruppe namens "Navigation", und platzieren Sie sie in der Gruppe "Kopfzeile".  Wählen Sie danach das Rechteck-Werkzeug (Rectangle Tool) (U) und zeichnen Sie ein weißes Rechteck zwischen der ersten und der letzten vertikalen Linie.  Machen Sie es etwa 60px hoch, damit die Navigationspunkte etwas Platz zum Atmen und Saubermachen haben.  Schließlich bewegen Sie es 30px von oben nach unten, damit wir diesen schwebenden Effekt haben können, der schön auf unserem Bild bleibt.

Schritt 3

Lassen Sie uns nun ein Logo und einige Links platzieren, damit unsere Navigationsleiste wie etwas aussieht, das Menschen verwenden können.  Für das Logo habe ich einfach "Grtdd" mit Playfair Display (Bold Italic) Schriftart 26px Größe und Farbe dunkelgrau #0e0e0e geschrieben.

Für die Navigationslinks habe ich Source Sans Pro 14px mit erweitertem Abstand zwischen den Buchstaben verwendet.  Für den Hauptruf zur Aktion "Anmelden" habe ich Schwarz und die Farbe Grün #96c218 verwendet.  Wir sind mit der "Navigation" fertig, also minimieren Sie sie, indem Sie auf das kleine Dreieck neben dem Gruppennamen klicken.

Schritt 4

Lassen Sie uns eine inspirierende Botschaft schreiben, die das Bild und die allgemeine Idee der Website begleitet.  Ich werde eine riesige Fettschrift mit einer Unterüberschrift verwenden, die das Konzept genauer erklärt.

Da wir für unseren oberen Bereich einen ziemlich dunklen Hintergrund haben, ist es ratsam, hellen Text zu verwenden, um einen hohen Kontrast zu erzeugen und die Lesbarkeit sicherzustellen.  Ich habe weiße #FFFFFF Source Sans Pro (Schwarz) 80px mit einer Zeilenhöhe von 86px verwendet.  Platzieren Sie es etwa 120 px unter der Navigationsleiste, damit die Nachricht genügend Platz hat, um als wichtig wahrgenommen zu werden.

Jetzt stellen wir die Unterüberschrift, die das ganze Konzept klären und einige Fragen beantworten wird, die Besucher möglicherweise haben.  Um eine schöne typografische Kombination zu erstellen, mixen wir die Haupt-Serifenzeile mit der eleganten Serifenschrift, die wir zuvor für das Logo verwendet haben.

Weitere inspirierende Schriftkombinationen finden Sie unter: Google Web Fonts Typographic Project und Ein Anfängerhandbuch zum Paaren von Schriftarten. 

Für dieses Tutorial habe ich weiße #FFFFFF 26px Playfair Display (Italic) Schriftart verwendet und es 40px unterhalb der Hauptüberschrift platziert.

Schritt 5

Fügen wir etwas Interessanteres hinzu, damit der Besucher den Vorteil sehen kann, auf der Website zu bleiben.  Ein Logbuch für Dankbarkeit basiert darauf, die Dinge aufzuzeichnen, für die Sie dankbar sind. Daher wären einige soziale Beweise eine gute Idee. Sie zeigen Leuten, die sie tatsächlich benutzen, und zeigen etwas Begehrenswertes wie eine Strähne.

Erstellen Sie eine neue Gruppe namens "Beispiel", wählen Sie das Ellipsen-Werkzeug (Ellipse Tool ) (U) und zeichnen Sie einen Kreis, während Sie die Shift-Taste gedrückt halten.  In meinem Fall ist es 60x60px.  Danach legen Sie jemandes Gesicht oben auf die Kreis-Ebene und halten Sie die Alt-Taste gedrückt, bewegen Sie die Maus über die Ebene, bis Sie einen kleinen nach unten zeigenden Pfeil sehen, und lassen Sie sie dann los, um eine Schnittmaske zu erstellen.  Jetzt können Sie das Bild bei Bedarf ändern, indem Sie auf CMD+T klicken.

Für dieses Tutorial verwende ich ein zufälliges Gesicht von User Inter Faces.

Profi-Tipp: Halten Sie die Shift-Taste gedrückt, um proportionale Formen zu zeichnen/verändern.

Jetzt müssen wir einen Indikator für aufeinanderfolgende Protokolle erstellen.  Lassen Sie uns eine andere Kreisform erstellen, dieses Mal kleiner, und legen Sie eine Zahl hinein.  Einfach, aber verständlich und macht den Job.  Für die Kreisfarbe habe ich das zuvor verwendete grüne #96c218 wieder verwendet.  In meinem Fall ist es Größe 30x30px und der Text innen ist weiß #FFFFFF Source Sans Pro (Fett) 14px.

Schließlich geben wir unserer Person einen Namen und erklären, wofür diese Zahl steht.  Wählen Sie das Horizontalen Typ-Werkzeug  (Horizontal Type Tool) (T) und geben Sie einen Namen und eine Streifenlänge ein.  In meinem Fall habe ich PT Serif (Bold Italic) 16px für den Namen und Source Sans Pro (Regular) 13px für den Streifen verwendet.  Achten Sie darauf, eine ausreichend große Linienhöhe zu verwenden, damit die Elemente Platz zum Atmen haben.

Großartig, noch eine letzte Sache bevor Sie in den Inhaltsbereich wechseln.  Wir brauchen einen Call-to-Action (CTA), damit der Benutzer etwas tun kann, nachdem er die Bilder gesehen und die Schlagzeilen gelesen hat.  Erstellen Sie eine neue Gruppe namens "CTA", setzen Sie die Vordergrundfarbe auf weiß #FFFFFF und nehmen Sie das Rechteck-Werkzeug (T).  Zeichnen Sie danach eine Rechteckform, in meinem Fall ist die Größe 280x60px.  Beachten Sie die Konsistenz der Höhe, die zuvor für die Navigationsleiste verwendet wurde.

Danach geben Sie eine überzeugende Kopie für den Button ein.  Ich habe "START LIVING →" verwendet, wobei die Farbe wie zuvor in der Navigationsleiste dunkelgrau #0e0e0e, Schriftart Source Sans Pro (Halbbild) 16px mit Tracking 140 verwendet wurde.

Schritt 6

Jetzt sind wir fertig mit der "Kopfzeile".  Öffnen wir die Gruppe "Inhalt" und erstellen Sie eine weitere namens "Beschreibung".  Wir werden eine starke Überschrift setzen, gefolgt von einer detaillierteren Beschreibung der gesamten Website.  Es ist wichtig, den Call To Action (CTA) zu wiederholen, damit der Benutzer nicht zu viel nachdenken muss, aber dennoch in der Lage ist, jederzeit Maßnahmen zu ergreifen.

Wählen Sie das Horizontaltyp-Werkzeug (T) und wählen Sie eine leistungsstarke Schriftart für deine Überschrift.  In meinem Fall verwende ich das schöne und elegante, aber autoritativ aussehende Playfair Display (Black) 60px.  Stellen Sie sicher, dass Sie diesem Biest viel Platz zum Atmen geben, ich habe es 100px von Kopfzeile entfernt.

Erstellen Sie jetzt mit demselben Horizontalen Typ-Werkzeug (T) ein Rechteck, indem Sie darauf klicken und es ziehen.  In meinem Fall ist es eine 600x140px große Box, in die ich eine überzeugende Kopie für die Benutzer legte, um sich zu entscheiden, auf den CTA zu klicken.  Um eine klare visuelle Hierarchie zu erstellen, sollte der Beschreibungstext kleiner und nicht so schwer sein.  In meinem Beispiel verwende ich grau #666666 PT Serif (Regular) 18px, Zeilenhöhe 28px.  Das gesamte Element wird um 50 px von der Überschrift nach unten verschoben, um ein sauberes und professionelles Aussehen zu erhalten.

Nach dem Lesen der Kopie kann unser Besucher davon überzeugt werden, es zu versuchen, daher ist es ratsam, die Call To Action (CTA)-Taste noch einmal zu wiederholen.  Öffnen Sie die Gruppe "Kopfzeile", suchen Sie die Gruppe "CTA" und duplizieren Sie sie, indem Sie CMD+J drücken.  Danach verschieben Sie es in die Gruppe "Beschreibung" und ändern Sie die Farbe der Schaltfläche zu unserem zuvor verwendeten grünen en #96c218 und für den Text verwenden Sie weiß #FFFFFF.  Bewegen Sie es 50px von der Kopie herunter, um konsistenten Abstand zu haben.

Sieht also gut aus.  Lassen Sie uns eine einfache Zeile setzen, um den Beschreibungsblock visuell vom nächsten zu trennen.  Wählen Sie das Linienwerkzeug (Line Tool) (U), setzen Sie Breite auf 1px und zeichnen Sie eine horizontale Linie über die erste und die letzte vertikale Linie.  In meinem Fall habe ich eine hellgraue Farbe #e6e6e6 verwendet, die nicht zu stark ist, aber die Arbeit perfekt macht.

Profi-Tipp: Halten Sie die Shift-Taste gedrückt, um eine perfekt gerade Linie zu zeichnen.

Schritt 7

Jetzt sind wir fertig mit dem Block "Beschreibung", es ist Zeit, mit dem nächsten weiterzumachen.  Erstellen Sie eine neue Gruppe mit dem Namen "Inspiriert".  Danach duplizieren Sie die Überschrift- und Beschreibungsebenen aus der Gruppe "Beschreibung" und verschieben Sie sie in die Gruppe "Inspiriert".  Bearbeiten Sie die Ebenen und ändern Sie die Kopie.  Unten ist mein Beispiel:

Navigieren Sie nun zur Gruppe "Kopfzeile" und finden Sie die Gruppe "Beispiel".  Duplizieren Sie die gesamte Gruppe, indem Sie CMD+J drücken und in die Gruppe "Inspiriert" verschieben.  Wir werden unser Beispiel von oben wiederverwenden und einige Benutzergeschichten zeigen, um unsere Besucher zu inspirieren, etwas zu unternehmen.

Benennen Sie den Gruppennamen in "Geschichte" um und entfernen Sie den grünen Indikator. Außerdem müssen Sie die Textfarbe in dunkelgrau #0e0e0e ändern, damit sie auf einem weißen Hintergrund lesbar ist.  Verwenden Sie ein anderes Bild für den Avatar und schreiben Sie die Position und den Standort der Person in helleres Grau #666666, damit sich die Personen mehr mit dieser Person identifizieren können.

Danach erstellen Sie ein Textfeld mit einer Größe von ca. 300x160px mit dem Horizontaltyp-Werkzeug (T) und schreiben ein Beispiel für Dankbarkeitsprotokoll-Verbesserung.  Ich habe PT Serif (Italic) 16px Größe dunkelgraue Farbe wie vor #666666 verwendet.

Duplizieren Sie nun zweimal die Gruppe "Geschichte" und ändern Sie die Avatare, Namen und Beschreibungen.  Ordnen Sie diese beiden Gruppen in horizontaler Reihenfolge an und lassen Sie Abstände zwischen allen Gruppen wie zuvor.

Schritt 8

Jetzt, da wir mit der Gruppe "Inspiriert" fertig sind, gehen wir zum letzten Abschnitt unserer Zielseite über.  Der letzte Call To Action (mit einigen weiteren Details) wird die Besucher ermutigen, sich zu registrieren, indem sie eine Email-Adresse eingeben.

Erstellen Sie eine neue Gruppe mit dem Namen "Email" und navigieren Sie zur vorherigen Gruppe, um eine Überschriftsebene zu finden. Kopieren Sie sie anschließend, indem Sie CMD+J drücken und in die neu erstellte Gruppe verschieben.  Ändern Sie die Überschrift in etwas Ermutigendes und bewegen Sie sich um 100 px unter der Linie, um die Konsistenz zu erhalten.

Großartig!  Setzen Sie nun die Vordergrundfarbe auf hellgrau #f5f5f5 und wählen Sie das Rechteckwerkzeug (U), um ein Feld für ein Email-Feld zu zeichnen.  Es sollte die gleiche Höhe wie unsere Call-to-Action (CTA)-Schaltfläche haben, obwohl die Breite nicht so wichtig ist.  In meinem Fall ist es 430x60px.  Nehmen Sie dann das Horizontalen Typ-Werkzeug (T) und schreiben Sie "Geben Sie Ihre E-Mail-Adresse ein" oder etwas Ähnliches. Stellen Sie sicher, dass Sie eine dunkle Farbe verwenden, damit sie gut lesbar ist.

Gehen Sie nun zu der Gruppe "Beschreibung" in unserem Ebenenfenster und finden Sie die Gruppe "CTA".  Duplizieren Sie es durch Drücken von CMD+J und verschieben Sie es in die Gruppe "Email".  Platzieren Sie den Button rechts neben dem Email-Feld und zentrieren Sie das gesamte Element.

Schritt 9

Das Ende ist nahe!  Lassen Sie uns alle Gruppen minimieren und die Gruppe "Fußzeile" öffnen.  Setzen Sie die Vordergrundfarbe auf dunkelgrau #2d2d2d und zeichnen Sie mit dem Rechteckwerkzeug (U) ein Rechteck voller Breite von ca. 230px Höhe.  Das wird unser Fußzeilenhintergrund sein und den Inhaltsbereich mit seinem Kontrast unterscheiden.

Gehen Sie weiter und finden Sie die "Navigation"-Gruppe und Logo-Ebene, duplizieren Sie es durch Drücken von CMD+J und verschieben Sie es in die "Fußzeile"-Gruppe.  Ändern Sie die Farbe in Weiß #FFFFFF, und verschieben Sie sie um 50 px unter die Kante des Fußzeilenrechtecks.

Heben Sie abschließend das Horizontaltyp-Werkzeug (T) auf und fügen Sie einige Links hinzu, die für Benutzer nützlich sein könnten.  Stellen Sie sicher, dass Sie Ihre Links gruppieren, damit sie leicht zugeordnet werden können.  In meinem Fall habe ich Source Sans Pro (Semibold) 16px für Linkgruppenüberschriften und PT Serif (Regular) 14px für Linktitel verwendet.

Herzliche Glückwünsche!

Das war's!  Wir sind fertig mit dem Layout-Design, also überprüfen Sie jetzt die Ebenen, löschen Sie die unnötigen und übergeben Sie sie an Ihren Entwickler oder besser noch selbst.  Ich habe einige grundlegende Techniken angesprochen und meinen Arbeitsablauf für die Gestaltung von Web-Layouts demonstriert. 

Ich hoffe, Sie haben etwas gelernt.Ich würde gerne Ihre Kommentare hören und die Ergebnisse dieses Tutorials sehen!

Zusätzliche Ressourcen

Wenn Sie mit Landungsseite-Design noch nicht vertraut sind, empfehlen wir Ihnen eine Reihe einführender Tutorials, um Sie mit den Grundlagen vertraut zu machen:Landungsseite-Design Principles: 

• Landungsseite Design-Grundsätze: Offene Aufgabe - Begleitung zum Tuts + Kurs von Adi Purdila
• Ein Anfänger Leitfaden für die erfolgreiche Konvertierung von Ian Yates
  
• Tipps zum Entwerfen von Niche Landungsseiten von Keir Whitaker
  

Wenn Sie Interesse an Ihrem Landungsseite-Design haben, bietet Envato Studio eine große Auswahl an Landungsseite-Design- und Entwicklungsservices, die Sie gerne erkunden möchten.  Sie können sich auch die Landungsseite-Themen auf dem Envato Market ansehen.