Continuăm subiectul aspect adaptiv. Astăzi vom vorbi despre una dintre cele trei balene cu aspect adaptiv - aspect bazat pe grilă(dispunerea grilă flexibilă). Celelalte două sunt imagini flexibile.

La mijlocul secolului al XX-lea, designerii grafici au popularizat conceptul tipografice, sau modular, plasă- un sistem rațional de coloane și rânduri în care ar putea fi amplasate module cu conținut. Arăta proaspăt și foarte armonios.

Cu toate acestea, designul grafic și designul web sunt, după cum se spune în Odesa, două mari diferențe. Punctul cheie aici este dimensiunea paginii. În versiunea tipografică, este fix, iar pagina web se poate întinde și micșora în funcție de ceea ce este vizualizată.

Pentru a aplica o grilă modulară unei pagini web, ar trebui să utilizați o formulă simplă de proporționalitate:

target/context=rezultat

Cel mai simplu mod de a înțelege această formulă este cu un exemplu ilustrativ. Să presupunem că avem un aspect al site-ului desenat în două coloane - partea de conținut și bara laterală:

O vom face „cauciuc”. Dar aici este problema: cum să setați lățimea ambelor blocuri? La urma urmei, dacă îl înregistrați în pixeli, atunci nu vor mai fi cauciuc. Deci, trebuie să utilizați procente, nu pixeli. Dar lasă-mă, ce valori ar trebui să scriu? Totuși, trebuie să scapi de ceva.

Puteți, desigur, să estimați cu ochii: conținutul ocupă aproximativ 70% din lățimea totală a paginii, iar bara laterală - 30%. Dar designerul de layout potrivit nu estimează niciodată nimic cu ochii. Avem nevoie de dimensiunea exactă.

Pentru asta este formula proporționalității. Pur și simplu luăm lățimea blocurilor interioare și o împărțim la lățimea totală a paginii. Aici este toata pagina context, și, respectiv, fiecare dintre blocurile interne, ţintă din formula de mai sus.

660 / 960 = 0,6875
300 / 960 = 0,3125

Rămâne doar să convertim aceste date în procente. Nu prea deranjează, doar mutați virgula cu două zecimale la dreapta. Primim:

68,75%
31,25%

Este atât de simplu. Totuși, să complicăm sarcina. Să presupunem că avem partea de conținut împărțită în două părți mai inegale. De exemplu, în stânga există o coloană îngustă cu data articolului și butoanele sociale dispuse vertical, iar coloana din dreapta este largă, iar în ea avem textul articolului.

Știm din aspectul de design că această coloană îngustă are 120 px lățime și 520 px lățime. Cum transformăm aceste numere în %? Din nou, aplicați formula proporțională. Dar de această dată, nu folosim întreaga lățime a paginii ca context, ci lățimea blocului care include aceste două coloane, adică lățimea părții de conținut, pe care o avem, este de 660 de pixeli. Noi impartim:

120 / 660 = 0,1818
520 / 660 = 0,7878

Ca procent, obținem 18,18% și, respectiv, 78,78%.

Apropo, în fișierele de stil modern care utilizează aspect adaptiv, designerii de layout potriviți adaugă astfel de calcule sub formă de comentarii. Pentru o mai bună vizibilitate. Iată cum arată de obicei:

Conţinut(
latime: 68,75%; /* 660px / 960px */
}

Sper că acest lucru nu a cauzat probleme. Să mergem mai departe!

Aspect bazat pe grilă

Exemplele discutate mai sus nu sunt, desigur, încă o grilă. Ei bine, ce fel de grilă de două coloane? O adevărată grilă modulară este concepută pentru a ajuta atât designerii, cât și designerii de layout să creeze site-uri complexe cu multe coloane și blocuri individuale.

Prin urmare, au apărut o mulțime de servicii și instrumente convenabile care implementează această metodă ușor și simplu. De exemplu, 960.gs . Aici nu numai că puteți studia vizual principiul de marcare bazat pe o grilă modulară, ci și să descărcați șabloane și să le utilizați.

De fapt, astfel de servicii sunt acum un ban pe duzină! Se mai numesc și cadre. Alegeți care vă place cel mai mult. Iată o selecție grozavă de 30 de cadre CSS pentru design web receptiv.

Pentru ce sunt aceste grile modulare?

