Skizze für Anfänger: Gestalten Sie einen mutigen E-Mail-Newsletter

() translation by (you can also view the original English article)

In diesem Tutorial erfahren Sie, wie Sie mit Sketch eine einfache und fette E-Mail-Newsletter-Vorlage erstellen.

Der Auftrag

Wenn Sie E-Mail-Newsletter versenden, sollten diese als wichtiger Punkt in Ihren Marketingstrategien betrachtet werden. Sie geben uns den direkten Kontakt zu potenziellen Kunden, aber wir müssen darauf achten, wie wir sie gestalten, um richtig zu kommunizieren, Aufmerksamkeit zu erregen und (am wichtigsten) unsere Ziele zu erreichen.

Hier ist das Briefing hinter dieser Designübung: Stellen wir uns vor, wir sind ein Unternehmen, das Online-Lernressourcen anbietet. Wir möchten mit unseren potenziellen Kunden in Kontakt treten und die Vorteile der Nutzung unserer Plattform aufzeigen. In dieser Situation können wir mit Sketch einen sauberen, aber effektiven E-Mail-Newsletter erstellen, um unsere Anforderungen zu erfüllen.

Wir fangen ganz von vorne an und verwenden die gängigsten Tools, die wir in Sketh haben, um unsere Vorlage zu erstellen. Sie werden staunen, wie einfach es sein wird!

Aufwärmen

Um dieses Tutorial erfolgreich abzuschließen, müssen Sie die verfügbaren Anhänge herunterladen. In der ZIP-Datei finden Sie Text und die Bilder, die wir in den folgenden Schritten verwenden werden.

Ich werde Helvetica Neue als Standardschriftart verwenden, aber wenn Sie sie nicht zur Verfügung haben, versuchen Sie es mit Helvetica oder Arial.

Hinweis: Denken Sie daran, ein verantwortungsbewusster Designer zu sein! Damit meine ich: Denken Sie daran, Ihre Ebenen mit beschreibenden Namen umzubenennen, die Ebenen zu gruppieren und den Inhalt zu organisieren. Ihre Kollegen werden es Ihnen danken, vertrauen Sie mir.

Sind Sie bereit? Lass uns anfangen!

1. Einrichten einer Zeichenfläche

Schritt 1

Beginnen wir mit der Erstellung einer neuen Zeichenfläche. Gehen Sie im Hauptmenü oder in der Symbolleiste zu Einfügen > Zeichenfläche (A). Klicken und ziehen Sie nun in die Leinwand von Sketch, um eine 620 x 3000 Pixel große Zeichenfläche zu erstellen. Wenn Sie Schwierigkeiten damit haben, denken Sie daran, dass Sie diese Werte über den Inspektor rechts auf dem Bildschirm ändern können. Sie können den Namen der Zeichenfläche auch in der Ebenenliste auf der linken Seite des Bildschirms ändern.

Tipp: Ein üblicher Ansatz beim Entwerfen von E-Mail-Vorlagen besteht darin, mit einer Dokumentbreite von etwa 550 bis 650 Pixel zu beginnen. Erfahren Sie mehr über E-Mail-Marketing in diesem großartigen Artikel von Nicole Merlin.

Schritt 2

Lassen Sie uns nun einige Anleitungen erstellen, die wir als Referenz verwenden, um unsere Elemente richtig zu platzieren, was zu einem soliden und ausgewogenen Design führt. Wo sollen wir die Guides platzieren? Denken wir ein wenig nach:

Eine E-Mail-Vorlage kann auf viele Arten gestaltet werden. Eine der gebräuchlichsten ist das einfache Erstellen eines 1-Spalten-Layouts. Dieses Layout ermöglicht es uns, den Benutzer einfacher zu führen, indem wir einen vertikalen Fluss von Inhaltsblöcken nacheinander verwenden. Darüber hinaus bietet uns das Design mit einer einspaltigen Struktur die Möglichkeit, es leicht an verschiedene Geräte anzupassen.

Für die Zwecke dieser Übung sind wir jedoch hier, um ein wenig mehr zu üben, also erstellen wir ein 3-Spalten-Layout. Es tut uns leid!

