Dacă sunteți în căutarea unor grile de design pentru site-uri web, ați ajuns în locul potrivit. În această postare, am discutat despre 5 grile diferite de design de site-uri web.
Grilele sunt coloana vertebrală a designului; vă ajută să stabiliți ordinea și să organizați conținutul designului dvs. Vom discuta despre ce este o grilă, de ce ar trebui să utilizați una în design web și cum să faceți una în această postare.
Deschideți aplicația de design preferată și iată-o, o pânză goală care se uită înapoi la tine. Este o atingere descurajantă uneori.
Cum începi? Ce poziție dai titlului? Unde vă plasați lucrările de artă și fotografiile? O grilă este tot ceea ce este necesar pentru a începe.
O grilă este o structură folosită pentru a organiza conținutul unui design; stabilește alinierea și ordinea.
Indiferent dacă proiectați un aspect pentru tipărire, cum ar fi o revistă, sau îmbinați fotografii și text pentru a crea o pagină de destinație, o grilă vă va ajuta să faceți alegeri de design și să oferiți o experiență pozitivă pentru utilizator.
Luați în considerare modul în care designul acestei pagini de destinație utilizează o grilă cu 12 coloane pentru a-și organiza componentele. Utilizarea unei grile elimină posibilitatea de a lua decizii aleatorii.
În loc să poziționați aleatoriu piesele, utilizând corect o grilă, veți ști exact unde să plasați elemente precum un logo, elemente de meniu, un titlu, conținutul corpului și fotografii. În plus, va ajuta la accelerarea procesului dvs. de proiectare.
În acest articol, vă voi spune tot ce trebuie să știți despre cum să utilizați o grilă în design web. Deci, rămâi cu mine până la capăt.
Cuprins
- De unde provin grilele?
- De ce sunt importante grilele în web design?
- 5 tipuri diferite de grile
- 4 Cele mai bune practici de utilizare a grilelor în design web
- Anatomia grilei - Ce trebuie să știți?
- Întrebări frecvente: Website Design Grids 2024
- 👉 Care este cea mai bună grilă pentru web design?
- ✅ Ce este un site web cu aspect grilă?
- 👉 Cum funcționează grilele site-ului?
- 👀 Cum îmbunătățește un aspect al grilei designul web?
- ✅ De ce folosesc designerii grile?
- 👉 Câte coloane ar trebui să aibă o grilă în web design?
- 💁 De ce folosim o grilă cu 12 coloane?
- ✔️ Ce este grila cu 12 coloane?
- 👉 Cum folosești șabloanele de grilă?
- Concluzie: Site Design Grids 2024
De unde provin grilele?
Înainte de a trece la modul în care grilele afectează designul web astăzi, să aruncăm o scurtă privire asupra istoriei grilelor și a modului în care au fost utilizate. Grilele sunt necesare pentru organizarea tipografiei.
Grilele au fost utilizate inițial în machetele manuscrise pentru a comanda tipul. Luați în considerare cât de ordonată este această difuzare dintr-o pagină de text timpurie.
Pentru o privire mai aprofundată asupra istoriei tipăririi, consultați eseul nostru despre istoria designului grafic.
Revoluția industrială și apariția producției de masă, în timpul căreia ziare, afișe, reclame și alte articole tipărite au fost produse în cantități mari.
Designerilor le place Jan Tschichold și Josef Muller-Brockmann a creat noi sisteme de grile în secolul al XX-lea, care au evoluat în ceea ce este acum cunoscut sub numele de stilul elvețian sau stilul tipografic internațional.
Au stabilit o structură modulară cu suficient spațiu alb.
De ce sunt importante grilele în web design?
În ceea ce privește aplicarea sa la procesul de proiectare web, sistemul grilă ajută la alinierea componentelor paginii folosind coloane și rânduri succesive.
Odată ce această bază ierarhică este pusă la punct, putem aranja textul, grafica și practic orice alt element de design în interiorul interfeței într-o manieră consecventă și ordonată.
Atunci când proiectăm pentru web și mobil, paginile sau interfețele pe care le dezvoltăm sunt menite să faciliteze diferite fluxuri de utilizatori.
Grilele facilitează procesul de proiectare a wireframes, șabloane sau machete standardizate pentru site-uri comparabile, deoarece fluxurile de utilizatori cuprind adesea mai multe ecrane sau ferestre care repetă scheme și machete similare.
Grilele permit împărțirea orizontală și verticală a paginilor prin rânduri și coloane. Sistemele de grilă sunt o tehnică sistematică care permite designerilor să aranjeze articolele într-un mod ordonat și să dezvolte componente pentru mai multe pagini sau machete într-o manieră modulară.
În plus, grilele stabilesc un set standardizat de unități fixe de măsură care determină dimensiunea, distanța și alinierea fiecărui element de proiectare.
Aspectele de grilă au apărut în designul tipărit atunci când au fost folosite împreună cu tipografia pentru a organiza scrisul de mână pe hârtie, în special în cărți și ziare.
Acestea fiind spuse, multe aspecte ale designului contemporan se bazează și prosperă pe aspecte bazate pe grilă. Aceasta include designul web, designul interfeței și, cel mai semnificativ, designul responsive.
Înainte de a cerceta cum și de ce aspectele bazate pe grilă sunt un instrument atât de neprețuit pentru procesul nostru de proiectare în calitate de dezvoltatori web, să aruncăm o privire mai atentă la componentele fizice care cuprind un sistem de grilă.
5 tipuri diferite de grile
Grilele sunt clasificate în cinci categorii distincte. În timp ce unele sunt mai potrivite pentru design web decât altele, aproape sigur le-ați folosit pe toate cinci la un moment dat de-a lungul carierei tale creative.
1. Grilă ierarhică:
Cea mai răspândită utilizare a grile ierarhice este în web design. Obiectivul acestor grile este de a prioritiza articolele. Ele pot fi mai adaptabile, dar se bazează în continuare pe coloane, rânduri și module pentru organizare.
Ele sunt construite în mod natural prin aranjarea mai întâi a elementelor cele mai semnificative pe pagină și apoi înconjurându-le cu o grilă.
Site-urile web de știri și media folosesc adesea acest stil de grilă pentru a atrage atenția asupra anumitor articole și postări. Luați în considerare modul în care New York Timespagina de pornire folosește o grilă ierarhică.
2. Grilă modulară:
Grilele modulare sunt similare grilelor de coloane, dar includ rânduri. În timp ce ziarele și revistele folosesc adesea grile modulare pentru a aranja materialul, ele pot fi utilizate și în designul site-urilor web și al aplicațiilor, de exemplu, într-o secțiune a grilei de produse.
Luați în considerare modul în care Everlane își organizează colecția de denim folosind o grilă modulară. The YouTube pagina de pornire este un alt exemplu de site care folosește o grilă modulară.
Deși includ o bară laterală din stânga pentru link-uri frecvente, cum ar fi secțiunile de tendințe și abonamente, toate materialele video sunt structurate într-o grilă modulară cu patru coloane pentru a maximiza numărul de videoclipuri pe care un spectator le poate citi în timp ce navighează pentru ceva de vizionat.
3. Grilă de coloane:
Grilele de coloane ajută la organizarea textului, a imaginilor și a graficelor. Pentru site-uri web, numărul de coloane care acoperă lățimea unei pagini de destinație poate varia de la două la doisprezece sau chiar șaisprezece.
Textul și grafica pot fi conținute într-o singură coloană sau pot cuprinde mai multe coloane. Jgheaburile sunt spațiile dintre coloane; ar trebui să aibă dimensiuni uniforme în toate.
Grilele de coloane nu trebuie să fie simetrice. De exemplu, puteți utiliza o grilă de coloane asimetrică în care anumite coloane sunt mai înguste decât altele, ceea ce poate fi avantajos în funcție de ierarhia designului dvs.
Grilele de coloane asimetrice sunt adesea folosite pe site-urile blogurilor, unde materialul principal este inclus în containerul de două treimi mai mare al aspectului, în timp ce treimea mai mică poate afișa informații despre blog și autorul acestuia.
Luați în considerare modul în care pagina de pornire a acestui blog folosește o grilă de coloane asimetrică.
4. Brâu manuscris:
Toate cărțile, ziarele și periodicele sunt construite pe o grilă de manuscris. Denumit în plus grilă cu o singură coloană, acesta este unul dintre cele mai simple modele de grilă și este potrivit pentru blocuri continue uriașe de text și grafică.
În esență, este un spațiu dreptunghiular imens în interiorul paginii care acționează ca o casetă de delimitare pentru text.
5. Grila de referință:
O grilă de bază este puțin mai tehnică; se stabileşte prin locaţia textului. În esență, se referă la liderul sau spațiul dintre liniile de bază.
Această grilă ajută la furnizarea unei experiențe pozitive de lectură pentru cititor, în special atunci când există mult conținut de citit. Deși este vital pentru designul tipărit, cum ar fi machetele de cărți, este la fel de esențial pentru designul online.
Luați în considerare efectul spațierii între rânduri asupra lizibilității unei pagini de destinație. Dacă textul este prea condensat, utilizatorul poate abandona complet site-ul. Mențineți o combinație adecvată de text și spațiu alb.
4 Cele mai bune practici de utilizare a grilelor în design web
Există mai multe cuvinte și idei de familiarizat și de înțeles în domeniul web design-ului, dar niciuna mai mult decât importanța grilelor în web design.
Între mai multe componente care cuprind o structură de grilă, numeroasele tipuri de grile disponibile și Procese cognitive implicat în determinarea tipului de grilă se potrivește cel mai bine cu conținutul și designul dvs., sunt multe de luat în considerare.
1. Respectați regula treimilor:
Un alt concept de web design este Regula al treilea, care îi ajută pe designeri să creeze structuri de grilă echilibrate din punct de vedere estetic și plasarea imaginilor.
Această abordare suprapune o grilă care împarte zona de proiectare orizontal și vertical în treimi. Aceasta împarte orice imagine sau secțiune/spațiu de pagină în nouă segmente egale definite de intersecțiile liniilor.
Conform Regulii treimilor, așezarea „obiectelor de interes” pe „trețimile” unei imagini va îndrepta atenția utilizatorului asupra lor într-o manieră mai puternică, mai atractivă din punct de vedere estetic.
În designul web, designerii folosesc adesea regula treimilor pentru a-i ajuta să facă unele dintre cele mai critice alegeri de grilă și aspect.
2. Respectați raportul de aur:
Numeroși designeri folosesc un concept cunoscut sub numele de Raportul de Aur pentru a optimiza scara, echilibrul și aspectul modelelor lor de grilă. The Ratia de aur este o proporție care este egală cu 1.6180 în forma sa cea mai simplă.
Dreptunghiul de aur este un dreptunghi a cărui lungime este de 1.6180 ori lățimea, pe baza raportului de aur. Aceasta indică faptul că, dacă lățimea elementului este de 100 px, lungimea va fi de 161.80 px.
Acest lucru este valabil pentru lățimea și lungimea imaginilor, obiectelor sau formelor adiacente, precum și pentru dezvoltarea unei singure forme sau element.
Folosind raportul de aur, designerii pot stabili cum să împartă spațiul orizontal disponibil pe pagină și cât spațiu să permită și în jurul fiecărei piese, printre altele.
Un caz în care acest lucru se poate întâmpla este în timpul dezvoltării secțiunii eroi a unui site web. Dacă alegeți un aspect pe toată lățimea și îl împărțiți vertical în două secțiuni: imaginea eroului și textul eroului.
În plus, va trebui să decideți cu privire la dimensiunea imaginii, dimensiunea textului și așa mai departe în această procedură de microdesign.
Cu toate acestea, trebuie mai întâi să vă decideți asupra unui raport de coloane, care vă va ghida în determinarea dimensiunii imaginii și a fontului dvs., precum și asupra elementelor pe care doriți să le accentuați mai mult sau mai puțin sau dacă doriți să vă concentrați în mod egal pe fiecare.
Acesta este momentul în care intră în joc decizia cum să împărțiți partea eroului în ceea ce privește componenta care ar trebui să fie mai mare sau mai proeminentă. Aici este utilă Raportul de Aur.
Acest ghid ia în considerare o varietate de elemente, inclusiv lățimea paginii, dimensiunea conținutului și numărul și dimensiunea modulelor de care conținutul va avea nevoie pe o grilă.
În ceea ce privește accesibilitatea, Raportul de Aur îndreaptă atenția utilizatorului către anumite puncte sau locații de pe un ecran, ceea ce este exact ceea ce designerii își propun să facă atunci când stabilesc și implementează ierarhia de informații a conținutului și schemei de design.
3. Faceți loc pentru spațiul alb:
În calitate de designeri web, înțelegem cât de critic este spațiul alb în ceea ce privește lizibilitatea, ierarhia informațiilor, scalabilitatea și spațiul general de respirație în jurul și între componentele de design.
Având în vedere rolul vital al spațiului alb în designul aspectului, este firesc ca site-ul web și grilele de aspect să îl folosească.
Dispozițiile grilei sunt determinate, în esență, nu numai de lățimea și înălțimea coloanelor și rândurilor lor, ci și de lățimea și înălțimea spațiului alb dintre ele, denumit spațiere.
De exemplu, o metodă de proiectare bazată pe grilă pe care designerii web o folosesc adesea este cunoscută sub numele de 8pt Grid System, o noțiune stabilită de ghidurile Google Material Design.
Metoda Material Design folosește o grilă de 8 pe 8 pt. Fiecare element de pe site va fi multipli de/divizibil cu opt în practică.
Lucrul fascinant este că această regulă se aplică nu doar elementelor din grilă precum fotografii, butoane sau text, ci și unităților de spațiu alb, care trebuie să fie multipli de opt.
Prin urmare, luând în considerare modul în care vă distanțați coloanele sau rândurile, trebuie să cuantificați și să specificați și cantitatea de spațiu alb, în acest caz în multipli de opt.
Acest lucru demonstrează cât de critic este spațiul alb în designul grilei, până la punctul în care dimensiunile și cerințele sale sunt la fel de critice ca și coloanele și rândurile.
Pagina de pornire a Experților Elementor exemplifica cât de puternic poate fi spațiul alb, în special pe pagina de pornire a unui site web.
Deoarece scopul final al paginii de pornire este de a constrânge spectatorii să acționeze și să învețe despre platforma Experți, spațiul alb sprijină acest proces prin prioritizarea informațiilor.
Acest lucru implică faptul că, din moment ce propunerii de valoare a platformei i se acordă o asemenea importanță și „timp să strălucească” pe pagina principală, vizitatorii site-ului înțeleg imediat valoarea crescută pe care o vor experimenta.
4. Onorează designul receptiv:
Designul responsive se referă la capacitatea unei pagini sau a aspectului și a conținutului unui site de a se adapta la mai multe dispozitive și dimensiuni de browser. Acest lucru implică faptul că atunci când dimensiunea ecranului variază, numărul de coloane și, bineînțeles, lățimea acestora, vor varia și ele.
Cu toate acestea, există o distincție intrinsecă între grilele de design standard și grilele receptive.
În timp ce grilele de proiectare sunt setate la o grilă de bază, grilele receptive sunt flexibile, permițând coloanelor de grilă să se redimensioneze și să se repoziționeze în funcție de fereastra de vizualizare a utilizatorului.
Cu o grilă fixă, scăderea dimensiunii ecranului vă va aduce automat la următorul punct de întrerupere, iar marginile laterale vor scădea automat până la atingerea următorului punct de întrerupere.
O grilă receptivă sau o grilă fluidă este ceea ce vedeți atunci când elementele se schimbă dinamic ca răspuns la micșorarea browserului/ecranului. Grilele receptive îți vor alinia și organiza logic materialul.
Acest lucru implică faptul că atunci când fereastra de vizualizare scade, plăcile și conținutul grilei se vor micșora proporțional.
Anatomia grilei - Ce trebuie să știți?
Toate grilele din designul site-ului web, indiferent de dimensiunea sau complexitatea lor, au anumite componente care le caracterizează ca aspect de grilă:
1. Marje:
Marginile reprezintă spațiul negativ dintre format și marginea exterioară a conținutului, uneori cunoscut sub denumirea de „jgheaburi exterioare”. Pe dispozitive mobile, marginile laterale sunt de obicei lățime de 20-30 px și variază semnificativ între desktop și mobil.
Margin poate fi familiarizat cu limbajul HTML și CSS, unde este folosit ca proprietate pentru a genera spațiu în jurul unui element de design sau container. Rețineți că dimensiunea unei margini nu afectează dimensiunea textului adiacent.
Specifică doar cantitatea de spațiu din jurul elementului, care, în contextul grilelor de aspect, se referă în mod explicit la spațiul dintre format și marginea exterioară a conținutului.
2. Jgheaburi:
Jgheaburile sunt liniile care împart coloanele și rândurile în unități individuale. 20px este o dimensiune destul de tipică a jgheabului. Scopul jgheaburilor este de a oferi spațiu negativ (de orice dimensiune) între coloane și rânduri.
În cel mai simplu sens, jgheaburile sunt zona dintre coloane și rânduri. Jgheaburile sunt deosebit de importante în amenajările de zidărie, unde lățimea jgheabului este unul dintre elementele cele mai critice.
3. Module:
Modulele sunt unitățile de umplere a spațiului formate prin joncțiunea rândurilor și coloanelor. Modulele sau modulele de conținut, așa cum sunt adesea menționate, sunt elementele de bază ale unei pagini, deoarece fiecare element de design (text, grafică și butoane, de exemplu) se potrivește în modulele produse de modelele dreptunghiulare dintr-o grilă.
4. Rânduri:
După cum puteți presupune, rândurile sunt părțile orizontale ale grilei. În mod surprinzător, designul web trece adesea cu vederea importanța rândurilor dintr-o grilă. Cu toate acestea, aceasta nu este o practică grozavă.
5. Coloane:
Coloanele sunt piese verticale care se întind pe înălțimea zonei de conținut și sunt considerate „blocuri de construcție” ale grilei. Ceea ce face coloanele distinctive este că, cu cât mai multe coloane într-o grilă, cu atât grila devine mai flexibilă.
Vom aborda acest lucru în detaliu în curând. În timp ce lățimile coloanelor sunt întotdeauna la latitudinea designerului, practicile obișnuite impun ca 12 coloane să fie folosite pe desktop, 8 pe o tabletă și 4 pe mobil.
Majoritatea grilelor au lățimi de coloane de 60–80 px. Lățimea coloanei are un impact semnificativ asupra lățimii conținutului real.
Întrebări frecvente: Grile de proiectare a site-urilor web 2024
👉 Care este cea mai bună grilă pentru web design?
Bootstrap este un cadru front-end inteligent, simplu și puternic care face dezvoltarea web mai rapidă și mai simplă. Pentru noi, aceasta este cea mai populară alegere. Frecvent, douăsprezece coloane cu indentări. O metodă standardizată și simplă.
✅ Ce este un site web cu aspect grilă?
Grila site-ului este o tehnică de aranjare și aliniere a materialului pe o pagină. Acesta servește ca schelet sau cadru fundamental al interfeței dumneavoastră cu utilizatorul. Grilele de site-uri îi ajută pe designeri să facă alegeri de design și să producă o experiență pozitivă pentru utilizator.
👉 Cum funcționează grilele site-ului?
Sistemele grilă sunt cadre invizibile utilizate în design web care grupează toate componentele unei pagini împreună. Grila acționează ca un cadru sau o armătură în jurul căreia un designer poate aranja componente vizuale (imagini, glife, paragrafe etc.) într-un mod logic, ușor de absorbit.
👀 Cum îmbunătățește un aspect al grilei designul web?
Grilele vă pot scurta și îmbunătăți semnificativ timpul de proiectare, acționând ca un ghid pentru a pune, poziționa și scala obiectele. În loc să puneți piese în mod arbitrar până când obțineți o compoziție plăcută, o grilă ar trebui să vă ajute să găsiți o soluție naturală.
✅ De ce folosesc designerii grile?
Grilele facilitează colaborarea designerilor la idei, evidențiind unde ar trebui plasate piesele. Sistemele de grilă ajută la decuplarea lucrărilor de proiectare a interfeței, permițând mai multor designeri să lucreze la componente distincte ale aspectului, rămânând în același timp siguri că munca lor va fi integrată fără probleme și consecventă.
👉 Câte coloane ar trebui să aibă o grilă în web design?
Deși nu este nevoie formală de numărul de coloane, majoritatea arhitecturilor de grilă de site-uri web folosesc o grilă de 12 coloane. În plus, o grilă de site web conține spațiu obișnuit între coloane, denumit jgheaburi, iar spația în afara grilei este denumită margini.
💁 De ce folosim o grilă cu 12 coloane?
Majoritatea versiunilor Bootstrap necesită doar 12 coloane pentru a găzdui următoarele: Crearea aspectului este simplificată. Aspect pentru dispozitive mobile. Blocuri proporționale pentru menținerea simetriei.
✔️ Ce este grila cu 12 coloane?
Pentru site-uri web, designerii pot folosi între două și douăsprezece, sau chiar șaisprezece coloane pentru a acoperi lățimea unei pagini de destinație. Aceștia pot aranja textul și graficele într-o singură coloană sau pe mai multe coloane.
👉 Cum folosești șabloanele de grilă?
Atributul grid-template-areas definește zonele aspectului grilei. Puteți denumi elementele grilei, referindu-le în proprietatea grid-template-areas prin proprietatea grid-area. Apostrofele denotă fiecare regiune. Pentru a face referire la un obiect grilă care nu are un nume, utilizați un simbol punct.
Link-uri rapide:
- Cei mai buni constructori de site-uri offline
- Costul pentru construirea unui site web
- Cum să faci un site web personal
Concluzie: Site Design Grids 2024
Acum că înțelegeți de ce grilele sunt esențiale în designul web și cum să le utilizați pe site-ul dvs. web, este timpul să începeți măsurarea și alinierea.
Rețineți că acest principiu se aplică fiecărui element de design: alinierea widget-urilor și componentelor pe orizontală și verticală, alinierea elementelor de text la o linie de bază și centrarea corectă a oricărui tip de conținut pe site.
Procesul dvs. de proiectare și produsul final vor fi foarte apreciate și suntem nerăbdători să vedem ce aveți în magazin.
