Dezvoltare site

Orice designer de layout se confruntă cu o altă sarcină de layout aspect receptiv, sunt necesare 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-ke. Și totul pare să fie bun și rapid, dar în această abordare apar adesea multe capcane. În acest articol ne vom uita la aceste capcane și vom arunca roșii putrede, luați în considerare meșteșugul meu pentru plase fără probleme.

Probleme

Ochiuri personalizate

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 cadru bootstrap css și își începe munca. Și apoi, în plină muncă, dă brusc peste un bloc de bannere „5 la rând”. Oricine a lucrat cu bootstrap știe că grila sa implicită este de 12x, deci 5 coloane la rând cu o grilă bootstrap standard, ei bine, nu o poți face. Da, desigur, puteți asambla o grilă arbitrară în bootstrap, dar acesta este timpul să pierdeți, să descărcați dependențe, să colectați mai puțin ki (și noi, de exemplu, scriem în sass).

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

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

Foarte des, grila standard de bootstrap nu are puncte de întrerupere suplimentare, adică există xs, sm, md, lg - toate cu o lățime de până la 1200px. Dar ce zici de monitoare mari? Orice punct de întrerupere xl la 1600px cere doar set standard... Dar din nou, nu există și apar aceleași soluții ca și în paragraful anterior... Dar la urma urmei puncte de control pot fi multe - 320, 360, 640, 768, 992, 1200, 1600, 1900 ..

Redundanță și verbozitate

Și apoi ne apropiem lin următoarea problemă... Imaginați-vă că trebuie să scrieți propriile dimensiuni de bloc pentru fiecare grilă, apoi obțineți ceva de genul acesta:

Este prea mult? Adăugați aici 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 60 de ori!

Separarea stilurilor de marcaj

Orice scriitor știe că stilurile inline sunt proaste. Deci, de ce scriem stilul în clasele noastre de markup? col-xs-6, visible-sm și Dumnezeu ferește text-right - acestea sunt toate stilurile, iar dacă trebuie să faceți modificări la un aspect deja întins, cu siguranță va exista o problemă pe care designerul de layout va trebui să o întrebe backend-ului 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, întregul bootstrap.min.css este conectat, iar apoi umbrele și colțurile rotunjite ale .btn, .form-control și altele asemenea sunt eliminate vesel și vesel, inclusiv: hover,: focus,: first-child. Drept urmare, în loc să ajute, cadrul stă în cale. Ca să nu mai vorbim de caracteristicile adesea inutile, cum ar fi.glyphicon. Desigur, din nou, puteți colecta bootstrap din ceea ce aveți nevoie, dar este din nou momentul.

Standarde străine și stil de cod

Să presupunem că un designer de layout a studiat 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 atunci apare problema alegerii - fie suportați mizeria din numele claselor (btn-block disabled component__btn component__btn_disabled), fie încă aruncați bootstrap-ul.

Metode depreciate

După cum știți, grilele din bootstrap 3 sunt bazate pe float. Ceea ce provoacă adesea probleme, una dintre cele mai frecvente este diferitele înălțimi ale blocurilor, în urma cărora frumoasa plasă „se rupe”. Nu mai folosi floats în alte scopuri, toate browserele care nu știu să flexbox sunt aproape dispărute!

Susy! este aceasta o cale de ieșire?

În căutarea unei soluții la toate problemele de mai sus, mă aflu pe minunatul cadru de rețea 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ă: 768px) (@include galerie (4 din 12);) @media (lățime minimă: 1200px) (@include galerie (3 din 12);))

Adică, Susy! presupune că veți face singuri punctele de întrerupere. De asemenea, susy! 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 pentru a face fix în pixeli). De asemenea, a învățat recent flex, iar înainte de asta a construit grile cu float și: nth-child (). În general, susy! 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 - toată lumea fie urmează calea susy!, uitând de punctele de întrerupere, fie urmează calea bootstrap, oferind un set de clase generate pentru rularea rețelelor în html.

Clădire de biciclete