Aktivieren Sie die Regeln und beginnen Sie mit der Erstellung von Anleitungen. Gehen Sie zu Ansicht > Lineale anzeigen (^R). Klicken Sie nun auf das horizontale Lineal bei 30px, 200px, 225px, 395px, 420px und schließlich bei 590px. Sie können die Lineale verschieben, indem Sie sie ziehen und verschieben. Sie können auch Ihre eigenen Hilfslinien auf ähnliche Weise verschieben. Um Hilfslinien zu entfernen, ziehen Sie sie über die Lineale hinaus.

2. Kopfzeile gestalten

Der Header unserer E-Mail ist sehr wichtig. Es ist der erste Kontakt, den wir mit dem Benutzer haben und daher müssen wir unser Hauptangebot kommunizieren. Es ist auch eine gute Entscheidung, den Namen des Unternehmens und einen guten Slogan anzuzeigen, gefolgt von einem CTA-Button, der dazu anregt, sich zu registrieren oder weitere Informationen über uns zu erhalten.

Zuerst sollten wir einen Preheader hinzufügen, einen einfachen Textlink, der es dem Benutzer ermöglicht, auf die Webversion unseres Newsletters zuzugreifen, falls sein E-Mail-Client die korrekte Anzeige nicht zulässt.

Schritt 1

Wählen Sie das Textwerkzeug (T) aus und klicken Sie auf eine beliebige Stelle auf der Leinwand, um eine Textebene einzufügen. Beachten Sie, wie sich der Inspektor geändert hat, um Ihnen alle Textebeneneigenschaften anzuzeigen. Beginnen Sie mit der Eingabe von „Probleme beim Anzeigen dieser E-Mail? Online ansehen“.

Ändern Sie die Farbe in #8FA6B3 und stellen Sie die Größe auf 11px ein. Wählen Sie nun nur den Teil "View it online" aus und ändern Sie seine Farbe in #FF736D. Lassen Sie es ausgewählt. Klicken Sie auf das Symbol Optionen neben Farbe und klicken Sie auf die zweite Option Dekoration, um den Text zu unterstreichen.

Verschieben Sie das Objekt vom oberen Rand der Zeichenfläche und lassen Sie dabei einen Rand von 30 px.

Schritt 2

Erstellen Sie mit dem Werkzeug Rechteck (R) ein Rechteck von 620 x 500 Pixeln und platzieren Sie es direkt unter dem Textlink, wobei Sie 30 Pixel dazwischen lassen. Wählen Sie das Rechteck aus und ändern Sie seine Farbe im Inspektorfenster in #F5F7F8. Deaktivieren Sie die Option Rahmen, um sie zu entfernen.

Schritt 3

Öffnen Sie die SVG-Datei „icons“, die diesem Tutorial beigefügt ist. Wählen Sie alle Symbole aus, kopieren Sie sie und fügen Sie sie in das Dokument ein, in dem wir unsere Vorlage entwerfen. Wir werden sie verwenden, um den Hintergrund unseres Headers zu dekorieren.

Ich habe die Symbolgruppe auf X = -50 und Y = 0 gesetzt (suchen Sie im Inspektorfenster nach Positionseigenschaften), aber Sie können sich gerne selbst anpassen.

Tipp: Sie werden feststellen, dass sich einige Teile unserer Symbole außerhalb der Zeichenfläche befinden und Sketch sie automatisch ausblendet. Nichts ist falsch. Das Programm versteht, dass Sie eine Zeichenfläche verwenden, um Ihren Designbereich zu begrenzen, sodass die Teile von Elementen ausgeblendet werden, die sich zwischen dem Zeichenflächenbereich und dem Rest der Leinwand befinden. Versuchen Sie, die gesamte Gruppe außerhalb der Zeichenfläche zu verschieben, um sie vollständig anzuzeigen. Siehst du? Vergessen Sie nicht, es wieder in seine ursprüngliche Position zu bringen!

Schritt 4

Wählen Sie in der Ebenenliste den Ordner „icons“ und das zuvor erstellte Rechteck aus. Gruppieren Sie sie mit einer der verfügbaren Optionen in Sketch. Verwenden Sie beispielsweise das Gruppensymbol in der Symbolleiste oder verwenden Sie dazu die Tastenkombination (⌘-G). Verschieben Sie die Gruppe in der Ebenenliste nach unten, benennen Sie sie in etwa „Hintergrund“ um und verwenden Sie den kleinen Pfeil auf der linken Seite, um ihren Inhalt anzuzeigen.

