10 Design-Lektionen aus HTML-E-Mail-Vorlagen, die tatsächlich verkaufen

In der Vergangenheit haben wir und einige andere Blogs nützliche technische Informationen zum Codieren und Strukturieren von HTML-E-Mails aus Sicht der Entwickler beschrieben. Viel weniger wurde darüber diskutiert, wie die Designkomponente von E-Mail-Newslettern tatsächlich umgesetzt werden kann.

Heute werfen wir einen Blick auf einige der meistverkauften E-Mail-Vorlagen von Themeforest. Außerdem können wir herausfinden, was ihre Designer richtig gemacht haben, damit Sie diese Grundprinzipien in Ihren eigenen Entwürfen nachahmen können.

# 1 Behalte es schmal

E-Mail-Clients unterscheiden sich erheblich nicht nur in der Art und Weise, wie sie Code interpretieren, sondern einfach in der Art, wie sie Nachrichten anzeigen. Beachten Sie den Unterschied zwischen dem Anzeigen einer Nachricht in Apple Mail auf einem 20-Zoll-Monitor und Gmail auf einem 13-Zoll-Monitor.

Offensichtlich wird die Breite Ihres Designs zu einem wichtigen Thema. Während Sie den Hintergrund mit einer Farbe durch eine 100% -ige Tabelle überfluten können, empfehlen die meisten Standards, dass Sie eine Inhaltsbreite zwischen 500 und 620 Pixel verwenden.

In der äußerst beliebten AirMail-Vorlage unten erstreckt sich das Design auf etwa 550 Pixel, die tatsächliche Breite des Inhalts beträgt jedoch nur 480 Pixel.

Das schmale Design sieht gut aus und funktioniert für die meisten Geräte und Clients perfekt.

# 2 Optionen sind alles

Ein wichtiger Schlüssel für das Erstellen von Vorlagen, die verkaufen, ist das Erinnern daran, dass eine Einheitsgröße für alle Ansätze nicht funktioniert. Kunden, die eine Designvorlage erwerben, wünschen sich nicht nur ein starkes Design, sondern Wert. Sie sehen Wert in den verfügbaren Optionen.

Wenn Ihre Vorlage ein Layout und ein oder zwei Farbschemas hat, bieten Sie nicht wirklich viele Möglichkeiten. Dadurch ist der Käufer an eine begrenzte Anzahl von Optionen gebunden, was den Kauf langfristig nicht zu einer vernünftigen Entscheidung macht.

Wenn Ihre Vorlage jedoch die Möglichkeit bietet, aus verschiedenen Layouts und Farboptionen zu wählen, werden potenzielle Kunden die Möglichkeit schätzen, wöchentlich aus so vielen verschiedenen E-Mail-Newsletter-Variablen auszuwählen, was ihnen ermöglicht, die Dinge zu ändern und herauszufinden, was für sie am besten geeignet ist einzigartiger Kundenstamm

Als Beispiel für eine starke Vielfalt betrachten Sie die unten gezeigte BlauMail-Vorlage. Zunächst wählen Sie aus verschiedenen Farb- und Vorlagenoptionen (abgerundete oder eckige Ecken).

Als Nächstes wählen Sie eines von drei einzigartigen Layouts.

Sie gelangen auf die Vorlage mit den von Ihnen ausgewählten Optionen. Um alle Variablen zu berücksichtigen, enthält BlauMail 60 HTML-Dateien!

# 3 Erstellen Sie klar definierte Abschnitte

Unternehmen nutzen HTML-E-Mail-Adressen als ständigen Kontakt zu ihren Kunden. Unabhängig davon, ob dies aus strategischer Sicht das Beste ist oder nicht, möchten sie gerne einiges an Inhalt mitbringen.

Unternehmen möchten ihre Kunden über Verkäufe, Werbeaktionen und Updates in verschiedenen Bereichen informieren und müssen dies in einer unaufgeräumten Umgebung tun. Anstatt eine E-Mail mit nur einem großen Inhaltsbereich zu erstellen, sollten Sie sie in verschiedene Abschnitte aufteilen.

Die Vorlage für frische E-Mails führt diese Idee auf ein extremes Maß und trennt die verschiedenen Abschnitte physisch auf verschiedene Hintergründe, wodurch ein modulares Erscheinungsbild entsteht.

Für diese Vorlage wurden bisher 750 Käufe getätigt, sodass sie bei ThemeForest ganz oben auf der Liste steht. Wenn Sie also Unterricht von einer Vorlage nehmen, sollte es wahrscheinlich diese sein!

# 4 einfach verkauft

Während einige Vorlagen-Designer mit kreativen Designs, kräftigen Farben und beeindruckenden Grafiken arbeiten, können andere doppelt so viele Vorlagen mit starken Layouts und einfachen, aber attraktiven Grafiken verkaufen.

Die unten stehende Versatile Email-Vorlage würde sicherlich keine herausragenden Designpreise gewinnen und ist dennoch sehr beliebt, weil sie genau das ist, was viele Unternehmen wollen.

Der Designer fesselt potenzielle Kunden sofort ein, indem er "vielseitig" einsetzt. im Titel und bietet viele Extras, wie in Tipp 2 oben empfohlen. In der Zwischenzeit wird das Design sehr minimal gehalten, was die Vorlage zu etwas macht, das von unzähligen Profis verwendet werden kann.

# 5 Für eine Nische schießen

Wie wir oben gesehen haben, ist das Erstellen eines grundlegenden Layouts und eines generischen Designs aufgrund des großen Publikums, das es anspricht, ein langer Weg. Die Verwendung dieser Technik kann es jedoch schwierig machen, sich von der Konkurrenz abzuheben.

