Unul lucru care va duce site-ul dvs. la nivelul următor și cum se face

Ați deschis vreodată un site web și ați făcut imediat clic pe acesta din nou de cursul pe care l-ați avut. Când design-ul unui site este neplăcut, ești acolo mai repede decât vinul Cersei găsește vin A PRIMIT. Într-o lume în care toată lumea se străduiește să lovească ochii, site-urile prost proiectate se pregătesc pentru eșec.

Niciodată nu vă temeți, v-am văzut. În calitate de designer grafic, am site-uri web pentru clienții care folosesc Squarespace (platforma mea preferată de alegere), ajutându-i să optimizeze design-ul site-ului pentru brandul și afacerea lor. Am condensat sfaturile mele de top pentru a crea un site frumos si functional pe care orice incepator sa-l poata urma. În plus, oferim cititorilor noștri 10% din prima achiziție Squarespace cu codul de cupon EVERYGIRL18. Scor. Prinde-ți notebook-ul (sau tastatura) și hai să facem asta.

Începeți cu o moodboard

Primul lucru pe care îl fac atunci când încep un nou proiect de design grafic este crearea unui moodboard - în esență, un plan de unde vreau să meargă proiectul. Pentru referință, iată un exemplu de moodboard pe care l-am creat anul trecut pentru un proiect. Tabelele Mood sunt un instrument esențial în definirea esteticului brandului dvs. - aspectul pe care doriți să-l atingeți, sentimentul pe care doriți să-l evocați, elementele specifice care vă sună. Ai scos vreodată fotografiile dintr-o revistă și le-ai salvat în grămezi ca niște foi de copii curajate * Suspire * Oh, cum mi-e dor de zilele de moodboarding analogic.

Dacă nu sunteți un designer grafic, puteți crea rapid și cu ușurință placi de bază utilizând Pinterest. Tabelele secret sunt un instrument fantastic pentru curățarea imaginilor - începeți prin a fixa orice și tot ceea ce vă atrage ochiul. Apoi, întoarceți-vă prin noua placă și începeți să eliminați lucruri care nu sunt chiar corecte. Nu simțiți că trebuie să vă limitați la imagini care conțin fonturi sau elemente de marcă - fixați-vă orice vă captează ochiul! Gândiți-vă cum imaginile vă fac să vă simțiți. Ce vrei să facă marca ta? vorbi pentru clienții sau audiența dvs. După ce v-ați pregătit consiliul, veți avea la dispoziție un ghid de referință pentru aspectul și aspectul mărcii dvs. pe care îl puteți revizui din nou și în timp ce vă configurați site-ul.

Alegeți complimentaryyafonts + culori și editați-vă când este necesar

Fonturi

Știu că poate fi tentant să joci cu LOTURI de fonturi (Squarespace are oudele de ales) atunci când instalezi site-ul tău, dar pasul departe de tastatură și ascultă pentru aysec. Prea multe fonturi sau fonturi care sunt toate similare în design vor fi confuze pentru ochi și vor fi stresante sau neplăcute pentru clienți sau clienți să se uite la site-ul dvs. Clienții și clienții stresați nu sunt ideali atunci când vă gândiți în ceea ce privește rata de respingere, întoarcerea spectatorilor și a globilor de ochi pe care doriți să rămâneți pe site-ul dvs. suficient de lungă pentru a cumpăra ceva (cel puțin).

Ca designer, aceasta este una dintre cele mai frecvente greșeli pe care le văd pe site-uri sau materiale de branding colaterale (cărți de vizită, foi cu antet, etc.), dar vestea bună este că este o rezolvare ușoară când vă amintiți aceste sfaturi:

  • Alegeți trei fonturi la MOST. Editați, oameni! Din fericire, Squarespace face acest lucru ușor prin crearea de fonturi consecvente pe site-ul dvs. Alegeți fonturi pentru rubrica 1, rubrica 2, rubrica 3 și paragraful (textul corpului) și Squarespace vor popula automat aceste fonturi ori de câte ori folosiți titluri sau text pe site-ul dvs. VICTORIE.
  • Încercați să alegeți o serif (un tip de tip ce înflorește la sfârșitul literelor, precum Times New Roman) și a san serif (o tipă de text fără flori ca Open Sans) care sunt gratuite. Sau, du-te cu două serifi san sau două serifi care sunt suficient de diferite pentru a distinge ochiul. Folosind două stiluri diferite de fonturi, titlurile și subcapitolele dvs. vor crea o juxtapunere plăcută pe site-ul dvs., facilitând citirea și dând-o o poloneză profesională. Mai jos, ți-am făcut acest ghid la îndemână pentru unele dintre combinațiile mele preferate - toate disponibile pe Squarespace - pentru a începe. Cu plăcere. (Asigurați-vă că îl fixați mai târziu!)
  • Fii atent cu fonturile de script. Utilizarea lor excesivă este foarte ușor de făcut - un pic merge mult.
  • Nu folosiți niciodată Sansuri Comice. Ești mai bine decât asta.

Culoare