Așadar, s-a decis să scrie ceva al lor, ca urmare a luat naștere fast-grid. De asemenea, este construit cu sas ca Susy. Care sunt principalele avantaje ale acestuia în comparație cu alte soluții, în special cu susy !? În primul rând, viteza datorită mai puținului cod, să luăm un exemplu standard de bootstrap:

Cu 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 rețeaua rapidă rezolvă toate aceste probleme.

Ochiuri personalizate

@import „~ fast-grid / fast-grid”; .cols ($ grid: (gap: 5px); @include grid-row ($ grid); & __ element (@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); & __ articol (@include grid-col ((xxs: 60, xs: 30, sm: 20, md: 15, lg: 12), $ grid);))

Redundanță și verbozitate / Separarea stilurilor de marcare

fast-grid este un cadru grid pentru utilizare în css, nu html bazat pe seturi de clase generate. Acest lucru separă marcajul de stiluri, ceea ce este benefic pentru suportul viitor. De asemenea, elimină nevoia de a genera o grămadă de clase de ajutor (.col-xs-push-4 etc.) care sunt în mare parte neutilizate.

Suprapunerea stilurilor inutile

Deoarece fast-grid este o grămadă de mixuri, nu generează nicio regulă în css de la sine. Prin urmare, aici nu veți da peste faptul că cadrul modelează elementele așa cum nu aveți nevoie. Oricum, acestea sunt doar grile și nimic altceva.

Standarde străine și stil de cod

fast-grid sunt mixuri pe care trebuie să le utilizați intern ta cursuri cu numele preferate. Îți place BEM? Nici o problemă!

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 versiune mobila, și fă-l primul bloc pe ecrane mari.

Ar fi posibil să se realizeze acest lucru, desigur, folosind trage / împingere 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 capabilitățile de rețea rapidă în depozit și puteți vedea exemple:

Mai folosești bootstrap? Atunci mergem la tine!

Etichete:

• css
• sass
• grilă

Adaugă etichete

Continuând subiectul aspect adaptiv... Azi va fi despre una dintre cele trei balene cu aspect adaptiv - aspect bazat pe grilă(aspect flexibil bazat pe grilă). Celelalte două sunt imagini flexibile.

La mijlocul secolului al XX-lea designeri grafici a popularizat conceptul tipografic, 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.

dar design grafic iar designul web este, după cum se spune în Odesa, două mari diferente. Moment cheie aici este dimensiunea paginii. În tipografie, este fix, iar o pagină web se poate întinde și micșora în funcție de ceea ce este vizualizată.

Pentru a aplica o grilă modulară unei pagini web utilizați formulă simplă proporționalitate:

tinta / context = rezultat

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

O facem „cauciuc”. Dar aici este problema: cum să setați lățimea ambelor blocuri? La urma urmei, dacă îl scrieți în pixeli, atunci nu vor mai fi cauciuc. Aceasta înseamnă că trebuie să utilizați procente, nu pixeli. Dar scuza-ma, ce semnificatii sa scriu? La fel, la urma urmei, trebuie să porniți de la ceva.

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

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

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

Rămâne doar să traducem aceste date în procente. Fără să vă deranjați prea mult, mutați virgula două caractere la dreapta. Primim:

68,75%
31,25%

E la fel 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 butoane sociale, dispus vertical, iar coloana din dreapta este lată, iar în ea avem textul articolului.

Știm din aspectul de design că lățimea acestei coloane înguste este de 120 de pixeli, iar cea largă este de 520. Cum traduceți aceste numere în%? Din nou, aplicați formula proporțională. Dar de data aceasta nu folosim ca context întreaga lățime a paginii, ci lățimea blocului care conține aceste două coloane, adică lățimea părții de conținut, pe care o avem este de 660 pixeli. Împărțim:

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

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

Apropo, în dosare moderne Pentru stilurile care folosesc machete receptive, compozitorii potriviti adaugă calcule similare ca comentarii. Pentru o mai bună claritate. Așa arată de obicei:

Continut (
latime: 68,75%; / * 660px / 960px * /
}

Sper că asta nu a fost o problemă. Să mergem mai departe!

Aspect bazat pe grilă

Exemplele de mai sus nu sunt, desigur, încă o plasă. Ei bine, care este grila cu 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 web complexe, cu multe coloane și blocuri individuale.

