Principii de bază pentru proiectarea site-ului web

Știi că ai nevoie de un site web – sau poate ai nevoie de o reproiectare a site-ului web – dar țipi la cuvintele HTML, CSS și Java. La urma urmei, nu sunt chiar cuvinte în engleză. Sunt nume de limbi complet diferite, care arată ca o supă cu alfabet pentru cei neinițiați. Ei bine, relaxează-te. Pentru că principiile de proiectare a site-urilor web abordate aici nu au nimic de-a face cu codificarea.

‌ Aceste instrucțiuni vă vor ajuta să profitați la maximum de orice instrument de creare de site-uri pe care îl utilizați. Vă vor direcționa către cele mai bune șabloane, imagini și reguli de reținut.

Acest articol acoperă:

• Ierarhie vizuală
• Aspecte Gutenberg, Z și F
• Raportul de aur
• Regula treimilor
• Teoria culorii
• Teoria gestalt
• Spațiu negativ și minimalism
• Design optimizat pentru mobil

Indiferent dacă doriți să creați un site web personal care să vă dezvolte marca sau doriți o reîmprospătare în designul site-ului web pentru întreprinderile mici, țineți cont de aceste principii.

Ierarhie vizuală

Ierarhia vizuală este importanța relativă pe care privitorul o acordă unui set de obiecte diferențiat vizual.

Acesta este un mod elegant de a spune că atunci când te uiți la o grămadă de lucruri, ai tendința de a te concentra asupra lucrurilor care ies în evidență. Acorzi mai multă atenție obiectelor proeminente.

Cum se joacă asta? Ei bine, dacă vizualizați un grup de imagini de diferite dimensiuni, veți acorda în mod natural importanță imaginilor mai mari decât celor mai mici. Dacă te uiți la o grămadă de cuvinte care sunt negre și unul scris în magenta, vei gravita spre cuvântul magenta.

Te poți juca cu mai multe elemente diferite pentru a stabili ierarhia vizuală și a atrage atenția privitorului acolo unde vrei. Acestea includ:

• Dimensiunea și scara. Dimensiunea relativă contează, dar și scala contează. Dacă ceva este în mod clar mai mare sau mai mic decât „ar trebui” să fie, îl vei observa.
• Concentrează-te. Imaginile și fonturile nefocalizate par mai îndepărtate decât cele cu focalizare clară.
• Culoare. Schimbările de culoare, nuanță sau intensitate pot atrage toate privirile.
• Font. Dimensiunea textului, fontului și efectelor vă ajută să clasați informațiile pe o pagină.
• Circulaţie. Dacă o imagine sare într-o pagină altfel statică, o veți observa pe cea care se mișcă, dar aveți grijă. Prea multă mișcare poate dezorienta.
• Spațiu negativ. Puteți izola elementele cheie pentru a le face să iasă în evidență din zonele mai populate ale paginii.

Veți observa că multe dintre aceste principii de design de site-uri web pornesc de la un loc intuitiv. Profitați de ierarhia vizuală evidențiind informațiile și elementele vizuale importante.

Aspecte Gutenberg, Z și F

Organizarea este o altă modalitate de a stabili ierarhia. Puteți utiliza obiceiurile naturale de vizualizare pentru a plasa informațiile și oportunitățile cele mai importante - cum ar fi formularele de înscriere prin e-mail cruciale pentru strategia de marketing pentru comerțul electronic - acolo unde este probabil ca browserele să se întrerupă.

Cele trei modele cele mai utilizate sunt aspectul Gutenberg, aspectul Z și aspectul F. Fiecare folosește principii distincte de design de site-uri web.

Aspectul Gutenberg

Cel mai simplu dintre cele trei poate fi foarte eficient atunci când este utilizat corect. Aspectul Gutenberg împarte pagina în patru cadrane. Deoarece citiți de la stânga la dreapta și de sus în jos, acordă o importanță relativă fiecărui cadran, respectiv.

‌ Cele mai importante informații ar trebui plasate în cadranele din stânga sus și din dreapta jos. Materialul de importanță medie aparține cadranului din dreapta sus. Colțul din stânga jos ar trebui să găzduiască doar informații și imagini care pot fi scanate rapid sau ignorate cu totul.

Aspect Z

