3 domenii importante de proiectare pe care să vă concentrați pentru fiecare construcție de site web

Bine ați venit la partea a 3-a, ultima postare din mini-seria noastră „Principii eficiente de proiectare web Divi”, în care explorăm practici eficiente de proiectare pentru a ajuta noii designeri de web și cei care se identifică ca cineva fără un „ochi pentru design”.

Acum, că am analizat pregătirea și învățarea cum să avem un ochi mai bun pentru proiectare și am trecut în revistă câteva principii de proiectare eficiente pe care să le avem în cutia noastră de instrumente, ne vom concentra pe 3 domenii foarte importante de proiectare, care sunt esențiale pentru realizarea unui site bine conceput.

Să trecem direct la asta!

3 domenii importante de proiectare pe care să vă concentrați pentru fiecare construcție de site web

Dacă ați ținut pasul cu primele două postări din această serie, m-ați auzit subliniind că nu este bine sau rău când vine vorba de proiectare, dar împreună cu principiile eficiente de proiectare pe care le-am trecut, sunt câteva , domenii practice de design pe care mă concentrez pentru a asigura de fiecare dată un site web de succes, plăcut pentru ochi. Și cea mai bună parte este că aceste idei sunt transferabile la orice tip de industrie sau stil de web design!

1) Tipografie și fonturi

Site-ul dvs. poate avea imagini frumoase, culori captivante și elemente de design plăcute, dar dacă tipul arată sau nu se potrivește stilului site-ului, acesta poate fi un factor de descurajare major. Întrucât nu intrăm în elementele de bază ale tipografiei din această serie, vă rugăm să consultați înapoi 50 de Termeni de tipografie pe care ar trebui să le cunoască (și să le înțeleagă) fiecare designer de web dacă doriți să aflați mai multe despre elementele de bază. O înțelegere a fonturilor kerning, de conducere, de urmărire, sans și sans-serif va depinde în mare măsură de persoana care caută să se îmbunătățească la tip și design.

Permiteți-mi să vă ofer câteva îndrumări practice de tipografie pe care le respect ca designer de web Divi de succes, cu clienți care diferă foarte mult în ceea ce privește stilurile de design și diferitele industrii:

Utilizați fonturi care se împerechează bine cu industria / designul site-urilor dvs. - În prima postare a acestei serii, mi-am amintit de un exemplu în care am conceput în mod auto un site care avea imagini și culori grozave, dar fontul nu se potrivea bine. Pe scurt, a fost un site industrial de fabricație și fontul pe care l-am folosit inițial era un stil mai modern, elegant, care într-adevăr nu se potrivea cu aspectul și marca companiei.

Acest lucru nu înseamnă că nu poți să fii creativ cu fonturi sau că trebuie să se potrivească cu status quo-ul din industrie, dar practic, dacă lucrezi pe un site de servicii profesionale, probabil că nu vei mai dori să fontul de top, artistic, implicat. Și vice versa, dacă lucrați la ceva cu o atmosferă unică, poate artistică, poate că Arial sau Helvetica nu se vor potrivi cu atmosfera pe care o doriți. Acest lucru mă aduce la următorul punct de amestecare și potrivire a fonturilor.

Rămâneți cu 2 până la 3 fonturi - Un principiu de bază de proiectare care a trecut testul timpului de zeci de ani este limitarea numărului de fonturi pe care le utilizați. Prea multe fonturi distrag atenția cititorului, confundă adesea ierarhia și, sincer, ajung să pară un vechi fluturaș occidental care caută o recompensă pentru un haiduc. De multe ori rămân cu un singur font pentru anteturi și titluri, apoi folosesc de obicei un font sans-serif ușor de citit pentru tot textul meu de paragraf. Uneori voi avea un font de stil 3 pentru meniul principal, dar fontul meu din meniu este adesea simplificat cu titlurile mele.

Pentru mai multe idei despre cum să împerecheați fonturile împreună, vă rugăm să consultați această postare anterioară despre împerecherea fonturilor în web design: 7 principii cheie dezvăluite și explicate

Aveți imagini vizuale cu textul dvs. - O cantitate decentă de text din conținutul dvs. este excelentă. De fapt, este recomandat să aveți cel puțin 300 de cuvinte pe pagină pentru a ajuta din perspectiva SEO. Aveți grijă însă să aveți prea mult text și să nu aveți suficiente elemente vizuale. Pentru cărți, bloguri, articole și alte tipuri de conținut de lungă durată, se așteaptă mult text, dar dacă proiectați o pagină de destinație atrăgătoare, prea mult conținut îl va plictisi pe utilizator înainte de a privi mai departe. De multe ori proiectez cu mentalitatea că prima pagină ar trebui să fie pâlnia de vânzări care îi face pe clienți să treacă prin ușă ATUNCĂ aceștia se pot scufunda în mai multe pagini, bloguri și alte resurse pentru informații mai detaliate.

