Share
Matematica este frumoasă. Sună puțin ciudat? Am crezut cu siguranță atunci când am început să proiectez. Matematica este atât de rigidă și adesea plictisitoare, așa că m-am gândit. Ați fi surprins să aflați că cele mai multe desene plăcute din punct de vedere estetic, opere de artă, obiecte și chiar persoane au matematică în comun. Mai exact, Raportul de Aur, cunoscut și sub numele de proporția divină, care este desemnat de litera greacă Φ (phi). Acest tutorial va acoperi anatomia și aspectul unui site web și modul în care se referă raportul de aur.
Elementele unei pagini web sunt asemenea unor organe; ele sunt vitale pentru o pagină web eficientă și plăcută din punct de vedere estetic.
Acestea sunt elementele principale ale unei pagini web. Există multe moduri diferite de a le organiza, dar acesta este, probabil, cel mai comun aspect de bază folosit online.
Toate paginile web utilizează un container și în același scop; pentru a conține elemente de pagină, totuși modul în care se realizează variază. De exemplu, eticheta corporală sau div este cea mai frecvent utilizată. În trecut, a fost utilizată chiar și o masă (nu folosiți un tabel ca container al paginii, ci o metodă depreciată). Gândiți-vă la container ca pereții exteriori ai casei dvs. în care sunt așezate apoi dormitoarele, bucătăria, sufrageria etc..
Tipuri de recipiente:
Antetul nu este cu adevărat un element specific, deși unii ar putea considera că este. Este folosit în general pentru referirea la secțiunea de sus a paginii dvs. web unde sunt localizate sigla, navigația, sloganul etc. Mulți oameni preferă să păstreze aceste elemente conținute într-un div pentru un stil mai ușor de pagină, separarea elementelor și / sau izolarea elementelor. Antetul ar fi considerat un container, deci ar avea două tipuri de alegere: lichide sau fixe așa cum am menționat mai sus.
Sigla dvs. este identitatea și branding-ul dvs. Cea mai obișnuită destinație de plasare a logo-ului este în antet, aliniată spre stânga. Citiți de la stânga la dreapta, de sus în jos, astfel încât emblema dvs. va fi cel mai probabil primul element pe care îl văd vizitatorii dvs..
Navigarea pe pagină este unul dintre cele mai importante elemente; vizitatorii dvs. au nevoie de aceasta pentru a utiliza site-ul dvs. Ar trebui să fie ușor de găsit și de utilizat, motiv pentru care este aproape întotdeauna localizat în antet sau cel puțin în partea de sus a paginii. Uneori ambele tipuri de navigare sunt utilizate pentru site-uri cu conținut ridicat.
Tipuri de navigație:
După cum toată lumea știe (sau ar trebui), conținutul este rege! Când oamenii vizitează site-ul dvs., acesta este elementul pe care îl vor căuta în primul rând. Acesta ar trebui să fie principalul punct focal al unei pagini web, astfel încât vizitatorii să găsească rapid ceea ce caută.
Bara laterală este elementul cu conținutul dvs. secundar, cum ar fi publicitatea, căutarea pe site, legăturile la abonament (RSS, Twitter, e-mail etc.), metode de contact etc. Acest element nu este necesar, deși multe site-uri web o utilizează. Este cel mai adesea aliniat corect, dar poate fi lăsat aliniat sau ambele (două bare laterale) atâta timp cât nu întrerupe vizionarea principală a conținutului. Pentru site-urile care utilizează navigație verticală ȘI verticală, bara laterală este adesea înlocuită cu elementul de navigație vertical.
Sfârșitul unei pagini web ar trebui să utilizeze întotdeauna un subsol pentru a permite vizitatorilor dvs. să știe că au ajuns la finalizarea paginii dvs. web. Ca și antetul, subsolul nu este într-adevăr un element specific, ci mai mult o secțiune care conține. În subsolul dvs. vor fi în primul rând drepturi de autor, legale și informații de contact. Este o idee bună să includeți câteva linkuri către cele mai importante secțiuni ale site-ului dvs., cum ar fi partea de sus a paginii, pagina de pornire, pagina de contact etc. Unele site-uri utilizează această zonă ca o oportunitate de a menționa materialele sau alte informații importante.
Aceasta este orice zonă a paginii web care nu este acoperită de tipografie sau de alt conținut. S-ar putea să simțiți nevoia puternică de a umple cât mai mult spațiu gol, dar nu-l faceți! Spațiul gol este la fel de important pentru un bun design al paginii web ca și conținut ce urmează a fi folosit. Puteți vedea cum site-ul NetTuts folosește spațiu gol foarte eficient pentru a ajuta vizitatorii prin intermediul conținutului, a crea echilibrul paginilor și a da un bun simț separării conținutului.
Astfel încât acoperă anatomia unei pagini web. Acum permiteți să aruncați o privire asupra modului în care Raportul de Aur se referă la aceste elemente.
Amintiți-vă mai devreme când am spus că matematica a fost frumoasă? Percepem apelul vizual bazat pe raport (adică raportul de aur). De mii de ani, artiștii, designerii, arhitecții etc. au folosit intenționat sau neintenționat un raport comun în munca lor, care este plăcut din punct de vedere estetic. Care este numărul magic? 1.62 (de fapt 1.618 ...) Nu voi intra în originea acestui număr, dar vă voi spune cum să-l utilizați.
Utilizarea raportului de aur este foarte simplu. Să spunem că doriți să găsiți lățimea coloanelor din Conținutul principal și din bara laterală. Ați lua lățimea totală a zonei de conținut (vom folosi 900px pentru acest exemplu) și o vom împărți cu 1,62. După cum se arată în exemplul de mai sus, împărțim 900px cu 1,62 și obținem 555,55 px. Nu trebuie să fim exact, astfel încât să-l rotunjim la 555 de pixeli. Acum știți că elementul principal de conținut va fi de 555 pixeli lățime și bara laterală va fi de 345 de pixeli! Cât de ușor este asta?!
Dar asteapta! Distracția nu se oprește acolo. De asemenea, puteți aplica Raportul de Aur la lățimea altui element în raport cu înălțimea acestuia sau invers. Aceasta produce elemente plăcute din punct de vedere estetic, cu proporții de raport Golden.
Dacă sunteți ca majoritatea oamenilor, nu veți dori să scoateți un calculator de fiecare dată când doriți să utilizați acest raport. Pentru a simplifica procesul, putem folosi o rețea simplă. Tot ce faceți este să vă împărțiți lățimea și / sau înălțimea cu treimi.
Fiecare divizie poate fi redusă și mai mult cu treimi, producând o rețea mai detaliată. Dacă ați citit articolul precedent "O privire de ansamblu asupra cadrului CSS Blueprint" veți vedea că cadrul CSS al Blueprint utilizează un sistem detaliat al rețelei. Rețeaua nu numai că face proiectarea mai ușoară și mai rapidă, dar și creează o structură plăcută din punct de vedere estetic! Dacă nu utilizați deja o grilă atunci când proiectați, acum ar putea fi un moment bun pentru a încerca. Puteți descărca un șablon de rețea pentru focuri de artificii, Photoshop și multe altele de la http://960.gs, care este un alt cadru fantastic CSS care utilizează grile.
După cum puteți vedea, Tuts + se comportă destul de bine cu Raportul de Aur. Prima treime a paginii este împărțită din nou în treimi pentru a arăta cum chiar și secțiunea antet se descompune în trepte mai mici de treimi, foarte aproape de Raportul de Aur. Nu e de mirare de ce designul NetTuts este atât de atrăgător!
Dacă sunteți nou la proiectare, vă încurajez foarte mult să găsiți câteva site-uri populare, să evaluați aspectul elementelor și modul în care acestea respectă raportul de aur și grilele. Apoi, faceți ceva timp pentru a vă exersa folosind Raportul de Aur cu elementele dvs. și plasându-le în aspectul dvs. utilizând o grilă.
Accentsconagua