Share
Cosa starai creandoIn questo tutorial ti guiderò attraverso il processo di progettazione di un modello di e-mail a tema pulito e festivo. Inizieremo completamente da zero, disegnando il layout con Adobe Photoshop. Useremo alcune tecniche di base e intermedie per creare questo design con la conversione in mente. Cominciamo!
Per poter seguire, avrai bisogno di alcune risorse (disponibili gratuitamente):
Inizia creando un nuovo documento Photoshop (File> Nuovo ... ) usando le impostazioni mostrate sotto. La maggior parte delle newsletter via e-mail ha una larghezza definita di circa 620 pixel totali. Di solito uso 600px, ma qualsiasi cosa sotto 620px va bene. Quando questo è costruito in HTML potrebbe essere comunque reattivo.
Impostiamo alcune guide in modo che la nostra area di sicurezza sia progettata entro i limiti di 620 px di larghezza. Vai a Visualizza> Nuova guida ... e impostare alcune linee guida sui lati e una linea guida nel mezzo in modo da poter facilmente allineare le cose in seguito.
Nota: Linee guida utilizzate per questo tutorial: verticale a 40px, 80px, 340px, 600px e 640px.
Mancia: È anche possibile utilizzare il plug-in GuideGuide Photoshop per rendere questo processo ancora più rapido.
Seguendo l'etichetta di Photoshop manterremo le cose organizzate e quindi facili da navigare e modificare. Creiamo tre gruppi di livelli denominati "Intestazione", "Messaggio", "Migliore" e "Citazione". Per creare gruppi vai a Livello> Nuovo> Gruppo ... e dare a ciascuno un titolo come detto. Per la creazione rapida di un gruppo fai semplicemente clic sull'icona della cartella.
Non dovresti rendere il tuo background troppo elaborato o fastidioso in quanto molti utenti di e-mail non lo vedranno su schermi più piccoli. Vale anche la pena ricordare che lo sfondo non dovrebbe essere un'immagine in quanto verrà bloccata di default su molti client di posta elettronica.
Iniziamo a impostare lo sfondo dell'e-mail. Cambia il colore di primo piano in blu molto chiaro # f6f9fb e colpisci Alt + Backspace per riempire il livello "Sfondo". Puoi usare qualsiasi altra tonalità chiara per la tua e-mail, ma è meglio avere questo colore tenue che non distragga il destinatario ma crei ancora uno stato d'animo diverso.
Ora è il momento di impostare uno sfondo nell'area sicura in cui verrà inserito tutto il contenuto dell'email. Scegli il Strumento rettangolo (U) e disegna un bianco #FFFFFF rettangolo tra la prima e l'ultima guida verticale distanti 600 pixel.
L'intestazione della nostra e-mail è molto importante ed è il punto cruciale in cui il destinatario dell'email deciderà se leggere più lontano vale il suo tempo. Secondo questa guida di Nicole Merlin, specialista di email straordinaria, è importante esserlo chiaro e trasparente.
"Indica il mittente, taglia la lanugine e vai dritto al punto."
Per questo tutorial inserirò semplicemente un nome aziendale e un link per consentire alle persone di aprire l'e-mail in un browser Web nel caso in cui non si carichi correttamente tramite il client di posta elettronica. Inoltre, includerò un'enorme immagine con una semplice messaggistica che metterà a fuoco l'umore e mostrerà le intenzioni di questa email, che riguarda il desiderio di buone feste.
Aprire il gruppo "Intestazione" e selezionare il Strumento di tipo orizzontale (T). Potresti trovare meglio scrivere il nome della tua azienda piuttosto che usare un logo perché, come ho detto prima, le immagini potrebbero essere disabilitate quando la tua e-mail viene aperta in modo che possa rovinare l'esperienza perché il tuo logo non sarà visibile.
Scegli un font che usi per il tuo marchio e scrivi il titolo della tua azienda, posizionalo sul lato in alto a sinistra e lasciagli spazio. Nel mio caso l'ho usato Apri Sans (Bold) 18px taglia grigio scuro # 434.343 per il colore.
È molto importante fornire un collegamento che le persone possono fare clic o toccare e aprire l'e-mail nel proprio browser nel caso in cui non renda molto bene nel client di posta elettronica. Solo un semplice collegamento testuale farà il lavoro, posizionato in anticipo in modo che lo screen reader possa immediatamente incontrarlo. Ho usato lo stesso Open Sans (Semibold) carattere e ha cambiato il colore in grigio più luminoso # 666666 e dimensioni del carattere ridotte a 13px. Infine posizionalo nell'angolo in alto a destra dell'e-mail.
Eccezionale! Ora dobbiamo posizionare un'immagine per attirare l'attenzione del destinatario. Useremo una foto a tema natalizio, aggiungendo qualche effetto sfumato e copiando sopra tutto.
Prendi il Strumento rettangolo (U) e disegna a 600x300px scatola di dimensioni comprese tra la prima e l'ultima guida. Quindi crea un nuovo livello sopra di esso e tieni premuto il tasto alt tasto e mouse sul livello foto fino a quando non vedi una piccola freccia rivolta verso il basso. Quando lo vedi, cliccaci sopra e creerai a Maschera di ritaglio. Ora scegli il Strumento sfumatura (G) e scegli il gradiente di default da rosso a verde.
Ora crea il gradiente trascinando il mouse da in alto a sinistra a in basso a destra. Otterrai qualcosa come nell'esempio qui sotto.
Dopo di che scarica Bokeh di String Lights on Tree foto da Good Stock Photos e posizionalo sopra il gradiente di livello creando a Maschera di ritaglio anche per questo strato. Finalmente colpito T CMD + e ridimensiona la foto.
Suggerimento: tieni premuto Cambio chiave per disegnare / ridimensionare proporzionalmente.
Ora imposta la modalità di fusione dei livelli su copertura.
Finalmente scriviamo il nostro messaggio principale. Sto usando il bianco #FFFFFF con il carattere tipografico audace ma elegante Display Playfair (grassetto in corsivo) 52px dimensione per ritrarre la sensazione di festa. Quando progetti newsletter via email, assicurati di mantenere il tuo messaggio breve e chiaro in modo che gli utenti lo capiscano subito.
Un'altra cosa che dovresti tenere a mente è la progettazione di blocchi che possono essere riutilizzati. Ad esempio, progetteremo questo blocco di messaggi che può essere trasformato in un modello in modo che gli utenti possano modificare il titolo, la copia principale e il pulsante di richiamo all'azione senza la necessità di un designer, poiché tutto sarà pre-progettato. Inoltre possono duplicare un blocco del genere e utilizzare messaggi diversi.
È intelligente progettare le e-mail in una colonna e allineati centralmente in modo che possano essere facilmente trasformati in un layout reattivo. Aprire il gruppo "Messaggio" e selezionare il Strumento di tipo orizzontale (T). Utilizzerò nuovamente il livello di testo utilizzato per il titolo dell'azienda e aumenterò la dimensione del carattere 32px e cambiare peso a Extrabold.
Ora è il momento di dire qualcosa in modo più dettagliato, non essere troppo lungo e cercare di attirare l'attenzione del lettore, portando il lettore a fare clic sul pulsante call to action che progetteremo tra un momento. Usando lo stesso Strumento di tipo orizzontale (T) scrivi la tua copia, per la mia ho usato lo stesso colore del link "Apri nel browser" # 666666 e Apri Sans (Regular) 18px taglia.
Eccezionale! Hai l'attenzione del lettore e ora è il momento di mettere un pulsante di chiamata al pulsante di azione in modo che la tua email porti da qualche parte utile. Crea un nuovo gruppo chiamato "CTA" e prendi il Strumento rettangolo (U), dopo questo cambia il colore di primo piano in rosso # de1816 rappresenta l'atmosfera natalizia e disegna una forma rettangolare. Nel mio caso lo è 240x40px taglia. Quindi scegli il Strumento di tipo orizzontale (T) e inserisci il messaggio del pulsante. Ho usato il bianco #FFFFFF Apri Sans (Bold) 14px taglia.
Infine abbiamo bisogno di chiudere il blocco separandolo con una linea; imposta il colore di primo piano su grigio chiaro #eeeeee e scegli il Strumento linea (U) con Peso impostato 1px. Dopo ciò disegna una linea orizzontale tra la prima e l'ultima guida. Lascia un po 'di spazio sopra la linea.
Suggerimento: tieni premuto Cambio disegnare linee perfettamente diritte.
Una caratteristica molto comune nelle newsletter di email digest è l'invio degli ultimi articoli che i lettori potrebbero aver perso o sarebbero interessati. Quando si progetta un modulo di questo tipo è necessario tenere presente che sarà un elemento dinamico, quindi è necessario impostare la scena lascia l'autore della posta elettronica per sostituire le informazioni.
Colpendo il livello del titolo del messaggio usato in precedenza CMD + J e trascinandolo nel gruppo "Best". Dopo di ciò, cambia il titolo e posizionalo sotto la linea in modo coerente, in modo da mantenere il ritmo verticale.
Ora elencheremo alcuni dei migliori articoli dell'anno. Per questo tutorial userò semplicemente le immagini degli articoli, i titoli e le descrizioni di Tuts + Web Design.
Crea un nuovo gruppo chiamato "Articolo". Prendi il Strumento rettangolo (U) e, tenendo premuto il tasto Cambio chiave, disegna a 140x140px scatola di dimensioni Quindi scegli un'immagine di un articolo e trascinala nella finestra di Photoshop, dopodiché crea un Maschera di ritaglio come abbiamo fatto prima e ridimensionare l'immagine se necessario.
Grande! Ora dobbiamo inserire il titolo dell'articolo e una breve descrizione in modo che il lettore possa ottenere una rapida panoramica prima di fare clic o toccare. Riutilizzerò il livello del titolo della sezione duplicandolo e riducendo la dimensione del carattere e duplicando anche il livello di descrizione dal gruppo "Messaggio".
Riduci a icona il gruppo "Articolo" e duplica per altre due volte colpendo CMD + J. Dopodiché sposta questi gruppi duplicati sotto il primo e dovrai modificare i titoli, le immagini e le descrizioni di questi elementi duplicati.
Infine duplica il gruppo "CTA" e il livello di linea selezionandoli e colpendo CMD + J, poi sposta questi strati nel gruppo "Best" e posizionali sotto gli articoli lasciando abbastanza spazio.
La fine è molto vicina. Mettiamo un ultimo blocco nella nostra newsletter, una citazione ispiratrice con una seconda chiamata all'azione per twittare. La migliore pratica è ripetere l'invito principale all'azione alla fine della newsletter, ma infrangeremo questa regola qui e usare una citazione stimolante per stimolare il lettore.
Aprire il gruppo "Quote", selezionare il Strumento di tipo orizzontale (T) e ogni citazione che ti piace da BrainyQuote. Copia la citazione e annotala usando lo stesso elegante carattere che abbiamo usato per la grafica nella parte superiore della nostra newsletter. Nel mio caso lo è Display Playfair (in corsivo) 24px dimensione e colore grigio come usato per la copia # 666666 prima.
Vai al sito web di Twitter e copia un pulsante di tweet. Fai uno screenshot colpendo Shift + Ctrl + CMD + 4 e selezionando il pulsante Tweet. Dopo di ciò incollalo e posiziona sotto la citazione.
Un'ultima cosa. Ogni newsletter e-mail deve avere un'opzione per le persone di disiscriversi. È anche utile stabilire perché il destinatario riceve l'e-mail in primo luogo. Riutilizzare il link "Apri nel browser" dall'alto, duplicarlo e posizionarlo sotto lo sfondo del contenuto.
Il nostro design finitoQuesto è tutto! Abbiamo finito con il design del layout della posta elettronica, ora esaminiamo i livelli, eliminiamo quelli non necessari e lo consegniamo al tuo sviluppatore, o ancora meglio lo codificiamo da soli. Ho toccato alcune tecniche di base e ho dimostrato il mio flusso di lavoro per la progettazione del layout della posta elettronica, spero che tu abbia imparato qualcosa.
Mi piacerebbe sentire il tuo feedback e vedere i risultati di questo tutorial!
Accentsconagua