Share
Designul web este în esență doar o evoluție a principiilor și a teoriilor create în timpul evoluției imprimării. Industria de design a adus o mulțime de tehnici pe web, dar unele au avut mai mult timp să stăpânească într-un mediu virtual. Din păcate, nu avem o singură platformă pentru ca conținutul nostru să apară; trebuie să luptăm cu mai multe browsere, sisteme de operare și dimensiuni ale ecranului.
Pe măsură ce web-ul sa dezvoltat, avem și principiile de proiectare pe care le observăm. Designul pe bază de grile a crescut în ultimii ani, prin care designerii își pot amplasa site-ul în funcție de o rețea coloană. Sistemele Grid au fost o modalitate foarte populară de organizare și aliniere a elementelor și de adăugare a unei ordini generale la o pagină, prin aplicarea proporției și a echilibrului.
Bazandu-ne la cunostintele de utilizare a proportiei si echilibrului, se poate folosi un alt principiu de tiparire: grila de baza.
Grilă de referință este o tehnică utilizată pentru a vă îmbunătăți tipografia bazată pe web. În esență, aliniază tot textul dvs. la o grilă verticală, în care partea de jos a fiecărei litere este poziționată pe rețea, la fel ca scrierea pe hârtie aliniată. Rezultatul final este un corp de text perfect organizat, cu o recunoaștere subconștientă a echilibrului și congruității.
După cum am mai spus, imprimarea este un mediu static. Proiectarea pentru un format de imprimare vă permite să specificați ce vor vedea toți spectatorii. Cu toate acestea, datorită platformelor alternative, designul dvs. poate fi interpretat de pe web, CSS vă va face în mod inevitabil înălțimea liniei și alte valori tipografice, în mod diferit pentru diferiți utilizatori. Pentru o mulțime de designeri, acest lucru se dovedește doar a fi presupunerea și prezicerea ceea ce va vedea utilizatorul final.
Mulți designeri de imprimare utilizează rețele de referință în legătură cu suita de design, fie că este vorba despre InDesign sau altele. Grilele tipărite au fost trasate până la începutul anilor 1200 și nu sunt restrânse doar pentru designul web. De fapt, totul, de la grile la raportul de aur (adică cele mai multe teorii bazate pe matematică) sunt împărtășite în alte aspecte ale vieții, mai ales arhitectura.
Grila face posibilă aducerea tuturor elementelor de caractere de tip design, fotografie, desen și culoare într-o relație formală una cu alta; adică sistemul de rețea este un mijloc de a introduce ordinea într-un design. Un design compus în mod deliberat are un efect mai clar, mai bine aranjat și mai reușit decât un anunț publicat la întâmplare. - Josef Mulller Brockmann
Acum, să aruncăm o privire la modul în care creăm de fapt grila noastră de bază.
În primul rând, trebuie să definim o înălțime a liniei pentru grila de bază bazată pe un raport cu dimensiunea fontului; pentru acest exemplu, 1: 1,5 este o sumă plăcută care ne oferă un avantaj generos de 50%. Dacă am avea o dimensiune a textului de 12px, înălțimea liniei (utilizând acest raport 1: 1,5) ar fi de 18px. 150% este o sumă plăcută care ne oferă un design ușor de citit, dar această valoare poate fi diferită. Cu toate acestea, ar trebui să încercați să rămâneți la aproximativ 130% -160% atunci când luați în considerare înălțimea liniei.
Înainte de a merge mai departe, ar trebui să știți exact cum funcționează proprietatea de înălțime a liniei CSS. Înălțimea liniei este înălțimea totală, colectivă a liniei de text, nu textul în sine. Ea funcționează prin adăugarea de umplutură de deasupra și sub textul pentru a-l spațiu. Dacă de fapt luăm un text și îl punem pe un fundal condus, vom vedea textul poziționat între linii, nu neapărat pe ele.
Pentru a face lucrurile simple, să presupunem că textul nostru are o dimensiune de bază de 10 pixeli. Prin lipirea în raportul nostru brut, înseamnă că înălțimea liniei noastre va fi de 15 pixeli, deși am putea varia acest lucru. (Pentru a face o notă laterală, 10px este destul de mic și nu aș recomanda neapărat în cele mai multe cazuri, dar o folosesc aici doar pentru a face mai ușor în departamentul de matematică). Pentru ca diferite elemente să se încadreze în sistemul nostru de bază, trebuie să le punem în CSS.
Înainte de a continua, totuși, aceste exemple presupun că folosiți un fel de resetare CSS. Dacă nu sunteți, marjele implicite ar putea interfera cu munca pe care o facem astăzi.
Pentru a elimina lucrurile, odată ce am stabilit înălțimea liniei, trebuie să se potrivească o marjă consistentă sub fiecare poziție și paragraf. Din moment ce lucrăm cu o rețea de 15px aici, vom elimina marginea de jos standard a unei etichete paragraf (în mod implicit, aceasta este 1em care, în acest caz va fi de 10px) să fie aceeași cu înălțimea liniei noastre text. Aceasta creează o linie liberă proporțională sub fiecare paragraf, care este egală cu înălțimea dacă textul se află acolo.
p marginea-jos: 15px;
În mod similar, pentru anteturi, pur și simplu trebuie să continuăm să respectăm incrementările de 15 pixeli. Prin simpla etichetare pe marginea noastră de 150% înălțimea liniei, creăm o pauză similară, consecventă.
h1 font-size: 20px; linia-înălțime: 30px; margin-bottom: 15px;
Înainte de a merge mai departe, vreau să observ că textul dvs. nu s-ar putea să stea întotdeauna pe linie, dacă ați aplicat unul în fundal. Nu vă faceți griji, atâta timp cât înălțimea liniei rămâne aceeași. Dacă textul dvs. plutește în mijlocul liniilor dvs., puteți juca cu ușurință cu marginile dvs., dar nu este necesar.
În continuare, cum facem cu liste? În primul rând, dorim să ne aplicăm marja standard în același mod în care am procedat la paragrafele noastre. Acest lucru oferă pauzelor un nivel de coerență cu conținutul.
ul, ol margin-bottom: 15px;
Acest lucru începe să se ușureze acum! Dacă încă mai aveți o înălțime a liniei de 15px definită în altă parte, listele dvs. se vor potrivi frumos cu restul conținutului.
Imaginile sunt în cazul în care începe să devină un pic mai dificil. De preferință, dorim să avem aceeași consistență în marjele noastre, astfel încât imaginea să fie tratată în același mod ca și când ar fi un bloc de text. Aceasta înseamnă că imaginile dvs. trebuie să fie dimensionate în multipli ai valorii înălțimii liniei dvs., care este, în acest caz, 15.
În exemplul meu, am imaginea plutit la dreapta, așa că am aplicat o marjă de 15px în partea stângă și în partea de jos. Alături de marja noastră existentă de sub paragraf, acest lucru ne-a dat o marjă consistentă egală cu restul grila de bază.
img.left float: left; margine: 0 0 15px 15px;
Desigur, acestea nu sunt singurele elemente pe care trebuie să le modificăm pentru a ne conforma noii noastre rețele de referință. Cheia este să vă asigurați că lucrați într-o creștere consistentă, astfel încât totul este restrâns la aceeași rețea. Acest lucru poate duce la o armonie și un echilibru evident în întreaga pagină web atunci când este utilizat cu corpuri mari de text.
Iată exemplul nostru finit, o pagină web simplă care conține paragrafe, titluri, o imagine și o listă. Dacă vrei să iesi pe conducătorul tău, poți, dar te pot asigura că totul urmează grilele coerente care se bazează pe tipografia noastră.
Doar tocmai am rupt suprafața utilizării rețelelor de bază. Poate deveni mult mai dificil atunci când începeți să încercați să le aplicați unor modele mai complexe, care se termină în câteva dintre ele fiind utilizate pe web. Cu toate acestea, este posibil și poate duce la un design echilibrat, proporțional, care poate contribui la o mai bună experiență a utilizatorului final.
Rețeaua de bază reprezintă o modalitate excelentă de a adăuga un anumit echilibru și proporție tipografiei dvs. Este una dintre acele implementări subtile care pot adăuga un sentiment natural în design-urile dvs. În cazul rețelei de referință, tipografia noastră devine consecventă cu distanțele standardizate, oferindu-i acel simț armonios.
Din nefericire, totuși, trebuie să luptăm împotriva amenințării cu incompatibilități de browser care pot face redarea CSS diferită pentru diferiți utilizatori atunci când navighează pe browsere, sisteme de operare sau dispozitive alternative. Aceasta este o sarcină care nu pare a fi pe cale de ieșire, deși adăugarea unei rețele de referință oferă alte avantaje. De exemplu, acest tip de sistem de grilă poate ajuta extraordinar atunci când scalarea și, prin urmare, obligă un browser să-și redea redarea lui CSS. Grilele de bază oferă o mai mică flexibilitate și încurajare browserului să facă lucrurile în mod corespunzător.
Acesta a fost un articol mai scurt decât de obicei, dar asta pentru că grilele de referință nu au prea multe pentru a explica sau a arăta cum să folosească. Magia reală vine atunci când designerul testează și testează pentru a se asigura că grila de bază funcționează și, mai presus de toate, face designul atrăgător de vizibil (mai mult). Pentru o rotire alternativă a lucrurilor, citiți articolul A List Apart despre acest subiect. Până data viitoare, proiectarea fericită!
Accentsconagua