Share
Wir haben vor kurzem alle E-Mails, die wir bei Envato Tuts + versenden, neu gestaltet. die Newsletter, die verschiedenen Digests, die E-Mails der Marketingkampagne und die Admin-E-Mails. In dieser kurzen Fallstudienreihe erklären wir, wie wir das gemacht haben!
Bis zum Redesign hatten wir eine ziemlich unzusammenhängende Sammlung von E-Mails, ohne dass sich ein zentrales Team um sie kümmerte. Es wurde klar, dass wir die Dinge vereinfachen und wirtschaftlicher gestalten können. Daher haben wir uns entschlossen, unsere Bemühungen auf ein zentrales Konto in Campaign Monitor zu übertragen. Ein zentraler Satz von Themen würde überall verwendet werden und wir würden sicherstellen, dass sie so entworfen und gebaut wurden, dass sie das repräsentieren, wofür wir bei Envato Tuts stehen+.
Die erste Phase der Operation bestand darin, alle verschiedenen E-Mails zusammenzustellen, die wir derzeit an die Massen versenden. Dies bedeutete, dass wir unsere bestehenden MailChimp-Newsletter durchforsten und das, was wir in Exact Target hatten, demontieren.
Sobald wir wussten, was wir uns anschauten, konnten wir gemeinsame Elemente herausgreifen und alles für die Entwurfsphase bereitstellen.
Wir haben alles darauf reduziert:
Was waren unsere Prioritäten für diese Neugestaltung? In Kugelform brauchten wir:
Und wir gesucht:
Zeit, einige Visuals runter zu bekommen! Ich habe Sketch für diesen Designprozess verwendet, da er sich für das Design der Benutzeroberfläche eignet. Die erste Stufe bestand darin, eine Zeichenfläche zusammenzustellen und einige Rastermaße auszuarbeiten.
Ich habe die Layout-Optionen von Sketch verwendet (Ansicht> Leinwand> Layouteinstellungen… ) um ein Raster von 640 Pixeln mit 8 Spalten darzustellen. Meine artboard war viel breiter als das, um mir Atempause zu geben. Mit Klick auf Center Der Versatz wird automatisch berechnet, in diesem Fall auf 280px. Das Raster wurde daher 280px vom Rand der Zeichenfläche entfernt positioniert.
Eine Säulenbreite von 62px ist gut mit Rinnen von 20px verbunden, was mir einen guten horizontalen Ausgangspunkt gibt.
Ich wollte auch Reihen, also habe ich das überprüft Reihen Box. Mein Typ würde auf einer Basis von 16 Pixeln arbeiten, also habe ich das als rudimentäres vertikales Raster verwendet.
Artboard mit dem Namen "Digest"Das Marketing-Team von HQ hatte darum gebeten, Vorkehrungen für eine Art Heldenbereich zu treffen. etwas, das ihnen erlaubt, auffallende Grafiken zu verwenden, wenn sie es je brauchen würden.
Ich wollte nicht, dass dies für alle Arten von E-Mails Standard ist, aber es gab mir einen guten Ausgangspunkt. Ich habe mit Blöcken ein grundlegendes Layout erstellt.
Mit einem Helden, einem Hauptinhaltsbereich und einer cremefarbenen Leinwand wurde die Bühne gesetzt. Ich beschloss, mit Ebenen zu spielen und den Inhaltsbereich mit dem Helden leicht überlappen zu lassen. Mir war bewusst, dass dies Nicole (die das Ganze bauen würde) ein paar Kopfschmerzen verursachen würde, aber ich wusste, dass sie es herausfinden würde - sie ist immerhin eine Zauberin.
Varianten dieser Anordnung könnten in Form von:
Ein Vorteil eines einfachen Layouts ist, dass die Reaktionsfähigkeit von Natur aus einfacher zu erreichen ist. In ein engeres Ansichtsfenster gesprengt, würden wir die zweispaltige Spalte bei Bedarf zusammenfalten und den Inhaltsbereich an den Rand des Ansichtsfensters stoßen, so dass wir eine Reihe von Abschnitten haben und keine Überlappung.
In Sketch, wo zwei verschiedene Spaltenanordnungen benötigt werden, benötigen wir eine zweite Seite. Jedes von uns definierte Rasterlayout wird auf alle Zeichenflächen auf derselben Seite angewendet, und wir benötigen ein viel einfacheres Raster für unsere übersichtliche mobile Ansicht.
Was wir hier brauchen, ist in der Tat so einfach, dass wir wirklich nur eine zentrale Säule mit einer Rinne benötigen (wir bleiben auf beiden Seiten bei 20px). Sketch kann jedoch kein Raster mit nur einer Spalte erstellen, daher müssen wir zwei verwenden.
Wir verwenden Roboto heutzutage in vielen Bereichen von Envato, sodass diese Entscheidung für mich getroffen wurde. Die Farben werden auch stark von Envatos Stilen bestimmt, so dass ich eine Palette zur Auswahl hatte. Ich musste entscheiden, was für den Körper, die Überschriften, die Links, Text mit geringerer Betonung und die "Aufrufe zum Handeln" verwendet werden sollte..
Meine Prioritäten waren das:
Links und CTAs im gleichen BlauTextstile sind mit einem Klick nur einen Klick entfernt. Gestalten Sie ein Stück Text nach Ihren Wünschen, speichern Sie es als Textstil und beziehen Sie sich darauf, wenn Sie den Stil erneut benötigen.
Envato Tuts + ist eine hübsche visuelle Plattform. Wir benutzen überall Miniaturansichten. Einige Rückmeldungen des Teams deuteten darauf hin, dass dieselbe Kartenanordnung, die wir auf unserer Homepage verwenden, die beste Möglichkeit ist, Tutorials in einer Digest-E-Mail zu präsentieren. Leser würden die Verbindung herstellen, verstehen, mit was sie es zu tun haben, und auf jeden Fall ist es eine klare Art, die Informationen zu präsentieren.
Kurse sind etwas anders; Ich wollte diesen zusätzlichen Akzent setzen. Jeder Themenabschnitt zeigt zuerst einen verfügbaren Kurs in voller Breite mit etwas mehr Details als die Tutorials sowie eine Schaltfläche für die Wiedergabe-Schaltfläche, die in der Miniaturansicht eingeblendet ist. Dies würde die Unterscheidung zwischen Kursen und Tutorien hervorheben und die Leser zum Klicken anregen (Play-Buttons sind dafür gut).
Wenn die Wiedergabeschaltfläche dynamisch über der Oberseite platziert wird, wäre dies unpraktisch. Daher haben wir uns dazu entschieden, die Schaltflächengrafik manuell auf die Miniaturansichten zu setzen (z. B. mit Photoshop). Ein bisschen zusätzliche Arbeit (sorry Cameron), aber die Mühe wert, denke ich.
Wir wollten auch eine Möglichkeit, Werbeblöcke zu präsentieren. nicht unbedingt Werbung von Dritten, aber etwas, das uns die Gelegenheit gibt, über neue und aufregende Dinge zu schreien. Ich habe ein optionales Banner am oberen Rand des Layouts hinzugefügt - sehr ähnlich dem, was Sie gelegentlich auf der Website sehen.
Ich habe mich dann entschlossen, den gesamten Inhalt in Blöcke aufzuteilen, die es uns ermöglichen, sie in einer beliebigen Reihenfolge zu ordnen und auch eine klare Trennung zwischen den Abschnitten vorzunehmen.
So sieht ein Anzeigenblock mit zwei Digest-Abschnitten auf jeder Seite aus.
Hinweis: Dies ist eine echte Anzeige, erfahren Sie hier mehrDie Fußzeile ist ein universelles Element in all diesen E-Mails. Ich wollte nicht, dass Tonnen von Informationen dort vergraben wurden, aber was wir tat wähle dort, wo ich wollte, klar (ich verstehe nicht, warum manche Firmen ihre Fußzeilen kaum sichtbar machen, wobei "Abmelden" -Link ausgeblendet sind).
Mit einigen sozialen Links, einem Textbereich, in dem erklärt wird, warum jemand die E-Mail erhält, Links abbestellen und die Envato-HQ-Adresse, waren wir alle eingestellt.
Wir haben jetzt die Basis für alle Elemente, die wir benötigen, und geben uns die Bausteine für jeden unserer E-Mail-Typen.
Es ist unwahrscheinlich, dass Newsletters jemals einen grafischen Helden benötigen, also habe ich eine einfache, aber mutige Überschrift verwendet, um das Verfahren dort zu beginnen. Die typografischen Stile, die wir bereits festgelegt hatten, würden den meisten möglichen Inhalt berücksichtigen.
Man unterscheidet zwischen Newslettern und Digests, indem den Newslettern ein durchsichtiger Held gegeben wurde, was sie insgesamt zu mehr ... Broadsheet macht.
Die einfachste aller E-Mails (außer Klartextversionen) sind die Admin-Nachrichten. In diesem Fall ist absolut kein zusätzliches Styling erforderlich. Einfach den Punkt schnell und einfach vermitteln. Ein durchsichtiger Held und ein Mangel an großen Überschriften setzen hier den Admin-Ton recht gut. Alles andere bleibt gleich, einschließlich einer CTA-Schaltfläche. Hier sind die Desktop- und Mobile-Ansichten:
Nachdem die Konzepte und Entwürfe festgelegt waren, war es an der Zeit, die Ergebnisse an Nicole zu senden. Sie würde diese Ideen annehmen und statische HTML-Dateien daraus machen. Ich musste sicherstellen, dass sie die getroffenen Entscheidungen verstand und über alle Mittel verfügte, die zur Erstellung der E-Mails erforderlich waren.
InVision ermöglicht das schnelle Annotieren von Grafikdokumenten - und Sie können Sketch-Dateien direkt hochladen. Eine Sammlung von Bildern mit Kommentaren und Hinweisen war eine gute Möglichkeit, alle Ideen zu kommunizieren.
In Bezug auf die Bereitstellung von Assets macht Sketch das Exportieren aller erforderlichen Teile sehr einfach. Ich konnte nicht nur alle Assets (wie Logos, soziale Schaltflächen usw.) vorbereiten, sondern auch in verschiedenen Größen liefern und so für Bildschirme mit unterschiedlichen Pixeldichten sorgen. Erfahren Sie mehr darüber, wie Sketch Ihre Assets exportieren kann:
Mit all den Dateien und weiteren Anweisungen in Dropbox hatte Nicole alles, was sie brauchte, um ihre Magie zu entwickeln.
Im nächsten Teil dieser Fallstudie übergebe ich Sie Nicole für den Build. Sie wird erklären, wie sie die reaktionsfähige Grundlage für diese E-Mails aufbaute, und die gewohnten Probleme der E-Mail-Entwicklung überwinden.
Fühlen Sie sich frei, die Demo-Sketch-Datei aus dem Repo auf GitHub zu holen, und sehen Sie sich die fertigen E-Mails selbst an: Abonnieren Sie unten!
Accentsconagua