Share
Ce veți creaÎn acest tutorial vă voi îndruma prin procesul de proiectare a unei pagini de destinație elegante pentru un serviciu fictiv "jurnal de recunoștință". Vom începe în întregime de la zero, redactând aspectul cu Adobe Photoshop în cel mai scurt timp. Vom folosi câteva tehnici de bază și intermediare pentru a crea acest design cu o conversie în minte. Hai sa incepem!
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 preferați - web-ul nu are o lățime fixă, la urma urmei.
Să stabilim niște ghiduri, astfel încât aspectul nostru să aibă suficient spațiu și să pară echilibrat. Nu folosesc întotdeauna o rețea predefinită, dar stabilirea unor linii directoare va asigura unitate și va contribui la definirea lățimii site-ului nostru. Mergi la Vizualizare> Ghid nou ... și stabiliți câteva linii directoare. De obicei, aleg 1000px ca lățime de site și adaugă niște linii directoare din colțuri, așa că are spațiu pentru a respira.
Notă: Linii directoare utilizate pentru acest tutorial: vertical la 200px, 500px, 700px, 900px și 1200px.
Bacsis: De asemenea, puteți utiliza pluginul GuideGuide Photoshop pentru a face acest proces și mai rapid.
Prin lipirea etichetei Photoshop vom păstra lucrurile organizate și, prin urmare, ușor de navigat și editat. Să creați trei grupuri de straturi numite Antet, Conținut și Subsol. Pentru a crea grupuri, mergeți la Layer> Nou> Grup ... și dați fiecăruia un titlu așa cum este menționat. Pentru crearea rapidă a unui grup, faceți clic pe pictograma dosarului.
Antetul sau zona "deasupra ori" (oriunde este în zilele noastre) joacă un rol foarte important în ceea ce privește implicarea cu utilizatorii și asigurarea că vizitatorii rămân pe site. Pentru acest aspect al paginii de destinație, voi folosi o șansă de doi oameni care stau pe o bancă; unul dintre ei ținând mâinile în aer prezentând emoții pozitive și fericire.
Să creați mai întâi fundalul blogului. În interiorul grupului "Header" trageți un negru # 000000 colorat dreptunghi formă folosind Instrumentul dreptunghiular (U). În cazul meu, am desenat un dreptunghi de dimensiune de 1400x728px și l-am așezat în partea de sus a documentului.
Acum descarcă fotografia Chillin în fotografie, trageți-o în documentul Photoshop și plasați-o deasupra stratului dreptunghiular. Redenumiți stratul de imagine la ceva ce veți recunoaște ulterior, în cazul meu pe care l-am folosit IMG. După aceea, țineți apăsată tasta Alt cheia și mouse-ul peste stratul de fotografie până când vedeți o mică săgeată îndreptată în jos, apoi eliberați-o. Tocmai ați creat o Mască de tăiere. În final, reduceți stratul IMG Opacitate la 70% astfel încât textul pe care îl vom pune în top va fi mai ușor de citit.
Acum lovit T Cmd + și redimensionați fotografia pentru a se potrivi nevoilor dvs..
Bacsis: țineți-vă jos Schimb cheie pentru a transforma proporțional.
Acum, să creăm o navigație globală pentru pagina noastră de destinație, astfel încât utilizatorii să navigheze pe site.
Creați un grup nou numit "Navigare", plasați-l în grupul "Antet". După aceea alegeți Instrumentul dreptunghiular (U) și trageți o formă de dreptunghi alb între prima și ultima orientare verticală. Fă-o în jur 60 px în înălțime, astfel încât elementele de navigație să aibă un anumit spațiu pentru a respira și a arăta curat. În cele din urmă, mutați-o 30px jos din partea de sus, astfel încât să putem avea acest efect plutitor care rămâne frumos pe imaginea noastră.
Acum, să plasăm un logo și câteva linkuri pentru ca bara de navigare să pară ca ceva pe care oamenii îl pot folosi. Pentru sigla, am scris pur și simplu "Grttd" folosind Afișajul Playfair (caractere aldine bold) font 26px dimensiunea și culoarea gri închis # 0e0e0e.
Pentru legăturile de navigare pe care le-am folosit Sursă Sans Pro 14px cu spațierea extinsă între litere. Pentru apelul principal la acțiune "Înscrieți-vă" pe care l-am folosit Negru și culoarea verde # 96c218. Am terminat cu "Navigare", deci minimalizați-o făcând clic pe pictograma triunghi mică de lângă numele grupului.
Să scriem un mesaj inspirat care să însoțească imaginea și ideea generală a site-ului. Voi folosi o inscripție uriașă cu un subtitlu care explică conceptul în detaliu.
Deoarece avem un fundal destul de întunecat pentru zona superioară, este înțelept să folosim textul palid pentru a crea un contrast ridicat și pentru a asigura lizibilitatea. Am folosit alb #FFFFFF Sursă Sans Pro (Negru) 80px cu o înălțime a liniei 86px. Arătați-l 120px sub bara de navigare, astfel încât mesajul să aibă suficient spațiu pentru a fi perceput ca fiind important.
A scăzut viziunea de 70%.Acum, să punem subtitlul care va clarifica întregul concept și va răspunde la unele întrebări pe care vizitatorii le pot avea. Pentru a crea o combinație tipografică frumoasă, amestecați seria principală sans serif cu fontul serif elegant pe care l-am folosit anterior pentru emblema.
Pentru mai multe combinații de fonturi inspirație, consultați: Programele tipografice Google Web Fonts și Ghidul începătorilor pentru asocierea fonturilor.
Pentru acest tutorial am folosit alb #FFFFFF 26px Afișajul Playfair (italic) font și a plasat-o 40px sub titlul principal.
Să adăugăm ceva mai atrăgător, astfel încât vizitatorul să poată vedea avantajul de a rămâne pe site. Un jurnal de recunoștință se bazează pe înregistrarea lucrurilor pentru care sunteți recunoscător, astfel încât unele dovezi sociale ar fi o idee bună, arătând oamenilor pe cineva care o folosește de fapt și arătând ceva mai de dorit ca dungă.
Creați un grup nou numit "Exemplu", apoi alegeți Instrument de elipsă (U) și, ținând jos Schimb, desenează un cerc. În cazul meu e 60x60px. Apoi puneți fața cuiva pe partea superioară a stratului cerc și ținând apăsată tasta Alt tastați mouse-ul peste strat până când vedeți o săgeată mică îndreptată în jos, apoi eliberați-o pentru a crea o Mască de tăiere. Acum puteți redimensiona imaginea, dacă este necesar, făcând clic T Cmd +.
Pentru acest tutorial folosesc o față aleatorie de la User Inter Faces.
Pro tip: țineți apăsată tasta Shift pentru a desena / redimensiona formele proporționale.
Acum trebuie să punem un indicator al jurnalelor consecutive. Să creăm o altă formă de cerc, de data aceasta mai mică și să plasăm un număr în interiorul ei. Simplu, dar de înțeles și face treaba. Pentru culoarea cercului mi-am reutilizat verdele utilizat anterior # 96c218. În cazul meu, dimensiunea este de 30x30 pixeli, iar textul interior este alb #FFFFFF Sursă Sans Pro (Bold) 14px.
În cele din urmă, să oferim persoanei noastre un nume și să clarificăm ce înseamnă acest număr. Alegeți Instrument tip orizontal (T) și introduceți un nume și o lungime de lungime. În cazul meu am folosit-o Serif PT (Bold Italic) 16px pentru numele și Sursă Sans Pro (Regular) 13px pentru șir. Asigurați-vă că utilizați o înălțime a liniei suficient de mare încât elementele să aibă spațiu pentru a respira.
Mare, un ultim lucru înainte de a vă deplasa în zona de conținut. Avem nevoie de un puternic Apel la acțiune (CTA) astfel încât utilizatorul poate face ceva după ce a văzut imaginile și a citit titlurile. Creați un grup nou numit "CTA", setați culoarea primului la alb #FFFFFF și apucați Instrumentul dreptunghiular (T). După aceea, trageți o formă de dreptunghi, în cazul meu dimensiunea sa 280x60px. Observați consistența în înălțime utilizată anterior pentru bara de navigare.
După aceea, introduceți o copie persuasivă pentru buton. Am folosit "START LIVING →", culoarea fiind așa cum a fost utilizată anterior în bara de navigare gri închis # 0e0e0e, font Sursă Sans Pro (Semibold) 16px cu urmărirea setată la 140.
Acum am terminat cu "Header". Să deschidem grupul "Conținut" și să creăm un altul numit "Descriere". Vom pune un titlu puternic urmat de o descriere mai detaliată a întregului site web. Este important să repetați Apel la acțiune (CTA) astfel încât utilizatorul nu trebuie să se gândească prea mult, dar este în continuare capabil să ia măsuri ori de câte ori este gata.
Alegeți Instrument tip orizontal (T) și alegeți un font puternic pentru titlul dvs. În cazul meu folosesc frumosul și elegantul, dar cu aspect autoritar Afișajul Playfair (negru) 60 pixeli. Asigurați-vă că ați dat acestei fiare o mulțime de spațiu pentru a respira, l-am mutat 100px în jos din imaginea antetului.
Acum, folosind același lucru Instrument tip orizontal (T) faceți un dreptunghi făcând clic și trăgând-o. În cazul meu este a 600x140px unde am pus o copie persuasivă pentru ca utilizatorii să se hotărască să facă clic pe CTA. Pentru a stabili o ierarhie vizuală clară, textul descrierii ar trebui să fie mai mic și nu atât de greu. În exemplul meu folosesc gri # 666666 PT Serif (Regular) 18px, inaltimea liniei 28px. Întregul element este mutat în jos cu 50 de pixeli din titlu pentru a oferi un aspect curat și profesional.
După ce citiți copia, vizitatorul poate fi convins să încerce, deci este bine să repetați din nou butonul Call to Action (CTA). Deschideți grupul "Header", găsiți grupul "CTA" și duplicați-l prin lovire CMD + J. După aceea, mutați-l în cadrul grupului "Descriere" și schimbați culoarea butonului la culoarea verde en en # 96c218 iar pentru textul alb folosiți #FFFFFF. Dă-o jos 50px din copie pentru a avea distanțe coerente.
Privind foarte bine până acum. Să punem o linie simplă pentru a separa vizual blocul de descriere de următorul. Alegeți Instrumentul de linie (U), a stabilit Greutate la 1px și trageți o linie orizontală pe prima și ultima orientare verticală. În cazul meu am folosit o culoare gri deschis # e6e6e6 care nu este prea puternică, dar face treaba perfect.
Pro tip: țineți apăsată tasta Schimb cheie pentru a trage o linie perfect dreaptă.
Acum, terminând cu blocul "Descrierea", este timpul să treceți la următorul. Creați un grup nou numit "Inspirați". După aceea, duplicați straturile de titlu și descriere din grupul "Descriere" și le mutați în grupul "Obțineți inspirație". Editați straturile și modificați copia. Mai jos este exemplul meu:
Acum, navigați la grupul "Antet" și găsiți grupul "Exemplu". Duplicați întregul grup lovind CMD + J și mutați-l în grupul "Get Inspired". Vom relua exemplul nostru din partea de sus și vom arăta câteva povestiri despre utilizatori pentru a inspira vizitatorul nostru să ia măsuri.
Redenumiți numele grupului la "Story" și eliminați indicatorul verde. De asemenea, va trebui să schimbați culoarea textului în gri închis # 0e0e0e astfel încât acesta poate fi citit pe un fundal alb. Utilizați o altă imagine pentru avatar și scrieți poziția și locația persoanei în culoare mai deschisă # 666666 astfel încât oamenii să se poată relaționa mai mult cu acea persoană.
După aceea, creați o casetă text de jur împrejur 300x160px utilizând dimensiunea Instrument tip orizontal (T) și scrieți un exemplu de actualizare a jurnalului de recunoștință. Am folosit-o Serif PT (Italic) 16px dimensiunea culorii gri inchis asa cum sa folosit mai inainte # 666666.
Acum dublează grupul "Story" de două ori și schimbă avatarele, numele și descrierile. Așezați aceste două grupuri în ordine orizontală, lăsând goluri la distanțe egale între și plasați o linie după toate aceste grupuri așa cum am folosit înainte.
Acum, după cum am terminat cu grupul "Get Inspired", să trecem la ultima secțiune a paginii noastre de destinație. Finala Apel la acțiune (cu câteva detalii) va încuraja vizitatorii să se înscrie prin introducerea unei adrese de e-mail.
Creați un nou grup numit "E-mail" și navigați la grupul anterior pentru a găsi un strat de titlu, duplicați-l prin lovire CMD + J și mutați-l în grup nou creat. Modificați titlul la ceva încurajator și deplasați-vă 100px sub linie pentru a menține coerența.
Grozav! Acum setați culoarea primului la gri deschis # f5f5f5 și alegeți Instrumentul dreptunghiular (U) pentru a desena o casetă pentru un câmp de e-mail. Ar trebui să aibă aceeași înălțime ca și cea principală Apel la acțiune (CTA) butonul, deși lățimea nu contează atât de mult. În cazul meu este 430x60px. Apoi apucă Instrument tip orizontal (T) și scrieți "Introduceți adresa dvs. de e-mail" sau ceva similar, asigurați-vă că utilizați o culoare închisă pentru a fi ușor de citit.
Acum, mergeți la grupul "Descriere" din panoul nostru de straturi și găsiți grupul "CTA". Duplicați-l lovind CMD + J și mutați-l în grupul "Email". Plasați butonul chiar lângă câmpul de e-mail și centralizați întregul element.
A scăzut viziunea de 80%.Sfârșitul e aproape! Să minimizăm toate grupurile și să deschidem grupul "Footer". Setați culoarea primului la gri închis # 2d2d2d și, folosind Instrumentul dreptunghiular (U), trageți un dreptunghi de lățime întreagă de aproximativ 230px in inaltime. Acesta va fi fondul subsolului nostru și va distinge zona de conținut cu contrastul său.
Mergeți mai departe și găsiți grupul "Navigație" și stratul de logo, duplicați-l lovind CMD + J și mutați-o în grupul "Footer". Schimbați culoarea în alb #FFFFFF și mutați-o în jur 50px sub marginea dreptunghiului subsolului.
În cele din urmă, ridicați Instrument tip orizontal (T) și a pus câteva linkuri pe care utilizatorii le pot găsi utile. Asigurați-vă că grupați linkurile astfel încât acestea să fie ușor asociate. În cazul meu am folosit-o Sursă Sans Pro (Semibold) 16px pentru titlurile de grup de legături și PT Serif (Normal) 14px pentru titlurile de link-uri.
Asta e! Am terminat designul de aspect, așa că acum revedeți straturile, ștergeți cele inutile și transmiteți-le dezvoltatorului sau chiar codificați-le chiar mai bine. Am atins câteva tehnici de bază și mi-a demonstrat fluxul de lucru pentru proiectarea layout-urilor web, sper că ați învățat ceva.
Mi-ar plăcea să vă aud feedback-ul și să vedeți rezultatele acestui tutorial!
Dacă sunteți nou în Design Landing Page Design, vă recomandăm un număr de tutoriale introductive care vă vor ajuta să vă îmbunătățiți noțiunile de bază:
Dacă sunteți interesat să obțineți ajutor cu designul paginii dvs. de destinație, Envato Studio are o colecție minunată de servicii de design și dezvoltare a paginilor de destinație pe care ați dori să le explorați. De asemenea, puteți să aruncați o privire la temele de pe pagina de destinație pe Envato Market.
Accentsconagua