Wählen Sie das Rechteck aus und gehen Sie zu Ebene > Als Maske verwenden. Warte auf die Magie. Sketch verwendet das Rechteck, um jede darüber liegende Ebene in der Ebenenliste zu maskieren. Wenn wir zuvor den zu maskierenden Inhalt und die Maske gruppiert haben, haben wir keine Auswirkungen auf die Elemente außerhalb der Gruppe. Ziemlich nützlicher Tipp!

Jetzt sollten Sie die Symbole bereits wie in der folgenden Abbildung maskiert haben:

Schritt 5

Öffnen Sie die SVG-Datei „Logo“ und kopieren Sie das Logo in unser Dokument. Ich weiß, dass es zu groß ist, also gehen Sie zum Inspektorfenster, um seine Abmessungen auf 90 x 31 Pixel zu ändern. Verschiebe es auf X = 265, Y = 100.

Schritt 6

Erstellen Sie eine neue Textebene und legen Sie ihre Breite auf 560px fest. Verschieben Sie es auf X = 30 und Y = 220. Bearbeiten Sie nun den Text und ändern Sie ihn in "Ihr Ort, um reale Fähigkeiten zu entdecken". Setzen Sie die Eigenschaften auf Gewicht = Fett, Farbe = #424242, Größe = 48, Linie = 45 und Ausrichtung = Mitte. Wählen Sie nur das „echte“ Wort aus und ändern Sie es in kursiv.

Schritt 7

Jetzt werden wir unsere primäre Aktionsschaltfläche entwerfen. Zeichnen Sie ein Rechteck von 220 x 45 Pixeln. Gehen Sie zum Inspektor-Bedienfeld und setzen Sie den Radius auf 30. Ändern Sie die Füllung in #D92B2B. Verschieben Sie es unter den Slogan-Text und lassen Sie zwischen den beiden Objekten etwa 50 Pixel.

Schritt 8

Unser Button macht keinen Sinn, wenn wir ihn leer lassen! Wir brauchen einen Call-to-Action-Text, ein paar Worte, die sich auf das Hauptangebot konzentrieren und die Aufmerksamkeit des Benutzers auf sich ziehen. Ich würde gerne mehr über diese Art von Marketing sprechen, aber um ein wenig zu beschleunigen, erstellen wir einfach eine Textebene und geben dann „Join us from 10$/month“ ein.

Ändern Sie die Eigenschaften in Gewicht = Fett, Farbe = #FFFFFF und Größe = 15. Verschieben Sie es zu X = 225, Y = 375, direkt innerhalb unseres abgerundeten Rechtecks.

Wir werden diese Schaltfläche später noch einmal verwenden, daher ist es eine gute Idee, sie als Symbol zu speichern. Gruppieren Sie die Text- und Rechteckebenen und klicken Sie in der Hauptsymbolleiste auf die Option Symbol erstellen. Beachten Sie, wie sich die Ordnerfarbe in der Ebenenliste von Blau zu Violett geändert hat.

Schritt 9

Ich denke, wir brauchen etwas mehr Kontrast zwischen den Vordergrundinhalten und dem Hintergrundbild, also lassen Sie uns eine kleine Änderung vornehmen. Gehen Sie zur Ebenenliste, erweitern Sie den Ordner Hintergrund und duplizieren Sie das Rechteck, das Sie zum Maskieren der Hintergrundsymbole verwenden. Verschieben Sie es an den Anfang der Gruppe, gehen Sie zum Inspektor-Bedienfeld und ändern Sie die Mischung auf Aufhellen und die Deckkraft auf 50%. Am Ende sollten Sie so etwas erhalten:

Unser Header ist fertig!

3. Gestaltung des Blocks „Wer wir sind“

Jetzt, da wir die Aufmerksamkeit des Benutzers haben, müssen wir ein wenig über uns und unsere Dienstleistungen sprechen. Wer wir sind? Was machen wir? Wir müssen diese Fragen direkt und prägnant beantworten und versuchen, einige zusätzliche Vorteile der Nutzung unserer Plattform aufzuzeigen.