În primul rând, sunt necesare grile modulare pentru a organiza vizual conținutul de pe pagina site-ului. Acest lucru nu este doar frumos și plăcut pentru ochiul utilizatorului din punct de vedere estetic, ci și convenabil pentru dezvoltatori înșiși. Mai ales dacă site-ul este cu adevărat complex ca structură și conținut.

În plus, astfel de grile modulare sunt mult mai ușor de adaptat decât blocurile împrăștiate aleatoriu de diferite dimensiuni.

Și, desigur, viteza de dezvoltare a unor astfel de site-uri este mult mai mare. Nu trebuie să te prostești și să reinventezi roata de la zero. Este suficient să alegeți un cadru potrivit și să construiți un site web pe acesta.

Sper că acum știți ce este un aspect receptiv bazat pe o grilă modulară.

Data viitoare vom vorbi despre imagini flexibile în aspect adaptiv. Un subiect foarte important și controversat. Vă recomand să o studiați și cu atenție pentru a nu intra în mizerie. Ține legătura! Mai bine, abonați-vă la buletinul informativ al blogului Web Council.

Dezvoltare site

Orice designer de layout care se confruntă cu următoarea sarcină de a așeza un aspect adaptiv are nevoie de grile. În cele mai multe cazuri, bootstrap-ul vechi bun este luat și div-urile cu clase precum col-xs-6 col-sm-4 col-md-3 încep să apară în html. Și totul pare să fie bun și rapid, dar în această abordare există adesea multe capcane. În acest articol, ne vom uita la aceste capcane și vom arunca roșii putrede pe ambarcațiunea mea pentru grile fără probleme.

Probleme

Grile non-standard

Deci, designerul nostru de layout are foarte puțin timp, aspectul este în flăcări, totul trebuie făcut ieri. Prin urmare, el ia ca bază popularul framework CSS bootstrap și își începe munca. Și apoi, în plină muncă, dă brusc peste un bloc de bannere „5 la rând”. Toți cei care au lucrat cu bootstrap știu că grila sa implicită este de 12x, așa că 5 coloane la rând cu o grilă bootstrap standard nu sunt în niciun caz posibile. Da, desigur, puteți construi o grilă arbitrară în bootstrap, dar acesta este momentul să pierdeți, să descărcați dependențe, să construiți mai puțin-ki (și noi, de exemplu, scriem în sass).

Pot conecta o bibliotecă pentru grile personalizate? În general, aceasta este o soluție bună, singurul dezavantaj al acestei abordări este că aproape toate sunt concepute fie pentru scriere lungă și plictisitoare @media(min-width:)() , fie generează propriul set de clase, cu o o grămadă de, probabil că nu sunt necesare col15-xs- offset-3 , care vor fi incluse în css final.

Prin urmare, cu o probabilitate mare, designerul de layout va scrie pur și simplu toate stilurile manual (acolo, în principiu, nu este mult de scris acolo).

Foarte des, grilei standard de bootstrap îi lipsesc puncte de întrerupere suplimentare, adică există xs, sm, md, lg - toate până la o lățime de 1200px. Dar monitoarele mari? Un punct de întrerupere xl la 1600px solicită doar un set standard. Dar din nou, nu este acolo și apar aceleași soluții ca în paragraful anterior. Dar pot exista o mulțime de puncte de control - 320, 360, 640, 768, 992, 1200, 1600, 1900 ..

Redundanță și verbozitate

Și aici abordăm fără probleme următoarea problemă. Imaginați-vă că trebuie să vă setați propriile dimensiuni de bloc pentru fiecare grilă, apoi obțineți ceva de genul acesta:

Nu este prea mult? Introduceți posibilul tragere/împingere și vizibil/ascuns și apoi puteți începe în siguranță să înnebuniți. Dar toate aceste clase sunt scrise în css, imaginează-ți câte clase trebuie să scrii în css pentru toate combinațiile unei grile de 60x!

Separarea stilurilor de marcaj

Orice designer de layout știe că stilurile inline sunt proaste. Deci, de ce scriem în clasele de markup ceea ce privește stilurile? col-xs-6 , visible-sm și Doamne ferește text-right - acestea sunt toate stilurile, iar dacă trebuie să faceți modificări la aspectul deja extins, cu siguranță va exista o problemă pe care designerul de layout va trebui să o întrebe backend-ului -schik a schimba col-sm- 6 pe col-sm-4.

