Share
We hebben recentelijk alle e-mails opnieuw bijgewerkt die we bij Envato Tuts + sturen; de nieuwsbrieven, de verschillende samenvattingen, de e-mails van de marketingcampagne en de e-mails van de beheerder. In deze korte casestudyreeks zullen we uitleggen hoe we het hebben gedaan!
Tot het herontwerp hadden we een tamelijk onsamenhangende verzameling e-mails zonder dat een centraal team voor hen zorgde. Het werd duidelijk dat we dingen eenvoudiger konden maken en dingen zuiniger konden maken, dus besloten we om onze inspanningen over te brengen naar een centraal account in Campagnemonitor. Een centrale reeks thema's zou over de hele linie worden gebruikt en we zouden ervoor zorgen dat ze werden ontworpen en gebouwd op een manier die vertegenwoordigde waar we voor staan bij Envato Tuts+.
De eerste fase van de operatie was om alle verschillende e-mails die we op dit moment naar de massa zonden te verzamelen. Dit betekende poring door onze bestaande MailChimp-nieuwsbrieven en het ontmantelen van wat we hadden in Exact Target.
Op het moment dat we wisten waar we naar keken, konden we gemeenschappelijke elementen uitkiezen en alles categoriseren voor de ontwerpfase.
We hebben alles gekookt tot:
Wat waren onze prioriteiten voor dit herontwerp? In bullet-vorm hadden we nodig:
En wij gezocht:
Tijd om wat visuals neer te zetten! Ik heb Sketch voor dit ontwerpproces gebruikt vanwege zijn geschiktheid voor UI-ontwerp. De eerste fase was om een tekengebied samen te stellen en een aantal rastermaten uit te werken.
Ik heb de lay-outopties van Sketch gebruikt (Weergave> Canvas> Layoutinstellingen ... ) om een grid op te stellen van 640px, met 8 kolommen. Mijn artboard was veel breder dan dat, om me ademruimte te geven. Door op te klikken Centrum de offset wordt automatisch berekend, in dit geval tot 280px. Het raster was daarom 280 px vanaf de rand van het tekengebied gepositioneerd.
Een kolombreedte van 62px werd goed gekoppeld met goten van 20px, waardoor ik een goed horizontaal beginpunt had.
Ik wilde ook rijen, dus checkte de rijen doos. Mijn type zou werken vanaf een basis van 16px, dus ik gebruikte dat als een rudimentair verticaal raster.
Artboard met de naam "Digest"Het marketingteam op het hoofdkwartier vroeg ons om voorzieningen te treffen voor een soort heldenafdeling; iets dat hen in staat zou stellen om opvallende afbeeldingen te gebruiken, mocht dit ooit nodig zijn.
Ik wilde niet dat dit standaard zou zijn in alle soorten e-mail, maar het gaf me een goed startpunt. Met behulp van blokken begon ik aan het maken van een basislay-out.
Met een held, een hoofdinhoudsgebied en een off-white canvas, was de fase ingesteld. Ik besloot om met lagen te spelen en ervoor te zorgen dat het inhoudsgebied de held enigszins overlapt. Ik was me ervan bewust dat dit ertoe kon leiden dat Nicole (die het hele ding zou opbouwen) een paar hoofdpijnen had, maar ik wist dat ze het zou uitzoeken - ze is toch een tovenaar.
Varianten van deze regeling kunnen de vorm hebben van:
Een voordeel van een eenvoudige lay-out is dat responsiviteit inherent eenvoudiger te bereiken is. Squished naar een smaller venster, we vouwen de dubbele kolom indien nodig samen en buigen het inhoudsgebied tegen de viewportrand, waardoor we een reeks secties krijgen en niet overlappen.
In Sketch, waar twee verschillende kolomarrangementen nodig zijn, hebben we een tweede pagina nodig. Elke rasterlay-out die we definiëren, wordt toegepast op alle tekengebieden op dezelfde pagina en we hebben een veel eenvoudiger raster nodig voor onze geplette mobiele weergave.
Wat we hier nodig hebben, is zo simpel dat we eigenlijk maar één centrale kolom nodig hebben, met een rugmarge (we houden ons aan 20px aan elke kant). Schets kan echter geen raster van slechts één kolom maken, dus we zullen er twee moeten gebruiken.
We gebruiken tegenwoordig Roboto in een groot deel van Envato, dus die beslissing is voor mij genomen. Kleuren worden grotendeels bepaald door de stijlen van Envato, dus ik had een palet om uit te kiezen. Ik moest beslissen welke zou worden gebruikt voor het lichaam, de koppen, de links, elke tekst met minder nadruk, en de "calls to action".
Mijn prioriteiten waren dat:
Links en CTA's in hetzelfde blauwQua Sketch maakt het hier eenvoudiger, tekststijlen zijn slechts één klik verwijderd. Personaliseer een stuk tekst zoals jij het wilt, sla dit op als een tekststijl en raadpleeg het opnieuw als je die stijl ooit nog nodig hebt.
Envato Tuts + is een vrij visueel platform; we gebruiken overal thumbnails. Sommige feedback van het team suggereerde dat hetzelfde kaartarrangement dat we gebruiken op onze startpagina de beste manier zou zijn om tutorials in een samenvattende e-mail te presenteren. Lezers zouden de verbinding maken, begrijpen waar ze mee te maken hebben en het is in elk geval een duidelijke manier om de informatie te presenteren.
Cursussen zijn iets anders; Ik wilde die extra nadruk geven. Elke onderwerpsectie zou eerst een beschikbare cursus, volledige breedte, met een beetje meer detail dan tutorials, plus een grafische weergaveknop bovenop de miniatuur laten zien. Dit zou het onderscheid benadrukken tussen cursussen en tutorials terwijl het de lezers stimuleert om te klikken (afspeelknoppen zijn daar goed voor).
Het dynamisch hebben van de afspeelknop over de bovenkant zou lastig zijn, dus hebben we besloten de knopafbeelding handmatig op de miniaturen zelf te plaatsen (bijvoorbeeld met Photoshop). Een beetje extra werk (sorry Cameron) maar de moeite waard denk ik.
We wilden ook een manier om advertentieblokken te presenteren; niet per se advertenties van derden, maar iets om ons de kans te geven om te schreeuwen over nieuwe en opwindende dingen. Ik heb een optionele banner aan de bovenkant van de lay-out toegevoegd, vergelijkbaar met wat je zo nu en dan op de website ziet.
Ik heb toen besloten om alle inhoud in blokken te splitsen, zodat we ze in elke gewenste volgorde kunnen ordenen en ook een duidelijk onderscheid maken tussen secties.
Dit is hoe een advertentieblok eruit ziet, met aan beide zijden twee digestiesecties.
Opmerking: dit is een echte advertentie, lees hier meerDe voettekst is een universeel element in al deze e-mails. Ik wilde niet dat daar heel veel informatie begraven lag, maar wat wij deed kies ervoor om daar te plaatsen ik wilde duidelijk (ik begrijp niet waarom sommige bedrijven hun voettekst nauwelijks zichtbaar maken, met "unsubscribe" links weggestopt).
Dus, met wat sociale links, een tekstgedeelte om uit te leggen waarom iemand de e-mail zou ontvangen, afmeldlinks en het Envato HQ-adres, we waren er helemaal klaar voor.
We hebben nu de basis voor alle elementen die we nodig hebben en geven ons de bouwstenen voor elk van onze e-mailtypen.
Het is onwaarschijnlijk dat nieuwsbrieven ooit een grafische held van welke aard dan ook nodig zullen hebben, daarom heb ik een eenvoudige maar gedurfde titel gebruikt om de procedure daar te starten. De typografische stijlen die we al hadden ingesteld, zouden het grootste deel van de mogelijke inhoud mogelijk maken.
Een onderscheid tussen nieuwsbrieven en samenvattingen werd gemaakt door nieuwsbrieven een transparante held te geven, waardoor het totaal meer ... een broadsheet werd.
De eenvoudigste van al onze e-mails (naast gewone tekstversies) zijn de admin-berichten. In hun geval is absoluut geen extra styling nodig; vertel het eenvoudig, snel en eenvoudig. Een transparante held en een gebrek aan een grote kop bepalen hier de admin-toon heel goed. Al het andere blijft hetzelfde, waaronder mogelijk een CTA-knop. Dit zijn de desktop- en mobiele weergaven:
Met de concepten en ontwerpen geregeld, was het tijd om de resultaten naar Nicole te verzenden. Ze zou deze ideeën nemen en er statische HTML-bestanden van maken. Ik moest ervoor zorgen dat ze de genomen beslissingen begreep en over alle middelen beschikte die nodig waren om de e-mails te bouwen.
InVision maakt een zeer snelle annotatie van grafische documenten mogelijk - en u kunt Sketch-bestanden rechtstreeks uploaden. Een verzameling visuals met opmerkingen en aanwijzingen was een goede manier om alle ideeën te communiceren.
Wat betreft het leveren van bezittingen, maakt Sketch het exporteren van alle benodigde stukjes en beetjes zeer eenvoudig. Ik kon niet alleen alle items (zoals logo's, sociale knoppen, enzovoort) voorbereiden, maar ik kon ze ook op verschillende formaten leveren, zodat we ze konden gebruiken voor schermen met verschillende pixeldichtheden. Meer informatie over hoe Sketch uw items kan exporteren:
Met alle bestanden, plus wat meer instructies in Dropbox, had Nicole alles wat ze nodig had om haar magie te bewerken.
In het volgende deel van deze case study zal ik je aan Nicole overhandigen voor de build. Ze zal uitleggen hoe ze de responsieve basis voor deze e-mails heeft opgebouwd en heeft de gebruikelijke problemen die e-mailontwikkeling met zich meebrengt overwonnen.
Voel je vrij om het demo-schetsbestand te pakken van de repository op GitHub en de voltooide e-mails zelf te bekijken: abonneer je hieronder!
Accentsconagua