Schritt 1

Erstellen Sie zwei neue Textebenen. Stellen Sie ihre Breite auf 480px ein. Sie können eingeben, was Sie wollen, aber ich habe den Text verwendet, den Sie in der angehängten Textdatei finden.

Fertig? Verwenden Sie nun die folgenden Positionen und Eigenschaften:

Schritt 2

Zeichnen Sie eine 100px breite Linie (Einfügen > Form > Linie) und setzen Sie die Dicke auf 2px und die Rahmenfarbe auf #E24A4A. Platzieren Sie es zwischen den beiden Textebenen und lassen Sie zwischen jedem Element einen Abstand von 25px. Denken Sie daran: Wenn Sie beim Bewegen des Cursors die Alt-Taste drücken, können Sie die Abstände in Pixeln zwischen den ausgewählten Elementen sehen.

Schritt 3

Wir werden die vorherige Struktur in diesem Tutorial einige Male wiederholen. Wählen Sie jedoch vorerst die Linie und die Textebenen aus und gruppieren Sie sie. Denken Sie daran, organisiert zu sein und geben Sie ihm einen Namen. Ich habe "erster Block" verwendet.

Wählen Sie die Textebene "Online suchen...", gehen Sie zum Inspektor-Panel und erstellen Sie einen neuen Textstil, indem Sie auf "Keine Textstile" klicken und dann auf Neuen Textstil erstellen. Machen Sie dasselbe mit der zweiten Textebene. Jetzt wird jede mit diesen Stilen verknüpfte Ebene sofort aktualisiert, wenn Sie ihre Eigenschaften bearbeiten.

Hinweis: Beachten Sie, dass Sketch keine Textstile speichern kann, bei denen mehrere Schriftstärken auf derselben Ebene angewendet werden. Abgesehen davon werde ich für dieses Tutorial keine Stile verwenden. Wenn Sie ein wenig mehr über Stile erfahren möchten, lesen Sie unseren A bis Z-Leitfaden von Sketch.

Schritt 4

Öffnen Sie die SVG-Datei "Highlights-Icons". Kopieren Sie die drei Symbole, die Sie finden, in das Dokument und fügen Sie sie in Ihr Design ein. Verwenden Sie die Hilfslinien, die Sie bereits haben, um sie auszurichten, als ob Sie ein 3-Spalten-Layout verwenden würden, direkt unter dem vorherigen Block. Platzieren Sie sie nicht zu nahe an diesem Block, lassen Sie einen Leerraum von etwa 40px. Wenn Sie Hilfe benötigen, sehen Sie sich einfach das folgende Bild an:

Schritt 5

Erstellen Sie drei 170px breite Textebenen mit Helvetica Neue Bold, Größe = 15, Linie = 18, Farbe = #424242 und Ausrichtung = Mitte. Platzieren Sie diese Elemente mit Hilfe der Hilfslinien etwa 30px unter den Symbolen und beginnen Sie mit der Eingabe – oder kopieren Sie den Text aus der angehängten Datei!

Ein weiterer Block ist fertig!

Gestaltung des Blocks „Neue Lektionen“

Eine übliche Funktion in Newslettern ist das Versenden der neuesten Artikel oder Inhalte, an denen die Leser interessiert sind. Nach unserem primären CTA und dem Teil, in dem wir ein wenig über uns selbst sprechen, erstellen wir einen Block, in dem wir die neuesten verfügbaren Lektionen auf . zeigen unsere Lernplattform.

Schritt 1

Beginnen Sie damit, den „ersten Block“, den Sie bereits gemacht haben, zu duplizieren. Legen Sie es unter die vorherigen Blöcke, 40px Rand, und verwenden Sie den Inhalt in der .txt-Datei, um die Textebenen zu ändern. Es sollte ungefähr so sein:

Schritt 2

Gehen Sie in den Quelldateien in den Ordner „Lektionen“ und importieren Sie alle Bilder über Einfügen > Bild in Ihr Dokument. Jetzt haben Sie sieben Bilder mit einer Breite von 620 Pixeln. Wir werden einen davon in voller Größe verwenden und den Rest so anpassen, dass er in unser 3-Spalten-Layout passt.

