Share
Ce veți creaÎn acest tutorial vom crea un aspect pentru un magazin de mărfuri lucrate manual. Nu voi vorbi prea mult despre dimensiunile specifice ale caracterelor sau despre codurile de culori, dar în schimb se va concentra pe explicarea opțiunilor de font, culori, proporții și așa mai departe.
Pentru a urmări de-a lungul timpului, veți avea nevoie de anumite active (disponibile în mod liber)
Înainte de a începe să proiectați aspectul dvs., trebuie să definiți mai întâi care sunt obiectivele de afaceri ale acestui exercițiu. Este prioritatea principală de a crește gradul de cunoaștere a mărcii? Este vorba de a vinde produse clienților noi sau de a le oferi mai întâi valoare, obține detalii și apoi vinde mai târziu? Trebuie să vă gândiți la marketing, obiectivele afacerii și nevoile utilizatorilor dvs. pentru a proiecta un aspect care să convingă publicul țintă să ia măsurile pe care le doriți.
Începeți prin a pune aceste întrebări:
Pentru acest tutorial am decis să mă concentrez pe imaginile puternice și pe utilizarea generoasă a spațiului negativ pentru a crea un sentiment de libertate și claritate. Vreau ca designul să pară elegant și să apeleze la oamenii care îi pasă de imaginea lor.
Înainte de a sări în Adobe Photoshop și de a obține imagini în jos, să definim câteva variabile cum ar fi culorile, stilul și direcția generală.
Începeți să colectați imagini care vă plac pentru moodboard-ul și paleta de culori. Eu folosesc de obicei Pinterest, dar gomoodboard.com este foarte util și a fost conceput exclusiv pentru a crea placi de bază.
gomoodboard.com este un simplu și ușor de utilizat instrument de moodboarding.Înainte să formăm o schemă de culori pentru designul tău; una care este relevantă pentru marca dvs. și va face apel la publicul dvs. țintă. Este adesea o bună practică să folosiți un generator de palete de culori cum ar fi Adobe Color CC (fostul Kuler) care vă poate economisi timp pentru a alege culorile.
Încărcați o imagine din moodboard-ul dvs. și vedeți ce culori sunt generate. Reglați paleta pentru a se potrivi nevoilor dvs. și salvați culorile pentru referințe ulterioare.
Adobe Color CC vă permite să creați palete de culori dintr-o imagine.Inspirat de unele dintre elementele noastre, vom merge cu familia Source Pro typeface, incluzând atât versiunile sans, cât și seriful fontului. Un amestec de ambele va aduce un sentiment echilibrat și titluri puternice.
Înainte de a deveni creativi în Adobe Photoshop, să organizăm unele activități de menaj, cum ar fi crearea unui document nou și stabilirea unor linii directoare.
Deschideți Adobe Photoshop și creați un document nou CMD + N. Definiți dimensiunile acestuia la ceea ce simțiți că se va potrivi nevoilor de proiectare - în cazul meu este 1400x3564px.
După aceea, setați niște ghidaje 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 200px, 500px, 550px, 700px, 850px, 900px și 1200px.
Bacsis: De asemenea, puteți utiliza pluginul GuideGuide Photoshop pentru a face acest proces și mai rapid.
Vom începe designul magazinului creând o zonă superioară pentru a atrage atenția vizitatorului și trimite un mesaj instantaneu despre ceea ce este vorba despre site.
Creați un grup nou numit "Navigare" și setați o nouă orientare orizontală la 130 x. Aici găsim logo-ul, legăturile de navigare și căutarea. Plasați sigla pe partea stângă. Dacă nu aveți una, creați o formă de dreptunghi și plasați text pe ea.
Acum, plasați elementele de navigare ca pe un text pur. Din faza de planificare ar trebui să știți deja ce trebuie să includeți în navigația dvs., astfel încât potențialul dvs. client să o considere util. Folosește Instrument tip orizontal (T) pentru a scrie titlurile de link-uri și a le plasa lângă logo-ul dvs. lăsând un spațiu echitabil.
Căutarea este o funcție incredibil de importantă în cazul comerțului electronic. Efectuați câmpul de căutare proeminent și accesibil prin plasarea acestuia în partea dreaptă a navigației principale de sus. Pentru a crea aceasta utilizați Instrumentul dreptunghiular (U) si Instrument tip orizontal (T). Observați cum sunt culorile inspirate de imaginea utilizată cu Adobe Color CC.
Acum este momentul să plasați o imagine frapantă, care va fi un punct focal al întregului site, odată ce vizitatorul îl vede pentru prima dată. Așa cum veți vedea destul de frecvent pe web în aceste zile, vom alege o imagine de înaltă calitate cu o concentrare puternică și clară, permițând suprapunerea elementelor de text și UI.
Utilizarea Instrumentul dreptunghiular (T) desenează un 1400x700px (orice culoare) forma dreptunghiului și plasați-o chiar sub navigația de sus (rețineți orientarea orizontală de 130px? Este pentru această formă). Apoi trageți o imagine aleasă de dvs. și plasați stratul 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.
Pentru a ajuta imaginea noastră să atragă atenția mai mult asupra centrului orizontal, să adăugăm un gradient care merge de la transparent la negru în partea de jos. Ridica Instrument de gradient (G) și personalizați-o pentru a trece de la negru # 000000 la transparență. După aceea, țineți-vă jos Schimb și glisați cu mouse-ul din partea de jos a imaginii în jurul mijlocului pentru a crea un gradient. Apoi, faceți-o în Mască de tăiere și să reducă Opacitate la 50% așa că nu este atât de intensă. Redenumiți stratul la "Shadow", astfel încât să fie ușor de identificat.
Acum este timpul să folosiți un titlu puternic care atrage ochiul vizitatorului dvs. și îi încurajează să afle mai multe. Utilizați sursa Sans Pro mare și îndrăzneață și scrieți un titlu scurt. Am folosit-o Sursă Sans Pro (Negru) 70px dimensiunea și 160 pentru scrisoare urmărire.
Ați câștigat atenția utilizatorului, acum oferiți un mesaj secundar și, cel mai important, un apel la acțiune (cunoscut și ca CTA.) Am folosit 28px mărimea Sursă Serif Pro (Regular) pentru sub-titlul și reutilizat butonul de căutare pentru a menține UI consistent.
Observați spațierea pe care o folosesc. Păstrați întotdeauna spațiu suficient în jurul elementelor, astfel încât acestea să fie percepute mai repede și să arate mai bine organizate. De asemenea, dacă vă uitați atent, veți vedea că straturile de text se află mai aproape unul de celălalt. Aceasta se datorează legii apropierii lui Gestalt.
"Potrivit legii apropierii, lucrurile care se apropie unul de altul par a fi grupate împreună".
Și am terminat cu "clienții noi primitori", sau antetul, zona. După ce avem atenția și interesul vizitatorului, este timpul să le arătăm mai multe beneficii pe care le oferă magazinul nostru.
Așa cum am păstrat zona noastră de top a site-ului destul de minimal vom merge cu o estetică curată și simplă pentru restul aspectului.
Plasați un titlu care ar putea interesa vizitatorii dvs. și o scurtă descriere care îi va încuraja și mai mult. Am folosit-o Sursă Sans Pro (Semibold) 24px și un gri închis # 282723. Asigurați-vă că lăsați mult spațiu deasupra titlului, astfel încât să fie compatibil cu zona de sus.
Pentru descriere utilizați ceva mai strălucitor, astfel încât acesta este vizibil mai slab și imediat perceput ca fiind secundar în importanță. Am folosit-o 16px Sursă Serif Pro (Regular) și culoarea este gri #adadad.
O modalitate eficientă de a crea încredere este de a folosi imaginile atractive de înaltă calitate, care declanșează creierul, creând dorință. Asigurați-vă că ați investit timpul luând fotografii minunate ale produselor dvs. sau obțineți un fotograf profesionist pentru a obține treaba. Pentru acest tutorial voi folosi produse fictive, astfel încât nu trebuie să fac fotografii singur - în loc să le folosesc pe cele de la Unsplash și Stock Up.
Alegeți Instrumentul dreptunghiular (U) și trageți o formă dreptunghiulară. După aceea trageți fotografia produsului în Photoshop, plasați-o peste dreptunghi și creați-o Mască de tăiere. Redimensionați imaginea dacă este necesar prin lovire T Cmd +.
Plasați dreptunghiul dvs. între prima și a doua orientare verticală, deoarece am definit zonele egale pentru imaginile produselor de la început.Pentru a păstra lucrurile simple, vom oferi doar informații de bază despre produs, inclusiv titlul și prețul (pe care le-ați putea determina utilizatorii să vrea să afle mai multe).
Alegeți la fel Sursă Serif Pro font și introduceți titlul folosind gri mai închis, așa cum este folosit pentru titlul secțiunii. După aceea, utilizați bricheta mai deschisă pentru eticheta de preț, deoarece este o informație secundară și nu necesită prea multă forță vizuală. Un lucru mai mult de reținut este faptul că elementele magazinului nostru, cum ar fi titlurile, butoanele de apel la acțiune și blocurile de descriere sunt centrate.
Acum puneți toate straturile produsului într-un singur grup și duplicați-le prin lovire CMD + J, plasați-le între orientările verticale definite anterior, lăsând spații între.
Am terminat o secțiune "Trending" care conține trei produse. Potrivit lui Paul Seys, trei opțiuni reprezintă numărul optim pentru a face oferta mai persuasivă.
"O astfel de tehnică este cunoscută ca" Efectul Goldilocks "(sau" Goldilocks Pricing "). Termenul derivă din povestea Fraților Grimm în care Goldilocks mănâncă trei boluri de terci; primul fiind prea fierbinte, următorul prea rece, dar ultimul "drept". "
Acum, să punem un mic divizor, astfel încât acesta să separe aspectul în secțiuni. Am folosit-o Instrumentul de linie (U) 1px gri deschis # e6e6e6 așa că este vizibil, dar nu prea puternic.
Bacsis: Ține-te jos Schimb cheie pentru a trage cu ușurință o linie perfect orizontală.
Acum, să creăm o altă secțiune care să arate mai multe produse și să o numim "populară". Oamenii caută întotdeauna validarea și arată produsele populare pe care alte persoane le-au plăcut să le dea dovadă socială că aceste produse merită banii.
Duplicat CMD + J și personalizați titlul, descrierea și produsele din secțiunea "Trending". Duplicați mai multe produse și faceți o rețea de 3x2 dintre cele mai bune produse.
După expunerea majorității vizuale pentru a evoca interesul și dorința este timpul să surprindeți informațiile vizitatorilor în cazul în care nu se simt cumpărați chiar acum, astfel încât să puteți ajunge mai târziu.
Vom include o secțiune de blog simplu care utilizează același format de titlu și de descriere și câteva fragmente din postările de blog pentru a redirecționa utilizatorii către conținut care le-ar putea interesa.
Alegeți Instrumentul dreptunghiular (U) și să deseneze un dreptunghi imens care să servească drept fundal al acestei noi secțiuni. Utilizați subțire gri deschis pentru a crea o ușoară separare de produse. Am folosit-o #fbfafa. Acum, duplicați titlul și descrierea secțiunii anterioare și plasați-le în partea de sus a fundalului nou.
Acum alegeți Instrument tip orizontal (T) și introduceți titlul, data și scurta extras din postarea pe blog. Am folosit din nou Sursă Serif Pro pentru titlu și descriere și Sursa Sans Pro pentru data.
Chiar și în acest bloc de blog veți observa o ierarhie vizuală clară, titlul fiind cel mai întunecat și cel mai mare și alte elemente mai mici și mai deschise. Folosiți întotdeauna ierarhia vizuală pentru a obține un flux logic. Pentru a menține coerența, faceți postări de blog la fel de mari ca și blocurile de produse.
Acum puneți toate straturile de postări de blog într-un grup și duplicați-l de două ori prin lovire CMD + J, plasați-l între liniile directoare verticale care părăsesc spațiile între ele ca și produsele.
După ce ați arătat câteva produse interesante și bloguri importante, este timpul să vă împingeți puțin vizitatorii și să oferiți un formular cu o chemare clară la acțiune pentru a vă abona.
Încă o dată apuca Instrumentul dreptunghiular (U), alegeți o culoare mai închisă, cum ar fi # 282723 și trageți un fundal pentru formularul nostru de abonament. Folosind un fundal vizibil mai întunecat, veți crea un contrast care va atrage automat atenția spectatorilor.
Acum scrieți o scurtă descriere explicând de ce trebuie să vă abonați; expres beneficii peste caracteristici. După aceea, navigați la navigarea designului nostru și duplicați câmpul de căutare, inclusiv butonul, îl vom reutiliza pentru formularul de abonare.
Glisați straturile duplicate și plasați-le în partea superioară a fundalului nou creat, apoi personalizați câmpurile de introducere și butonul de chemare la acțiune.
În cele din urmă, fiecare șablon trebuie să aibă un subsol cu link-uri incluse, astfel încât oamenii să poată derula în jos și să găsească navigare în paginile cheie, cum ar fi asistență pentru clienți, informații de contact, rețele sociale și multe altele.
Încă o dată, duplicați straturile de text de pe postarea de bloguri și personalizați-le pentru a afișa linkurile la alegere. Împărțiți diferite grupuri de linkuri și formați coloane care sunt distanțate în mod egal într-un rând.
Ultima atingere: adăugați o linie de drepturi de autor chiar în partea de jos a aspectului.
Asta e! În cele din urmă, am terminat designul de temă pentru magazinul nostru cu magazin alimentat, faceți-vă acum și examinați straturile de documente, ștergeți cele inutile și transmiteți-le dezvoltatorului sau, chiar mai bine, codificați-!
Accentsconagua