3 principii eficiente de web design pentru „Non-Designer”

Bine ați venit la partea 2 a mini-seriei noastre „Principii eficiente de proiectare web Divi”, unde explorăm practici eficiente de proiectare pentru a contribui la împuternicirea noilor designeri de web și a celor care se identifică ca cineva fără un „ochi pentru design”.

În postarea noastră anterioară, am tratat pregătirea mentalității dvs. și am trecut în revistă câteva modalități de a învăța cum să dezvoltați un ochi mai bun pentru design. În această postare, ne vom concentra pe câteva principii universale ale unui bun design pe care le puteți aplica imediat eforturilor dvs. de web design pentru a deveni mai buni la partea „design” a designului web.

Să trecem direct la asta!

3 principii eficiente de web design pentru „Non-Designer”

Așa cum s-a menționat în partea 1 a acestei serii, nu este bine sau rău când vine vorba de proiectare. Ceea ce vom trece în revistă în această postare este larg acceptat și universal ca principii bune de proiectare în cadrul comunității de design web în general. Aceasta este, de asemenea, ghidul meu personal, în calitate de designer grafic / tipărit transformat în web designer Divi cu aproape un deceniu de experiență și, mai important, sute de clienți fericiți și mulțumiți. Folosesc aceste principii pentru fiecare proiectare a site-ului web Divi pe care o construiesc și, deși există întotdeauna acel client care dorește ceva atroc sau în afara peretelui, acestea vă vor servi bine de cel puțin 9 din 10 ori

1) Regula treimilor

Una dintre cele mai frecvente practici de design web, design grafic, print print, fotografie și alte medii creative este de a urma o regulă simplă - Regula treimilor. Pe scurt, regula treimilor se referă la simetrie și echilibru. Obiectivul regulii treimilor este menit să vă ajute să obțineți mai mult echilibru și armonie în design. Și cea mai bună parte este - puteți aplica Regula treimilor la grafică, imagini, machete întregi de pagini web și multe altele!

Există numeroase conversații online dacă Regula treimilor este științifică sau nu, dar, indiferent, opinia populară arată că, dacă o imagine sau un design este prea asemănător atât în ​​jumătatea stângă, cât și în jumătatea dreaptă sau sus și jos, publicul ar putea să o găsească plictisitoare sau plictisitoare. Dacă este ceva, regula treimilor o păstrează interesantă și poate duce la un flux bun pe care îl vom acoperi mai jos.

În postarea noastră anterioară despre Sfaturi de proiectare pentru a vă optimiza conținutul web Divi, este, de asemenea, menționat ca un sistem de rețea, care este o modalitate excelentă de a vă gândi vizual la asta. Imaginați-vă o grilă care arată astfel:

Cu această grilă imaginară pe imagine, grafic sau aspect, puteți plasa cu ușurință conținut lângă unul sau mai multe dintre punctele principale de intersecție.

Păstrarea obiectelor și a punctelor focale la 1 sau mai multe dintre cele 4 puncte de intersecție va obține adesea un aspect mult mai echilibrat și simetric spre deosebire de al doilea exemplu în care subiectul se află sub punctul de intersecție. Uitați-vă la imaginea de mai jos. Primul exemplu NU respectă regula treimilor.

Acest exemplu urmează regula treimilor.

În timp ce primul exemplu este încă o imagine frumoasă, utilizarea regulii treimilor oferă o senzație complet diferită imaginii prin intersecția prim-planului cu punctele de intersecție inferioare în regula treimilor. Să privim imaginea cu grila regulii de treimi.

Acum să privim imaginea fără a alinia regula intersecțiilor treimi.

Puteți vedea o mare diferență în ceea ce privește modul în care desenele plăcute ochiului se vor alinia adesea cu unul sau mai multe puncte de intersecție. În timp ce regula de treimi este cel mai frecvent vorbită în fotografie și videografie, este la fel de importantă pentru proiectarea site-urilor web. Vă voi arăta cum am aplicat regula treimilor pe site-ul meu personal. Iată un instantaneu al designului inițial „deasupra pliului”, care se aplică la ceea ce vede vizualizatorul înainte de a derula în jos.