Prin urmare, a existat o masă servicii convenabile iar instrumentele care implementează această metodă sunt simple și simple. De exemplu 960.gs. Aici nu numai că puteți studia vizual principiul aspectului 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 pe o pagină de site. Nu este doar frumos din punct de vedere estetic și plăcut pentru ochiul utilizatorului, 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 folosindu-l.

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

Data viitoare, să vorbim despre imagini flexibile în aspect adaptiv... Un subiect foarte important și controversat. Îți recomand să-l studiezi bine și tu, pentru a nu intra în mizerie. Ține legătura! Mai bine, abonați-vă la buletinul informativ al Consiliului Web.

În această lecție, ne vom pregăti pentru aspectul site-ului folosind PSD layout folosind numai grilă (sistem grilă) din cadru Bootstrap 4... Învățând această metodă de aspect, vă scutiți de necazul posibile probleme cu capacitatea de răspuns a site-ului, este deosebit de bun pentru începători.

Adaptabilitatea site-ului la codificare prin Grila bootstrap oferi cutii flexibile acceptat de toate browserele majore și chiar Internet Explorer, incepand cu IE9 +... Pentru mai mult versiuni timpurii, Cum IE 9, includem scripturi care ajută la afișarea corectă a aspectului nostru.

src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js">

Și cel mai important lucru - PSD aspectul ar trebui inițial desenat ținând cont de mai departe Aspecte bootstrap... Și așa, nu există un alt motiv pentru care să nu tipăriți în funcție de grila bootstrap, atât în ​​proiectele dvs., cât și la comandă. Voi încerca să dau mai puțină teorie, fără apă și mai multă practică.

Pregătirea pentru layout

Deschideți aspectul în Photoshopși asigurați-vă că are o aliniere cu 12 coloane cu ghidajele și că toate elementele de design sunt aliniate cu acele ghidaje. Distanța dintre ghidajele exterioare este de obicei de 1170 pixeli.

Descărcați pe site https://getbootstrap.com/ compilate CSSși Js pentru o integrare ușoară în proiectul dvs.

Copiați din secțiune Introducere / șablon de pornire- șablon de pagină de pornire și inserați în index HTML-dosarul proiectului dumneavoastră. Am creat un gol pentru viitor HTML document.

Descarca bootstrap.min.css sau folosești un link către el?

Se crede că dosarul bootstrap.min.css se va încărca mai repede, deoarece se află pe mai multe servere și nu pe unul dintre serverele dvs. Aceasta înseamnă că site-ul se va deschide mai repede. Dacă totuși decideți să descărcați acest fișier pentru dvs., atunci specificați calea corectă către folder cu Bootstrap fișiere. Creați gol CSS fisierul in care iti vei scrie stilurile este necesar in orice caz.

Important! Ta CSS fișierul din fișierul index trebuie să fie legat mai jos decât bootstrap.min.css.

Conectăm fonturi. Ce fonturi și pictograme folosește designerul în aspect pot fi văzute în program Photoshop sau într-o extensie de browser Chrome - WhatFont.

rel = "stylesheet" type = "text / css">

De ce avem nevoie de doi CSS fişier?

CSS fişier bootstrap.min.css Este o bibliotecă la care nici măcar nu trebuie să mergi. Lucrăm doar cu un singur fișier - main.css, trebuie doar să vă asigurați că numele noilor clase pentru dvs CSS fișierul nu se potrivea din greșeală cu cel „biblioteca”.

În dosar bootstrap.min.css deja stilat pentru grila activată flexbox-ah iar interogările media sunt specificate, trebuie doar să scriem clasele corespunzătoare blocurile necesare pe HTML pagină. Numele claselor pot fi găsite pe pagina cadru sub Grilă... Designeri de layout cu experiență pentru Aspecte bootstrap conectați pluginuri ( Bootstrap 4 Autocomplete, Bootstrap 4 Snippets) la editorul de cod Text sublim.

Ne despartim PSD aspectul blocului

Vedem că site-ul este format din 8 blocuri: antet (antet) cu navigare prin meniu (nav), 6 secțiuni (secțiune) si subsol (subsol).

