Share
Vi har nylig omformet alle e-postene vi sender ut på Envato Tuts +; nyhetsbrevene, de forskjellige fordøyelsene, markedsføringskampanjen e-post, og admin e-postmeldinger. I denne korte casestudie serien vil vi forklare hvordan vi gjorde det!
Opptil redesignet hadde vi en ganske uensartet samling av e-postmeldinger uten sentralt team ivaretatt dem. Det ble klart at vi kunne forenkle ting og gjøre ting mer økonomisk, så vi bestemte oss for å flytte innsatsen vår til en sentral konto i Kampanje Monitor. Et sentralt sett med temaer ville bli brukt over hele linja, og vi ville sørge for at de ble designet og bygget på en måte som representerte det vi står for på Envato Tuts+.
Den første fasen av operasjonen var å samle alle de forskjellige e-postene vi nå sendte ut til massene. Dette betydde å pore gjennom våre eksisterende MailChimp nyhetsbrev og demontere det vi hadde i Exact Target.
Når vi visste hva vi så på, kunne vi plukke ut vanlige elementer og kategorisere alt klart for designstadiet.
Vi kokte alt ned til:
Hva var våre prioriteringer for dette redesignet? I kuleformet trengte vi:
Og vi ønsket:
Tid til å få litt visuals ned! Jeg brukte Sketch for denne designprosessen, på grunn av dens egnethet for UI-design. Den første fasen var å sette sammen en tavle sammen og utarbeide noen gridmål.
Jeg brukte Sketchs layoutalternativer (Vis> Lerret> Oppsettinnstillinger ... ) for å sette ut et rutenett på 640px, med 8 kolonner. Min artboard var mye bredere enn det, for å gi meg puste rom. Ved å klikke på Senter Forskjellen beregnes automatisk, i dette tilfellet til 280px. Gitteret ble derfor plassert 280 px inn fra kanten av tavlen.
En kolonnebredde på 62px bundet godt sammen med takrør på 20px, noe som gir meg et godt horisontalt utgangspunkt.
Jeg ønsket også rader, så sjekket rader eske. Min type ville fungere fra en base på 16px, så jeg brukte det som et rudimentært vertikalt rutenett.
Artboard kalt "Digest"Markedsføringsteamet på HQ hadde bedt om at vi skulle gjøre bestemmelser for en slags helt-seksjon; noe som vil gi dem mulighet til å bruke slående grafikk hvis de måtte.
Jeg ville ikke at det skulle være standard på alle typer e-post, men det ga meg et godt utgangspunkt. Ved hjelp av blokker angir jeg om å lage en grunnleggende layout.
Med en helt, et hovedinnholdsområde og et off-white lerret ble scenen satt. Jeg bestemte meg for å leke med lag, og la innholdsområdet overlappe helten litt. Jeg var klar over at dette kunne få Nicole (som ville bygge hele greia) noen hodepine, men jeg visste at hun ville finne ut det - hun er en trollmann etter alle.
Varianter av dette arrangementet kan komme i form av:
En fordel med et enkelt oppsett er at responsen er iboende enklere å oppnå. Klemt til en smalere visningsport ville vi kollapse den dobbelte kolonnen når det er nødvendig, og støt innholdsområdet opp mot visningsportkanten, noe som gir oss en serie av seksjoner og ingen overlapping.
I Skisse, hvor to forskjellige kolonneordninger er nødvendig, trenger vi en annen side. En hvilken som helst gridoppsett vi definerer, blir brukt på alle kunstbrett på samme side, og vi trenger et mye enklere rutenett for vår opprykkede mobilvisning.
Det vi trenger her er så enkelt, faktisk at vi egentlig bare trenger en enkelt sentralkolonne, med en renner (vi holder oss til 20px hver side). Skisse kan ikke lage et rutenett med bare en kolonne, så vi må bruke to.
Vi bruker Roboto i disse dager over mye av Envato, så det ble gjort en beslutning for meg. Farger er i stor grad diktert av Envato stiler også, så jeg hadde en palett å velge mellom. Jeg måtte avgjøre hva som ville bli brukt til kroppen, overskriftene, koblingene, hvilken som helst tekst med mindre vekt og "kall til handling".
Mine prioriteringer var det:
Lenker og CTAer i samme blåNår det gjelder Sketch gjør ting enklere her, er tekststilene bare ett klikk unna. Stil et stykke tekst som du vil ha det, lagre dette som en tekststil, så referer tilbake til det hvis du noensinne trenger den stilen igjen.
Envato Tuts + er en pen visuell plattform; Vi bruker miniatyrer over alt. Noen tilbakemeldinger fra teamet foreslo at det samme kortarrangementet vi bruker på vår hjemmeside, ville være den beste måten å presentere opplæringsprogrammer i en fordøyelsespost. Leserne ville gjøre forbindelsen, forstå hva de har å gjøre med, og i alle fall er det en klar måte å presentere informasjonen på.
Kursene er litt forskjellige; Jeg ønsket å gi de ekstra vekt. Hvert emneseksjon vil først vise et tilgjengelig kurs, full bredde, med litt mer detalj enn opplæringsprogrammer, pluss en spilleknapp som er grafisk plassert på miniatyrbildet. Dette vil markere skillet mellom kurs og opplæring mens stimulerende lesere klikker (spillknapper er bra for det).
Å ha spilleknappen dynamisk plassert over toppen ville være vanskelig, så vi dro til manuelt å plassere knappen grafisk på miniatyrbildene selv (med Photoshop, for eksempel). Litt ekstra arbeid (beklager Cameron), men verdt innsatsen jeg tror.
Vi ønsket også en måte å presentere annonseblokker på. Ikke nødvendigvis annonser fra tredjeparter, men noe for å gi oss muligheten til å rope om nye og spennende ting. Jeg la til et valgfritt banner øverst i oppsettet - veldig likt det du vil se på nettstedet noen ganger.
Jeg bestemte meg for å dele alt innhold opp i blokker, slik at vi kunne ordne dem i hvilken som helst rekkefølge vi valgte, og også gjøre et klart skille mellom seksjoner.
Slik ser en annonseblokk ut, med to fordøyelsesseksjoner på hver side.
Merk: Dette er en ekte annonse, finn ut mer herFoten er et universelt element på tvers av alle disse e-postene. Jeg ville ikke ha tonnevis av informasjon begravet der, men hva vi gjorde velg å plassere det der jeg ville ha klart (jeg forstår ikke hvorfor noen selskaper gjør at de ikke er synlige, med "unsubscribe" linker gjemt bort).
Så, med noen sosiale linker, et tekstområde for å forklare hvorfor noen kanskje mottar e-posten, abonnementslinkene og Envato HQ-adressen, var vi alle sammen.
Vi har nå grunnlaget for alle elementene vi trenger, og gir oss byggesteinene for hver av våre e-posttyper.
Nyhetsbrev er ikke sannsynlig å trenge en grafisk helt av noe slag, så jeg brukte en enkel men fet skrift for å starte saken der. De typografiske stilene vi allerede hadde satt, ville imøtekomme mest mulig innhold.
Et skille mellom nyhetsbrev og fordøyelser ble gjort ved å gi nyhetsbrev en gjennomsiktig helt, noe som gjør det til en hel del mer ... broadsheet.
Den enkleste av alle våre e-postmeldinger (foruten vanlige tekstversjoner) er admin-meldingene. I deres tilfelle absolutt ingen ekstra styling er nødvendig; bare få poenget over, raskt og enkelt. En gjennomsiktig helten og mangel på stor overskrift setter adminstonen ganske bra her. Alt annet forblir det samme, inkludert muligens en CTA-knapp. Her er desktop og mobile visninger:
Med konseptene og designene avgjort, var det på tide å sende resultatene til Nicole. Hun ville ta disse ideene og lage statiske HTML-filer fra dem. Jeg trengte å forsikre meg om at hun forstod de avgjørelsene som var tatt, og hadde alle eiendelene som trengs for å bygge e-postene.
InVision muliggjør veldig rask kommentar på grafikkdokumenter, og du kan laste opp Sketch-filer direkte. En samling av visualer med kommentarer og pekere var en god måte å kommunisere alle ideene på.
Når det gjelder levering av varer, gjør Sketch eksporten av alle nødvendige biter og deler veldig enkelt. Ikke bare kunne jeg forberede alle eiendelene (som logoer, sosiale knapper osv.), Men jeg kunne også levere dem i forskjellige størrelser og dekker oss for skjermer med varierende pikseldensiteter. Lær mer om hvordan Sketch kan eksportere dine eiendeler:
Med alle filene, pluss noen flere instruksjoner i Dropbox, hadde Nicole alt hun trengte for å jobbe med hennes magi.
I neste del av denne casestudien overfører jeg deg til Nicole for bygningen. Hun vil forklare hvordan hun bygde det responsive fundamentet for disse e-postene, og overvinne de vanlige problemene som e-utviklingen kaster opp.
Ta gjerne tak i demo Sketch-filen fra repo på GitHub, og se de ferdige e-postene selv: abonner under!
Accentsconagua