Pagina de pornire Elegant Themes este în prezent un exemplu perfect în acest sens.

În acest exemplu, vedem un titlu atrăgător, un paragraf de text cu un buton de chemare la acțiune și o grafică vizuală frumoasă care se leagă în mesaj, care menține utilizatorul implicat. Acesta este un exemplu excelent de urmat atunci când organizați o cantitate decentă de text cu imagini.

Odată am avut o frumoasă pagină frontală proiectată cu text și imagini și când i-am predat-o clientului meu pentru a face editări de bază, ei aruncaseră ceea ce arăta ca un mic capitol al unei cărți pe prima pagină, care a stricat complet fluxul designului Am creat. Deci, lăsați-o să fie o lecție și să știți că, deși conținutul este minunat, trebuie să fie plasat în consecință!

O altă resursă excelentă la care să faceți referire este 20 de tendințe tipografice la care să acordați atenție în 2016, deoarece aceste tendințe sunt încă foarte valabile astăzi și vor continua.

2) Imagistica și gestionarea culorilor

Similar cu tipografia, am tendința de a rămâne cu cel mult 2 până la 3 culori primare pentru versiunile site-ului meu. Cu excepția cazului în care este o companie sau o organizație cu o mulțime de culori în branding, consider că prea multe culori (mai ales dacă nu se potrivesc bine) pot fi foarte distractive și deseori confuze. Iată câteva linii directoare pe care le respect atunci când amestec culoare și imagini:

Culori de bază și culori de accent - O metodă pe care am găsit-o foarte reușită în proiectele recente este să iau brandul unui client și, dacă nu o face deja, alegeți o culoare de accent plăcută pentru apel la acțiuni, linkuri etc. De exemplu, pe acest site-ul, am luat marca logo-ului cu gri și portocaliu și am adăugat un subțire, albastru închis / albastru pentru a ajuta la „portocaliu” ca culoare primară a accentului.

Simplificați culoarea cu imagini - O modalitate de a vă uni designul și imaginile într-un mod excelent este de a potrivi culorile site-ului web cu unele dintre imaginile principale. Acest exemplu este un pic rar, deoarece am reușit să potrivesc culorile site-ului web cu ținuta clientului meu, ceea ce a dus la o senzație foarte plăcută și simplificată între imagini și culoarea site-ului web.

Am luat o culoare frumoasă maro și portocaliu din ținuta clienților mei și am reușit să aduc întregul site împreună într-un aspect frumos uniformat. Acum veți fi rareori într-o situație în care puteți marca un întreg site de pe o imagine, dar același principiu poate fi aplicat atunci când utilizați imagini de fundal cu apel la acțiuni etc.!

Practic, dacă nu sunteți sigur cum să alegeți anumite culori, iată 10 instrumente de selectare a culorilor

Evitați-vă de culorile prea vibrante - de multe ori văd că designerii mai noi folosesc verzi super luminoase, roz, galbene, etc., care fac un strabism și se întorc de pe ecran. Nu voi arăta exemple rele aici, dar sunt sigur că ați văzut o mulțime de site-uri în care culorile v-au determinat să vă întoarceți și să nu doriți niciodată să priviți înapoi. Cu siguranță nu este nimic în neregulă cu culorile vibrante, asigurați-vă că nu dau efectul respectiv. Acesta este locul în care obținerea unor critici constructive și feedback de la alți designeri poate avea rezultate.

Recomandarea mea este să utilizați culori destul de neutre pentru culorile de bază, cum ar fi textul, grafica de fundal etc. Dacă sunteți nou în materie de design și culoarea nu este o zonă confortabilă pentru dvs., nu ezitați să consultați înapoi tehnicile noastre de potrivire a culorilor pentru proiectanții web WordPress, care vă vor oferi o mulțime de opțiuni despre cum să alegeți mai bine culorile.

3) îndemnuri puternice

În cele din urmă, un domeniu foarte important al designului web este acela de a avea un apel puternic și clar la acțiuni (CTA). Una dintre cele mai frecvente probleme ale proiectării web proaste este aceea de a avea un conținut puternic bazat pe text, fără un apel clar la acțiuni. Conținutul este excelent, dar dacă este vorba despre informații și fără conversii, clientul dvs. nu va fi mulțumit. Vă recomandăm să vă distingeți CTA de alte elemente din designul dvs. cu o culoare de accent sau un efect de plutire frumos.

Iată un exemplu despre cum am implementat un îndemn la un client recent.

