Share
Matematica este peste tot, chiar și acolo unde nu te aștepți. Puteți găsi rapoarte matematice și constante în arhitectură, dar și în instrumentele pe care le folosim pentru a face muzică. Puteți găsi matematică în anumite jocuri pe care le jucăm și, prin urmare, nu ar trebui să vă surprindă faptul că matematica joacă un rol important și în designul web. Dar care este acest rol? Și cum putem folosi aceste rapoarte, constante și teorii pentru a face designul web mai frumos?
Walt Disney odată a făcut un film despre Donald Duck în Mathmagicland. În acest videoclip - disponibil pe YouTube - ei introduc copiii la matematică și la ce se utilizează. Aceasta arată că un raport matematic este utilizat pentru a defini notele pe instrumentele noastre și că un dreptunghi matematic poate fi găsit atât în arhitectura veche, cât și în cea modernă. De asemenea, putem găsi exact același dreptunghi în unele artă renascentistă, de exemplu, celebrul Leonardo Da Vinci.
Lecția generală este simplă: puteți utiliza câteva principii matematice de bază pentru a crea ordinea și frumusețea în creațiile proprii.
În Grecia antică era un grup de elită de matematicieni care se numeau ei pitagoricieni. Pitagoreenii aveau pentagrama ca emblema lor. Ei au ales această formă datorită perfecțiunii matematice: forma liniară a pentagramei conține deja raportul de aur de trei ori deja! De asemenea, există tone de de dreptunghiuri de aur ascunse în interiorul formei, acestea sunt aceleași dreptunghiuri de aur prezente în Mona Lisa.
Un timp după aceea, în 12lea și 13lea secol, a trăit un matematician italian talentat. Numele lui a fost Leonardo Pisano Bigollo, deși îl puteți cunoaște mai bine Fibonacci. Pentru cartea sa Liber Aci, el a observat reproducerea naturală a iepurilor. În această lume ideală a lui, unde nici un iepure nu ar muri vreodată și fiecare iepure individual ar începe să se reproducă cât mai curând posibil, el a aflat că acest ciclu conține o secvență specială de numere. Această secvență a devenit mai târziu cunoscută sub numele de Numerele Fibonacci.
Lucrul care este atât de special în această secvență este că, dacă împărțiți un număr ales cu numărul precedent în ordine, veți primi (aproximativ) același număr, de fiecare dată. Acest număr este aproximativ 1.618, mai bine cunoscut sub numele de Phi. Cu cât mergeți mai departe în secvență, cu atât mai mult rezultatul divizării vine la Phi. Fibonacci a aflat, de asemenea, că această secvență nu se găsește doar în creșterea iepurilor, ci și în alte lucruri din natură, cum ar fi aranjarea semințelor într-o floarea-soarelui.
După cum probabil știți, Phi este, de asemenea, o constantă proeminentă în design; Acest lucru se datorează faptului că un raport de 1 la 1,618 este mai bine cunoscut sub numele de Ratia de aur - denumită adesea ca Secțiunea de aur, Mediul de aur sau Divine Ratio. Dacă creați un dreptunghi conform acestui raport, obțineți o formă cunoscută sub numele de Dreptunghi de aur.
Raportul de Aur și Dreptunghiul de Aur sunt folosite în multe forme de artă și design. În perioada Renașterii, mulți artiști și-au proporționat lucrările în conformitate cu acest raport și dreptunghi. În Grecia antică, arhitecții au folosit acest dreptunghi în proiectarea clădirilor; Partenonul este un bun exemplu al acestui lucru. Chiar și în arhitectura modernă, dreptunghiul aur are o prezență puternică.
Dar ce anume face acest raport atât de special? Pentru că acest număr, Phi, își găsește originea în natură, noi, oamenii, ne găsim în mod automat confidențiali cu acest raport. Pentru că suntem atât de familiarizați cu acest raport, aceasta conduce, în mod firesc, la un sentiment de echilibru și armonie. Din acest motiv, utilizarea acestui raport vă poate garanta o compoziție echilibrată a elementelor dvs..
Înainte de a începe chiar să ne gândim la aplicarea raportului la modelele noastre, trebuie să analizăm mai întâi câteva exemple care utilizează deja raportul.
Un exemplu bun este acest site, deoarece designul său găzduiește mai multe cazuri ale raportului. În imaginea de mai jos, puteți vedea o captură de ecran a acestui site web. După cum puteți vedea, am folosit două culori pentru a marca diferitele coloane. Lățimea coloanei principale cu postările din blog este mai mult sau mai putin 1.618 ori mai mare decât bara laterală cu anunțurile. Un calcul rapid pe partea de jos demonstrează acest lucru.
Dar nu numai acest site folosește raportul de aur la lățimea totală, este, de asemenea, aplicat la unele dintre părțile mai mici ale site-ului web.
Să aruncăm o privire rapidă asupra coloanei principale, apoi asupra conținutului din interior. După cum puteți vedea mai jos, elementul care conține este de aproximativ 1.618 ori mai mare decât conținutul care urmează să fie citit în interiorul acestui element.
Un alt exemplu bun este blogul celebru Smashing Magazine. Coloana sa principală are o lățime totală de puțin peste 700 de pixeli. Când împărțiți acest număr cu 1.618, rezultatul este aproximativ 435: Lățimea exactă a barei laterale.
Panza unei pictograme și lățimea unei clădiri au toate o lățime fixă, monitoarele care afișează lucrarea noastră variază în funcție de dimensiune. Prin urmare - și mai ales în modelele fluide - există o variabilă suplimentară care ar trebui luată în considerare la calcularea raportului de aur.
Cu toate acestea, există o modalitate ușoară de a depăși această problemă. Când doriți să calculați lățimea unui element în funcție de raport, trebuie doar să luați lățimea elementului său părinte, deci elementul care conține. În primul și ultimul exemplu, aceasta a fost lățimea completă a unui site Web. În al doilea exemplu, aceasta era doar lățimea unei părți mai mici: coloana principală.
Oricum, când ați determinat lățimea elementului care conține, ar trebui să divizați acum această valoare de către Phi. Rezultatul vă va oferi lățimea elementului principal. Acum, tot ce trebuie să faceți este să scăpați rezultatul de la elementul principal de la lățimea inițială, ceea ce vă va oferi lățimea coloanei secundare.
Dacă aveți probleme în a vă aminti de Phi sau când sunteți doar leneși pentru a completa anumite numere pe un calculator, vă sugerăm să utilizați Phiculator. Această mică aplicație necesită să completați o valoare (lățimea elementului care conține elementul) și calculează automat lățimea corespunzătoare. Puteți chiar să o cereți să se calculeze cu numere întregi, deci nu trebuie să vă faceți griji nici despre numerele zecimale.
O altă divizie matematică celebră este regula de treimi. Această regulă vă poate ajuta să creați o compoziție echilibrată împărțind pânza în nouă părți egale. Regula este similară cu Raportul de Aur, diviziunea cu 0,62 este similară cu 0,67 - ceea ce este egală cu două treimi.
O formă de artă în care regula a treia este folosită foarte des este în fotografie, întrucât este ușor și rapid ghid pentru a vă face o bună compoziție. Acesta este motivul pentru care veți găsi probabil o funcție pe aparatul dvs. digital care împarte ecranul LCD în nouă părți, folosind regula de treimi. Chiar și unele dSLR au această funcție, deoarece plantează câteva puncte luminoase în vizor când focalizează.
Folosind regula a treia, veți împărți pânza orizontal și pe verticală în trei. Această divizie vă oferă nouă dreptunghiuri egale, patru linii și patru puncte de intersecție. Puteți crea o compoziție interesantă și echilibrată utilizând aceste linii și puncte de intersecție.
Cheia într-o compoziție bună, evident, constă în poziționarea corectă a elementelor. Atunci când utilizați regula a treia, există două lucruri cu care puteți să vă poziționați.
Primele sunt liniile folosite pentru a diviza pânza. În fotografie, lucrurile cu formă lungă și dreaptă sunt deseori aliniate la aceste linii. În design, lucrurile cu aceeași formă - cum ar fi o bară laterală - pot fi aliniate și la aceste linii.
Cele două lucruri pe care trebuie să le aliniați sunt punctele în care se intersectează liniile dvs. de divizare. Va trebui să puneți unul sau două obiecte în aceste puncte, deoarece prea multe vă vor ucide compoziția.
Un bun exemplu de acest lucru am găsit pe site-ul Flickr pentru fotografie. După cum puteți vedea mai jos, fotograful a aliniat rândul de clădiri cu linia de sus, iar în punctul de intersecție de sus-dreapta, veți găsi o casă care se evidențiază cel mai mult datorită culorii sale. Deoarece este deja un punct focal în sine, alinierea acesteia la punctul de intersecție adaugă o compoziție bună și o senzație echilibrată.
Fotografia flickr găsită aici Am văzut regulile treimilor aplicate fotografiilor, dar cum să le aplicăm pentru designul site-ului, putem găsi exemple de acest lucru?
Un bun exemplu de regulă care se aplică web design-ului este, din nou, acest site web. Am pregătit o imagine pe care o puteți vedea mai jos. Aceasta arată că, în partea dreaptă, bara laterală este aliniată foarte aproape de linia verticală din dreapta. În stânga, puteți vedea că articolele sunt poziționate pe punctele intersectate.
Cele două aliniere pe care le vedeți mai sus creează un sentiment de armonie în aspectul acestui site web.
Deci, cum poate fi aplicată regula a treia a designului site-ului dvs.? Din nou, lățimea variată a "pânzei" noastre poate aduce unele probleme. Când vom folosi aceeași tehnică ca și cu raportul de aur, vom fi bine.
Pentru a aplica diviziunea, trebuie să luați întreaga lățime a elementului care conține și să o împărțiți cu trei. Apoi trebuie să trasați o linie - sau un ghid, indiferent de ce vă convine cel mai bine - de două ori pe valoarea pe care o obțineți ca rezultat (înmulțiți-le cu două pentru a obține poziția celei de-a doua linii).
A doua parte a diviziunii vă poate oferi câteva probleme. Înălțimea "panzei" noastre este, de asemenea, variabilă, așadar împărțirea acestei variabile cu trei ne va da niște probleme. Modul în care folosesc acest lucru este să calculați "înălțimea" diviziunii cu un raport de 16: 9 (ecran lat) sau pur și simplu să utilizați înălțimea elementului care conține. Împărțiți lățimea elementului care conține conținutul cu 16 și înmulțiți numărul respectiv cu 9 și obțineți o înălțime. Acum puteți împărți din nou acest număr cu 3 și trageți liniile / ghidurile.
Când aveți ghizii înființați, puteți să vă poziționați elementele în conformitate cu aceste ghiduri. Aliniați elementele cu liniile și trebuie să puneți câteva elemente de interes și contrast pe punctele de intersecție.
S-ar putea să nu credeți că grilele sunt matematice, dar ele sunt. Îți împărți pânza în diferite coloane și jgheaburi, această diviziune cu două, trei - și am văzut până la șaisprezece - este într-adevăr matematică.
Mulți oameni susțin că sistemele de rețea vă limitează creativitatea, deoarece vă limitați libertatea printr-un sistem de rețea. Nu cred că acest lucru este adevărat, așa cum am învățat o carte numită Vormator că aceste limitări măresc cu adevărat creativitatea. Acest lucru se datorează faptului că vă veți gândi la soluții care țin cont de aceste limite, în timp ce aceste idei nu s-ar fi gândit niciodată dacă nu aveți aceste restricții.
Motivul pentru care sistemele de grilă "funcționează" este că vă pot îndruma în dimensionarea, poziționarea și alinierea designului site-ului dvs. web. Ele vă pot ajuta să organizați și să eliminați dezordinea din conținut. Dar, cel mai important, sunt ușor de folosit.
Un alt motiv bun pentru a utiliza grilele este că regulile sunt menite a fi rupte, nu-i așa? Dacă îți spargi grila din când în când, nu e rău. Dimpotriva! "Ruperea" rețelei dvs. poate crea interes special pentru un anumit element din pagină, deoarece este în contrast cu restul. Acest lucru vă poate ajuta să atingeți anumite obiective, cum ar fi o chemare la acțiune care se evidențiază mai mult din acest motiv.
Nu există o modalitate reală de a construi un sistem de rețea bun, deoarece acestea se rotesc în jurul conținutului și nici un conținut nu este într-adevăr același. Dar, de dragul lui, voi demonstra un simplu proces de construire a unei rețele de 6 coloane într-un mediu cu o lățime de 960 de pixeli.
Mai întâi, vom împărți lățimea totală a panzei cu 6 astfel încât să avem lățimea totală a fiecărei coloane. Rezultatul acestei divizări este de 160 de pixeli, după cum puteți vedea mai jos în imagine.
În al doilea rând, vom crea o imagine a unei coloane, vom duplica acest lucru mai târziu. În acest fel este mai ușor să creați ulterior grilă completă, deoarece nu trebuie să repetați acest pas pentru fiecare coloană.
Vom decide cu privire la dimensiunea jgheabului nostru, cred că 20 de pixeli vor fi suficienți. Jgheabul trebuie adăugat pe ambele părți ale coloanei, deci trebuie să-l împărțim cu două. Dacă nu facem asta, jgheabul nostru va avea o lățime de 40 de pixeli. După cum puteți vedea în imaginea de mai jos, am adăugat o jgheab de 10 pixeli pe fiecare parte.
Acum putem duplica această imagine până când ajungem din nou la un total de 960 de pixeli și ne-am creat o rețea (de bază).
Nu-ți face griji; chiar dacă ești leneș, nu va trebui să trăiești fără grilaj. Există o mulțime de sisteme frumoase și gratuite pentru a fi capturate pe internet. Preferatul meu, și sunt sigur că ați auzit despre el înainte, este cel mai faimos sistem de grilă 960.gs, care are un cadru CSS și un fișier PSD cu toate ghidurile instalate.
Sper că v-am arătat că matematica poate fi frumoasă atunci când este aplicată la proiectare și că ți-am dat suficiente tehnici pentru a le utiliza în următorul design. Fi avertizat, însă, multe alte lucruri sunt necesare pentru a face un design un succes și, prin urmare, utilizarea acestor trucuri nu este o garanție pentru un design bun, dar vă pot ajuta cu siguranță și vă pot ghida în procesul de a face.
Vă mulțumim pentru lectură!
Accentsconagua