Suprapunerea stilurilor inutile

Adesea, cadrul css este conectat doar de dragul grilelor și a câteva funcții mici, ceea ce duce ulterior la o resetare excesivă a stilurilor și o dimensiune dublă a css-ului final. De exemplu, este inclus întregul bootstrap.min.css, iar apoi umbrele și colțurile rotunjite din .btn, .form-control și altele asemenea sunt eliminate într-o manieră distractivă și provocatoare, inclusiv :hover, :focus, :first- copil . Drept urmare, în loc să ajute, cadrul începe să stea în cale. Ca să nu mai vorbim de caracteristici adesea inutile, cum ar fi .glyphicon . Desigur, din nou, puteți asambla bootstrap din ceea ce aveți nevoie, dar din nou este timpul.

Standarde extraterestre și stil de cod

Să presupunem că un designer de layout a învățat BEM și a început să-l folosească. Dar necesitatea de a utiliza bootstrap dictează propriile excepții - în el toate clasele sunt scrise cu o cratimă, fără a respecta principiile BEM. Și aici apare problema alegerii - fie suportați un amestec în numele claselor (btn-block disabled component__btn component__btn_disabled), fie încă aruncați bootstrap-ul.

Metode depreciate

După cum știți, grilele bootstrap 3 se bazează pe floats. Ceea ce provoacă adesea probleme, una dintre cele mai frecvente este înălțimea diferită a blocurilor, în urma căreia frumoasa grilă „se rupe”. Nu mai folosi float-uri în alte scopuri, toate browserele care nu știu cum să flexbox aproape s-au stins!

Susy! - asta e calea de iesire?

În căutarea unei soluții la toate problemele de mai sus, mă aflu pe minunatul cadru de grilă Susy! , per total foarte bine. Dar mi-a lipsit viteza, pentru că susy! a sugerat descrierea coloanelor pentru fiecare punct de întrerupere separat:

.col ( @media (lățime minimă: 768 px) ( @include galerie (4 din 12); ) @media (lățime minimă: 1200 px) ( @include galerie (3 din 12); ) )

Asta este sussy! presupune că te vei ocupa singur de punctele de întrerupere. De asemenea, sussy! el nu scrie display: flex for lines for you, trebuie să vă amintiți să le scrieți singur. Indentațiile dintre coloanele din acesta sunt setate doar relative (nu va funcționa să fie fixate în pixeli). De asemenea, a învățat recent flex, iar înainte de asta a construit grile pe float și :nth-child() . În general, sussy! acest lucru este bun, dar aș dori viteza și ușurința de a descrie grile pentru toate punctele de întrerupere, așa cum a fost cu bootstrap.

Căutarea altor sisteme grid, de asemenea, nu a dat prea multe rezultate - toate fie urmează calea susy!, uitând de punctele de întrerupere, fie urmează calea bootstrap, oferind un set de clase generate pentru direcționarea grilelor în html.

Clădire de biciclete

Așadar, s-a decis să scriem ceva al nostru, ca urmare, s-a născut fast-grid. Este, de asemenea, ca și Susy, construit pe sass. Care sunt principalele avantaje pe care le oferă în comparație cu alte soluții, în special, susy!? În primul rând, viteza datorită mai puținului cod, să luăm un exemplu standard de bootstrap:

Folosind fast-grid, o astfel de grilă este foarte ușor de descris:

@import „~fast-grid/fast-grid”; .row ( @include grid-row(); ) .col ( @include grid-col(6 4 3 2); )

Să trecem acum prin deficiențele noastre și să vedem cum rapid-grid rezolvă toate aceste probleme.

Grile non-standard

@import „~fast-grid/fast-grid”; .cols ( $grid: (gap: 5px); @include grid-row($grid); &__item ( @include grid-col(12 6 null (1 din 5), $grid); ) )

Necesitatea propriului set de puncte de întrerupere

@import „~fast-grid/fast-grid”; .cols ( $grid: (puncte de întrerupere: (xxs: 0px, xs: 360px, sm: 640px, md: 960px, lg: 1200px, xl: 1600px), coloane: 60); @include grid-row($grid); &__item ( @include grid-col((xxs: 60, xs: 30, sm: 20, md: 15, lg: 12), $grid); ) )

Redundanță și verbozitate / Separarea stilurilor de markup

