10 lezioni di progettazione da modelli di email HTML che in realtà vendono

In passato noi e molti altri blog abbiamo delineato alcune utili informazioni tecniche su come codificare e strutturare le e-mail in formato HTML da un punto di vista dello sviluppatore. Ma molto meno discussione è stata data a come effettivamente intraprendere la componente di progettazione delle newsletter via email.

Oggi daremo un'occhiata ad alcuni dei modelli di email più venduti da Themeforest e vediamo se siamo in grado di decifrare ciò che i loro progettisti hanno fatto giusto in modo da poter imitare questi principi di base nei propri progetti.

# 1 Tienilo stretto

I client di posta elettronica variano notevolmente non solo per il modo in cui interpretano il codice, ma semplicemente per il modo in cui visualizzano i messaggi. Considera la differenza tra la visualizzazione di un messaggio in Apple Mail su un monitor da 20 "anziché su Gmail su un monitor da 13".

Ovviamente, la larghezza del tuo design diventa un problema importante. Sebbene sia possibile inondare lo sfondo con un colore attraverso una tabella di larghezza del 100%, la maggior parte degli standard consiglia di utilizzare una larghezza del contenuto compresa tra 500 e 650 pixel.

Nel modello AirMail estremamente popolare di seguito, il design si estende a circa 550 pixel di larghezza, ma la larghezza del contenuto effettivo arriva a soli 480 pixel.

Il design stretto sembra ottimo e funzionerà perfettamente nella maggior parte dei dispositivi e dei client.

# 2 Le opzioni sono tutto

Una delle principali chiavi per la creazione di modelli che vendono è ricordare che un approccio di taglia unica non funzionerà. I clienti che acquistano un modello di design non vogliono solo un design forte, vogliono un valore. Vedono il valore nelle opzioni che rendi disponibili.

Se il tuo modello ha un layout e uno o due schemi di colori, non stai fornendo davvero un sacco di varietà. Ciò blocca l'acquirente in un numero abbastanza limitato di opzioni, il che non rende l'acquisto una decisione saggia a lungo termine.

Tuttavia, se il tuo modello consente loro di scegliere tra diversi layout e opzioni di colore, i potenziali clienti apprezzeranno l'opportunità di scegliere da così tante variabili di newsletter via email su base settimanale, permettendo loro di cambiare le cose e vedere cosa funziona meglio per loro base clienti unica.

Come esempio di forte varietà, considera il modello BlauMail mostrato di seguito. Innanzitutto, puoi scegliere tra diverse opzioni di colori e modelli (angoli arrotondati o quadrati).

Successivamente, puoi scegliere uno dei tre layout unici.

Questo ti porta al modello con le opzioni che hai selezionato. Per tenere conto di tutte le variabili, BlauMail viene fornito con ben 60 file HTML!

# 3 Creare sezioni chiaramente definite

Le aziende utilizzano le e-mail HTML come punto di contatto continuo con i loro clienti e, indipendentemente dal fatto che sia la cosa migliore da fare dal punto di vista della strategia, a loro piace mettere un bel po 'di contenuto in esse.

Le aziende vogliono far conoscere ai clienti le vendite, le promozioni e gli aggiornamenti in una varietà di aree diverse e devono essere in grado di farlo in uno spazio non disordinato. Quindi, piuttosto che creare un'e-mail con una sola grande area di contenuto, prendere in considerazione la possibilità di suddividerla in una serie di sezioni diverse.

Il nuovo modello di e-mail in basso porta questa idea all'estremo e separa fisicamente le diverse sezioni su sfondi diversi, creando un aspetto modulare.

Questo modello ha 750 acquisti fino ad oggi, mettendolo in cima alla lista su ThemeForest. Quindi, se hai intenzione di prendere lezioni da qualsiasi modello, dovrebbe probabilmente essere questo!

# 4 vendite semplici

Mentre alcuni designer di modelli si avvalgono di temi creativi, colori audaci e grafica straordinaria, altri possono vendere il doppio dei modelli utilizzando layout forti e grafica semplice ma accattivante.

Il modello di posta elettronica versatile di seguito non vincerebbe certamente nessun premio di design eccezionale, eppure è estremamente popolare perché è esattamente ciò che vogliono molte aziende.

Il designer attira subito i potenziali clienti inserendo? Versatile? nel titolo e fornisce molti extra come raccomandato nel suggerimento n. 2 sopra. Nel frattempo, il design è mantenuto molto minimale, il che rende il modello qualcosa che possono essere utilizzati da innumerevoli professionisti.

# 5 Spara per una nicchia

Come abbiamo visto sopra, la creazione di un layout di base e un design generico sono molto importanti a causa dell'enorme pubblico a cui fa appello. Tuttavia, l'utilizzo di questa tecnica può renderti difficile distinguerti tra la concorrenza.