Aspectul Z funcționează cel mai bine pentru paginile minimaliste care nu trebuie să prezinte o mulțime de informații. Profită de aceleași practici generale de lectură, dar trage un model diferit prin ele.

Vizualizatorul scanează orizontal (de la stânga la dreapta) în partea de sus a paginii, taie în diagonală din dreapta sus până în stânga jos, apoi se deplasează orizontal în dreapta jos.

În aspectul Z, plasați materialul la fiecare dintre cele patru colțuri și în centrul diagonalei.

Aspect F

Aspectul F funcționează mai bine atunci când doriți să includeți mai mult - mai mult totul, dar mai ales mai mult text.

Când scanați o pagină mai lungă și mai mult populată, veți scana de la stânga la dreapta și de sus în jos. Informațiile trebuie organizate simetric, de-a lungul liniilor orizontale.

Raportul de aur

Principiile bune de design de site web vă pot ajuta, de asemenea, să determinați proporțiile pentru fiecare secțiune a unei pagini web. Proporția de aur – numită uneori proporții divine sau la care se face referire cu litera greacă phi – se referă la un raport pe care oamenii îl găsesc în mod natural atrăgător sau chiar frumos.

Apare atunci când aveți un segment de linie împărțit în două fragmente de dimensiuni diferite. Raportul dintre fragmentul mai mare și întregul este egal cu raportul dintre fragmentul mai mic și cel mai mare.

Dar nu este nevoie să încerci să scoți la iveală ceea ce îți amintești despre ecuațiile pătratice din clasa a șaptea. Tot ce trebuie să-ți amintești este numărul 1.618 (și într-adevăr, 1.6 va face).

Dacă aveți o suprafață totală X și doriți să știți cât de mare ar trebui să fie jumătatea dvs. mai mare, împărțiți X la 1,618. Ușor de gălăgie.

Sfat rapid: dacă încercați să vă dați seama cât de mare este o imagine, puteți face clic dreapta (Windows) sau control-clic (Mac) pe ea și selectați „Inspectați”. În partea dreaptă a paginii, puteți obține o mulțime de informații despre imagine, inclusiv dimensiunea acesteia în pixeli sub „Calculat”.

Regula treimilor

Este timpul să ne uităm la principiile de proiectare a site-urilor web pentru imaginile în sine. Ați învățat deja unde să le puneți și ce dimensiune ar trebui să aibă. Regula treimilor este o regulă simplă pentru compoziția foto.

Dacă împărțiți imaginea în trei secțiuni egale pe verticală și trei secțiuni egale pe orizontală, creați o grilă. Conform regulii treimii, ați dori să plasați stimuli vizuali de-a lungul acestor linii și/sau în punctele lor de intersecție.

Așa cum ești programat să găsești raportul de aur frumos, ești programat să găsești imagini care folosesc regula treimii dinamice și interesante.

Teoria culorii

Teoria culorilor poate fi copleșitoare, deoarece există atât de multe modalități de a o face corect - pentru a avea o schemă de culori coerentă care să transmită impresia corectă. Este unul dintre acele subiecte pe care le poți explora mult mai în profunzime.

Pentru prezentarea generală a acestui începător, poate doriți să aveți o roată de culori la îndemână.

Iată patru moduri diferite de a alege culorile mărcii și ale site-ului web care se armonizează:

1. Treci monocromatic. Nu trebuie să fie plictisitor. Utilizați o varietate de nuanțe și nuanțe pentru a crea contrast.
2. Mergi complementar. Potriviți-vă culoarea primară cu un accent desenat din opusul său polar pe roata de culori - violet și galben, de exemplu.
3. Mergi analog. Alegeți trei culori care se află una lângă alta pe roata de culori.
4. Treci triadic. Desenați un triunghi echilateral - unul cu trei laturi egale - în roata dvs. de culori și folosiți culorile pe care le găsiți în cele trei puncte.

Pe măsură ce alegeți culori, ar trebui să vă gândiți și la căldura lor. Culorile reci au mai mult albastru în ele - pot părea dure sau triste, dar sunt și liniștitoare. Culorile calde au mai mult roșu și galben - se pot simți pasionate și incitante, dar pot părea și agresive în anumite utilizări.

Teoria gestalt