fast-grid este un cadru de grilă pentru utilizare în css, mai degrabă decât în ​​html, bazat pe seturi de clase generate. Acest lucru separă marcajul de stiluri, ceea ce este bun pentru suport viitor. De asemenea, evită nevoia de a genera o grămadă de clase de ajutor (.col-xs-push-4 etc.) care în mare parte nu sunt utilizate.

Suprapunerea stilurilor inutile

Deoarece fast-grid este un set de mixuri, nu generează nicio regulă CSS de la sine. Prin urmare, aici nu veți întâlni faptul că cadrul stilizează elementele într-un mod de care nu aveți nevoie. Și, în general, acestea sunt doar grile și nimic mai mult.

Standarde extraterestre și stil de cod

Fast-grid sunt mixurile pe care ar trebui să le utilizați intern ta clase, cu numele preferate. Îți place BEM? Nici o problema!

Metode depreciate

Implicit este flexbox, care deschide o mulțime de posibilități și rezolvă problemele floaturilor clasice. De exemplu, puteți schimba cu ușurință ordinea coloanelor.

În exemplul de mai jos, afișăm bara laterală sub conținutul principal pentru versiunea mobilă și o facem primul bloc pe ecrane mari.

Cu siguranță ar fi posibil să se realizeze acest lucru cu ajutorul tragerii / împingerii pentru plutire, dar aceasta este foarte cârjă.

Concluzie

În general, setul de sarcini pentru mine a fost finalizat - acum grilele nu-mi mai provoacă probleme, iar aspectul este rapid și ușor. Puteți citi mai multe despre capacitățile fast-grid din depozit și puteți vedea exemple:

Mai folosești bootstrap? Atunci mergem la tine!

Etichete:

• css
• sass
• grilă

Adaugă etichete

O grilă modulară este un șablon special pe care este construit designul site-ului. De fapt, acesta este un sistem de prezentare a informațiilor vizuale vizitatorului bazat pe blocuri separate numite module. Un site dezvoltat folosind un astfel de șablon este mult mai convenabil pentru percepție și navigare.

Cum se aplică grila

Grila modulară este utilizată în proiectarea cărților, cărților de vizită, mărcilor comerciale, logo-urilor etc. Este, de asemenea, necesar să o utilizați la crearea site-urilor web. O grilă realizată corect compune armonios mediul pentru toate elementele resursei - grafic și text. Cu utilizarea sa, este mult mai ușor să le plasați pe toate pe pagină și să creați limite clare între ele. Prin aranjarea elementelor într-un anumit mod, puteți face fiecare dintre ele vizibile și, în același timp, legați împreună toate informațiile despre site-ul în sine.

Tipuri de grile modulare

Cea mai comună grilă modulară în designul paginii este cele trei coloane de bază de celule. În acest caz, antetul și subsolul au o lățime egală cu dimensiunea lor. Această opțiune standard este folosită de obicei de amatori atunci când creează site-uri. Uneori, aceasta mărește lățimea unei celule în detrimentul lățimii alteia.

Crearea unei a doua versiuni de grile modulare - non-standard - este posibilă numai pentru persoanele care sunt angajate profesional în design web. În acest caz, doar lățimea coloanelor și distanța dintre elementele individuale sunt definite cu precizie. O grilă modulară în proiectarea diferitelor tipuri de resurse de știri și reviste online este de obicei dezvoltată după cum urmează:

1. Subsolul este creat. Numele site-ului, meniul de navigare, diverse materiale video ar trebui să fie localizate aici.
2. Pagina este împărțită în trei coloane. Cu toate acestea, două dintre ele au aceeași dimensiune. A treia coloană este împărțită în două părți printr-o linie verticală. Astfel, se obțin patru secțiuni (știri, galerie foto, spațiu publicitar, ultimele modificări de informații de pe site).

O grilă modulară pentru magazinele online de diferite specializări este creată într-un mod ușor diferit. În acest caz, este foarte important să se ofere ușurință în navigare pentru vizitatori. În același timp, elementele sunt grupate într-un mod standard și uniform. Pentru fiecare dintre obiectele din grilă sunt alocate informații importante care îl caracterizează.

Riglă în Photoshop

Site-urile sunt create folosind raster sau vector Este foarte convenabil să creați o grilă în ele. Luați în considerare cum se face acest lucru în popularul editor Photoshop. Crearea unei grile modulare în Photoshop este foarte simplă.

