Share
Ce veți creaÎn acest tutorial vom învăța cum să creați un șablon de buletine de știri simplu și îndrăzneț prin utilizarea schiței.
Dacă vă angajați în trimiterea buletinelor informative de e-mail, acestea ar trebui să fie considerate un punct-cheie în strategiile de marketing. Ele ne dau un contact direct cu potențialii clienți, dar trebuie să acordăm atenție modului în care le proiectăm pentru a comunica corect, pentru a atrage atenția și, cel mai important, pentru a ne atinge obiectivele.
Iată briefingul din spatele acestui exercițiu de design: să ne imaginăm că suntem o companie care oferă resurse de învățare online. Vrem să contactăm potențialii clienți, dezvăluind beneficiile utilizării platformei noastre. În această situație, putem începe prin crearea unui buletin informativ curat dar eficient, utilizând Sketch pentru a ne îndeplini nevoile.
Vom începe totul de la zero, folosind cele mai comune instrumente pe care le avem în Sketh pentru a crea șablonul nostru. Veți fi uimiți de cât de ușor va fi!
Pentru a finaliza cu succes acest tutorial, va trebui să descărcați fișierele atașate disponibile. În fișierul zip veți găsi câteva texte și imaginile pe care le vom folosi în următorii pași.
O să folosesc Helvetica Neue ca font prestabilit, dar dacă nu aveți disponibil, încercați cu Helvetica sau Arial.
Notă: nu uitați să fiți un designer responsabil! Prin asta vreau să spun: amintiți-vă să redenumiți straturile folosind nume descriptive, să grupați straturile și să organizați conținutul. Colaboratorii dvs. vă vor mulțumi pentru asta, aveți încredere în mine.
Sunteți gata? Sa incepem!
Să începem prin crearea unui nou tablou de artă. Mergi la Inserare> Placă Artboard (A) din meniul principal sau din bara de instrumente. Acum faceți clic și trageți în interiorul panzei Sketch pentru a crea o 620 x 3000 pixeli planșă de lucru. Dacă vă este dificil, amintiți-vă că puteți modifica aceste valori prin intermediul Inspector în partea dreaptă a ecranului. De asemenea, puteți schimba numele tabloului de bord din Listă de straturi în partea stângă a ecranului.
Bacsis: O abordare comună la proiectarea șabloanelor de e-mail este să începeți cu o lățime a documentelor de aproximativ 550-650px. Aflați mai multe despre marketingul prin e-mail în acest articol extraordinar de Nicole Merlin.
Acum, să creăm câteva ghiduri pe care le vom folosi ca referință pentru a plasa corect elementele noastre, rezultând un design echilibrat și echilibrat. Unde ar trebui să introducem ghidurile? Să ne gândim puțin:
Un șablon de e-mail poate fi proiectat în mai multe moduri. Una dintre cele mai des întâlnite este crearea unui layout în 1 coloană. Acest aspect ne permite să ghidăm utilizatorul într-un mod mai ușor, folosind un flux vertical de blocuri de conținut, unul după altul. În plus, proiectarea cu o structură cu o singură coloană în minte ne oferă posibilitatea de a o adapta cu ușurință la diferite dispozitive.
În scopul acestui exercițiu, totuși, suntem aici să practicăm un pic mai mult, așa că vom crea un aspect cu 3 coloane. scuze!
Activați regulile și începeți să creați ghiduri. Mergi la Vizualizați> Afișați rigle (^ R). Acum faceți clic pe rigla orizontală la 30px, 200px, 225px, 395px, 420px și în cele din urmă la 590px. Puteți mișca rigle prin glisarea și mutarea lor în jurul valorii. De asemenea, vă puteți muta propriile ghidaje într-un mod similar. Pentru a elimina ghidajele, glisați-le dincolo de rigle.
Antetul e-mailului nostru este foarte important. Este primul contact cu utilizatorul și, prin urmare, trebuie să comunicăm principala noastră propunere. Este, de asemenea, o decizie bună de a afișa numele companiei și un slogan bun urmat de un buton CTA care încurajează înregistrarea sau obținerea de informații suplimentare despre noi.
În primul rând ar trebui să adăugăm o Preheader, un simplu link text care permite utilizatorului accesul la versiunea web a buletinului nostru de știri în cazul în care clientul lor de e-mail nu le permite să îl vizualizeze corect.
Selectează Instrument de text (T) și faceți clic oriunde pe panza pentru a insera un strat de text. Observați cum Inspector sa schimbat pentru a vă afișa toate proprietățile stratului de text. Începeți să tastați "Probleme care văd acest e-mail? Vizualizați-l online ".
Modificați culoarea la # 8FA6B3 și stabilit mărimea la 11px. Acum, selectați numai partea "Vedeți online" și schimbați culoarea # FF736D. Țineți-l selectat. Apasă pe Opțiuni pictograma de lângă Culoare și faceți clic pe a doua Decor opțiunea de a sublinia textul.
Deplasați obiectul din partea de sus a tabloului de bord, lăsând un a 30px margine.
Creeaza o 620x500px dreptunghi folosind Dreptunghi (R) și plasați-o chiar sub linia de text, plecând 30px între ele. Selectați dreptunghiul și schimbați culoarea lui # F5F7F8 folosind Inspector panou. Debifați frontiere opțiunea de al elimina.
Deschideți fișierul "pictograme" svg atașat la acest tutorial. Selectați toate pictogramele, copiați-le și lipiți-le în documentul pe care îl construim șablonul nostru. Le vom folosi pentru a decora fundalul antetului nostru.
Am pus grupul de icoane la X = -50 și Y = 0 (cauta Poziţie proprietăți pe panoul Inspector), dar nu ezitați să vă adaptați singuri.
Bacsis: Veți vedea că anumite părți ale icoanelor noastre sunt în afara tabloului de bord și Sketch le ascunde automat. Nimic nu este greșit. Programul înțelege că utilizați o placă de desen pentru a vă limita zona de proiectare, astfel încât să ascundă părțile elementelor poziționate între zona de tablouri de artă și restul pânzei. Încercați să mutați întreaga grupă în afara tabloului de bord pentru a o vedea complet. Vezi? Nu uitați să mutați-o înapoi în poziția inițială!
În lista de straturi selectați dosarul "pictograme" și dreptunghiul creat anterior. Grupează-le folosind una dintre opțiunile disponibile în Sketch. De exemplu, utilizați grup pictograma în Bara de instrumente sau utilizați (⌘-G) tastatură rapidă pentru a face acest lucru. Deplasați grupul în jos pe partea de jos Listă de straturi, redenumiți-l la ceva de genul "Fundal" și utilizați săgeata mică din stânga pentru a dezvălui conținutul său.
Selectați dreptunghiul și mergeți la Strat> Utilizați ca mască.Așteptați magia. Schița va folosi dreptunghiul pentru a masca fiecare strat de deasupra lui pe Listă de straturi. Dacă am grupat anterior conținutul pe care vrem să îl mascăm și masca împreună, nu vom afecta elementele din afara grupului. Sfat destul de util!
Acum ar trebui să aveți pictogramele deja mascate cum ar fi următoarea imagine:
Deschideți fișierul "logo" svg și copiați logotipul în documentul nostru. Știu că e prea mare, așa că du-te la Inspector Panel să-i schimbe dimensiunile 90 x 31 pixeli. Mutați-o X = 265, Y = 100.
Creați un nou strat de text și setați lățimea acestuia la 560px. Mutați-o X = 30 și Y = 220. Acum editați textul și schimbați-l la "locul dvs. pentru a descoperi abilitățile lumii reale". Setați proprietățile acestuia Greutate = Bold, Culoare = # 424242, Dimensiune = 48, Linia = 45 și Aliniere = Centru. Selectați numai cuvântul "real" și schimbați-l cursiv.
Acum vom proiecta butonul principal de acțiune. Desenează un 220x45px dreptunghi. Mergeți la panoul Inspector și setați Rază la 30. Schimbare Completati la # D92B2B. Mutați-l sub textul sloganului, lăsând în jur 50px între cele două obiecte.
Butonul nostru nu are sens dacă l-am lăsat gol! Avem nevoie de apel la acțiune text, câteva cuvinte care se concentrează pe propunerea principală și apucă atenția utilizatorului. Mi-ar plăcea să vorbesc mai mult despre acest tip de marketing, dar pentru a accelera puțin, vom crea pur și simplu un strat de text, apoi scrieți "Alăturați-vă nouă de la 10 $ / lună".
Schimbați proprietățile la Greutate = Bold, Culoare = #FFFFFF și Dimensiune = 15. Mutați-o X = 225, Y = 375, chiar în interiorul dreptunghiului nostru rotunjit.
Vom folosi din nou acest buton mai târziu, deci este o idee bună să îl salvați ca pe un simbol. Grupați straturile de text și dreptunghi și faceți clic pe Creați simbolul opțiune din bara principală de instrumente. Observați cum se folosește culoarea dosarului pe Listă de straturi sa schimbat de la albastru la purpuriu.
Cred că avem nevoie de un contrast mai mic între conținutul din prim-plan și imaginea de fundal, deci să facem o mică schimbare. Mergeți la Listă de straturi, extindeți folderul Background și duplicați dreptunghiul pe care îl utilizați pentru a masca pictogramele de fundal. Mutați-o în partea de sus a grupului, mergeți la Inspector panou și schimbare Îmbinând la Uşura și Opacitate la 50%. În final, ar trebui să obțineți ceva de genul:
Antetul nostru sa terminat!
Acum, că avem atenția utilizatorului, trebuie să vorbim puțin despre noi și serviciile noastre. Cine suntem noi? Ce facem? Trebuie să răspundem la aceste întrebări într-un mod direct și concis, încercând să arătăm câteva avantaje suplimentare legate de utilizarea platformei noastre.
Creați două noi straturi de text. Setați-le lăţime la 480 x. Puteți introduce orice doriți, dar am folosit textul pe care îl veți găsi în fișierul text atașat.
Terminat? Acum folosiți următoarele poziții și proprietăți:
Desenează un 100px (Inserați> Formă> Linie) și setat Grosime la 2px și culoarea frontală la #E24A4A. Plasați-l între cele două straturi de text, lăsând o distanță de 25px între fiecare element. Rețineți: dacă apăsați pe Alt în timp ce mutați cursorul, puteți vedea distanțele în pixeli între elementele selectate.
Vom repeta structura anterioară de câteva ori în acest tutorial. Dar pentru moment, selectați linia și straturile de text și grupați-le. Amintiți-vă să fiți organizați și să-i dați un nume. Am folosit "primul bloc".
Selectați stratul de text "Căutați online ...", mergeți la Inspector Panel și creați un nou stil de text făcând clic pe "No Text Styles", apoi Creați stilul textului nou. Faceți același lucru cu cel de-al doilea strat de text. Acum, fiecare strat legat de aceste stiluri va fi actualizat simultan atunci când le editați proprietățile.
Notă: luați în considerare faptul că Sketch nu poate salva stilurile de text cu mai multe greutăți de fonturi aplicate în același strat. Spunând asta, nu voi folosi stiluri pentru acest tutorial. Dacă doriți să aflați mai multe despre stiluri, consultați ghidul de la Sketch de la A la Z.
Deschideți fișierul "evidențiază-pictograme" svg. Copiați cele trei pictograme pe care le veți găsi în document și le lipiți în design. Utilizați ghidajele pe care le aveți deja pentru a le alinia ca și cum ați utiliza o dispunere de 3 coloane, chiar sub blocul anterior. Nu-i puneți prea aproape de acel bloc, lăsați spațiile goale din jur 40px. Dacă aveți nevoie de ajutor, verificați următoarea imagine:
Creați trei 170px folosind straturi de text Helvetica Neue Bold, Dimensiune = 15, Linia = 18, Culoare = # 424242 și Aliniere = Centru. Pune aceste elemente în jurul valorii 30px sub pictogramele care utilizează ghidajele și începeți să tastați sau copiați textul din fișierul atașat!
Un alt bloc a terminat!
O caracteristică comună în buletinele de știri este trimiterea ultimelor articole sau conținut pe care le-ar interesa cititorii. Deci după CTA primar și partea în care vorbim puțin despre noi înșine, să creăm un bloc în care să prezentăm cele mai recente lecții disponibile pe platforma noastră de învățare.
Începeți prin duplicarea "primului bloc" pe care l-ați făcut deja. Puneți-l sub blocurile anterioare, 40px marja și utilizați conținutul din interiorul lui .txt fișier pentru modificarea straturilor de text. Ar trebui să fie așa:
Accesați folderul "lecții" din fișierele sursă și importați toate imaginile în document Inserați> Imagine. Acum aveți șapte imagini, lățime 620 pixeli. Vom folosi unul dintre ele la dimensiune completă și vom redimensiona restul pentru a se încadra în structura noastră cu 3 coloane.
Să adăugăm un text pentru imaginea noastră mare. Introduceți trei straturi de text, utilizați încă o dată fișierul text și setați proprietățile și pozițiile după cum urmează:
Avem nevoie de câteva straturi de text pentru celelalte lecții pe care le afișăm. Sa o facem din nou; introduceți trei straturi de text, introduceți orice doriți sau copiați textele din fișierul furnizat. Setați proprietățile și pozițiile utilizând imaginea următoare ca referință și repetați procesul de cinci ori pentru a termina restul lecțiilor pe care le afișați.
Un alt bloc a terminat. Ia-ți un moment pentru a-ți organiza straturile, apoi treci la următoarea parte!
Știu că șablonul nostru de e-mail este ... lung. Dar nu este o problemă dacă știm cum să ne descurcăm! Utilizatorii vor trebui să se deplaseze complet prin conținutul dvs., deci este o idee bună să oferiți un acces facil unui alt apel la acțiune fără a trebui să derulați complet în partea de sus a e-mailului.
Îți amintești "primul bloc" pe care l-ai duplicat înainte? Faceți-l din nou, mutați-l sub "blocul de lecții", lăsând o margine de jur împrejur 40px și modificați conținutul acestuia după cum urmează:
Introduceți a 620x243px dreptunghi și completați-l cu # F5F7F8. Acum adăugați un strat de text și modificați conținutul și proprietățile acestuia utilizând următoarea imagine ca referință:
Mergi la Introduceți> Simboluri și alegeți butonul CTA pe care l-ați creat înainte. Puneți-o sub paragraful anterior.
Aproape am terminat!
Ok, avem blocul principal și chemarea la acțiune. Apoi, am adăugat câteva mesaje secundare și un conținut mai mic. Mai târziu, am vorbit din nou despre propunerea noastră principală, repetând apelul la acțiune. Acum este momentul să proiectăm subsolul și să terminăm șablonul nostru!
Creeaza o 620x130px dreptunghi. Completați-l cu # 555E68 și pune-l sub blocul CTA. Apoi, creați un altul 620x45px dreptunghi și completați-l cu # 383E44. Ar trebui să ajungeți la ceva de genul:
Importați fișierul "logo-white" în documentul dvs. și mutați-l X = 265 și Y = 2787.
Să adăugăm textul final. Introduceți trei straturi de text și setați proprietățile și pozițiile acestora după cum urmează:
Nu este necesar, dar puteți ajusta înălțimea tabloului de bord pentru a se potrivi doar cu spațiul de care aveți nevoie. Puteți face acest lucru selectând-o pe Listă de straturi și schimbarea înălțimii sale pe Inspector panou. Am schimbat-o Înălțime = 2937 px.
Iata cum ar trebui sa arate produsul final.
Sper că ți-a plăcut acest tutorial. Dați-mi voie să știu dacă rămâneți blocat sau trebuie să cereți ceva. Aveți o idee pentru tutorialul meu următor? Lasa un comentariu! Aștept cu nerăbdare să văd cum te descurci!
Accentsconagua