Se una strategia per tutti gli usi non sta funzionando per te, prova a indirizzare una nicchia considerevole di consumatori alla ricerca di qualcosa di specifico. Ad esempio, il tema di TechOffers di seguito è in realtà attraente per diverse nicchie contemporaneamente.

Ovviamente, c'è la componente tecnologica, ma il modello sarà anche attraente per quasi tutti i clienti che cercano un tema di e-commerce. Infine, il tema ha una componente festiva con il nastro rosso e la messaggistica di Capodanno.

Questo designer si distingue improvvisamente tra la folla per tre clienti unici alla ricerca di un tipo specifico di modello. Strategicamente, questa è una mossa eccellente che sta dando i suoi frutti nelle vendite.

# 6 rendilo facile per il marchio

Ricorda che l'acquisto di un modello è spesso un compromesso per molte aziende perché il prodotto non viene costruito da zero per mostrare il proprio marchio.

Puoi aiutare a superare questo ostacolo all'acquisto fornendo ai potenziali acquirenti molti luoghi in tutto il design per inserire il nome della propria azienda, il logo, lo slogan, una foto / profilo personale, ecc. Questa semplice tecnica aiuterà i clienti a capire che possono davvero fare il modello non deve rinunciare alla personalizzazione per convenienza.

Il modello di email di Rich Typography di seguito ha inserito un'area di logo di grandi dimensioni nel footer oltre a varie informazioni di contatto e un altro logo nell'intestazione.

# 7 Curl The Corners

Per quanto odio offrire consigli che seguono i cliché di design, questa tendenza popolare sembra essere efficace con i clienti.Arricciare gli angoli dell'area del contenuto aiuta a creare un'illusione di carta, che naturalmente si lega bene al concetto di una newsletter.

Si noti nel seguente modello di eleganza che questa tecnica viene utilizzata non solo ai margini dell'area del contenuto ma anche sulle immagini all'interno della newsletter.

In sostanza, tutto ciò che stai facendo è fornire un senso di profondità a un'immagine piatta e renderla più tridimensionale. Qualunque trucchetto unico che puoi usare per questo stesso fine sarà anche meglio.

# 8 Prova uno sfondo semplice e ripetuto

Tutti tranne uno degli esempi che abbiamo visto finora condividono un tratto di design comune: sfondi solidi. Gli sfondi semplici e in tinta unita sono sicuramente una tendenza di design con le e-mail HTML. Ho pensato che fosse saggio per i tempi di caricamento ridurre le immagini, nessuno di questi modelli sembra timido sull'uso delle immagini in qualsiasi altro contesto.

Come mostrano il modello di Business moderno di seguito e il modello di TechOffers qui sopra, uno sfondo semplice può davvero aiutare a rendere l'email viva e renderla più simile a un progetto finito.

# 9 Non dimenticare l'integrazione con i social media

Molti imprenditori non possono iniziare a descrivere cosa sia Twitter, ma ci sono. I marketer troppo zelanti hanno convinto le aziende che i social media sono una miniera d'oro che porterà un'immensa fama su Internet.

A livello pratico, questo significa che quasi tutti coloro che vendono un modello avranno un interesse nei social media e che quindi non dovresti essere timido nel lavorare su vari siti popolari nel tuo design.

Il modello di comunicazione aziendale di seguito presenta alcune icone di social media piuttosto grandi nella sezione Informazioni nella parte inferiore della pagina.

# 10 Usa le schermate Web nel tuo progetto

Una tendenza finale che ho notato in diversi modelli più venduti è stata la tendenza a utilizzare gli screenshot dei siti Web come elemento principale del design. Dal momento che molte aziende utilizzano le newsletter via email principalmente come mezzo per indirizzare il traffico verso il loro sito, è logico che vogliano inserire nella propria e-mail le foto del proprio sito.

Incorporando esempi di web shot nel design, stai aiutando i potenziali acquirenti a vedere il tuo template che soddisfa perfettamente i loro obiettivi. In tutta onestà, potrebbero utilizzare qualsiasi modello con un'area immagine per raggiungere lo stesso obiettivo, ma aiuta a vedere l'idea realizzata prima di tentare di farlo.

Consulta il modello Innovative - Product Tour e come incorpora in modo creativo un browser Chrome browser di base con una pagina Web di esempio.

Pensieri di chiusura

Come sempre, ti incoraggio a utilizzare questi esempi di ispirazione non come qualcosa da ripoffare ma semplicemente come esempi di design di successo da cui puoi imparare e utilizzare per accendere le tue idee di design originali.

Lascia un commento qui sotto e facci sapere cosa ne pensi dei modelli qui sopra. Assicurati inoltre di condividere eventuali trucchi o suggerimenti che hai trovato particolarmente utili durante la creazione di modelli di email per i clienti.