Pentru ca riglele să apară în jurul perimetrului ferestrei imaginii de lucru, accesați elementul din meniul principal „Vizualizare” (Vizualizare) și faceți clic pe linia „Rigle” (Rigle). În acest editor, puteți utiliza o varietate de elemente - cu diviziuni în centimetri, milimetri, inci sau pixeli. Pentru a efectua setările necesare, ar trebui să mergeți la elementul din meniul principal „Editare” (Editare). Apoi, selectați linia „Setări” (Preferințe) - „Unități și rigle” (Unități și rigle). După aceea, va apărea o fereastră în care puteți schimba aspectul riglei. În meniul derulant de sus, selectați centimetri, milimetri, pixeli etc.

Cu toate acestea, de obicei, atunci când lucrează în editorul Photoshop, folosesc o metodă puțin diferită, mai simplă. Pentru a schimba unitățile de măsură, faceți clic pe rigla însăși în fereastra de imagine cu butonul din dreapta al mouse-ului. După aceea, în meniul care apare, puteți efectua acțiunea dorită. De obicei, la crearea unui site, se folosește o grilă de pixeli.

Grilă Photoshop

Grila modulară a programului Photoshop în sine va deveni vizibilă după ce accesați elementul din meniul principal „Vizualizare” - „Afișare” (Afișare) - „Grilă” (Grilă). Distanța dintre liniile grilei poate fi ajustată. Pentru a face acest lucru, executați comanda „Editare” - „Setări” - „Ghiduri, grile și fragmente” (Ghiduri, Grilă, Secțiuni). Aici puteți schimba nu numai pasul dintre linii, ci și culoarea acestora. Folosind această grilă, va fi absolut ușor să plasați rapid și precis toate obiectele viitorului site pe câmpul de lucru.

Lucrul cu cursorul

Grila modulară a site-ului este creată în acest fel foarte simplu. Cursorul se lipește de linii în timpul lucrului. Acest lucru poate fi util dacă trebuie să faceți blocuri de dimensiuni precise, definite. Dacă dintr-un motiv oarecare nu este necesară această funcție, poate fi dezactivată. În mod implicit, originea grilei în Photoshop este situată în colțul din stânga sus al ferestrei. Dacă se dorește, poate fi mutat în orice alt loc de pe pânză. Pentru a face acest lucru, mutați cursorul peste pătratul originii și pur și simplu trageți-l în timp ce țineți apăsat butonul mouse-ului. Pentru a readuce punctul de referință la locul său, faceți dublu clic pe același pătrat din colț.

Printre altele, există diverse plugin-uri pentru editorul Photoshop care fac crearea unui site folosind o grilă modulară și mai convenabilă. Descărcați-le online. Folosind aceste pluginuri, puteți crea grile cu parametri specificați.

Grilă în CorelDraw

Acum să vedem cum să facem o grilă modulară în editorul vectorial CorelDraw. Aici este creat în aproape același mod ca în Photoshop. Pictograma sa este situată în panoul de sus (ochiul în grilă). După ce faceți clic pe el, puteți face toate setările necesare. Puteți selecta distanța dintre linii, schimba unitatea de măsură etc. Delimitați câmpul de lucru în fereastra de imagine din CorelDraw și folosind ghiduri. Ele pot fi făcute vizibile sau invizibile după cum este necesar.

O grilă modulară în designul site-ului web este un element fundamental, a cărui dezvoltare trebuie abordată cu cea mai mare responsabilitate. La urma urmei, comoditatea vizitatorilor săi și, prin urmare, timpul petrecut pe paginile sale, depinde de cât de bine este structurată resursa.

„Grila este un sistem de ajutor, dar nu este o garanție, ci are doar o serie de aplicații posibile, iar fiecare designer poate găsi însuși o soluție care se potrivește stilului său individual. Dar trebuie să înveți cum să folosești grila. este o artă care necesită practică.”

— Joseph Müller-Brockmann

De fapt, însăși utilizarea grilei este legată de unul dintre cele mai vechi și de bază principii de proiectare - alinierea. Creierul nostru vrea să simplifice și să facă lucrurile mai ușor de înțeles. De aceea încercăm să punem ordine în lucrurile care par haotice.

