Share
Ce veți creaÎn acest tutorial vă voi îndruma prin procesul de proiectare a unei pagini de destinație simple și orientate spre conversii. Vom folosi aplicația Tuts + Android pentru demo, punând accent pe caracteristicile și beneficiile sale și vom folosi apelurile la acțiune pe tot parcursul procesului.
La proiectarea paginilor de destinație există câteva lucruri de care aveți nevoie pentru a obține dreptul de a vă bucura de rate de conversie ridicate.
Potrivit hacker-ului de creștere Neil Patel, pentru a avea o pagină de destinație concurentă-strivire, aveți nevoie de:
Vom implementa toate elementele de mai sus pentru a face pagina de destinație cât mai eficientă posibil.
Vă recomandăm să aruncați o privire la utilizarea principiilor AIDA în Web Design de către Shaun Cronin. AIDA înseamnă Atenţie, Interes, Dorință și Acțiune; iar aceste principii pot fi aplicate în situații diferite care implică vânzarea de produse sau servicii.
Cercetările arată că oamenii nu vă deranjează să deruleze, deci odată ce ați creat interesul inițial în partea de sus a paginii, nu trebuie să vă faceți griji cu privire la efectuarea unei pagini de destinație mai lungă. Acest lucru este necesar pentru a spune o poveste minunată și a adăuga elemente persuasive.
Paginile de destinație eficiente nu pot fi proiectate o singură dată și să funcționeze bine. Trebuie să testați cu diferite combinații de copii, culori, apel la acțiune și alte elemente pentru a obține cele mai bune rezultate.
Pentru mai multe informații despre această verificare, introduceți un designer Web pentru Testarea A / B de către Siddharth Deswan.
Pentru a urmări de-a lungul timpului, veți avea nevoie de anumite active (disponibile în mod liber)
Începeți prin crearea unui nou document Photoshop (Fișier> Nou ... ) folosind setările de mai jos. Aveți libertatea de a utiliza o pânză de orice dimensiune doriți.
Să stabilim niște ghiduri, astfel încât aspectul nostru să aibă suficient spațiu și să pară echilibrat. Stabilirea unor linii directoare va asigura neatinsitatea și va contribui la definirea lățimii site-ului nostru în scopul acestui design. Mergi la Vizualizare> Ghid nou ... și stabiliți câteva linii directoare. Eu de obicei aleg 1000px ca punct de plecare și adaug câteva linii directoare din colțuri pentru a avea un spațiu pentru a respira.
Notă: Linii directoare utilizate pentru acest tutorial: vertical la 100px, 600px și 1100px.
Bacsis: De asemenea, puteți utiliza pluginul GuideGuide Photoshop pentru a face acest proces și mai rapid.
Antetul sau zona "deasupra ori" joacă un rol foarte important în angajarea cu utilizatorii și asigurarea faptului că vizitatorii rămân pe site.
Principala funcție a paginii de destinație a aplicației este să convingă vizitatorii să descarce aplicația. Din acest motiv, ne vom concentra pe avantajele încercării aplicației și vom face ușor descărcarea.
Să creați mai întâi un grup numit "Antet" făcând clic pe Layer> Nou> Grup ... sau lovind pictograma mică din partea inferioară a panoului straturilor. După asta, apucă-te Instrument tip orizontal (T), alege PT Sans (Bold) 18px dimensiunea fontului, setarea culorii la negru # 000000 și introduceți numele aplicației pentru a servi drept siglă, plasați-o în colțul din stânga sus, chiar lângă prima orientare verticală. Dați-i puțin spațiu deasupra, astfel încât să nu pară înghesuit.
Să creați un buton de chemare la acțiune pe care vom reuși să îl folosim pe parcursul designului nostru pentru a ne asigura că vizitatorii iau măsuri. Creați un nou grup numit "CTA btn" și alegeți Instrument rotunjit dreptunghiular (U), a stabilit Rază la 2px, schimba culoarea primului la verde # 17e594 și trageți a 206x38px mărimea dreptunghiului.
Acum faceți clic pe butonul din dreapta al mouse-ului pe strat, selectați Opțiuni amestecate… și verificați Accident vascular cerebral opțiune. Apoi se aplică un verde mai închis # 09ba74.
Alegeți Instrument tip orizontal (T) din nou și introduceți copia pentru butonul nostru. Am folosit-o PT Sans (Bold) 12px și culoarea albă #FFFFFF.
Acum alegeți Instrumentul dreptunghiular (T) și trageți a 1200x600px (orice culoare) dreptunghiulară și plasați-o chiar sub navigația noastră minimă de sus. Am plecat a 25px decalajul dintre logo și forma așa cum am făcut pentru logo-ul de mai sus, așa că este consistent.
Acum, apucați o fotografie din Unsplash și plasați-o deasupra stratului de formă dreptunghiulară. După aceea, țineți apăsată tasta Alt cheia și mouse-ul peste stratul de imagine până când vedeți o săgeată mică îndreptată în jos, apoi eliberați mouse-ul pentru a crea o Mască de tăiere astfel încât imaginea să fie vizibilă numai în zona dreptunghiului.
Lovit T Cmd + pentru a redimensiona fotografia, asigurându-vă că țineți apăsată tasta Schimb astfel încât să o redimensionați proporțional.
Să adăugăm un strat de filtru de gri, astfel încât să facem fundalul pregătit pentru copiere și captura de ecran a aplicației.
Schimbați culoarea primului la gri închis # 222325 și să creați un strat nou, apoi plasați-l deasupra stratului de fotografie și creați din nou a Mască de tăiere. După lovitura asta Alt + Backspace pentru a umple stratul cu gri. În cele din urmă, reduceți stratul Opacitate la 80%.
Prindeți Instrument tip orizontal (T) din nou, schimbați culoarea în alb #FFFFFF și utilizarea PT Sans (Bold) 48 px introduceți mesajul principal. Asigurați-vă că îi dați o mulțime de spațiu deasupra.
Acum, reduceți dimensiunea fontului la 21px, Selectați Normal greutatea fontului, introduceți un mesaj mai descriptiv și plasați-l sub mesajul principal. Pentru ca liniile să pară echilibrate și ușor de citit, crește înălțimea liniei cel puțin 30px. Plasați descrierea sub titlul principal, în cazul meu m-am mutat 40px jos.
Să repetăm butonul de chemare la acțiune (CTA), astfel încât vizitatorul să știe ce trebuie să facă după citirea copiei. Găsiți grupul "CTA btn" și duplicați-l lovind CMD + J, după aceea, plasați-o sub mesajul secundar.
Am terminat cu copia și apelul principal la acțiune, așadar să punem o previzualizare reală a aplicației pentru a arăta cum arată aplicația înainte ca oamenii să decidă să o descarce.
Descărcați gratuit macheta Samsung Galaxy S5 de Martin Adamko și puneți-o în documentul dvs. După aceea, țineți apăsată tasta CMD faceți clic pe toate straturile care aparțin acestei machete și faceți clic dreapta pentru a alege Conversia la obiectul inteligent. Utilizare T Cmd + să o redimensionăm și să ne mutăm la dreapta din copia și descrierea noastră principală.
După aceea, plasați ecranul aplicației pe macheta smartphone-ului lovind stratul obiect inteligent și salvând-l. Am folosit o captură de ecran a unei noi aplicații Tuts + Courses Android.
Am terminat cu antetul. Minimizați grupul și creați altul numit "Beneficii".
După aceea, alegeți Instrument tip orizontal (T) din nou, schimbați culoarea la același gri închis # 222325 am folosit pentru filtru (face design consistente și coezive în loc de a aduce mai multe culori) și de a folosi PT Sans (Bold) 30px introduceți o declarație puternică și plasați-o sub zona antetului, lăsând mult spațiu deasupra acesteia.
Acum avem o șansă să-i convingem pe vizitatori de ce merită descărcat aplicația noastră. Gândiți-vă la beneficii față de caracteristici, astfel încât oamenii să se poată vizualiza folosind-o. Schimbați culoarea într-un albastru deschis subtil # 6a7588 și introduceți câteva linii care explică de ce oamenii ar trebui să utilizeze aplicația dvs. Am plecat PT Sans (Normal) 21px cu înălțimea liniei setată la 32px, aceeași setare ca cea utilizată pentru mesajul secundar în zona antetului.
Acordați atenție distanței dintre blocurile de text, lăsați suficient spațiu pentru a da acelei senzații de lumină designului dvs..
Încă o dată, să repetăm butonul de chemare la acțiune (CTA), astfel încât vizitatorii care nu au fost convinși mai devreme să poată lua măsuri imediat după ce au citit copia de beneficii. Duplicați grupul "CTA btn" lovind CMD + J și plasați-l sub copia beneficiilor. Mutați-o în grupul "Beneficii" pentru a face documentul mai organizat.
Am terminat cu domeniul avantajelor, astfel încât să minimizăm grupul și să creăm un nou grup numit "Funcții". Aici vom evidenția câteva dintre caracteristicile aplicației, astfel încât vizitatorii care vor să afle mai multe și care sunt deja interesați pot afla mai multe despre aplicație.
Schimbați culoarea primului la gri deschis #fbfbfb, vom folosi o altă culoare de fundal pentru secțiunea Funcții pentru ao separa de restul. După aceea alegeți Instrumentul dreptunghiular (U) și trageți a 1200x700px care va servi ca fundal. Asigurați-vă că dați spațiul secțiunii de mai sus.
Pentru a delimita zona de caracteristici chiar mai mult, să punem linii orizontale de 1px între fundaluri. Alegeți Instrumentul de linie (U), Seteaza Greutate la 1px și modificați culoarea la un gri mai închis #eeeeee.
Bacsis: țineți-vă jos Schimb cheie pentru a desena o linie perfect orizontală.
Deschideți grupul "Beneficii" și găsiți stratul principal, lovit CMD + J să o duplicați și să vă mutați în grupul "Caracteristici". Editați-l pentru a se potrivi nevoilor dvs. și plasați-l în interiorul fundalului gri creat anterior.
Vom crea trei blocuri de caracteristici cu o pictogramă, titlu și o scurtă descriere. Creați un grup nou și numiți-l "Feature 1" sau ceva mai descriptiv. Treceți la Iconfinder și descărcați a 48x48 px pictograma utilizatorului. Faceți clic pe butonul din dreapta al mouse-ului pe numele stratului său și aplicați următoarele opțiuni.
Puteți observa că de fapt imităm stilul butonului, astfel încât totul este consistent.
Încă o dată, duplicați stratul principal, plasați-l în interiorul grupului "Feature 1" și utilizând Instrument tip orizontal (T) reduceți dimensiunea fontului la 16px și linia-înălțime la 22px.
Folosind același lucru Instrument tip orizontal (T) scrieți trei linii scurte care vă explică caracteristica. Asigurați-vă că schimbați culoarea de tip la albastrul gri utilizat anterior # 6a7588. Plasați sub pictograma și titlul.
Acum minimalizați grupul și duplicați-l de două ori lovind CMD + J. După aceea, personalizați grupurile duplicate pentru a se potrivi aplicației dvs. Pentru acest tutorial am folosit iconițe de marcare și ceas de la Iconfinder. Asigurați-vă că lăsați suficient spațiu între blocuri astfel încât să pară echilibrat.
Cu cât arată mai mult modul în care produsul real arată mai bine, vom folosi o perspectivă diferită asupra machetei smartphone-ului nostru. Am răsturnat machetul Samsung Galaxy S5 folosit anterior și l-am înlocuit cu screenshot-ul găsit pe Google Play. Faceți clic dreapta pe stratul machetă din partea superioară și selectați Obiect nou inteligent prin copiere pentru a crea o copie independentă.
Pentru a personaliza macheta smartphone-ului, faceți clic de două ori pe miniatură de strat și plasați ecranul aplicației acolo.
Vom adăuga o credibilitate socială pentru aplicația noastră, afișând câteva mărturii de la utilizatorii de aplicații.
Minimizați toate grupurile și creați unul nou, denumit "Testimonials". Introduceți un titlu al secțiunii așa cum am făcut-o înainte și plasați-l sub fundalul grupului "Caracteristici", lăsând o cantitate consistentă de spațiu.
Deschideți acum grupul "Caracteristici", duplicați unul dintre ele și mutați-l în interiorul grupului "Testimoniale". Vom reutiliza grupul pentru mărturiile noastre. Editați copia, schimbând titlul la numele și descrierea unei persoane în copia mărturiei.
Scoateți pictograma și, utilizând Instrument de elipsă (U), trage o formă de cerc. După acel loc, fotografia de profil a persoanei de deasupra stratului cu cerc și creați o Mască de tăiere. Am folosit o față de la User Inter Faces.
În cele din urmă, duplicați grupul de mărturii proaspăt și personalizați-l cu nume, mărturii și fotografii de profil diferite.
Minimizați grupul "Testimonials" și creați altul denumit "Footer". Vom pune un buton final de apel (CTA) aici și câteva linkuri către paginile interne ale site-ului deoarece majoritatea oamenilor se defilează în jos pentru a căuta arhitectura site-ului.
Mergeți la grupul "Header" și țineți apăsată tasta Schimb selectați forma dreptunghiului și straturile de filon gri. După lovitura asta CMD + J să le duplicați și să le mutați în noul grup "Footer". Apoi, plasați o fotografie aleasă între forma dreptunghiulară și straturile filtrului gri, creând o Mască de tăiere.
Adăugați un alt titlu care încurajează persoanele să ia măsuri și să descarce aplicația. Faceți-o albă #FFFFFF astfel încât este foarte vizibil pe fundalul mai întunecat. După aceasta, duplicați butonul de chemare la acțiune (CTA) și plasați-l sub titlul.
Alege Instrument tip orizontal (T) din nou și introduceți câteva linkuri ale site-ului dvs. Am folosit alb #FFFFFF PT Sans (Normal) 16px și o înălțime a liniei 29px.
Duplicați stratul de text și personalizați-l pentru a se potrivi aplicației dvs. După aceea, plasați o linie de drepturi de autor chiar în partea de jos a subsolului dvs., lăsând o mulțime de spațiu deasupra și dedesubt.
Asta e! Am terminat cu design-ul temelor, examinați acum straturile dvs. de documente, ștergeți cele inutile și predați-le dezvoltatorului sau, chiar mai bine, codificați-le singur!
Accentsconagua