Acum, să punem regula grilei de treimi peste secțiunea principală și să vedem cum arată. În acest caz, mă voi concentra asupra conținutului de sub meniul principal unde am implementat regula treimilor.

În acest exemplu, există 4 elemente principale care se află pe sau aproape de punctele de intersecție. Pe scurt, am vrut să accentuez următoarele:

1. O scurtă descriere despre cine sunt și despre ce este acest site.
2. O imagine care permite utilizatorilor noi să se simtă mai confortabil și mai de încredere, văzând de la cine vor auzi.
3. Un grafic al ultimei mele cărți electronice care oferă oamenilor un motiv pentru a se înscrie.
4. În cele din urmă, un e-mail de îndemn înscrie-te în ultimele 2 cadre, unde se va termina ochiul utilizatorului.

Cu regula treimilor, în general nu este cea mai bună practică să ai ceva la fiecare punct de intersecție (în special în fotografie), dar urmez adesea acest aspect în versiunile mele de site-uri web. Și într-o notă laterală: din moment ce citim de la stânga la dreapta, am adesea îndemnuri în partea centrală sau dreaptă a ecranului, deoarece acolo se termină ochiul nostru. Vom face apel la acțiuni mai detaliat în postarea finală a acestei serii, dar acesta este un bun exemplu în care am implementat Regula treimilor în proiectarea mea.

Deci, dacă nu sunteți sigur cu privire la modul de configurare a unei pagini web sau vă confruntați cu amestecarea imaginilor, a textului și poate a unui îndemn, încercați să respectați regula treimilor și lăsați-l să fie ghidul dvs.

2) Aspect și flux

Când vine vorba de amenajarea și proiectarea unei pagini web, nu există din nou un stil corect sau greșit. Depinde adesea de proiect, de dorințele clientului dvs., de stilul dvs. de design și de multe ori de piața pe care o vizați. De cele mai multe ori, în digital sau servicii precum agențiile de design web, modă și fotografie, designuri mai moderne și la modă, cu un aspect minimalist. Cu designul modern vine adesea mai mult spațiu deschis, mai puțin conținut bazat pe text, mai multe imagini și poate mai multe derulare. (Unii dintre clienții mei de modă veche tocmai s-au cutremurat!)

Pe piețele de afaceri mai tradiționale, cum ar fi industria prelucrătoare, firmele de avocatură, industriile cu guler albastru etc., veți găsi probabil site-uri web cu mai mult conținut bazat pe text, mai puțin spațiu deschis și, fără îndoială, cu imagini și elemente de design care sunt mai puțin ... atrăgătoare. Și, indiferent de motiv, majoritatea clienților mei din aceste industrii se opun sever unei defilări prea mari. Deci, știind cum să proiectezi un aspect cu un flux bun este cheia! Am constatat adesea că trebuie să încerc să echilibrez stilul MEU de design creativ cu ceea ce funcționează în industria clientului meu, țintă demografică și dorințele și nevoile clientului meu. Cu toate acestea, există câteva aspecte de bază și principii de flux care pot fi aplicate indiferent cu cine lucrați sau în ce industrie se află.

Privind înapoi la postarea anterioară menționată mai sus, un ghid foarte important de urmat este un model z al designului. Veți găsi acest lucru frecvent cu multe dintre noile kituri de layout profesionale Divi care sunt furnizate săptămânal.

Să aruncăm o privire la ce vreau să spun.

În primul exemplu din stânga, există o imagine în stânga, text în dreapta cu un buton frumos de îndemn, apoi ochiul tău citește și în stânga într-o altă secțiune de text / CTA, apoi cu o altă imagine în dreapta și repetă. Vis-versa, pe imaginea din dreapta, există un model inversat. Textul din imagine în imagine în text etc. Urmarea acestui model de stil z este o modalitate excelentă de a menține cititorii interesați și este o modalitate minunată de a echilibra textul și imaginile împreună.