Desigur, cu cât organizăm totul corect mai repede, cu atât creierul nostru va putea determina mai repede modelul și va merge mai departe. Grilele sunt atât de ordonate încât nu necesită aproape nicio interpretare din partea noastră. .

Luați în considerare cele două aspecte de pagină prezentate în figura de mai jos:

Deși ambele imagini sunt doar câteva dreptunghiuri, setul din partea de sus pare fundamental mai bun decât cel din jos. Putem recunoaște instantaneu modelul, îl putem accepta și merge mai departe. Imaginea de mai jos, pe de altă parte, provoacă disconfort vizual, deoarece nu are un model, ordine sau scop clar și arată ca o colecție aleatorie de forme.

De menționat că dezorganizarea poate fi și frumoasă. . În natură, de exemplu, nu există linii clare. Grilele arată reci și rigide, dar amintiți-vă că sunt o metodă foarte eficientă și eficientă de a nu vă lăsa imaginația să se blocheze în structuri.

Aruncă o privire la unele dintre cele mai populare site-uri cu design de top. Cel mai probabil au folosit o grilă. Grilele vă permit să stabilizați structura unei pagini web și să ofere un șablon logic pentru ca designerul să creeze un site.

Folosirea unei grile nu înseamnă că designul tău va fi plictisitor. Un designer bun ar trebui să cunoască și să poată aplica regulile de bază pentru utilizarea unei grile, dar asta nu înseamnă că nu poate încălca regulile.

Mai simplu spus, o grilă este împărțirea unui aspect în ghiduri verticale și/sau orizontale, inclusiv margini, spațiu și un număr de coloane pentru a pune bazele organizării conținutului.

Grilele sunt folosite în mod tradițional în tipărire, dar sunt utilizate în mod obișnuit și în design web. Grila este doar un instrument care ajută la proiectare.

Când începeți să învățați noi abilități într-o anumită zonă, trebuie mai întâi să urmați recomandările. Învățarea elementelor fundamentale vă asigură că puteți aplica principiile în mod eficient. Adică, mai întâi - teorie, apoi - practică.

Este demn de remarcat faptul că există două moduri de a crea o grilă de șablon:

Metoda #1: Creează-ți propria grilă

Există multe moduri diferite de a-ți crea propria plasă, dar în cele din urmă, ești liber să o alegi pe cea care ți se potrivește cel mai bine.

Puteți împărți matematic un document gol, creând un număr par sau impar de coloane cu care să lucrați. Rețeaua ta poate fi complexă sau simplă, poți folosi regula treimilor sau raportul de aur, după cum preferi.

Poate că următoarele articole vă vor ajuta în acest sens:

• Cum faci o grilă (carte pdf)

Iată câteva exemple de plase create în Photoshop folosind ghiduri ( Vizualizare > Ghid nou):

Plugin-uri pentru crearea de grile în Photoshop

5. Grid System Generator - generator de grile populare precum 960.gs, Golden Grid, 1Kb Grid, Simple Grid / setați parametrii doriti și faceți clic pe „GENERATE”.

Grile pentru site-uri web responsive/responsive

Designul web responsive este foarte popular astăzi. Principiul său principal este utilizarea unei plase de cauciuc. Puteți citi mai multe despre ele, dar aș dori să completez puțin această colecție și să mai adaug câteva resurse.

1. - generator de rețea adaptivă

2. Calculator de grilă fluidă - un serviciu care vă permite să creați o grilă de cauciuc. Introduceți parametrii și obțineți codul final.

Totul nu este cumva suficient timp, așa că am decis să scriu un articol pe tema grilelor modulare în web design, poate cineva va găsi informațiile utile și interesante. Grila modulară este un instrument foarte util pentru un web designer, iar mulți începători o neglijează din anumite motive, dar în zadar.

În articolul de astăzi, voi încerca să vorbesc despre ce este o grilă modulară, ce sarcini îndeplinește, cum o puteți construi singur și, de asemenea, voi arăta un exemplu de creare a unui aspect de design de site folosind exemplul său.

De exemplu, am creat un aspect simplu de design de blog. Desigur, nu voi lua în considerare toate detaliile creării unui design în cadrul acestui articol, voi arăta doar principiul general al modului în care o grilă poate fi utilizată pentru a crea un design de site web.

Ce este o grilă modulară?