În secțiuni (secțiunea: #servicii, #portofoliu) apar coloane pe care le vom dispune în funcție de componenta principală Bootstrap - o grilă.

O facem mai întâi HTML marcajul structurii principale, detaliile vor fi adăugate în cursul aspectului.

În partea următoare, să începem aspectul, dar nu întregul aspect, ci blocurile sale individuale. Deoarece scopul acestor lecții este de a arăta începătorilor cum să combine cu succes aspectul obișnuit al aspectului cu aspect pe grila Bootstrap.

O grilă modulară este un șablon special care este folosit pentru a construi un site web. De fapt, este un sistem de prezentare a informațiilor vizuale vizitatorului bazat pe blocuri separate, numite module. Un site web dezvoltat folosind un astfel de șablon este mult mai ușor de citit și de navigat.

Cum se aplică plasa

Grila modulară este utilizată în dezvoltarea de design-uri pentru cărți, cărți de vizită, mărci comerciale, logo-uri etc. Este obligatorie utilizarea acesteia la crearea site-urilor. O grilă realizată corect compune armonios mediul pentru toate elementele resursei - grafic și text. Face 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 celule de bază. În acest caz, antetul și subsolul au o lățime egală cu dimensiunea lor. Acest versiune standard folosit de obicei de amatori la crearea site-urilor. Uneori, lățimea unei celule crește din cauza lățimii celeilalte.

Crearea celei de-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 acestea elemente separate... Grilă modulară în design tipuri diferite Resursele de știri și reviste online sunt de obicei dezvoltate după cum urmează:

1. Se creează un antet și un subsol. Numele site-ului ar trebui să fie localizat aici, meniu de navigatie, diverse tipuri de materiale video.
2. Pagina este împărțită în trei coloane. Mai mult, două dintre ele au aceleași dimensiuni. A treia coloană este împărțită în două printr-o linie verticală. Astfel, se obțin patru secțiuni (știri, galerie foto, spațiu publicitar, ultimele modificări informaționale de pe site).

Grila 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 o navigare ușoară pentru vizitatori. În același timp, elementele sunt grupate într-un mod standard și uniform. Pentru fiecare dintre obiectele din grilă, a Informații importante caracterizând-o.

Riglă în editorul Photoshop

Site-urile web sunt create folosind raster sau vector. Mesh-urile din ele sunt foarte convenabile de creat. Să vedem cum se face asta în editor popular Photoshop. Este foarte simplu să creezi o grilă modulară în Photoshop.

Pentru ca riglele să apară de-a lungul perimetrului ferestrei imaginii de lucru, accesați elementul din meniul principal „Vizualizare” și faceți clic pe linia „Rigle”. În acest editor puteți folosi cel mai mult elemente diferite- cu diviziuni în centimetri, milimetri, inci sau pixeli. Pentru a efectua setările necesare, accesați elementul din meniul principal „Editare”. Apoi selectați linia „Preferințe” - „Unități și rigle”. După aceea, va fi evidențiată 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ă, trebuie doar să faceți clic pe rigla în sine în fereastra de imagine Click dreapta soareci. După aceea, în meniul care apare, puteți face acțiunea necesară... De obicei, la crearea unui site web, se folosește o grilă în pixeli.

Grilă Photoshop

Grila foarte modulară a programului Photoshop va deveni vizibilă după ce veți accesa elementul din meniul principal „Vizualizare” - „Afișare” - „Grilă”. Distanța dintre liniile grilei este configurabilă. Pentru a face acest lucru, executați comanda „Editare” - „Preferințe” - „Ghiduri, grilă și felii” (Ghiduri, grilă, felii). Aici puteți schimba nu numai pasul dintre linii, ci și culoarea acestora. Folosind această grilă, va fi destul de 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 foarte ușor de creat în acest fel. Cursorul se lipește de linii atunci când lucrează. Acest lucru poate fi convenabil dacă trebuie să faceți blocuri de dimensiuni precise, definite. Dacă, dintr-un motiv oarecare, această funcție se dovedește a fi inutilă, o puteți dezactiva. În mod implicit, originea grilei în Photoshop este situată în colțul din stânga sus al ferestrei. Dacă doriți, îl puteți muta în orice alt loc de pe pânză. Pentru a face acest lucru, plasați cursorul pe 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 plecare la locul său, faceți dublu clic pe același pătrat din colț.

Printre altele, există tot felul de plugin-uri pentru editorul „Photoshop”, permițându-vă să faceți crearea unui site folosind o grilă modulară și mai convenabilă. Descărcați-le online. Folosind aceste pluginuri, puteți crea rețele cu parametri specificați.

Grilă în CorelDraw

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

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

De la autor: din păcate, mulți designeri web la modă și eficienți uită adesea că rezultatul muncii lor ar trebui să fie un site digerabil și nu frumoasa captură de ecran, potrivit doar pentru un portofoliu. În acest articol, am formulat cerințele care trebuie luate în considerare în procesul de proiectare și stilizare a unei interfețe web.

Grila modulară în design web este o soluție fundamentală care nu numai că va îmbunătăți uzul de utilizare a unui site, ci și va face viața mult mai ușoară dezvoltatorilor.

Ce este o grilă modulară?

O voi explica folosind un exemplu care vă este familiar. Deschide orice carte de hârtie. Vedeți textul care se întinde pe toată lățimea paginii, excluzând marginile? Deci, acesta este un aspect tipic cu o singură coloană. Acum aruncați o privire la o revistă sau un ziar. Într-o revistă, informațiile sunt împărțite în mod tradițional în două coloane, iar într-un ziar - în trei sau patru, sau chiar mai multe.

În general, designul web a moștenit o mulțime de „cipuri” diferite din designul de imprimare. Acestea sunt principiile de lucru cu fonturi, reguli de compoziție și module. Site-urile de cărți de vizită și site-urile de prezentare pot fi mulțumite cu o structură cu o singură coloană, pagini de pornire - cu două coloane, mai complex proiecte de informare ar trebui, prin urmare, să aibă un aspect mai complex și mai bine gândit.

O grilă modulară în design web este un aspect unificat al tuturor elementelor și blocurilor unui site. Acest wireframe rulează prin toate paginile web și ajută la crearea ordinii vizuale pe site.

Grilele pot fi simple sau complexe, fixe sau dinamice, dar acest lucru nu este atât de important. Dacă în procesul de creare a designului dvs. web ați setat o anumită structură modulară, vă rugăm să respectați ea de la prima până la ultima pagina site-ul.

Ce să faci dacă în timpul desenului pagini interne Aveți blocuri sau elemente care nu se potrivesc cu structura dvs. de sârmă? Nu vreau să te supăr, dar este un semn că plasa ta este proastă și nu petreci suficient timp proiectându-l.

Ce fel de plase există?

Să aruncăm o privire la tipurile de grile pentru web design.

1. Grilă de blocuri - marcarea brută a zonei în blocuri.

2. Columnar - având coloane în structura sa.

3. Modular – format din linii drepte care se intersectează care formează module.

4. Ierarhic - o grilă cu plasarea intuitivă a blocurilor, fără nicio structură logică.

Spre deosebire de designul tipărit, o grilă în designul web poate fi nu numai fixă, ci și dinamică. De exemplu, puteți face una sau mai multe coloane ale aspectului elastice, setând lățimea acestora ca procent, și fixați dimensiunea restului coloanelor.

Tendințele moderneși abordări în dezvoltarea web

Învață algoritmul de creștere rapidă de la zero în construirea site-ului

Sistemul 960 Grid pentru Web Design (http://960.gs) urmează conceptul unui aspect „static”, iar pentru a crea un „fluid” vă puteți uita la grila Bootstrap (http://getbootstrap.com/css). /#grid ). Cadrul modular 960 GS împarte pagina web în 12, 16 și 24 de coloane.

Atunci când proiectați o structură de „cauciuc”, nu uitați latime maxima ecran. De obicei, este limitat la 1280 de pixeli. Dacă nu luați în considerare valoare maximăîn lățime, apoi mai departe monitoare mari conținutul site-ului va fi foarte extins, ceea ce va afecta negativ percepția acestuia.

Cea mai populară și mai ușor de implementat este o grilă modulară cu două coloane, ale cărei proporții sunt calculate luând în considerare următoarele ipoteze:

cea mai comună rezoluție a ecranului este 1024x768;

lățimea aspectului nu trebuie să depășească 770 de pixeli, astfel încât bara de defilare să nu apară în partea de jos a unui ecran cu o rezoluție de 800x600;

coloană care îndeplinește funcții modul de informare, trebuie să fie mai lată decât coloana care este definită ca modul de navigare (meniu).

Pe baza acestui fapt, proporția arată astfel: 200 de pixeli. + 550 px sau 150 de pixeli. + 620 px

V coloană mai mare ar trebui să plaseze meniul de navigare, în cel mai mic - catalogul, sau conținutul.

Luați în considerare grila de web design a unui site celebru ca exemplu. Toate site-urile BBC folosesc o structură universală cu coloane de 61 x 16 pixeli pentru a se potrivi cu fotografiile și videoclipurile standard ale mărcii.

După cum puteți vedea în imagine, grila BBC este destul de flexibilă și vă permite să plasați orice fel de informații: de la analize serioase la știri de divertisment. Această grilă modulară este carte de vizită companie, deoarece este standard pentru toate site-urile sale. Apropo, acest lucru este o componentă a ghidului Global Experience Language, dacă este cineva interesat.

Dezvoltatorii BBC sunt bucuroși să ofere sfaturi despre cum să proiectați grile modulare în design web. Desigur, ei nu au inventat bicicleta pentru noi, dar cred că va fi interesant pentru noii veniți în cariera de web designer.

1. Procesul începe cu determinarea locațiilor pentru blocurile ierarhiei superioare. Ne imaginăm ca atare Sherlock Holmes - maeștri ai deducției și respectăm regula „De la general la particular, de la mai mult la mai puțin”.

2. Coborâți la nivelul următor și plasați blocurile care urmează în ierarhie. În același timp, ne bazăm pe prioritățile conținutului, pentru a stabili care sunt așteptările utilizatorilor și ale noastre. avantaje competitive.

3. Astfel, mai întâi elaborăm compoziția generală și cele mai mari elemente. Apoi - clarificăm, rafinăm, detaliem. Pentru a face acest lucru, trebuie să desenăm o serie de schițe brute. Abia după un studiu detaliat al ideii de site cu ajutorul creionului și hârtiei ne așezăm în sfârșit la computer.

4. Distribuim informații în blocuri, conținut de grup. De exemplu, pe site-ul BBC, aproape fiecare grup de conținut are un nume care se reflectă în categoriile din meniul de navigare. Titlurile blocurilor servesc ca ancore vizuale pentru o privire rapidă asupra paginii web, precum și ajută la înțelegerea cărei categorii de conținut îi aparține o anumită știre.

Această abordare este utilizată pe scară largă atât de către începători, cât și de către designerii web. Vă permite nu numai să economisiți mult timp, ci și să găsiți soluții originale. sarcini dificile.

Deci, în cursul nostru de astăzi tânăr luptător designer web, am examinat conceptul de grilă modulară și caracteristicile aplicării acesteia. De fapt, acesta este un fel de abstractizare vizuală, cu ajutorul căreia plasăm toate elementele și blocurile de conținut la o distanță acceptabilă unele de altele și la un nivel ușor de utilizat. Puteți vizualiza grila modulară folosind un strat separat cu imaginea ghidajelor.

În cele din urmă, vreau să vă reamintesc că designul web înseamnă să creați nu numai frumos, ci și practic, sistem convenabil... Acesta este motivul pentru care fiecare designer web care se respectă ar trebui să fie capabil să proiecteze un sistem de navigație modular, să structureze informațiile și să le descompună în blocuri. Datorită acestui fapt, utilizatorul va fi încântat să „navigheze” site-ul dvs. și să-i perceapă cu ușurință conținutul.

Abonați-vă la actualizările blogului nostru și distribuiți informatie pretioasa cu prietenii. Toate grilele modulare de succes și ne vedem în curând!

Tendințe și abordări moderne în dezvoltarea web

Învață algoritmul de creștere rapidă de la zero în construirea site-ului