Teoria Gestalt a fost de fapt dezvoltată de psihologi ca un cadru pentru înțelegerea procesării cognitive.

În esență, teoria gestaltului spune că atunci când te uiți la un set complex de elemente vizuale, faci unul dintre două lucruri:

• Vedeți mai întâi un întreg coerent și apoi vedeți părțile sale
• Vedeți mai întâi un întreg confuz și apoi încercați să-l descompuneți în părți sau grupuri mai simple

Există șapte principii de design de site-uri extrase din această teorie de bază:

1. Legea asemănării. Grupați lucrurile după asemănare. Lucruri similare merg împreună.
2. Legea proximității. Grupați lucrurile în funcție de regiunile comune sau de distanța relativă dintre ele. Lucrurile care sunt apropiate aparțin împreună.
3. Legea simplității. Oamenii văd obiectele ambigue în cei mai simpli termeni posibil. De exemplu, veți percepe cercurile care se suprapun doar ca asta - mai degrabă decât ca o colecție de arce.
4. Legea continuității. Oamenii sunt mai predispuși să vadă lucrurile ca fiind continue decât ca separate. Veți urmări obiectele de-a lungul căilor sau curbelor.
5. Legea percepției. Oamenii văd figuri – sau puncte focale – și fundaluri. Lucrurile stau în relație cu alte lucruri.
6. Legea închiderii. Oamenii completează informațiile lipsă pentru a înțelege lucrurile. O linie întreruptă este încă o linie.
7. Legea simetriei. Oamenii văd lucrurile simetrice ca fiind legate.

Folosiți aceste principii pentru a ajuta spectatorii să interpreteze informațiile pe care le oferiți.

Spațiu negativ și minimalism

Acestea două aparțin împreună, deoarece ambele sunt principii de proiectare a site-urilor web anti-aglomerație.

Spațiul negativ este tot spațiul alb – sau altfel gol – care păstrează site-ul dvs. web să arate curat și elegant. Nu copleși privitorul cu stimuli vizuali. Asigurați-vă că aveți o mulțime de alb pentru a distanța lucrurile.

De asemenea, nu doriți să copleșiți privitorul cu prea multe informații sau prea multe opțiuni. Mai puțin este cu siguranță mai mult - îmbrățișează minimalismul.

Când oferi prea multe informații, elementele importante se pierd. Atunci când dați prea multe comenzi sau opțiuni, este mai puțin probabil ca vizitatorul să aleagă vreuna, depărtând în schimb de site-ul dvs.

Design optimizat pentru mobil

Unul dintre cele mai importante principii de proiectare a site-ului web este să vă asigurați că site-ul dvs. este atractiv și ușor de utilizat pe toate dispozitivele.

Nu forțați vizitatorii să încerce să-și tragă drumul în jurul aceleiași pagini statice pe care le-ar primi pe desktop. Utilizați instrumente care adaptează cu ușurință site-urile web pentru utilizatorii de telefonie mobilă, cu interfețe ușor de defilat.

‌ Acest lucru nu numai că previne frustrarea vizitatorilor, dar este și un factor important de optimizare a motoarelor de căutare (SEO). Algoritmul Google ia cu siguranță în considerare optimizarea pentru mobil.

‌ Dacă doriți să ajungeți organic la clienți noi, aveți nevoie de o strategie SEO solidă. Așa că acordați atenție principiilor de proiectare a site-ului web care vă vor pune pe drumul cel bun.

Principii de proiectare a site-ului web – o poți face!

De fapt, odată ce pornești, este foarte distractiv. Este căsătoria perfectă dintre strategia de afaceri inteligentă și timpul de joacă pentru arte și meșteșuguri.

Aveți o mulțime de principii utile de proiectare a site-ului web pentru a vă ajuta să creați site-ul perfect, dar cele mai importante concluzii sunt următoarele:

1. Ierarhia vizuală vă ajută să atrageți atenția spectatorului acolo unde doriți.
2. Mai puțin înseamnă mai mult.
3. Adaptarea pentru dispozitive mobile nu mai este suficientă. Trebuie să fii optimizat pentru mobil.

Deci hop la el! Gata cu protestele că nu ești designer de site-uri web. În curând poți și vei fi. Doar începe.