Share
Hva du skal skapeI denne opplæringen skal vi lære å lage en enkel og dristig e-postvarselmal ved hjelp av Sketch.
Hvis du engasjerer deg i å sende ut nyhetsbrev fra e-post, bør de betraktes som et sentralt punkt i markedsføringsstrategiene dine. De gir oss direkte kontakt med potensielle kunder, men vi må ta hensyn til hvordan vi designer dem for å kommunisere ordentlig, ta hensyn til oppmerksomheten og (viktigst) oppfylle våre mål.
Her er informasjonen om denne designøvelsen: la oss forestille oss at vi er et selskap som tilbyr online læringsressurser. Vi ønsker å komme i kontakt med våre potensielle kunder, og avsløre fordelene ved å bruke vår plattform. I denne situasjonen kan vi starte med å skape et rent, men effektivt e-postbrev med Sketch for å oppnå våre behov.
Vi kommer til å starte helt fra bunnen av, ved å bruke de vanligste verktøyene vi har i Sketh å lage vår mal. Du vil bli overrasket over hvor lett det blir!
For å fullføre denne opplæringen må du laste ned de tilgjengelige vedleggene. I zip-filen finner du litt tekst og bildene vi skal bruke i de følgende trinnene.
Jeg skal bruke Helvetica Neue Som standard skrift, men hvis du ikke har den tilgjengelig, prøv med Helvetica eller arial.
Merk: Husk å være en ansvarlig designer! Dermed mener jeg: Husk å endre navn på lagene dine ved å bruke beskrivende navn, gruppere lagene og organisere innholdet. Dine medarbeidere vil takke for det, stol på meg.
Er du klar? La oss begynne!
La oss begynne med å lage et nytt tavla. Gå til Sett inn> Kunstplate (A) fra hovedmenyen eller verktøylinjen. Klikk nå og dra inn i Sketch's lerret for å lage en 620 x 3000px artboard. Hvis du finner det vanskelig, husk at du kan endre disse verdiene gjennom Inspektør til høyre på skjermen. Du kan også endre artboardets navn fra Lagliste på venstre side av skjermen.
Tips: En felles tilnærming når du designer e-postmaler, er å starte med en dokumentbredde på 550-650px. Lær mer om e-postmarkedsføring i denne flotte artikkelen av Nicole Merlin.
La oss nå lage noen guider som vi skal bruke som referanse til riktig plassering av våre elementer, noe som resulterer i en solid og balansert design. Hvor skal vi plassere guiderne? La oss tenke litt:
En e-postmal kan utformes på mange måter. En av de vanligste er bare å lage en 1-kolonne layout. Dette oppsettet lar oss veilede brukeren på en enklere måte, ved hjelp av en vertikal flyt av innholdsblokker, en etter en. I tillegg gir design med en enkelkolonnestruktur i tankene oss muligheten til å tilpasse den enkelt til forskjellige enheter.
I denne øvelsen er vi imidlertid her for å trene litt mer, så vi skal lage et 3-kolonne-layout. Unnskyld!
Aktiver reglene og start å lage guider. Gå til Vis> Vis linjaler (^ R). Klikk nå på den horisontale linjalen på 30px, 200px, 225px, 395px, 420 piksler og til slutt på 590px. Du kan flytte linjalene ved å dra og flytte dem rundt. Du kan også flytte dine egne guider på en lignende måte. For å fjerne guider, dra dem utover linjalene.
Overskriften til e-posten vår er veldig viktig. Det er den første kontakten vi har med brukeren, og derfor må vi kommunisere vårt hovedforslag. Det er også en god beslutning å vise navnet på selskapet og et godt slagord etterfulgt av en CTA-knapp som oppfordrer til å registrere eller få mer informasjon om oss.
For det første bør vi legge til en Preheader, en enkel tekstlenk som lar brukeren få tilgang til nettversjonen av nyhetsbrevet dersom e-postklienten ikke tillater dem å se det riktig.
Velg Tekstverktøy (T) og klikk hvor som helst på lerretet for å sette inn et tekstlag. Legg merke til hvordan Inspektør har endret seg for å vise deg alle tekstlagsegenskapene. Begynn å skrive "Problemer med å se denne e-posten? Se det på nettet ".
Endre farge til # 8FA6B3 og sett Størrelse til 11px. Velg nå bare delen "Vis den på nettet" og endre fargen til # FF736D. Hold den valgt. Klikk på alternativer ikon ved siden av Farge og klikk på det andre Dekorasjon alternativ til å understreke teksten.
Flytt objektet fra toppen av tavlen, og forlat a 30px margin.
Lage en 620x500px rektangel ved hjelp av Rektangel (R) verktøy og plasser det rett under tekstlenken, forlater 30px mellom dem. Velg rektangelet og endre fargen til # F5F7F8 bruker Inspektør panel. Fjern merket for grenser alternativet for å fjerne det.
Åpne "ikonene" svg-filen som er vedlagt denne opplæringen. Velg alle ikonene, kopier og lim dem inn i dokumentet vi designer vår mal. Vi skal bruke dem til å dekorere bakgrunnen til vår overskrift.
Jeg har satt ikongruppene på X = -50 og Y = 0 (se etter Stilling egenskaper på inspektørpanelet), men vær så snill å tilpasse seg selv.
Tips: Du ser at noen deler av ikonene våre ligger utenfor kunstglasset, og Sketch skjuler dem automatisk. Ingenting er galt. Programmet forstår at du bruker et tavla for å begrense designområdet, slik at det gjemmer delene av elementene plassert mellom tavlaområdet og resten av lerretet. Prøv å flytte hele gruppen utenfor tavlen for å se den helt. Du ser? Ikke glem å flytte den tilbake til sin opprinnelige posisjon!
På laglisten velg mappen "ikoner" og rektangelet du tidligere opprettet. Grupper dem ved å bruke ett av de tilgjengelige alternativene i Sketch. For eksempel bruk Gruppe ikonet i verktøylinje eller bruk (⌘-G) tastaturgenvei for å gjøre det. Flytt gruppen ned til bunnen på Lagliste, endre navnet på noe som "Bakgrunn" og bruk den lille pilen til venstre for å avsløre innholdet.
Velg rektangelet og gå til Lag> Bruk som maske.Vent på den magiske. Skisse vil bruke rektangelet til å maskere hvert lag over det på Lagliste. Hvis vi tidligere grupperte innholdet vi vil bli maskert og masken sammen, vil vi ikke påvirke elementene utenfor gruppen. Ganske nyttig tips!
Nå bør du ha ikonene allerede maskert som følgende bilde:
Åpne "logoen" svg filen og kopier logotypen til dokumentet vårt. Jeg vet at det er for stort, så gå til Inspektørpanel å endre dimensjonene til 90 x 31px. Flytt den til X = 265, Y = 100.
Lag et nytt tekstlag og sett bredden til 560px. Flytt den til X = 30 og Y = 220. Rediger nå teksten og endre den til "Ditt sted for å oppdage ekte verdensferdigheter". Sett egenskapene til Vekt = Fet, Farge = # 424242, Størrelse = 48, Linje = 45 og Alignment = Center. Velg bare det "ekte" ordet og endre det til kursiv.
Nå skal vi designe vår primære handlingsknapp. Tegn en 220x45px rektangel. Gå til inspektørpanelet og sett inn Radius til 30. Endring Fylle til # D92B2B. Flytt den under slagordet, forlater rundt 50 piksler mellom de to objektene.
Vår knapp gir ingen mening hvis vi lar det stå tomt! Vi trenger en oppfordring til handling tekst, noen ord som fokuserer på hovedforslaget og griper brukerens oppmerksomhet. Jeg vil gjerne snakke mer om denne typen markedsføring, men for å øke hastigheten litt skal vi bare lage et tekstlag, og skriv inn "Bli med oss fra 10 $ / måned".
Endre egenskapene til Vekt = Fet, Farge = #FFFFFF og Størrelse = 15. Flytt den til X = 225, Y = 375, rett innenfor vårt avrundede rektangel.
Vi skal bruke denne knappen igjen senere, så det er en god idé å lagre det som et symbol. Grupper tekst- og rektangellagene og klikk på Opprett symbol alternativet fra hovedverktøylinjen. Legg merke til hvordan mappen farger på Lagliste har endret seg fra blått til lilla.
Jeg tror vi trenger litt mer kontrast mellom forgrunnsinnholdet og bakgrunnsbildet, så la oss gjøre en mindre endring. Gå til Lagliste, utvid bakgrunnsmappen og duplikere rektangelet du bruker til å maskere bakgrunnsikonene. Flytt den til toppen av gruppen, gå til Inspektør panel og endring blending til lysere og opacity til 50%. På slutten bør du få noe slikt:
Vår overskrift er ferdig!
Nå som vi har brukerens oppmerksomhet, må vi snakke litt om oss selv og våre tjenester. Hvem vi er? Hva skal vi gjøre? Vi må svare på disse spørsmålene på en direkte, konsis måte, og prøver å vise noen ekstra fordeler med å bruke vår plattform.
Lag to nye tekstlag. Sett deres bredde til 480px. Du kan skrive hva du vil, men jeg har brukt teksten du finner i den vedlagte tekstfilen.
Ferdig? Bruk nå følgende stillinger og egenskaper:
Tegn en 100px bred linje (Sett inn> Form> Linje) og sett Tykkelse til 2 piksler og grensefarge til #E24A4A. Plasser den mellom de to tekstlagene, og la en avstand av 25px mellom hvert element. Husk: hvis du trykker på alt tasten mens du flytter markøren, kan du se avstandene i piksler mellom de valgte elementene.
Vi skal gjenskape den forrige strukturen et par ganger i løpet av denne opplæringen. Men for nå velger du linjen og tekstlagene og grupperer dem. Husk å bli organisert og gi den et navn. Jeg har brukt "first-block".
Velg tekstlaget "Søk etter online ...", gå til Inspektørpanel og opprett en ny tekststil ved å klikke på "No Text Styles", da Opprett ny tekststil. Gjør det samme med det andre tekstlaget. Nå vil hvert lag knyttet til disse stilene bli oppdatert samtidig når du redigerer egenskapene sine.
Merk: ta i betraktning at Sketch ikke kan lagre tekststiler med flere skrifttyper som er brukt i samme lag. Sier det, jeg vil ikke bruke stiler for denne opplæringen. Hvis du vil lære litt mer om stiler, sjekk ut vår A til Z guide for skisse.
Åpne "highlights-ikonene" svg-filen. Kopier de tre ikonene du finner i dokumentet og lim dem inn i designet. Bruk veiledningene du allerede har til å justere dem som om du brukte en 3-kolonne layout, like under forrige blokk. Ikke legg dem for nær den blokken, la hvite rom rundt 40px. Hvis du trenger hjelp, bare sjekk ut følgende bilde:
Lag tre 170 piksler brede tekstlag ved hjelp av Helvetica Neue Bold, Størrelse = 15, Linje = 18, Farge = # 424242 og Alignment = Center. Sett disse elementene rundt 30px Under ikonene bruker du guider og begynner å skrive eller kopiere teksten fra den vedlagte filen!
En annen blokk ble ferdig!
En felles funksjon i nyhetsbrev er å sende ut de siste artiklene eller innholdet som leserne ville være interessert i. Så etter vår primære CTA og den delen der vi snakker litt om oss selv, la oss lage en blokk der vi viser de siste leksjonene som er tilgjengelige på vår læringsplattform.
Begynn med å duplisere "first-block" du allerede gjorde. Sett den under de forrige blokkene, 40px margin, og bruk innholdet inne i .tekst fil for å endre tekstlagene. Det burde være noe sånt:
Gå til mappen "leksjoner" i kildefilene og importer alle bildene til dokumentet ditt gjennom Sett inn> Bilde. Nå har du syv bilder, 620px bred. Vi skal bruke en av dem i full størrelse og endre størrelsen på resten for å passe inn i vår 3-kolonne layout.
La oss legge til litt tekst for vårt store bilde. Sett inn tre tekstlag, bruk tekstfilen en gang til, og sett egenskapene og posisjonene som følger:
Vi trenger noen flere tekstlag for de andre leksjonene vi viser. La oss gjøre det igjen; sett inn tre tekstlag, skriv hva du vil, eller kopier tekster fra den oppgitte filen. Angi sine egenskaper og stillinger ved å bruke følgende bilde som referanse og gjenta prosessen fem ganger for å fullføre resten av leksjonene du viser.
En annen blokk ble ferdig. Ta et øyeblikk å organisere lagene dine, og gå videre til neste del!
Jeg vet at vår e-postmal er ... lang. Men det er ikke et problem hvis vi vet hvordan vi skal håndtere det! Brukere må rulle helt ned gjennom innholdet ditt, så det er en god ide å tilby enkel tilgang til en annen handling uten å måtte bla helt tilbake til toppen av e-posten.
Husker du den "første-blokken" du dupliserte før? Gjør det igjen, flytt det under "leksjoner blokk", og la en margin rundt 40px og endre innholdet som følger:
Sett inn a 620x243px rektangel og fyll det med # F5F7F8. Legg nå et tekstlag og endre innhold og egenskaper ved å bruke følgende bilde som referanse:
Gå til Sett inn> Symboler og velg CTA-knappen du opprettet før. Sett det under forrige avsnitt.
Vi er nesten ferdig!
Ok, vi har vår hovedblokk og et kall til handling. Deretter har vi lagt til noen sekundære meldinger og litt mer innhold. Senere snakket vi igjen om vårt hovedforslag, og gjentok handlingen. Nå er det på tide å designe bunnteksten og fullføre vår mal!
Lage en 620x130px rektangel. Fyll det med # 555E68 og legg den under CTA-blokken. Deretter oppretter du en annen 620x45px rektangel og fyll det med # 383E44. Du bør ende opp med noe slikt:
Importer "logo-hvit" -filen inn i dokumentet ditt og flytt det til X = 265 og Y = 2787.
La oss legge til den endelige teksten. Sett inn tre tekstlag og sett deres egenskaper og stillinger som følger:
Det er ikke nødvendig, men du kan justere tavlenes høyde for å matche bare det rommet du virkelig trenger. Du kan gjøre det ved å velge det på Lagliste og endre sin høyde på Inspektør panel. Jeg har forandret den til Høyde = 2937px.
Slik ser sluttproduktet ut.
Jeg håper du likte denne opplæringen. Gi meg beskjed hvis du sitter fast, eller du må spørre om noe. Har du en ide for min neste opplæring? Legg igjen en kommentar! Jeg gleder meg til å se hvordan du går videre!
Accentsconagua