În acest caz, apelul principal la acțiune al clientului pentru utilizatorii site-ului web este să se înregistreze pentru actualizări prin e-mail, așa că, chiar de pe bat, avem logo-ul care apare dintr-o imagine de fundal mai închisă, un pic de text cu posibilitatea imediată de a vă înscrie înainte chiar de a derula în jos. În mod ideal, doriți să atrageți atenția utilizatorului asupra îndemnului dvs. la acțiune. Aici este extrem de benefic să aveți un accent vibrant de culoare sau efect pe un site.

Iată câteva linii directoare la care mă refer când vine vorba de apel la acțiuni:

Încheiați pagina de pornire cu un îndemn puternic la acțiune - Cel mai adesea, proiectele paginii mele de pornire sunt aproape o recapitulare a site-ului în ansamblu. De exemplu, dacă un site are o structură ca aceasta:

• Despre noi
• Servicii
• Mărturii
• Blog
• a lua legatura

Voi face un apel la acțiune pentru fiecare dintre acele secțiuni din pagina de pornire, apoi un design final și elegant pentru apelul principal la acțiune, care în acest caz ar fi să vă înscrieți. Iată un prim exemplu despre ceea ce vreau să spun:

Prima pagină cuprinde în esență întregul site și este un punct de plecare pentru utilizatori pentru a da clic pentru a vizualiza galerii, videoclipuri și mai multe informații. Poate că această mentalitate vă va ajuta ca în proiectarea paginii dvs. de pornire!

Apelați la acțiune în bara laterală - Nu uitați de oportunitatea unui apel puternic la acțiune în bara laterală! Mai ales dacă aveți un site cu postări pe blog sau alte pagini care folosesc frecvent o bară laterală. Aceasta este o oportunitate excelentă de a pune un e-mail suplimentar pentru a vă înscrie, pentru a da un buton de donație sau pentru a vă conecta la un alt CTA principal.

Similar cu site-ul de mai sus, unul dintre principalele apeluri la acțiuni pentru site-ul meu personal este înscrierea prin e-mail și, deși este în fața și centrul paginii mele de pornire, am vrut să fiu sigur că o voi face foarte evidentă și pe postările mele de blog și pe paginile tutoriale .

Aici, îl am în partea dreaptă sus a fiecărui șablon de postare, împreună cu un vizual puternic deasupra și dedesubtul formularului principal de înscriere. Deci, dacă aveți pagini cu bare laterale, nu uitați că acele zone sunt proprietăți imobiliare valoroase pentru un puternic apel la acțiuni! Și doriți să fiți siguri și să faceți ca CTA să fie vizibil și, de preferință, în partea de sus a barei laterale, care va apărea mai întâi pe mobil sub conținutul principal.

Faceți un îndemn după conținutul subpagini - În cele din urmă, și poate cel mai ignorat, este să vă amintiți să aveți un îndemn la paginile dvs. normale! Am ignorat acest lucru până acum, de curând, când a fost solicitat de un client. Exemplul de mai jos are un puternic apel la acțiune la sfârșitul paginilor lor principale de servicii.

Când un utilizator al site-ului web vizualizează acea pagină, va primi toate informațiile, apoi va avea șansa să-mi contacteze clientul dacă este interesat cu o imagine drăguță și primitoare în dreapta și butonul CTA din stânga susținut de o portocală vibrantă care ajută acea secțiune deschideți pagina. Da, știu că am spus într-o postare anterioară că de obicei îmi pun CTA-urile în mijloc sau în dreapta, dar acest aspect părea să funcționeze frumos

Seria Wrap Up

Ei bine, sper că această serie v-a ajutat să vă inspire cu câteva principii și tactici bune de web design pe care le puteți aplica eforturilor dvs. de web design! Să facem o recapitulare rapidă a ceea ce am trecut în întreaga mini serie:

Partea 1

• Pregătirea mentalității
• Cum să înveți tendințe bune de proiectare
• Obțineți feedback și critici constructive asupra muncii dvs.

Partea 2

• Urmați regula treimilor
• Aspect și flux
• Ierarhia vizuală

Partea 3

• Tipografie și fonturi
• Imagini și culoare
• Îndemnuri puternice

Din nou, studii academice întregi au fost dedicate unui design bun, așa că zgâriem doar suprafața aici, dar speranța mea este că aceste principii și practici au ajutat să îi îndrepte pe cei dintre voi care doresc să se îmbunătățească la proiectare în direcția corectă. Dacă aveți alte principii sau metode de proiectare care v-au ajutat pe care doriți să le împărtășiți, nu ezitați să ne anunțați în comentariile de mai jos!

Iată-ne pe noi toți devenind mai buni designeri web Divi în fiecare zi!

Asigurați-vă că vă abonați la newsletter-ul nostru de e-mail și la canalul YouTube, astfel încât să nu pierdeți niciodată un anunț mare, un sfat util sau un cadou gratuit Divi!