Share
Cosa starai creandoIn questo tutorial impareremo come creare un modello di newsletter via email semplice e in grassetto utilizzando Sketch.
Se ti impegni a inviare newsletter via email, dovrebbero essere considerate un punto chiave nelle tue strategie di marketing. Ci forniscono un contatto diretto con i potenziali clienti, ma dobbiamo prestare attenzione a come li progettiamo per comunicare correttamente, attirare l'attenzione e (soprattutto) soddisfare i nostri obiettivi.
Ecco il briefing di questo esercizio di progettazione: immaginiamo di essere un'azienda che offre risorse di apprendimento online. Vogliamo entrare in contatto con i nostri potenziali clienti, rivelando i vantaggi dell'utilizzo della nostra piattaforma. In questa situazione, possiamo iniziare creando una newsletter email pulita ma efficace utilizzando Sketch per soddisfare i nostri bisogni.
Inizieremo completamente da zero, utilizzando gli strumenti più comuni che abbiamo in Sketh per creare il nostro modello. Rimarrai sorpreso dalla facilità con cui sarà!
Per completare con successo questo tutorial dovrai scaricare gli allegati disponibili. Nel file zip troverai alcuni testi e le immagini che useremo nei seguenti passaggi.
Userò Helvetica Neue come carattere predefinito, ma se non lo hai disponibile, prova con Helvetica o Arial.
Nota: ricorda di essere un designer responsabile! Con questo intendo: ricordarsi di rinominare i livelli usando nomi descrittivi, raggruppare i livelli e organizzare il contenuto. I tuoi colleghi ti ringrazieranno per questo, fidati di me.
Siete pronti? Cominciamo!
Iniziamo creando una nuova tavola da disegno. Vai a Inserisci> Tavola da disegno (A) dal menu principale o dalla barra degli strumenti. Ora fai clic e trascina all'interno dell'area di disegno di Sketch per creare un 620 x 3000 px tavola da disegno. Se lo trovi difficile, ricorda che puoi modificare questi valori attraverso il Ispettore a destra dello schermo. Puoi anche cambiare il nome della tavola da disegno dal Elenco dei livelli sul lato sinistro dello schermo.
Mancia: Un approccio comune nella progettazione di modelli di email è di iniziare con una larghezza del documento intorno a 550-650 px. Scopri di più sull'e-mail marketing in questo fantastico articolo di Nicole Merlin.
Ora creiamo alcune guide che utilizzeremo come riferimento per posizionare correttamente i nostri elementi, risultando in un design solido ed equilibrato. Dove dovremmo posizionare le guide? Pensiamo un po ':
Un modello di email può essere progettato in molti modi. Uno dei più comuni è semplicemente la creazione di un layout a 1 colonna. Questo layout ci consente di guidare l'utente in un modo più semplice, utilizzando un flusso verticale di blocchi di contenuti, uno dopo l'altro. Inoltre, progettando con una struttura a colonna singola in mente, ci danno l'opportunità di adattarlo facilmente a diversi dispositivi.
Tuttavia, ai fini di questo esercizio, siamo qui per esercitarci un po 'di più, quindi creeremo un layout a 3 colonne. scusate!
Attiva le regole e inizia a creare guide. Vai a Visualizza> Mostra righelli (^ R). Ora clicca sul righello orizzontale a 30px, 200px, 225px, 395px, 420 pixel e infine a 590px. Puoi spostare i righelli trascinandoli e spostandoli. Inoltre puoi spostare le tue guide in modo simile. Per rimuovere le guide, trascinali oltre i righelli.
L'intestazione della nostra email è molto importante. È il primo contatto che abbiamo con l'utente e quindi dobbiamo comunicare la nostra proposizione principale. È anche una buona decisione mostrare il nome dell'azienda e un buon slogan seguito da un pulsante CTA che incoraggia la registrazione o ottenere maggiori informazioni su di noi.
Per prima cosa dovremmo aggiungere un intestazione, un semplice link di testo che consente all'utente di accedere alla versione web della nostra newsletter nel caso in cui il suo client di posta elettronica non consenta loro di visualizzarlo correttamente.
Seleziona il Strumento di testo (T) e fare clic in qualsiasi punto della tela per inserire un livello di testo. Notare come il Ispettore è cambiato per mostrarti tutte le proprietà del livello di testo. Inizia a digitare "Problemi nella visualizzazione di questa email? Guardalo online ".
Cambia il suo colore in # 8FA6B3 e impostare Taglia a 11px. Ora seleziona solo la parte "Visualizza online" e cambia il suo colore in # FF736D. Mantieni selezionato. Clicca il Opzioni icona accanto Colore e fai clic sul secondo Decorazione opzione per sottolineare il testo.
Sposta l'oggetto dalla parte superiore della tavola da disegno lasciando a 30px margine.
Creare un 620x500px rettangolo usando il Rettangolo (R) strumento e posizionarlo appena sotto il link del testo, lasciando 30px fra loro. Seleziona il rettangolo e cambia il suo colore in # F5F7F8 usando il Ispettore pannello. Deseleziona il frontiere opzione per rimuoverlo.
Apri il file "icone" svg allegato a questo tutorial. Seleziona tutte le icone, copia e incolla nel documento che stiamo progettando il nostro modello. Li useremo per decorare lo sfondo della nostra intestazione.
Ho messo il gruppo di icone su X = -50 e Y = 0 (cercare Posizione proprietà sul pannello di controllo) ma sentiti libero di adattarti da solo.
Mancia: Vedrai che alcune parti delle nostre icone si trovano all'esterno della tavola da disegno e Sketch le nasconde automaticamente. Nulla di male. Il programma comprende che stai utilizzando una tavola da disegno per limitare l'area del disegno in modo da nascondere le parti degli elementi posizionate tra l'area della tavola da disegno e il resto dell'area di disegno. Prova a spostare l'intero gruppo all'esterno della tavola da disegno per visualizzarlo completamente. Vedi? Non dimenticare di riportarlo nella posizione originale!
Nell'elenco dei livelli selezionare la cartella "icone" e il rettangolo precedentemente creato. Raggruppali utilizzando una delle opzioni disponibili in Sketch. Ad esempio usa il Gruppo icona nel Toolbar o usare il (⌘-G) scorciatoia da tastiera per farlo. Sposta il gruppo verso il basso sul Elenco dei livelli, rinominalo in qualcosa come "Sfondo" e usa la piccola freccia a sinistra per rivelarne il contenuto.
Seleziona il rettangolo e vai a Livello> Usa come maschera.Aspetta la magia. Lo schizzo utilizzerà il rettangolo per mascherare ogni livello sopra di esso sul Elenco dei livelli. Se abbiamo precedentemente raggruppato il contenuto che vogliamo mascherare e la maschera insieme, non influenzeremo gli elementi all'esterno del gruppo. Suggerimento molto utile!
Ora dovresti avere le icone già mascherate come nella seguente immagine:
Apri il file "logo" e copia il logotipo nel nostro documento. So che è troppo grande, quindi vai al Pannello Ispettore cambiare le sue dimensioni in 90 x 31 px. Sposta a X = 265, Y = 100.
Crea un nuovo livello di testo e imposta la sua larghezza su 560px. Sposta a X = 30 e Y = 220. Ora modifica il testo e modificalo in "Il tuo posto per scoprire le abilità del mondo reale". Impostare le sue proprietà su Peso = grassetto, Colore = # 424242, Dimensione = 48, Linea = 45 e Allineamento = centro. Seleziona solo la parola "reale" e modificala corsivo.
Ora progettiamo il nostro pulsante di azione principale. Disegnare un 220x45px rettangolo. Vai al pannello Inspector e imposta Raggio a 30. Modificare Riempire a # D92B2B. Spostalo sotto il testo dello slogan, lasciandolo in giro 50px tra i due oggetti.
Il nostro pulsante non ha senso se lo lasciamo vuoto! Abbiamo bisogno di un chiamare all'azione testo, alcune parole che si concentrano sulla proposizione principale e catturano l'attenzione dell'utente. Mi piacerebbe parlare di più di questo tipo di marketing, ma per accelerare un po 'creeremo semplicemente un livello di testo, quindi digiteremo "Unisciti a noi da 10 $ / mese".
Modificare le proprietà in Peso = grassetto, Colore = #FFFFFF e Dimensione = 15. Sposta a X = 225, Y = 375, appena dentro il nostro rettangolo arrotondato.
Utilizzeremo nuovamente questo pulsante più tardi, quindi è una buona idea salvarlo come simbolo. Raggruppare i livelli di testo e rettangolo e fare clic su Crea un simbolo opzione dalla barra degli strumenti principale. Si noti come il colore della cartella sul Elenco dei livelli è cambiato da blu a viola.
Penso che abbiamo bisogno di un po 'più di contrasto tra i contenuti in primo piano e l'immagine di sfondo, quindi facciamo un piccolo cambiamento. Vai al Elenco dei livelli, espandi la cartella Sfondo e duplica il rettangolo che stai usando per mascherare le icone dello sfondo. Spostalo in cima al gruppo, vai al Ispettore pannello e cambiamento mescolanza a Alleggerire e Opacità a 50%. Alla fine dovresti ottenere qualcosa di simile a questo:
La nostra intestazione è fatta!
Ora che abbiamo l'attenzione dell'utente, dobbiamo parlare un po 'di noi stessi e dei nostri servizi. Chi siamo? Cosa facciamo? Dobbiamo rispondere a queste domande in modo diretto e conciso, cercando di mostrare alcuni ulteriori vantaggi sull'utilizzo della nostra piattaforma.
Crea due nuovi livelli di testo. Imposta loro larghezza a 480px. Puoi digitare quello che vuoi, ma ho usato il testo che troverai all'interno del file di testo allegato.
Fatto? Ora usa le seguenti posizioni e proprietà:
Disegnare un 100px linea larga (Inserisci> Forma> Linea) e impostare Spessore a 2px e colore del bordo a #E24A4A. Posizionarlo tra i due livelli di testo, lasciando una distanza di 25px tra ogni elemento. Ricorda: se premi il tasto alt mentre si sposta il cursore, è possibile vedere le distanze in pixel tra gli elementi selezionati.
Abbiamo intenzione di replicare la struttura precedente un paio di volte durante questo tutorial. Ma per ora, seleziona la linea e i livelli di testo e raggruppali. Ricorda di essere organizzato e dargli un nome. Ho usato "primo blocco".
Seleziona il livello di testo "Cerca in linea ...", vai a Pannello Ispettore e creare un nuovo stile di testo facendo clic su "Nessuno stile di testo", quindi Crea un nuovo stile di testo. Fai lo stesso con il secondo livello di testo. Ora ogni livello collegato a questi stili verrà aggiornato immediatamente quando modifichi le loro proprietà.
Nota: prendere in considerazione che Sketch non può salvare gli stili di testo con più pesi di carattere applicati nello stesso livello. Detto questo, non userò gli stili per questo tutorial. Se vuoi saperne un po 'di più sugli stili, consulta la nostra guida dalla A alla Z di Sketch.
Apri il file svg "highlights-icons". Copia le tre icone che troverai nel documento e incollale nel tuo disegno. Usa le guide che hai già per allinearle come se stessimo usando un layout a 3 colonne, proprio sotto il blocco precedente. Non metterli troppo vicini a quel blocco, lascia gli spazi bianchi intorno 40px. Se hai bisogno di aiuto, guarda l'immagine seguente:
Crea tre 170px strati di testo largo usando Helvetica Neue Bold, Dimensione = 15, Linea = 18, Colore = # 424242 e Allineamento = centro. Metti questi elementi in giro 30px sotto le icone usando le guide e inizia a digitare o copia il testo dal file allegato!
Un altro blocco è finito!
Una caratteristica comune nelle newsletter è l'invio degli ultimi articoli o contenuti ai quali i lettori sarebbero interessati. Quindi dopo il nostro CTA primario e la parte in cui parliamo un po 'di noi stessi, creiamo un blocco in cui mostriamo le lezioni più recenti disponibili su la nostra piattaforma di apprendimento.
Inizia duplicando il "primo blocco" che hai già fatto. Mettilo sotto i blocchi precedenti, 40px margine e utilizzare i contenuti all'interno di .testo file per modificare i livelli di testo. Dovrebbe essere qualcosa del genere:
Vai alla cartella "lezioni" nei file sorgente e importa tutte le immagini nel tuo documento Inserisci> Immagine. Ora hai sette immagini, 620 px di larghezza. Ne utilizzeremo uno a grandezza naturale e ridimensioneremo il resto per adattarlo al layout a 3 colonne.
Aggiungiamo un po 'di testo per la nostra grande immagine. Inserisci tre livelli di testo, usa il file di testo ancora una volta e imposta le proprietà e le posizioni come segue:
Abbiamo bisogno di un po 'più di livelli di testo per le altre lezioni che stiamo mostrando. Facciamolo ancora; inserisci tre livelli di testo, digita quello che vuoi o copia i testi dal file fornito. Imposta le loro proprietà e posizioni usando l'immagine seguente come riferimento e ripeti il processo cinque volte per finire il resto delle lezioni che stai mostrando.
Un altro blocco è finito. Prenditi un momento per organizzare i tuoi livelli, quindi passa alla parte successiva!
So che il nostro modello di email è ... lungo. Ma non è un problema se sappiamo come affrontarlo! Gli utenti dovranno scorrere fino in fondo al contenuto, quindi è una buona idea offrire un facile accesso a un altro invito all'azione senza dover scorrere fino alla cima dell'email.
Ricordi il "primo blocco" che hai duplicato prima? Fallo di nuovo, spostalo sotto il "blocco lezioni" lasciando un margine intorno 40px e cambiare il suo contenuto come segue:
Inserisci a 620x243px rettangolo e riempirlo con # F5F7F8. Ora aggiungi un livello di testo e modifica il suo contenuto e le sue proprietà usando l'immagine seguente come riferimento:
Vai a Inserisci> Simboli e scegli il pulsante CTA che hai creato prima. Mettilo sotto il paragrafo precedente.
Abbiamo quasi finito!
Ok, abbiamo il nostro blocco principale e un invito all'azione. Successivamente, abbiamo aggiunto alcuni messaggi secondari e un po 'più di contenuto. Più tardi, abbiamo parlato di nuovo della nostra proposizione principale, ripetendo la chiamata all'azione. Ora è il momento di progettare il piè di pagina e completare il nostro modello!
Creare un 620x130px rettangolo. Riempi con # 555E68 e metterlo sotto il blocco CTA. Quindi, creane un altro 620x45px rettangolo e riempirlo con # 383E44. Dovresti finire con qualcosa del genere:
Importa il file "logo-white" nel tuo documento e spostalo in X = 265 e Y = 2787.
Aggiungiamo il testo finale. Inserisci tre livelli di testo e imposta le loro proprietà e posizioni come segue:
Non è necessario, ma puoi regolare l'altezza della tavola da disegno in modo che corrisponda solo allo spazio di cui hai veramente bisogno. Puoi farlo selezionandolo sul Elenco dei livelli e cambiando la sua altezza sul Ispettore pannello. L'ho cambiato Altezza = 2937 px.
Ecco come dovrebbe apparire il prodotto finale.
Spero che questo tutorial ti sia piaciuto. Fammi sapere se ti blocchi o devi chiedere qualcosa. Hai un'idea per il mio prossimo tutorial? Lascia un commento! Non vedo l'ora di vedere come sali!
Accentsconagua