Schritt 3

Fügen wir etwas Text für unser großes Bild hinzu. Fügen Sie drei Textebenen ein, verwenden Sie die Textdatei noch einmal und legen Sie die Eigenschaften und Positionen wie folgt fest:

Schritt 4

Für die anderen Lektionen, die wir zeigen, benötigen wir noch ein paar Textebenen. Lass uns das nochmal machen; Fügen Sie drei Textebenen ein, geben Sie ein, was Sie möchten, oder kopieren Sie Texte aus der bereitgestellten Datei. Legen Sie ihre Eigenschaften und Positionen anhand des folgenden Bildes als Referenz fest und wiederholen Sie den Vorgang fünfmal, um den Rest der angezeigten Lektionen abzuschließen.

Ein weiterer Block ist fertig. Nehmen Sie sich einen Moment Zeit, um Ihre Ebenen zu organisieren, und fahren Sie dann mit dem nächsten Teil fort!

Hauptsatz, noch einmal

Ich weiß, dass unsere E-Mail-Vorlage... lang ist. Aber es ist kein Problem, wenn wir wissen, wie man damit umgeht! Benutzer müssen ganz nach unten durch Ihren Inhalt scrollen, daher ist es eine gute Idee, einen einfachen Zugriff auf einen anderen Call-to-Action anzubieten, ohne ganz zum Anfang der E-Mail zurückscrollen zu müssen.

Schritt 1

Erinnern Sie sich an den „ersten Block“, den Sie zuvor dupliziert haben? Wiederholen Sie es, verschieben Sie es unter den „Unterrichtsblock“, lassen Sie einen Rand von etwa 40 Pixeln und ändern Sie seinen Inhalt wie folgt:

Schritt 2

Fügen Sie ein 620 x 243 Pixel großes Rechteck ein und füllen Sie es mit #F5F7F8. Fügen Sie nun eine Textebene hinzu und ändern Sie deren Inhalt und Eigenschaften, indem Sie das folgende Bild als Referenz verwenden:

Schritt 3

Gehen Sie zu Einfügen > Symbole und wählen Sie die zuvor erstellte CTA-Schaltfläche aus. Setzen Sie es unter den vorherigen Absatz.

Wir sind fast fertig!

Entwerfen der Fußzeile

Ok, wir haben unseren Hauptblock und einen Aufruf zum Handeln. Als nächstes haben wir einige sekundäre Nachrichten und etwas mehr Inhalt hinzugefügt. Später sprachen wir noch einmal über unsere Hauptaussage und wiederholten den Aufruf zum Handeln. Jetzt ist es an der Zeit, die Fußzeile zu gestalten und unsere Vorlage fertigzustellen!

Schritt 1

Erstellen Sie ein 620 x 130 Pixel großes Rechteck. Füllen Sie es mit #555E68 und legen Sie es unter den CTA-Block. Als nächstes erstellen Sie ein weiteres 620x45px Rechteck und füllen es mit #383E44. Sie sollten mit so etwas enden:

Schritt 2

Importieren Sie die Datei „logo-white“ in Ihr Dokument und verschieben Sie sie nach X = 265 und Y = 2787.

Schritt 3

Fügen wir den letzten Text hinzu. Fügen Sie drei Textebenen ein und legen Sie ihre Eigenschaften und Positionen wie folgt fest:

Es ist nicht notwendig, aber Sie können die Höhe der Zeichenfläche so anpassen, dass sie nur dem Platz entspricht, den Sie wirklich benötigen. Sie können dies tun, indem Sie es in der Ebenenliste auswählen und seine Höhe im Inspektorfenster ändern. Ich habe es in Höhe = 2937px geändert.

Sie sind fertig!

So sollte das Endprodukt aussehen.

Ich hoffe, Ihnen hat dieses Tutorial gefallen. Lassen Sie mich wissen, wenn Sie nicht weiterkommen oder Sie um etwas bitten müssen. Hast du eine Idee für mein nächstes Tutorial? Hinterlasse einen Kommentar! Ich bin gespannt, wie es dir geht!