Share
Recentemente abbiamo ridisegnato tutte le email che inviamo su Envato Tuts +; le newsletter, i vari digest, le e-mail della campagna di marketing e le e-mail dell'amministratore. In questa breve serie di casi di studio spiegheremo come lo abbiamo fatto!
Fino alla riprogettazione, disponevamo di una raccolta di e-mail abbastanza disgiunte senza che nessuna squadra centrale si occupasse di loro. È diventato chiaro che potevamo semplificare le cose e rendere le cose più economiche, così abbiamo deciso di spostare i nostri sforzi su un account centrale in Campaign Monitor. Una serie centrale di temi verrebbe utilizzata su tutta la linea e ci assicureremmo che fossero progettati e costruiti in modo da rappresentare ciò che rappresentiamo per Envato Tuts+.
La prima fase dell'operazione consisteva nel raccogliere tutte le varie e-mail che stavamo mandando alle masse. Ciò significava esaminare attentamente le nostre attuali newsletter di MailChimp e smantellare ciò che avevamo in Exact Target.
Una volta saputo ciò che stavamo guardando, potremmo individuare elementi comuni e categorizzare tutto pronto per la fase di progettazione.
Abbiamo bollito tutto su:
Quali erano le nostre priorità per questa riprogettazione? In forma di proiettile, avevamo bisogno di:
E noi ricercato:
È ora di fare un po 'di grafica! Ho usato Sketch per questo processo di progettazione, a causa della sua idoneità per la progettazione dell'interfaccia utente. Il primo passo era mettere insieme una tavola da disegno e calcolare alcune dimensioni della griglia.
Ho usato le opzioni di layout di Sketch (Visualizza> Tela> Impostazioni di layout ... ) per impostare una griglia di 640 px, con 8 colonne. Mio tavola da disegno era molto più ampio di così, per darmi respiro. Cliccando su Centro l'offset viene calcolato automaticamente, in questo caso a 280 px. La griglia è stata quindi posizionata a 280px in dal bordo della tavola da disegno.
Una larghezza della colonna di 62 px legata bene con grondaie di 20 px, dandomi un punto di partenza orizzontale.
Volevo anche le righe, quindi ho controllato Righe scatola. Il mio tipo funzionerebbe da una base di 16 px, quindi l'ho usato come una griglia verticale rudimentale.
Tavola da disegno denominata "Digest"Il team di marketing del quartier generale aveva chiesto di creare delle disposizioni per una specie di sezione degli eroi; qualcosa che permetterebbe loro di utilizzare grafiche sorprendenti se mai ne avessero bisogno.
Non volevo che fosse standard su tutti i tipi di email, ma mi ha dato un buon punto di partenza. Usando i blocchi, ho iniziato a creare un layout di base.
Con un eroe, un'area di contenuto principale e una tela bianca, il palcoscenico era pronto. Ho deciso di giocare con i livelli e fare in modo che l'area del contenuto si sovrapponga leggermente all'eroe. Sapevo che questo avrebbe potuto causare a Nicole (che avrebbe dovuto costruire tutto il complesso) qualche mal di testa, ma sapevo che l'avrebbe capito - lei è un mago dopotutto.
Varianti di questo accordo potrebbero venire sotto forma di:
Un vantaggio di un layout semplice è che la reattività è intrinsecamente più semplice da raggiungere. Schiacciato in una finestra più stretta, dovremmo comprimere la doppia colonna dove necessario e mettere l'area del contenuto contro il bordo della finestra, dandoci una serie di sezioni e senza sovrapposizioni.
In Sketch, dove sono necessarie due diverse disposizioni di colonne, abbiamo bisogno di una seconda pagina. Qualsiasi layout di griglia che definiamo viene applicato a tutte le tavole da disegno sulla stessa pagina e abbiamo bisogno di una griglia molto più semplice per la nostra panoramica mobile ottimizzata.
Ciò di cui abbiamo bisogno qui è così semplice, infatti, che abbiamo davvero bisogno solo di una singola colonna centrale, con una grondaia (ci atterremo a 20px su entrambi i lati). Sketch non può creare una griglia di solo una colonna, quindi dovremo usarne due.
In questi giorni usiamo Roboto in gran parte di Envato, quindi è stata presa una decisione per me. I colori sono in gran parte dettati anche dagli stili di Envato, quindi ho avuto una tavolozza tra cui scegliere. Dovevo decidere quale sarebbe stato usato per il corpo, i titoli, i link, qualsiasi testo con meno enfasi e gli "inviti all'azione".
Le mie priorità erano che:
Link e CTA nello stesso bluIn termini di Sketch, semplificando le cose, gli stili di testo sono a portata di clic. Disegna una porzione di testo come desideri, salvala come stile di testo, quindi rimandi ad essa se mai hai bisogno di quello stile.
Envato Tuts + è una piattaforma piuttosto visiva; noi usiamo le miniature dappertutto. Alcuni commenti del team hanno suggerito che la stessa disposizione delle carte che usiamo sulla nostra homepage sarebbe il modo migliore per presentare tutorial in una email di sintesi. I lettori farebbero la connessione, capiranno cosa hanno a che fare e, in ogni caso, è un modo chiaro di presentare le informazioni.
I corsi sono leggermente diversi; Volevo dare quell'enfasi in più. Ciascuna sezione tematica mostrerà per prima cosa un corso disponibile, a larghezza intera, con un po 'più di dettaglio dei tutorial, oltre a un grafico del pulsante di riproduzione sovrapposto alla miniatura. Questo evidenzierebbe la distinzione tra corsi e tutorial, mentre stimolava i lettori a fare clic (i pulsanti di riproduzione sono buoni per quello).
Avere il pulsante play posizionato dinamicamente sopra la parte superiore sarebbe imbarazzante, quindi ci siamo rassegnati a posizionare manualmente la grafica del pulsante sulle miniature stesse (con Photoshop, ad esempio). Un po 'di lavoro extra (scusa Cameron), ma vale la pena, penso.
Volevamo anche un modo per presentare blocchi di annunci; non necessariamente annunci di terze parti, ma qualcosa per darci l'opportunità di gridare su cose nuove ed eccitanti. Ho aggiunto un banner opzionale in cima al layout, molto simile a quello che vedrai sul sito ogni tanto.
Ho quindi deciso di suddividere tutti i contenuti in blocchi, consentendoci di organizzarli in qualsiasi ordine scegliamo e anche facendo una chiara distinzione tra le sezioni.
Ecco come si presenta un blocco di annunci, con due sezioni di digest su entrambi i lati.
Nota: questo è un annuncio reale, scopri di più quiIl piè di pagina è un elemento universale di tutte queste e-mail. Non volevo tonnellate di informazioni seppellite lì, ma cosa noi fatto scelgo di posizionare lì volevo chiarire (non capisco perché alcune aziende riescano a vedere i loro footer a malapena, con i link di "cancellazione" nascosti).
Quindi, con alcuni collegamenti social, un'area di testo per spiegare perché qualcuno potrebbe ricevere l'e-mail, cancellare i link e l'indirizzo HQ Envato, eravamo tutti pronti.
Ora abbiamo la base per tutti gli elementi di cui abbiamo bisogno, dandoci gli elementi costitutivi per ciascuno dei nostri tipi di email.
È improbabile che le newsletter abbiano bisogno di un eroe grafico di qualsiasi tipo, quindi ho usato un titolo semplice ma audace per iniziare il procedimento lì. Gli stili tipografici che abbiamo già impostato soddisfano la maggior parte dei possibili contenuti.
Una distinzione tra newsletter e digesti è stata fatta dando alle newsletter un eroe trasparente, rendendolo complessivamente più ... foglio di calcolo.
La più semplice di tutte le nostre e-mail (oltre alle versioni in testo normale) sono i messaggi di amministrazione. Nel loro caso non è assolutamente necessario uno styling extra; solo ottenere il punto attraverso, rapidamente e semplicemente. Un eroe trasparente e una mancanza di grande intestazione impostano il tono admin abbastanza bene qui. Tutto il resto rimane lo stesso incluso, possibilmente, un pulsante CTA. Ecco le visualizzazioni desktop e mobili:
Con i concetti e i disegni stabiliti, era giunto il momento di spedire i risultati a Nicole. Prendeva queste idee e creava file HTML statici da loro. Avevo bisogno di assicurarmi che lei capisse le decisioni che erano state prese, e aveva tutti i beni necessari per costruire le e-mail.
InVision consente annotazioni molto veloci sui documenti grafici e puoi caricare direttamente i file di schizzo. Una raccolta di immagini con commenti e puntatori era un buon modo per comunicare tutte le idee.
In termini di distribuzione degli asset, Sketch rende molto semplice l'esportazione di tutti i bit e le parti necessari. Non solo potevo preparare tutte le risorse (come loghi, pulsanti social, ecc.) Ma potevo anche consegnarle a diverse dimensioni, coprendoci per schermi con densità di pixel variabili. Ulteriori informazioni su come Sketch può esportare le tue risorse:
Con tutti i file e alcune altre istruzioni in Dropbox, Nicole aveva tutto ciò di cui aveva bisogno per lavorare con la sua magia.
Nella prossima parte di questo case study ti consegnerò a Nicole per la costruzione. Spiegherà come ha costruito la base reattiva per queste e-mail e ha superato le solite questioni sollevate dallo sviluppo della posta elettronica.
Sentiti libero di prendere il file demo di Sketch dal repository su GitHub e vedere le email finite da te: iscriviti qui sotto!
Accentsconagua