Share
Vi har nyligen omformat alla mail som vi skickar ut på Envato Tuts +; nyhetsbrev, de olika smältningarna, marknadsföringskampanjens e-postmeddelanden och admin-e-postmeddelanden. I denna korta fallstudieserie ska vi förklara hur vi gjorde det!
Fram till omkonstruktionen hade vi en ganska ojämn samling av e-postmeddelanden utan något centralt team som letade efter dem. Det blev klart att vi kunde förenkla saker och göra saker mer ekonomiska, så vi bestämde oss för att flytta våra ansträngningar till ett centralt konto i kampanjmonitorn. En central uppsättning teman skulle användas över hela linjen och vi skulle se till att de var designade och byggda på ett sätt som representerade det vi står för vid Envato Tuts+.
Den första etappen av operationen var att samla alla olika e-postmeddelanden som vi för närvarande skickade ut till massorna. Detta innebar att vi fick genom våra befintliga MailChimp-nyhetsbrev och demontera vad vi hade i Exact Target.
När vi visste vad vi tittade på kunde vi välja ut vanliga element och kategorisera allt klart för designfasen.
Vi kokade allt ner till:
Vilka var våra prioriteringar för denna omkonstruktion? I kulaform behövde vi:
Och vi efterlyst:
Tiden att få lite visuella ner! Jag använde Sketch för denna designprocess på grund av dess lämplighet för UI-design. Det första steget var att sätta en tavla tillsammans och arbeta ut några nätdimensioner.
Jag använde Sketchs layoutalternativ (Visa> Lerret> Layoutinställningar ... ) för att ange ett rutnät på 640px, med 8 kolumner. Min ritytan var mycket bredare än det, för att ge mig andningsrum. Genom att klicka på Centrum Förskjutningen beräknas automatiskt, i det här fallet till 280px. Nätet placerades därför 280px inuti kanten av tavlan.
En kolumnbredd på 62px bundet ihop med rännor på 20px, vilket ger mig en sund horisontell utgångspunkt.
Jag ville också ha rader, så kollade rader låda. Min typ skulle fungera från en bas av 16px, så jag använde det som ett rudimentärt vertikalt rutnät.
Artboard med namnet "Digest"Marknadschefen på HQ hade bett om att vi skulle göra bestämmelser för någon form av hjältesektion; något som skulle tillåta dem att använda slående grafik om de någonsin behövde det.
Jag ville inte ha det som standard för alla typer av e-post, men det gav mig en bra utgångspunkt. Med hjälp av block ställde jag in en grundläggande layout.
Med en hjälte, ett huvudinnehåll och en svartvit duk, blev scenen inställd. Jag bestämde mig för att spela med lager och göra innehållsområdet överlappar hjälten något. Jag var medveten om att det skulle få Nicole (som skulle bygga hela saken) några huvudvärk, men jag visste att hon skulle räkna ut det - hon är en trollkarl trots allt.
Varianter av detta arrangemang kan komma i form av:
En fördel med en enkel layout är att responsiviteten i sig är enklare att uppnå. Squished till en smalare viewport, vi skulle kollapsera den dubbla kolumnen vid behov och stötta innehållsområdet upp mot viewportkanten, vilket ger oss en serie sektioner och ingen överlappning.
I Sketch, där två olika kolumnarrangemang behövs, behöver vi en andra sida. Några rutnätlayouter som vi definierar tillämpas på alla skyltar på samma sida, och vi behöver ett mycket enklare rutnät för vår snygga mobilvy.
Det vi behöver här är så enkelt att vi verkligen bara behöver en enda centralkolonn med en rännan (vi håller oss till 20px vardera sidan). Skiss kan inte skapa ett rutnät med bara en kolumn, så vi måste använda två.
Vi använder Roboto dessa dagar över mycket av Envato, så det beslutet fattades för mig. Färger är i stort sett dikterade av Envatos stilar, så jag hade en palett att välja mellan. Jag var tvungen att bestämma vilken som skulle användas för kroppen, rubrikerna, länkarna, vilken text som helst med mindre tonvikt och "anrop till handling".
Mina prioriteringar var det:
Länkar och CTA i samma blåaNär det gäller Sketch gör det lättare här, är textstilar bara ett klick bort. Stil en bit text som du vill ha det, spara det som en textstil, hänvisa dig till det om du någonsin behöver den stilen igen.
Envato Tuts + är en vacker visuell plattform; vi använder miniatyrbilder överallt. Någon återkoppling från laget föreslog att samma kortarrangemang som vi använder på vår hemsida skulle vara det bästa sättet att presentera handledningar i en smält e-post. Läsarna skulle ansluta, förstå vad de har att göra med, och i alla fall är det ett tydligt sätt att presentera informationen.
Kurser är något annorlunda; Jag ville ge dessa extra vikt. Varje ämnesektion skulle först visa en tillgänglig kurs, full bredd, med lite mer detalj än tutorials, plus en uppspelningsknapp som är grafisk överlagrad på miniatyren. Detta skulle lyfta fram skillnaden mellan kurser och handledning medan stimulerande läsare klickar (spelknappar är bra för det).
Att ha spelningsknappen dynamiskt placerad överst skulle vara besvärlig, så vi avgick för att manuellt placera knappen grafiskt på miniatyrerna själva (med exempelvis Photoshop). En bit extra arbete (ledsen Cameron) men värt ansträngningen jag tror.
Vi ville också ha ett sätt att presentera annonsblock; inte nödvändigtvis annonser från tredje part, men något för att ge oss möjlighet att ropa om nya och spännande saker. Jag lade till en valfri banner överst i layouten - mycket lik vad du kan se på webbplatsen ibland.
Jag bestämde mig sedan för att dela upp allt innehåll i block, så att vi kunde ordna dem i vilken ordning som helst vi väljer och gör också en tydlig åtskillnad mellan sektioner.
Här ser du hur ett annonsblock ser ut, med två delar i varje sida.
Obs! Det här är en riktig annons, ta reda på mer härFooter är ett universellt element i alla dessa e-postmeddelanden. Jag ville inte ha massor av information begravd där, men vad vi gjorde välj att placera där jag ville klara (jag förstår inte varför vissa företag gör deras sidfot knappt synliga, med "unsubscribe" länkar gömda).
Så, med några sociala länkar, ett textområde för att förklara varför någon kan få e-postmeddelandet, unsubscribe länkarna och Envato HQ-adressen, var vi alla med.
Vi har nu grunden för alla de element vi behöver, vilket ger oss byggstenar för vart och ett av våra e-posttyper.
Nyhetsbrev är osannolikt att någonsin behöva en grafisk hjälte av något slag, så jag använde en enkel men fet rubrik för att starta förfarandet där. De typografiska stilar som vi redan hade ställt skulle tillgodose det mesta av det möjliga innehållet.
En skillnad mellan nyhetsbrev och smältningar gjordes genom att ge nyhetsbrev en öppen hjälte, vilket gör det helt och hållet mer ... broadsheet.
Det enklaste av alla våra e-postmeddelanden (förutom vanliga textversioner) är admin-meddelandena. I deras fall behövs absolut ingen extra styling; Hämta bara punkten snabbt, enkelt och enkelt. En genomskinlig hjälte och brist på stora rubriker ställer in adminstraten ganska snyggt här. Allt annat är detsamma inklusive, eventuellt en CTA-knapp. Här visas skrivbordet och mobilen:
Med koncepten och mönstren avgjorda var det dags att skicka resultaten till Nicole. Hon skulle ta dessa idéer och göra statiska HTML-filer från dem. Jag behövde se till att hon förstod de beslut som hade fattats och hade alla tillgångar som krävdes för att bygga upp e-postmeddelandena.
InVision möjliggör mycket snabb annotering på grafiska dokument - och du kan ladda upp Sketch-filer direkt. En samling visuella med kommentarer och pekare var ett bra sätt att kommunicera alla idéer.
När det gäller tillgångsleverans gör Sketch det mycket enkelt att exportera alla nödvändiga bitar. Inte bara kunde jag förbereda alla tillgångar (som logotyper, sociala knappar etc.) men jag kunde också leverera dem i olika storlekar och täckte oss för skärmar med varierande pixeldensiteter. Läs mer om hur Sketch kan exportera dina tillgångar:
Med alla filer, plus några fler instruktioner i Dropbox, hade Nicole allt hon behövde för att arbeta med hennes magi.
I nästa del av denna fallstudie ska jag ge dig över till Nicole för byggnaden. Hon kommer att förklara hur hon byggde den lyhörda grunden för dessa e-postmeddelanden och överträffade de vanliga frågorna som utvecklar e-post.
Ta gärna demo Sketch-filen från repo på GitHub och se själv de färdiga e-postmeddelandena: prenumerera nedan!
Accentsconagua