Următorul este culorile - partea distractivă! Aruncați o privire înapoi la moodboard-ul dvs. (v-ați spus că va veni la îndemână) și scoateți culorile care apar de peste si peste din nou. Odată ce ai aceste culori, gândește-te la psihologia culorii - îmi place acest ghid de la Spruce Rd. Ce culori se potrivesc cu cuvintele cheie pe care le asociați cu marca dvs. Dacă marca dvs. are legătură cu armonie și încredere, luați în considerare nuanțele de albastru. Dacă sunteți mai mult despre energie și pozitivitate, încercați galben. Rafinați-vă nuanțele până când veți lovi un grup - aș spune cel mult cinci sau șase - că vă place. Asigurați-vă că salvați culorile specifice pentru utilizare ulterioară - aici este un instrument excelent pentru găsirea codului hexazecimal al unei culori dintr-o imagine, dacă nu aveți niciun software de design precum Photoshop sau Illustrator.

Puteți copia cu ușurință un cod hexazecimal în Squarespace pentru a utiliza acea culoare exactă pe site-ul dvs. - iată cum:

Înțelegeți ierarhia + echilibrul

Amintiți-vă că Oscar-uri infamate snafu Toate acestea ar fi putut fi evitate cu ierarhia - așa e critică ~ poate fi la un design.

Sursa: Bine

Crearea unei ierarhii pe site-ul dvs. prioritizează textul pe care vreți să-l vedeți mai întâi pentru spectatori - gândiți-vă la apeluri îndrăznețe la acțiune, la titluri de produse etc. Folosind ierarhia clasifică conținutul și creează o cale pentru un ochi al spectatorului să călătorească - site-ul dvs. modul în care intenționați să fie văzut.я Aici este un exemplu de modul în care am creat ierarhia pe unul dintre site-urile mele Squarespace:

Echilibrul este la fel de important ca și ierarhia, deoarece ancorează site-ul dvs. șialipsurile o fac mai plăcută ochiului - cheia pentru a păstra spectatorii. Fiecare element din pagina dvs. are o anumită greutate care ar trebui să fie echilibrată. Culorile închise și liniile mai groase sunt mai grele, culorile mai ușoare și liniile mai slabe sunt mai ușoare. Iată un exemplu despre cum am creat echilibrul pe unul dintre site-urile mele Squarespace:

Fii strategic cu spațiul alb

Îmi iubesc spațiul alb. Ori de câte ori cineva mă întreabă să-mi dau opinia de proiectare despre ceva pe care l-au creat, sfatul meu inevitabil este mai mult spațiu alb! Primul lucru de reținut este că prin spațiul alb, designerii înseamnă spațiu negativ sau absența elementelor de design, a textului sau a imaginilor. Spațiul nu trebuie neapărat să fie alb pentru a se califica.

Gândiți-vă la asta, oferind elementelor voastre să respire. Așa cum nu ați folosi o fotografie cu jumătate din vârful capului tăiat, nu doriți să adăugați text și imagini pe site-ul dvs. atunci când acestea sunt prea aproape împreună - se va desprinde ca fiind înghesuită și inconfortabilă ochi. Mai mult spațiu alb, un design mai curat și mai modern. Îmi place instrumentul de distanțare în Squarespace pentru a crea cu ușurință un spațiu alb în jurul elementelor tale atunci când trebuie. Iată un exemplu:

Creați grafică consistentă

Consistența este cheia în crearea unui site care curge ușor de la un element la altul, de la o pagină la alta. Utilizând aceleași fonturi, culori și imagini pe site-ul dvs. web, veți crea un design raționalizat și veți fi mai ușor de realizat pe termen lung. Câștigați, câștigați.

Atunci când faceți site-ul dvs. sau după finalizarea site-ului dvs., este posibil să aveți nevoie de grafice - cum ar fi imaginile care pot fi postate pe blog, fișele de verificare descărcate, posturile Instagram etc. - pentru a se integra perfect cu designul site-ului dvs. web. Crearea de șabloane pentru aceste grafice va accelera fluxul zilnic de lucru și vă va asigura că site-ul dvs. și canalele sociale sunt întotdeauna profesionale. Dacă nu aveți acces la Photoshop sau Illustrator, recomand să utilizați fie Powerpoint, fie Canva pentru a crea grafica, ambele vă permit să salvați șabloane.

Iată un bun șablon de pornire pentru un grafic postat pe blog:

Iată un bun șablon de pornire pentru un grafic text Instagram:

În cele din urmă, simplu nu înseamnă simplist

Amintiți-vă că un site frumos nu trebuie să fie plin de elemente - de fapt, foarte puține site-uri frumoase în aceste zile sunt. Site-urile minime sunt plăcute ochilor și adesea mai rapide / mai ușor pentru începători pentru a le produce. Squarespace o face ușor cu o mulțime de șabloane pre-făcute, care sunt atât de minunate și funcționale. Bing Bing Bang făcut.

Nu uitați să utilizați codul de cupon EVERYGIRL18 pentru o reducere de 10% față de prima dumneavoastră achiziție!

Aveți întrebări cu privire la designul site-ului dvs. Împărtășiți-vă în comentariile de mai jos și designerul grafic vă va oferi feedback!

Acest post a fost în parteneriat cuSquarespace, dar toate opiniile din cadrul acestora sunt cele ale consiliului de redacție.