Aceasta nu este „singura opțiune pentru aspectul în flux într-un design bun al paginii, dar este o bună practică fiind că luăm conținut de la stânga la dreapta, apoi în jos. Apoi, de la stânga la dreapta, apoi în jos și așa mai departe. Deci, dacă aveți dubii, încercați să urmați modelul stilului z ca modalitate de a ajuta la organizarea fluxului de conținut al paginii. Și o ultimă notă despre derulare - am tendința de a-mi păstra site-urile în 3-5 pergamente. De cele mai multe ori, cu cât trebuie să derulați mai mult, cu atât pagina va fi mai mare și se va încărca mai lent. Din nou, nu există niciun drept sau rău în ceea ce privește derularea, dar dacă nu ați lucrat încă cu clienți cu o mentalitate mai veche, aveți garantat că veți întâlni o anumită opoziție. Încerc să-i reafirm pe acei clienți că derularea nu este de temut. Rețelele sociale ne-au instruit să derulăm constant și să preluăm conținut rapid.

3) Ierarhia vizuală

Ultimul principiu principal pe care aș dori să-l subliniez aici este ierarhia vizuală. Pe scurt, ierarhia îi ajută pe utilizator să știe care sunt cele mai importante informații și le oferă o direcție foarte clară de unde ar trebui să meargă ochiul în proiectarea dvs. Ierarhia este adesea menționată cu tipografie (în care vom intra în a treia postare), dar poate fi, de asemenea, foarte importantă în elementele grafice, imaginile și designul general al site-ului.

Nu am de gând să subliniez intenționat site-urile pe care le simt lipsă în departamentul „design bun”, dar sunt sigur că ați dat peste o mulțime de site-uri care au un smorgasbord de text și imagini care sunt toate de aceeași dimensiune, fără o claritate chemare la acțiuni, nu? Asta vrem să evităm. Folosirea unei ierarhii bune este cel mai bun mod de a vă ghida utilizatorul site-ului web să știe pe ce ar trebui să facă clic sau să facă în continuare.

Iată un exemplu de design recent pe care l-am creat având în vedere ierarhia:

În timp ce sigla și numărul de telefon din partea dreaptă sus sunt clar mari și vizibile, cel mai mare conținut și cea mai vibrantă culoare de deasupra pliantei este îndemnul la acțiune pentru a face clic pe buton.

Clientul meu a dorit în mod specific ca oamenii să solicite cu ușurință o inspecție chiar atunci când au intrat pe site, așa că am folosit această idee de ierarhie vizuală pentru a reuși să sperăm exact asta! Un alt exemplu al modului în care am folosit ierarhia recent este designul de deasupra paginii de pe acest site:

În acest caz, apelul principal la acțiune al clientului este de a cumpăra online sau de a le contacta direct. Sigla, descrierea scurtă și chiar numărul de telefon sunt predominante, dar butonul dublu Divi este cel mai mare element pe care îl vedeți inițial, în speranța de a determina utilizatorii să facă clic pe ceea ce caută dacă nu derulează mai departe.

Așadar, din nou, deși acestea sunt doar câteva exemple de ierarhie vizuală, aceasta poate fi o metodă foarte puternică în direcționarea utilizatorilor site-ului dvs. web să facă ceea ce doriți să facă sau să meargă acolo unde doriți să meargă! Deoparte, vă recomand să verificați postarea noastră anterioară despre Erori comune de proiectare web de evitat.

În încheiere

Sper că aceste principii eficiente de proiectare v-au ajutat în eforturile dvs. de proiectare, indiferent dacă sunteți nou în designul web sau căutați să vă îmbunătățiți designul! Din nou, există multe principii pe care le-am putea trece, dar acestea sunt primele 3 care încearcă să le pună în aplicare în toate proiectele mele de site-uri web.

Dacă aveți alte principii de proiectare pe care doriți să le împărtășiți, anunțați-ne în comentariile de mai jos!

Mâine: 3 domenii importante de proiectare pe care să ne concentrăm pentru fiecare construcție de site-uri web

Acum, după ce ne-am ocupat de pregătirea mentalității noastre, cum să învățăm să avem un ochi mai bun pentru design și am trecut peste câteva principii de bază de proiectare, postarea noastră finală va explora câteva dintre cele mai importante aspecte ale designului web pe care să ne concentrăm pentru fiecare construire a site-ului web. Pana atunci!

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!