Wenn eine Allzweckstrategie für Sie nicht ausreicht, versuchen Sie, eine beträchtliche Nische von Verbrauchern anzusprechen, die nach etwas Bestimmtem suchen. Das folgende TechOffers-Thema spricht beispielsweise mehrere Nischen gleichzeitig an.

Natürlich gibt es die Tech-Komponente, aber die Vorlage ist auch für fast jeden Kunden interessant, der ein E-Commerce-Thema sucht. Schließlich enthält das Thema eine Feiertagskomponente mit der roten Schleife und Neujahrsnachrichten.

Dieser Designer zeichnet sich plötzlich durch drei einzigartige Kunden aus, die nach einer bestimmten Vorlage suchen. Strategisch ist dies ein hervorragender Schritt, der sich im Vertrieb auszahlt.

# 6 Machen Sie es einfach zu brandmarken

Denken Sie daran, dass der Kauf einer Vorlage für viele Unternehmen oft ein Kompromiss ist, da das Produkt nicht von Grund auf aufgebaut wird, um seine Marke zu präsentieren.

Sie können helfen, diese Hürde für den Einkauf zu überwinden, indem Sie potenziellen Käufern während des gesamten Entwurfs eine Vielzahl von Stellen zur Verfügung stellen, in denen der Firmenname, das Logo, der Slogan, ein persönliches Foto / Profil usw. eingefügt werden können Ihre eigenen Vorlagen müssen nicht auf die Personalisierung für Erschwinglichkeit verzichten.

Die E-Mail-Vorlage "Rich Typography" unten hat einen großen Logo-Bereich in der Fußzeile sowie verschiedene Kontaktinformationen und ein weiteres Logo in der Kopfzeile eingefügt.

# 7 Locken die Ecken

So sehr ich es hasse, Ratschläge zu geben, die Design-Klischees folgen, scheint dieser beliebte Trend bei den Kunden effektiv zu sein.Durch das Aufrollen der Ecken des Inhaltsbereichs entsteht eine Papierillusion, die sich natürlich gut in das Konzept eines Newsletters einfügt.

Beachten Sie in der Elegance-Vorlage unten, dass diese Technik nicht nur an den Rändern des Inhaltsbereichs verwendet wird, sondern auch auf den Bildern im Newsletter.

Alles, was Sie hier tun, ist, einem flachen Bild mehr Tiefe zu verleihen und es dreidimensionaler zu gestalten. Welche einzigartigen Tricks Sie auch zu diesem Zweck einsetzen können, wird noch besser.

# 8 Versuchen Sie einen einfachen, sich wiederholenden Hintergrund

Bis auf eines der Beispiele, die wir uns bisher angesehen haben, haben alle ein gemeinsames Designmerkmal: solide Hintergründe. Einfache, einfarbige Hintergründe sind definitiv ein Design-Trend bei HTML-E-Mails. Obwohl es sinnvoll ist, Ladezeiten einzusparen, um Bilder zu reduzieren, scheint keine dieser Vorlagen zu scheuen, Bilder in einem anderen Kontext zu verwenden.

Wie die Vorlage "Modern Business" unten und die Vorlage "TechOffers" oben zeigen, kann ein einfacher Hintergrund wirklich dazu beitragen, die E-Mail zum Leben zu erwecken und sich eher wie ein fertiges Design anfühlen.

# 9 Vergessen Sie nicht die Social Media Integration

Viele Unternehmer können nicht beschreiben, was Twitter ist, aber sie sind dabei. Übertriebene Vermarkter haben die Unternehmen davon überzeugt, dass Social Media eine Goldmine ist, die im Internet einen immensen Bekanntheitsgrad erzielen wird.

Praktisch bedeutet dies, dass nahezu jeder, dem Sie eine Vorlage verkaufen, ein Interesse an Social Media hat, und dass Sie daher nicht scheuen sollten, verschiedene beliebte Websites in Ihr Design zu integrieren.

Die folgende Vorlage für die Unternehmenskommunikation enthält einige recht große Social Media-Symbole im Abschnitt "Info" am unteren Rand der Seite.

# 10 Verwenden Sie Web-Screenshots in Ihrem Design

Ein letzter Trend, den ich in mehreren meistverkauften Vorlagen feststellte, war die Tendenz, Website-Screenshots als Hauptelement im Design zu verwenden. Da viele Unternehmen E-Mail-Newsletter in erster Linie als Mittel verwenden, um den Verkehr auf ihre Website zu lenken, ist es sinnvoll, dass sie Aufnahmen ihrer Website in der E-Mail veröffentlichen möchten.

Durch die Einbindung von Beispiel-Web-Shots in das Design helfen Sie potenziellen Käufern dabei, dass Ihre Vorlage ihre Ziele perfekt erreicht. Alles in allem könnten sie jede Vorlage mit einem Bildbereich verwenden, um dasselbe Ziel zu erreichen, aber es hilft, die Idee zu erkennen, bevor Sie es versuchen.

Informieren Sie sich über die Vorlage "Innovative - Product Tour" und erfahren Sie, wie Sie einen einfachen Browser für Safari-Browser in eine Beispiel-Webseite integrieren.

Schlussgedanken

Ich möchte Sie wie immer dazu ermutigen, diese Inspirationsbeispiele nicht als etwas zum Abzocken zu verwenden, sondern lediglich als Beispiele für erfolgreiches Design, von dem Sie lernen können, um Ihre eigenen ursprünglichen Designideen zu entfalten.

Hinterlassen Sie einen Kommentar und lassen Sie uns wissen, was Sie von den oben genannten Vorlagen halten. Teilen Sie auch alle Tricks oder Tipps mit, die Sie als besonders hilfreich beim Erstellen von E-Mail-Vorlagen für Kunden gefunden haben.