Share
Recent am reproiectat toate e-mailurile trimise la Envato Tuts +; buletinele de știri, diversele materiale, e-mailurile din campania de marketing și e-mailurile de administrare. În această serie de studii de caz scurte vom explica cum am făcut-o!
Până la redesign, am avut o colecție destul de disociată de e-mailuri, fără o echipă centrală care să aibă grijă de ei. A devenit clar că putem simplifica lucrurile și pentru a face lucrurile mai economice, așa că am decis să ne mutăm eforturile către un cont central în Monitorul de Campanie. Un set central de teme ar fi folosit pe toată suprafața și ne-am asigura că au fost proiectate și construite într-un mod care a reprezentat ceea ce facem la Envato Tuts+.
Prima etapă a operației a fost de a colaționa toate e-mailurile pe care le trimiteam în prezent la mase. Aceasta însemna să ne distrăm prin buletinele informative existente despre MailChimp și să dezmembrăm ceea ce aveam în Target Exact.
Odată ce am știut la ce ne uitam, am putea alege elemente comune și să clasificăm totul pregătit pentru etapa de proiectare.
Am fiert toate la:
Care au fost prioritățile noastre pentru această reproiectare? În forma glonțului, aveam nevoie de:
Și noi dorit:
E timpul să scoatem niște imagini vizuale! Am folosit Sketch pentru acest proces de proiectare, datorită caracterului adecvat pentru proiectarea UI. Prima etapă a fost aceea de a pune împreună o placă de desen și de a elabora unele dimensiuni ale rețelei.
Am folosit opțiunile de layout ale Sketch (View> Canvas> Settings Layout ... ) pentru a stabili o grilă de 640 de pixeli, cu 8 coloane. Mele planșă de lucru era mult mai larg decât asta, să-mi dea cameră de respirație. Făcând clic pe Centru offsetul este calculat automat, în acest caz la 280px. Prin urmare, grila a fost poziționată la 280 de pixeli de la marginea tabloului de bord.
O lățime a coloanei de 62px legată bine cu jgheaburi de 20px, oferindu-mi un punct de plecare orizontal.
Am vrut și rânduri, așa că ai verificat rânduri cutie. Tipul meu ar funcționa dintr-o bază de 16 pixeli, așa că am folosit-o ca o rețea verticală rudimentară.
Artboard numit "Digest"Echipa de marketing de la sediul central a cerut să punem la dispoziție un fel de secțiune de eroi; ceva care le-ar permite să folosească o grafică uimitoare dacă ar fi trebuit vreodată.
Nu am vrut ca acest lucru să fie standard pentru toate tipurile de e-mail, dar mi-a dat un bun punct de plecare. Folosind blocuri, mi-am propus să fac un layout de bază.
Cu un erou, o zonă cu conținut principal și o pânză albă, scena a fost stabilită. M-am decis să joc cu straturi și să fac zona de conținut să se suprapună ușor eroului. Am fost conștient că acest lucru ar putea cauza Nicole (care ar fi construit totul) câteva dureri de cap, dar am știut că o să-și dea seama - ea este un vrăjitor, după toate.
Variantele acestui aranjament ar putea veni sub forma:
Unul dintre avantajele unui aspect simplu este că răspunsul este în mod inerent mai simplu de realizat. Solicitat într-un port de vizualizare mai restrâns, vom restrânge coloana duală acolo unde este necesar și vom întinde zona de conținut spre marginea ferestrei de vedere, oferindu-ne o serie de secțiuni și nici o suprapunere.
În Sketch, unde sunt necesare două aranjamente diferite ale coloanelor, avem nevoie de oa doua pagină. Orice aspect al rețelei pe care îl definim este aplicat tuturor tablourilor de bord din aceeași pagină și avem nevoie de o rețea mult mai simplă pentru vizualizarea noastră mobilă.
Ceea ce avem nevoie aici este atât de simplu, de fapt, că într-adevăr avem nevoie doar de o singură coloană centrală, cu un jgheab (vom rămâne la 20 de grade pe fiecare parte). Schița nu poate crea o rețea cu o singură coloană, așa că va trebui să folosim două.
Noi folosim Roboto aceste zile pe o mare parte din Envato, deci decizia a fost luată pentru mine. Culorile sunt în mare parte dictate de stilurile Envato, de aceea am avut o paletă de a alege. A trebuit să decid ce ar fi folosit pentru corp, titlurile, legăturile, orice text cu mai puțin accent și "apelurile la acțiune".
Prioritățile mele au fost următoarele:
Link-uri și CTA-uri în același albastruÎn ceea ce privește Sketch-ul, făcând lucrurile mai ușoare aici, stilurile de text sunt la doar un clic. Stilul unui text așa cum îl doriți, salvați-l ca pe un stil de text, apoi trimiteți-l înapoi dacă vreodată aveți nevoie de acest stil din nou.
Envato Tuts + este o platformă destul de vizuală; folosim miniaturi peste tot. Unele reacții din partea echipei au sugerat că același aranjament pe care îl folosim pe pagina noastră de pornire ar fi cel mai bun mod de a prezenta tutoriale într-un e-mail digest. Cititorii ar face conexiunea, să înțeleagă cu ce se ocupă și, în orice caz, este o modalitate clară de prezentare a informațiilor.
Cursurile sunt ușor diferite; Am vrut să acord acest accent deosebit. Fiecare secțiune de subiect ar arăta mai întâi un curs disponibil, lățime întreagă, cu puțin mai multe detalii decât tutoriale, plus un buton de redare grafic superimpozat pe miniatură. Acest lucru ar evidenția distincția dintre cursuri și tutoriale, stimulând în același timp cititorii să facă clic (butoanele de redare sunt bune pentru asta).
Având butonul de redare plasat dinamic peste partea de sus ar fi incomod, așa că am demisionat la plasarea manuală a graficului butonului în miniaturi (de exemplu, cu Photoshop). Un pic de muncă suplimentară (îmi pare rău Cameron), dar merită efortul pe care îl cred.
De asemenea, am dorit o modalitate de a prezenta blocuri de anunțuri; nu neapărat anunțuri de la terțe părți, ci ceva care să ne dea posibilitatea să strigăm despre lucruri noi și interesante. Am adăugat un banner opțional în partea superioară a aspectului - foarte asemănător cu ceea ce veți vedea ocazional pe site.
Apoi am decis să împărțim tot conținutul în blocuri, permițându-ne să le aranjăm în orice ordine pe care o alegem și făcând, de asemenea, o distincție clară între secțiuni.
Iată cum arată un bloc de anunțuri, cu două secțiuni digestate pe fiecare parte.
Notă: acesta este un anunț real, aflați mai multe aiciFooterul este un element universal în toate aceste e-mailuri. Nu vroiam să îngropăm multe informații, dar ce noi făcut alegeți să plasați acolo am vrut clar (nu înțeleg de ce unele companii își fac foșteni abia vizibile, cu link-uri "dezabonare" ascunse).
Deci, cu unele legături sociale, o zonă de text pentru a explica de ce cineva ar putea primi e-mailuri, linkuri de dezabonare și adresa Envato HQ, am fost toți.
Acum avem baza pentru toate elementele de care avem nevoie, oferindu-ne blocurile pentru fiecare tip de email.
Buletinele de știri sunt puțin probabil să aibă vreodată nevoie de un erou grafic de orice fel, așa că am folosit o îndrumare simplă, dar îndrăzneață pentru a începe procedurile acolo. Stilurile tipografice pe care le-am stabilit deja ar satisface cea mai mare parte a conținutului posibil.
O distincție între buletine de știri și chestionare a fost făcută prin oferirea de buletine de știri un erou transparent, făcându-l cu totul mai mult ....
Cea mai simplă dintre toate e-mailurile noastre (pe lângă versiunile de text simplu) sunt mesajele de administrare. În cazul lor, nu este absolut necesar un stil suplimentar; ajungeți la un punct, rapid și simplu. Un erou transparent și o lipsă de poziții mari plasează tonul de admin destul de frumos aici. Totul rămâne același, inclusiv, eventual, un buton CTA. Iată vederile desktop și mobile:
Cu conceptele și desenele planificate, era timpul ca rezultatele să fie trimise lui Nicole. Va lua aceste idei și va face fișiere HTML statice din ele. Aveam nevoie să mă asigur că a înțeles deciziile luate și a avut toate bunurile necesare pentru a construi e-mailurile.
InVision permite adnotarea foarte rapidă a documentelor grafice și puteți încărca direct fișierele Sketch. O colecție de vizuale cu comentarii și indicații a fost o modalitate bună de a comunica toate ideile.
În ceea ce privește livrarea de active, Sketch-ul face exportul tuturor pieselor și bucăților necesare foarte ușor. Nu numai că aș putea să pregătesc toate activele (cum ar fi logo-uri, butoane sociale etc.), dar le-aș putea livra și la diferite dimensiuni, acoperindu-ne pentru ecrane cu densități diferite de pixeli. Aflați mai multe despre modul în care Sketch vă poate exporta activele:
Cu toate fișierele, plus câteva instrucțiuni în Dropbox, Nicole avea tot ce avea nevoie pentru a-și lucra magia.
În următoarea parte a acestui studiu de caz vă voi înmâna lui Nicole pentru construcție. Ea va explica cum a construit fundația responsabilă pentru aceste e-mailuri și a depășit problemele obișnuite pe care evaluează e-mailurile.
Simțiți-vă liber să luați fișierul Demo Sketch din repo pe GitHub și să vedeți e-mailurile terminate de dvs.: abonați-vă mai jos!
Accentsconagua