Grilă modulară este un sistem modular de layout, care este o grilă cu un ritm vertical și orizontal, intersecțiile ritmurilor formând module. Astfel, întreaga grilă este formată din astfel de module, de unde și numele.

Un modul poate fi numit o unitate de măsură creată pentru a oferi proporționalitate și proporționalitate.

Probabil scris prea abstrus. Voi încerca să explic în termeni simpli, în lumea noastră există o mulțime de exemple de grile modulare, de exemplu, un zid de cărămidă cu jumătate de cărămidă va fi doar o grilă modulară, iar o cărămidă va fi un modul.

Gresia și în baie, întregul perete este o grilă modulară (cu condiția ca toate gresia să aibă aceeași dimensiune), iar o gresie este un modul sau unitate de măsură, ca și în cazul nostru.

Pentru ce este grila și ce sarcini îndeplinește?

Grila este necesară pentru dezvoltarea rapidă a unui layout, prototip, site web sau design de aplicație. Economisește mult timp la dezvoltare, structurare, șabloane de aspect. Îndepărtează problemele legate de poziționarea și alinierea blocurilor de proiectare. Simplifică munca atât a designerului, a designerului de layout, cât și a echipei de dezvoltare în ansamblu.

• Accelerează procesul de dezvoltare. Avem nevoie de mult mai puțin timp pentru a selecta un loc pentru blocuri în aspect.
• Ajută la poziționare. Toate elementele sunt aliniate unul față de celălalt pe grilă, iar poziționarea durează minim.
• Permite șabloane. După ce am dezvoltat o grilă modulară, creăm o bază șablon pentru întregul proiect, atât în ​​dezvoltare, cât și pentru deciziile viitoare. De asemenea, oferim opțiuni de modificare rapidă.
• Elimină erorile. Grila vă permite să evitați o serie dintre cele mai frecvente greșeli de poziționare, structurare, dimensiuni și indentări între blocuri.
• Este un singur sistem de proporții. Datorită modulelor, toate elementele din layout sunt proporționale și proporționale între ele.
• Structurarea si organizarea. Datorită grilei modulare, aspectul devine mai structurat și mai ordonat, designul este perceput ca fiind mai confortabil.
• Conduce la un aspect mai estetic. O structură clară și logică a site-ului rezultat oferă un aspect mai estetic.
• Ajută alți participanți la proiect în dezvoltarea ulterioară. Un design construit folosind un sistem de layout modular este mult mai ușor de tipărit decât un aspect construit fără grilă. Grila oferă designerului de layout standardizarea soluțiilor, accelerează procesul de layout. Îi face mai ușor pentru o echipă mare să lucreze la proiecte la scară largă. De asemenea, permite noilor dezvoltatori și participanților la proiect să înțeleagă aspectul mult mai rapid. Ceea ce, la rândul său, duce la un rezultat mai holistic al lucrării.

Construirea unei grile modulare

În primul rând, înainte de a începe să creăm o grilă modulară, trebuie să stabilim dimensiunea aspectului viitorului site. Determinăm sub ce rezoluție minimă creăm un aspect.

Cele mai frecvent acceptate rezoluții minime sunt rezoluțiile monitorului de 1024x768 și 1280x720 pixeli. Desigur, pot fi alese și alte rezoluții, ca întotdeauna, totul depinde de sarcina în fața ta. Pe baza acestor parametri, va trebui să creăm . Dintre acestea, lățimea este cea mai importantă pentru noi, deoarece este adesea fixă ​​pentru site-uri, în timp ce înălțimea, dimpotrivă, variază în funcție de conținutul site-ului.

În acest caz, voi crea o pânză lată de 1000 px cu o rezoluție minimă de 1024x768 px. Voi face partea de conținut 960 de pixeli, 20 de pixeli indentări de-a lungul marginilor (lățimea marginilor noastre).

Crearea unei grile de fonturi

În primul rând, creăm o grilă de fonturi. Alegem o înălțime de linie pentru întregul aspect al site-ului. Îl căptăm ca pe un caiet, pe care vom avea toate textele, listele, ilustrațiile, titlurile, paragrafele și alte matrițe. De obicei creez o înălțime de linie de 18 pixeli, dar poate exista o dimensiune diferită, totul depinde de dimensiunea și fontul selectat.

Spațiere între linii(în înălțimea liniei CSS) poate fi calculată în două moduri:

1. Dimensiunea fontului conținutului principal (16pt) / 2 + dimensiunea fontului conținutului principal (16pt) = 24pt.
2. Dimensiunea fontului conținutului principal (16 pt) x 1,5 = 24 pt.

Construirea unei diviziuni verticale sau a unei grile de coloane

Acum, pentru partea distractivă, trebuie să creăm grila de coloane. Lățimea coloanei determină lățimea modulului nostru. Deci, trebuie să determinăm această lățime, cum se poate face acest lucru.

1. Dacă site-ul este planificat să aibă un bloc cu o valoare constantă (banner, video, ilustrație etc.). Aceste blocuri au dimensiuni fixe și includ adesea mai multe module. Astfel, cunoscând dimensiunea acestora, putem determina cu ușurință lățimea modulului, este suficient să înțelegem că blocul trebuie să fie în lățimea modulelor.
2. A doua modalitate este atunci când aveți sarcini specifice pe care vă puteți baza. De exemplu, conform sarcinii, merită să plasați un anumit număr de blocuri într-o linie pe toată lățimea corpului site-ului, să zicem 6. Apoi, cunoscând acest parametru, putem estima că un astfel de bloc include două module în lățime. . În consecință, o grilă cu 12 coloane este potrivită pentru noi.

În plus, trebuie să determinăm distanța dintre module sau coloane. Eu folosesc mai ales dimensiunea liniei grilei de fonturi, în acest caz este de 18 px.

Astfel, obținem o lățime a modulului egală cu 63,5 rotunjită la 63 de pixeli. Mai avem 0,5 pixeli pentru fiecare modul, avem 12 dintre ei, în total 6 pixeli, îi vom împrăștia în câmpuri de 3 pixeli, astfel câmpurile noastre vor crește și vor deveni egale cu 23 pixeli, nu 20, respectiv, iar partea de conținut va deveni egal cu 954 pixeli.

Notă: numărul de coloane depinde de nevoi și sarcini și poate varia. Cu toate acestea, merită luat în considerare faptul că este mai convenabil să lucrezi cu module de dimensiuni medii decât cu cele mari sau mici. Modulele mari se dovedesc a fi voluminoase și mai puțin flexibile în manipulare, în timp ce cele mici sunt foarte dispersate și pierdute, ceea ce face, de asemenea, incomod de utilizat.

Efectuarea unei împărțiri orizontale

Totul aici este doar luarea mai multor linii și combinarea lor într-o singură linie, apoi săriți peste o linie și din nou combinând mai multe rânduri. În cazul nostru, voi combina trei. Toate liniile sunt create într-o formă semi-transparentă, astfel, în punctele lor de intersecție, se formează pătrate, care vor fi modulele noastre. Aceasta este practic întreaga grilă modulară creată.

Creați un prototip de aspect

Acum, cu un mic exemplu, voi arăta cum poate fi folosită această grilă. Foarte des, primul lucru pe care îl fac este să desenez o schiță pe hârtie, este atât de ușor să schițezi rapid opțiuni în funcție de sarcină, iar când există deja o anumită structură, o transfer pe grilă, o fac. Creând un prototip, acolo unde este necesar, combin mai multe module în regiuni și arunc toate blocurile cu zaruri.

Proiectare, detaliere, pregătire

Având un prototip, vă puteți imagina cu ușurință structura de design, blocurile site-ului. Puteți estima confortul, gradul de utilizare și, dacă este necesar, corectați rapid. În plus, după ce prototipul ni se potrivește complet, putem trece la desenarea designului în sine, desenând detaliile.

Și așa arată aspectul fără grila modulară în cele din urmă după toată munca depusă.

Aspectul a fost realizat exclusiv pentru acest articol. Pentru a arăta cu un exemplu cum să utilizați o grilă modulară în design web. Aș dori să remarc că grila poate fi folosită în combinație cu ghidaje, această metodă este și mai eficientă.

Și în concluzie, vreau să spun dacă depinde de tine să folosești grile în munca ta sau nu, am vrut doar să vorbesc puțin despre acest instrument de web designer, care mă ajută foarte mult în munca mea.

Mai jos puteți vedea procesul pas cu pas de creare a unui design de la un prototip la un aspect final al site-ului din acest articol.

Proces video pentru crearea unui design de site web folosind o grilă modulară:

• Lectia 1:
• Lectia 2:
• Lecția 3: