Grile rapide pentru designeri de layout. Grila și structura ei. Ceea ce determină structura grilei
De la autor: din păcate, mulți designeri web la modă și impresionanți uită adesea că rezultatul muncii lor ar trebui să fie un site web digerabil, și nu o captură de ecran frumoasă, potrivită doar pentru un portofoliu. În acest articol, am formulat cerințele care trebuie luate în considerare în procesul de proiectare și proiectare a unei interfețe web.
Grilă modularăîn web design este o soluție fundamentală care nu numai că va îmbunătăți gradul de utilizare a site-ului, ci și va simplifica semnificativ viața dezvoltatorilor.
Ce este o grilă modulară?Voi explica folosind un exemplu cunoscut pentru tine. Deschide orice carte de hârtie. Vedeți textul care rulează pe toată lățimea paginii, excluzând marginile? Deci, aici aveți un aspect tipic cu o singură coloană. Acum uită-te 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 destul de multe „trucuri” diferite de la design de imprimare. Acestea includ principii de lucru cu fonturi, reguli de compunere și module. Site-urile de cărți de vizită și site-urile de prezentare pot fi mulțumite cu o structură pe o singură coloană, pagini de pornire - cu o structură pe două coloane, proiectele de informații mai complexe ar trebui, în consecință, să aibă un aspect mai complex și mai atent.
O grilă modulară în design web este un aspect unificat al tuturor elementelor și blocurilor unui site. Acest wireframe rulează în toate paginile web și ajută la crearea ordinii vizuale pe site.
Grilele pot fi simple sau complexe, fixe sau dinamice, dar asta nu contează cu adevărat. Dacă în procesul de creare a unui design 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 cadrului dvs.? Urăsc să ți-o spun, dar acesta este un semn că grila ta nu este bună și că nu ai petrecut suficient timp proiectându-l.
Ce tipuri de ochiuri există?Să ne uităm 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 care se intersectează care formează module.
4. Ierarhic - o grilă cu plasare intuitivă a blocurilor, fără nicio structură logică.
Spre deosebire de designul tipărit, grila din designul web poate fi nu numai fixă, ci și dinamică. De exemplu, puteți face una sau mai multe coloane ale aspectului extensibile, cauciucate, setând lățimea lor ca procent și fixați dimensiunea coloanelor rămase.
Tendințe și abordări moderne în dezvoltarea web
Aflați algoritmul pentru creșterea rapidă de la zero în construirea site-ului web
Web design grid 960 Grid System (http://960.gs) îndeplinește conceptul de aspect „static”, iar pentru a crea unul „fluid”, puteți acorda atenție grilei cadrului Bootstrap (http:/ /getbootstrap.com/css/#grid). Cadrul modular al modelului 960 GS împarte pagina web în 12, 16 și 24 de coloane.
Când proiectați o structură „de cauciuc”, nu uitați de lățimea maximă a ecranului. De obicei, este limitat la 1280 de pixeli. Dacă nu țineți cont de valoarea maximă a lățimii, atunci pe monitoare mari conținutul site-ului va fi mult întins, 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 o bară de defilare să nu apară în partea de jos a unui ecran cu o rezoluție de 800x600;
coloană care îndeplinește funcțiile modul de informare, trebuie avut latime mai mare decât o coloană care este definită ca un modul de navigare (meniu).
Pe baza acestui fapt, proporția arată astfel: 200 de pixeli. + 550 px. sau 150 px. + 620 px.
Coloana mai mare ar trebui să conțină meniul de navigare, iar coloana mai mică ar trebui să conțină catalogul sau conținutul.
Să luăm ca exemplu grila de design web a unui site web celebru. Toate site-urile BBC utilizează un aspect universal de coloană de 61 x 16 pixeli, ceea ce corespunde fotografie standardși video de marcă.
După cum puteți vedea în imagine, grila BBC este destul de flexibilă și vă permite să plasați orice informație: 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 cu privire la proiectarea grilelor modulare în design web. Bineînțeles, nu ei au inventat bicicleta pentru noi, dar cred că va fi interesant pentru cei nou în cariera de web designer.
1. Procesul începe cu determinarea locațiilor pentru blocurile celei mai înalte ierarhii. Ne imaginăm ca un fel de Sherlock Holmes - maeștri ai deducției și respectăm regula „De la general la specific, de la cel mai mare la cel mai mic”.
2. Coborâm la nivelul următor și plasăm blocurile care urmează în ierarhie. În același timp, ne bazăm pe priorități de conținut, pentru a determina care analizăm așteptările utilizatorilor și identificăm propriile avantaje competitive.
3. Astfel, mai întâi elaborăm compoziția generală și cele mai mari elemente. Apoi clarificăm, finalizăm și detaliem. Pentru a face acest lucru, va trebui să desenăm o serie de schițe brute. Abia după o dezvoltare detaliată a ideii site-ului, folosind creion și hârtie, ne așezăm în sfârșit la computer.
4. Distribuim informații în blocuri și conținut de grup. De exemplu, pe site-ul BBC, aproape fiecare grup de conținut are un titlu, care se reflectă în categoriile din meniul de navigare. Titlurile blocurilor servesc ca ancore vizuale care vă permit să scanați rapid pagina web și, de asemenea, vă ajută să înțelegeți ce categorie de material îi aparține o anumită știre.
Această abordare este utilizată pe scară largă atât de începători, cât și de experții în design web. Vă permite nu numai să economisiți mult timp, ci și să găsiți soluții originale la probleme complexe.
Deci, în cursul nostru de astăzi tânăr luptător designer web, ne-am uitat la conceptul de grilă modulară și la caracteristicile aplicației sale. În esență, 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 plasa modulară folosind un strat separat cu imaginea ghidurilor.
În cele din urmă, aș dori să vă reamintesc că designul web este crearea nu numai de 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 despartă în blocuri. Datorită acestui lucru, 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. Grile modulare fericite tuturor și ne vedem data viitoare!
Tendințe și abordări moderne în dezvoltarea web
Aflați algoritmul pentru creșterea rapidă de la zero în construirea site-ului web
În această lecție ne vom pregăti pentru aspectul site-ului folosind un aspect PSD, folosind doar sistemul Grid din cadrul Bootstrap 4. După ce ați învățat această metodă de aspect, vă salvați de posibile probleme cu adaptabilitatea site-ului, acest lucru este deosebit de bun pentru începători.
Adaptabilitatea site-ului în timpul amenajării Grila bootstrap furnizați casete flexibile care sunt acceptate de toate browserele majore și chiar de Internet Explorer, începând cu IE9+. Pentru mai mult versiuni anterioare decât IE 9, conectăm scripturi care ajută la afișarea corectă a aspectului nostru.
Și cel mai important, aspectul PSD trebuie desenat inițial ținând cont de aspectul Bootstrap ulterioar. Și așa, nu există alte motive pentru care să nu dispuneți folosind o grilă 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 layoutDeschideți aspectul în Photoshop și asigurați-vă că are un aspect cu 12 coloane de-a lungul liniilor directoare și că toate elementele de design sunt aliniate la liniile directoare. Distanța dintre ghidajele exterioare este de obicei de 1170 pixeli.
Descărcați pe site https://getbootstrap.com/ CSS și JS compilat pentru o integrare ușoară în proiectul dvs.
Copiați din secțiune Introducere / șablon de pornire- șablonul de pagină de pornire și inserați-l în fișierul HTML index al proiectului dvs. Am creat un șablon pentru viitorul document HTML.
Se crede că fișierul bootstrap.min.css se va încărca mai repede, deoarece se află pe mai multe servere, și nu pe un singur server. Aceasta înseamnă că site-ul se va deschide mai repede. Dacă tot decideți să descărcați acest fișier pentru dvs., atunci indicați calea cea bunaîn folderul cu fișiere Bootstrap. În orice caz, trebuie să creați un fișier CSS gol în care vă veți scrie stilurile.
Important! Fișierul dvs. CSS în fișier index, trebuie să fie conectat mai jos decât bootstrap.min.css .
Conectăm fonturile. În ce fonturi și pictograme folosește designerul în aspect pot fi văzute program Photoshop sau în extensia pentru browser Chrome– WhatFont.
De ce sunt necesare două fișiere CSS?
Fișierul CSS bootstrap.min.css este o bibliotecă în care nici măcar nu trebuie să accesați. Lucrăm cu un singur fișier - main.css, dar trebuie să ne asigurăm că numele noilor clase pentru fișierul dvs. CSS nu coincid accidental cu cel „biblioteca”.
În fișierul bootstrap.min.css, stilurile pentru grila flexbox au fost deja create și au fost scrise interogări media, trebuie doar să înregistrăm clasele corespunzătoare în blocurile necesare pe pagina HTML. Numele claselor pot fi găsite pe pagina cadru din secțiune Grilă. Designerii de layout cu experiență pentru layout Bootstrap conectează pluginuri (Bootstrap 4 Autocomplete, Bootstrap 4 Snippets) la editorul de cod Sublime Text.
Împărțirea aspectului PSD în blocuriVedem că site-ul este format din 8 blocuri: un antet cu meniu de navigare (nav), 6 secțiuni (secțiune) și un subsol.
În secțiuni (secțiunea: #servicii, #portfolio) apar coloane pe care le vom dispune în funcție de componenta principală Bootstrap - grila.
Mai întâi facem marcajul HTML al structurii principale, vom adăuga detalii pe măsură ce aspectul progresează.
În partea următoare, vom începe 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 layout-ul convențional cu layout-ul de grilă Bootstrap.
Bună, Habr. Te citesc de aproape 10 ani, dar nu am scris niciodată un articol. La început nu a fost nimic de spus, apoi nu a mai fost timp. Dar astăzi stelele s-au aliniat și s-au întors subiect potrivit. Grilă modulară.
S-ar părea că schițarea unei grile ar dura cinci minute. Totul a fost mestecat pentru noi și există bootstraps pentru toate gusturile și „Annushka și-a vărsat deja uleiul...”. Dar, în practică, designerii au adesea întrebări. Mulți oameni sunt confuzi chiar și de mici abateri de la grilele obișnuite cu 12 coloane, deoarece nu înțeleg pe deplin principiile construcției.
Pe vremuri, acest subiect a fost bine tratat într-o serie de articole ale lui Alexei Cherenkevich, dar textele au dispărut din domeniul public. Și deși se mai găsesc în arhive, textele în sine au devenit oarecum depășite de-a lungul anilor.
Pe scurt, răspunzând încă o dată la o întrebare despre grila modulară și negăsind un singur link potrivit, am decis să rezumă cumva într-o notă tot ce era răspândit în zeci de comentarii pe diferite site-uri.
Cum funcționează grilaFiecare aspect conține elemente. Și uneori sunt o mulțime. Conexiunile optice și atracțiile apar între elemente, care se supun teoriei proximității și, în special, regulii externe și interne.
Grila vă ajută să respectați această regulă fără a fi nevoie să calculați fiecare distanță și dimensiune individual. Stabiliți modelele cheie o dată, când construiți grila, și apoi pur și simplu rămâneți la ele.
Spre deosebire de grila coloană, grila modulară stabilește ritmul vertical și proporțiile de bază ale elementelor, susținându-le pe întregul aspect. Acesta este un sistem convenabil, flexibil și destul de simplu. Cu condiția să fi aprofundat suficient în principiile sale.
Ceea ce determină structura grileiGrila modulară este construită în două direcții: orizontală și verticală. În linii mari, este o combinație de coloane și rânduri cu aspectul împărțit în linii.
Acesta din urmă este intuitiv intuitiv pentru toți bătrânii care au avut ocazia să deseneze sute de linii orizontale pe foi de hârtie pentru rezumate folosind un creion și o riglă. Cu toate acestea, nu aș fi surprins dacă studenții mai fac asta.
Deci, dacă trebuie să construiți o plasă de la zero, veți începe de la două lucruri. În primul rând, din conținutul care trebuie plasat în aspect: texte, ilustrații, tabele, liste, fișiere media. În al doilea rând, pe proporțiile și suprafața mediului: o foaie de hârtie, un ecran, o pânză sau ceva mai exotic.
Dacă conținutul este simplu și neschimbător și vă este cunoscut în prealabil, atunci va fi cel mai ușor să construiți pe el. Dacă conținutul este complex și imprevizibil (de exemplu, generat de utilizatori), atunci grila va fi determinată în mare măsură de formatul media și principii generale tipografie și compoziție.
Începutul construcției. Ritm verticalCând vine vorba de site-uri web sau materiale tipărite, designul depinde în mare măsură de proprietățile tipografiei și ale textului. Prin urmare, este convenabil să începeți să construiți o plasă cu .
În primul rând, trebuie să găsiți doi parametri cheie interrelaționați: înălțimea liniei de bază și dimensiunea bazei font Mai simplu spus (hee hee), linia de bază și dimensiunea fontului. Și această sarcină simplă derutează în mod constant oamenii. „Cum pot afla înălțimea necesară a liniei?”, „Ce font ar trebui să folosesc?”, „Câte linii ar trebui să fac pentru o broșură? Și pentru o carte de vizită? și așa mai departe.
Opțiunea „A”. Abordare linie cu linieDacă media dvs. are o dimensiune fixă și cunoașteți deja tot conținutul cheie, atunci puteți estima liderul în avans.
Pentru a face acest lucru, trebuie să vă imaginați că fiecare element de design, inclusiv indentări, ocupă un anumit număr de linii abstracte în înălțime. Apoi adăugați toate liniile împreună și împărțiți înălțimea aspectului la ele. Și apoi împărțiți fiecare linie abstractă în N linii reale corespunzătoare liniei necesare - astfel încât textul dat să se potrivească în mod adecvat în ele.
Simplu dar exemplu detaliat cu o poza
Să presupunem că trebuie să alcătuiți o listă cu cei mai buni angajați ai lunii pe o foaie A4. Ai trei dintre ele. Pentru fiecare angajat faci un card de bloc: fotografie în stânga, text în dreapta. Fotografia este mai mare, deci înălțimea cardului este egală cu înălțimea acesteia. În plus, trebuie să plasați un antet cu un titlu pe foaie și un bloc în partea de jos informații de contact[sindicatul geniilor].
Analizați problema și estimați mental înălțimile relative ale tuturor elementelor. Presupuneți, să spunem, că înălțimea viitorului antet va ocupa aproximativ jumătate din înălțimea fotografiei. Și în subsol vor fi o mulțime de lucruri și se va dovedi a fi undeva la aceeași înălțime cu fotografiile. Plus sau minus o lopată. Îl vei număra din nou dacă este necesar.
Dacă acum considerați înălțimea antetului ca fiind o „linie”, înseamnă că tot conținutul dvs. este de 9 „linii” abstracte. Dacă vă este greu să faceți abstracție de la conducere, numiți aceste „linii” rânduri sau blocuri orizontale. Să presupunem că doriți să adăugați și 1/2 linie de aer în fața marginilor superioare și inferioare ale foii. În total, aspectul dvs. ar trebui să fie împărțit în 10 linii:
Ca rezultat, împărțiți suportul media (coală A4) după înălțime în 10 „linii”. Blocurile rezultate au aproximativ 3 centimetri înălțime. Evident, acesta este un aspect prea mare pentru a tasta texte, informații de contact și alte lucruri mici pe el.
Te uiți la textele tale și realizezi că lângă fiecare fotografie ai o descriere de aproximativ 10-12 rânduri de text. Adică, fiecare bloc trebuie împărțit în alte 5-6 părți. Să presupunem că joci în siguranță și iei o valoare mai mare, astfel încât să fie indentată câte o linie. Bingo. Aspectul dvs. este acum de 10 blocuri a câte 6 linii fiecare. Adică 60 de linii. Luând în considerare înălțimea foii (~300 mm), fiecare linie s-a dovedit a avea ~5mm înălțime. Asta este, poți să prototipezi prototipul și apoi să proiectezi designul.
Dar ce zici de dimensiunea fontului? Oh, acum totul este foarte simplu! Conform aceleiași logici a „regulilor externe și interne”, conducerea ar trebui să fie de aproximativ 150-200% din înălțimea punctului. Adică, dimensiunea fontului dvs. va fi de 1,5-2 ori mai mică decât înălțimea liniei. Și aceasta este de la 2,5 la 3,3 mm. Această dimensiune este ușor de ales în puncte sau chiar doar cu ochii.
Permiteți-mi să subliniez că nu este necesar să măsurați miimile cu un calculator. Ai un ochi și un simț al proporției - ar trebui să fie suficiente. Și chiar dacă nu sunt încă dezvoltate, după o sută sau două layout-uri vei putea lovi grila cu degetul cu o precizie de 1-2 pixeli, chiar și cu ghidaje ascunse și snapping dezactivat. Și nu uitați că ochiul uman percepe dimensiunile și distanțele cu corecții fiziologice. Prin urmare, grila în sine nu este o dogmă, ci doar un ajutor brut în calcule. Compensarea optică are întotdeauna ultimul cuvânt. Vom reveni la acest subiect mai jos.
Încă un moment. Se întâmplă că, după toate calculele, se dovedește că fontul este prea mare sau interfața este prea mică. În acest caz, fie recalculați ochiul de plasă, fie pur și simplu utilizați valori proporționale. De regulă, o opțiune de compromis este jumătate sau o jumătate și jumătate.
Opțiunea „B”. Abordarea „de la pin”.Nu veți avea întotdeauna conținut previzibil și o pânză fixă. În design web, este mult mai probabil să lucrați cu incertitudine totală.
Uneori arată ca modelare artistică din snot. Înălțimea aspectului dvs. este condiționat infinit, lățimea este plutitoare, conținutul principal este personalizat, widget-urile încorporate sunt furnizate de artela Pupkin and Sons, iar clientul vă va arăta textele reale ale paginii cu o zi înainte de lansarea site-ului. . Dar nu este exact.
În astfel de circumstanțe, evident că nu are rost să încercăm să determinați numărul de linii. Dar poți dansa din opus: de la dimensiunea fontului (punctul). Și este și mai ușor.
Tot ce trebuie să faceți este să alegeți un font de bază pentru proiectul dvs., care este suficient de mare pentru a fi citit bine, dar suficient de compact pentru a încăpea 7-8 cuvinte pe linie de blocuri de text de bază. Strict vorbind, 5-6 cuvinte sunt suficiente pentru limba rusă, pentru că în medie, desigur, al nostru este mai lung și mai puternic. Dar aceasta este un ghid, nu o dogmă. Trebuie să vă bazați pe un anumit aspect, un anumit font, plus propria viziune și experiență.
În general, dimensiunea fontului de bază pentru versiunile desktop ale site-ului va fi în intervalul de la 14 la 22 de pixeli. Mai mult, tendința este spre extindere.
Pentru pedanți, voi reține: da, au fost deja inventați pentru ace unități relative măsurători și asta e grozav. Dar dacă ne aprofundăm aici, bătrânețea va trece neobservată, iar tânărul nostru cititor va completa prima grilă aproximativ până când va simți pe deplin inutilitatea contribuțiilor sale la fondul de pensii. Prin urmare, aici și mai departe în text „px” sunt simpli pixeli pătrați. Fără să ținem cont de retine, fără să ținem cont de adaptabilitate și, de asemenea, „fără difuzoare, fără amplificator și fără protecție împotriva prostului cu care te joci aici”.
Răspuns imediat la intrebari frecvente: „de bază” nu înseamnă „cel mai mic”. În orice aspect vor exista aproape întotdeauna inscripții mai puțin vizibile: note de subsol, note, paragrafe interliniare etc. Chiar aici despre care vorbim despre fontul pe care îl veți folosi pentru a tasta cea mai mare parte a textului. Amintește-ți oricare editor de text. tu deschizi fișier nouși începeți să introduceți un „doar font”, lipsit de orice formatare specială- acesta este fontul de bază, fontul de bază. Dacă trebuie să micșorați inscripția, nimeni nu interzice utilizarea unui font mic, acest lucru este normal.
Deci, ne-am decis asupra fontului de bază. Ce urmeaza? Și apoi - conducând. Conform tradițiilor deja menționate ale tipografiei moderne, aceasta va fi de 150-200% din dimensiune. Și uneori mai mult.
(Subliniez: vorbim despre realități moderne. Vă rog să nu dați vina pe Bringhurst și pe alți clasici ai tipografiei cărților - cu siguranță au aruncat în aer ringul de dans, dar lumea s-a schimbat puțin de atunci. Acele 120-180% erau încă calculate pentru cărți, și chiar și în latină).
Deci, liderul de bază va ajunge aproape întotdeauna undeva în intervalul de la 22 la 40 de pixeli.
Din experiența personală, pentru site-urile comerciale simple, un indicator de bază de 15px este destul de convenabil. (Acest lucru implică 30px, dar la nivel de aspect este mai convenabil să lucrați imediat cu jumătate, deoarece oferă marje bune de 15px și 45px. Este important să înțelegeți că, în contextul unei grile modulare, 15 și 30 sunt aceleași lucru - lucrezi fie cu jumătate din valoarea „treizeci”, fie cu valoarea întreagă de „cincisprezece”). Deși, cu toată dragostea mea pentru grilele modulare clasice, nu neg avantajele aceleiași grile la modă de 4 pixeli pentru designul UI. Sunt necesare grile diferite, grile diferite sunt importante. Este un instrument, nu o religie.
Rezultat verticalAcum că avem liderul de bază, putem alinia aspectul și, în sfârșit, urmărim un ritm vertical. Aceasta înseamnă că fiecare element de design va ocupa un anumit număr de linii în înălțime. Ritmul devine convenabil și ușor de lucrat. Nu este nevoie să calculezi valori exacteîn pixeli. Măsori totul în rânduri. Titlu de la primul nivel - 4 linii, ilustrație - 8 linii, avatar - 3 linii, buton - 3 linii, meniu - 5 rânduri, indentare - 1 rând etc. (Sper că înțelegeți că acesta este un exemplu figurat, nu o rețetă pentru succes).
Apropo, un ritm rigid este deosebit de convenabil pentru aspectul cu preprocesoare CSS. Designerul de layout trebuie doar să înlocuiască o variabilă cu conducătorul de bază pentru a face întregul site proporțional mai mic sau mai mare. Asta nu înseamnă că munca lui se va sfârși acolo, dar îl va economisi o tonă operațiuni de rutină pentru adaptarea fiecărei componente de proiectare separat.
Coloane și spațiereCe determină numărul de coloaneÎn primul rând, din conținut. Totul este mai simplu aici decât la înălțimi. Când vine vorba de materiale tipărite, în marea majoritate a cazurilor poți ghici numărul de coloane chiar și în stadiul primelor schițe.
De exemplu, dacă așezați un bloc despre anotimpuri, numărul dvs. magic va fi probabil 4. Le puteți grupa pe un rând sau două. În acest caz, numărul de coloane va fi un multiplu de două sau patru. Adică, are sens să te bazezi pe numerele 2, 4, 6, 8, 12 sau 16.
Să complicăm. Să zicem că sub blocul cu anotimpurile ai un bloc cu trei reclame. Evident, pentru această parte a aspectului ar fi mai convenabil să existe un număr de coloane care este un multiplu de trei: 3, 6, 12... Dar o grilă cu 3 coloane clar nu este potrivită pentru anotimpuri. Prin urmare, trebuie să căutăm un numitor comun pentru ei. Paragraful anterior sugerează că aveți nevoie de o grilă cu 6 sau 12 coloane.
*Alt exemplu. Trebuie să proiectați un bloc tipic de cărți de vizită, format dintr-un logo/avatar (în stânga) și informații de contact (în dreapta). De câte coloane ai nevoie? Să ne dăm seama.
Dacă vrem să facem o compoziție echilibrată, atunci ne putem descurca chiar și cu două coloane. În acest caz, alinierea siglei va fi centrală, iar textul va trebui plasat cu ochiul. Sau puteți presupune că textul ocupă aproximativ de două ori lățimea logo-ului și, în consecință, faceți un bloc de trei coloane. Sau puteți merge și mai departe și adăugați umplutură la grilă. Să presupunem că vor exista margini de 1 coloană în stânga și în dreapta, logo-ul va avea 2 coloane, textul va avea 4, plus 1 coloană de indentare între logo și text - un total de 8 coloane.*
Acesta este modul simplu în care raționezi când te gândești la o grilă. Dacă există mult conținut, dar ochiul nu este antrenat, puteți zbura prima dată și, pe măsură ce stabiliți detaliile aspectului, vă dați seama că grila nu este potrivită. Este în regulă. E bine.
Când vine vorba de un singur aspect, adaptarea designului la o nouă grilă nu este dificilă. Dacă proiectul este mare și implică o abundență de pagini sau machete cu o singură schiță (site web, broșură, carte etc.), este mai bine să puneți o marjă de siguranță în grilă și să o testați temeinic cu conținut aleatoriu din diferite pagini. . Marja de siguranță se realizează de obicei prin creșterea numărului de coloane cu un multiplu: de exemplu, acum aveți nevoie doar de 3, dar instalați 6 sau 9.
Voi nota o nuanță. Dacă faci ceva cu o compoziție centrală puternică și folosești activ aliniere orizontalaîn centru, este mai profitabil să faci numărul de coloane impar. Acest lucru va permite o distribuție mai uniformă a indentării și a conținutului. Sfatul se aplică și strivirii interioare a coloanelor. În exemplul de mai sus, dacă aveai 3 coloane și trebuia să le detaliezi, cu o compoziție centrală vei împărți fiecare coloană în încă 3, dar cu o compoziție simetrică - în 2 sau 4. Ca urmare, în primul caz există vor fi 9 coloane, iar în a doua - 6 sau 12.
De ce toată lumea iubește grilele cu 12 coloaneTotul este simplu aici. Numărul 12 este împărțit în: 12, 6, 4, 3, 2, 1. Prin urmare, grila este flexibilă și vă permite să aranjați organic blocuri de aproape orice număr sau lățime. În plus, renunțând la 1 sau 2 coloane de la marginile aspectului ca margini, obțineți un bloc în centru care este, de asemenea, divizibil cu 10, 5 sau 8.
Din experienta personala Voi adăuga că este foarte convenabil să desenați machete adaptive bazate pe o lățime de 1200 de pixeli, mai ales fără spațiere între coloane. Obțineți 12 coloane cu o lățime frumoasă de exact 100 de pixeli și orgasm constant din numere rotunde în timp ce lucrați. Și când trebuie să plasați o placă de buton pe aspect, nu trageți marginile dreptunghiului înainte și înapoi, ci instantaneu și fără să vă gândiți, introduceți dimensiunea: 300 pe 60 și faceți clic pe aspect. Apropo, este util să vă obișnuiți să poziționați elementele nu cu mouse-ul și săgețile, ci prin introducerea numerelor de indentare folosind X și Y - layout-urile vor deveni mai ordonate.
Dacă conținutul nu necesită un aspect de la capăt la capăt, poate fi convenabil să creați 24 de coloane și să lucrați cu ele în același mod ca și cu spațierea între coloane, pur și simplu indentând o coloană completă de 50 px, dacă este necesar. Acest lucru creează suficient aer în jurul conținutului, iar aspectul pare scump. Dacă este necesar un interval mai mic, se ia exact jumătate din coloană, adică 25px. Toate calculele se fac din mers, numerele sunt convenabile.
Spațiere între coloane (jgheab)De ce și când trebuie să indentați între coloane?
Nu facem întotdeauna mozaicuri. Cel mai adesea, conținutul nu este aranjat cap la cap - trebuie să existe o anumită distanță între două blocuri, astfel încât acestea să nu se lipească și să se suprapună.
În plus, pentru a ușura presiunea asupra ochiului privitorului, uneori sunt necesare aer și spațiu alb. Când există puțin spațiu în aspect și multe informații (într-un ziar, de exemplu), creșterea distanței dintre coloane devine practic singura cale măcar separa cumva mizeria text-grafică.
În majoritatea cazurilor, distanța dintre coloane este semnificativ mai mică decât lățimea coloanei. Mărimea sa este determinată și de caracteristicile conținutului. Dacă proiectați o interfață în care există multe elemente clasice controale, distanța îngustă între coloane servește ca un separator convenabil. De exemplu, între bara de căutareși un buton sau între o casetă de selectare și eticheta acesteia. (Deși, în general, are sens să ne gândim la o grilă „pătrată”: 4px sau altfel, fără nicio coloană, și există și motive pentru aceasta). Dacă așezați o pagină cu blocuri de text mari organizate în doar 2-3 coloane, atunci este logic să faceți spațiul dintre coloane mare pentru a oferi conținutului maxim aer.
După cum am menționat mai sus, din experiența personală, multe lucruri pot fi așezate cu spațiere între coloane zero cu un număr mare de coloane. În acest caz, lățimea întregii coloane este luată ca indentare, iar toate marginile sunt mari, caracteristice tipografiei „nobile”.
Doar nu vă lăsați păcăliți de cuvântul plăcut „nobil” - în segmentul comercial, un astfel de design nu este întotdeauna bun. În general, cu cât schema de vânzări este mai activă și mai agresivă, cu atât marketerii clientului sunt mai foame și mai furioși, cu atât aspectul va fi mai dens și cu atât va rămâne mai puțin aer acolo. Cazul final (sau mai degrabă, extrem) sunt ziarele reclame gratuite a la „Hand to Hand”, unde spațiul ocupat determină direct câștigurile. Desigur, nu este nevoie de delicii estetice cu câmpuri gigantice. Ai putea la fel de bine să ajungi în buzunarul fondatorului și să împrumuți câteva sute de dolari de acolo până iarna viitoare. Nu există nicio diferență și există mai puțină coordonare.
ModulDe fapt, în acest mod dificil am ajuns la conceptul definitoriu de „modul”, după care poartă numele grilei modulare. De obicei, încep cu ea, dar judecând după întrebările designerilor, această abordare nu funcționează. Deci, ce este exact și de ce este nevoie de el?
În esență, este doar o proporție. Lățimea modulului este egală cu lățimea coloanei, iar înălțimea este de mai multe linii. Câte mai exact? Depinde de designul tău și de efectul pe care vrei să-l obții.
*Acum câțiva ani am avut ocazia să creez un site web dedicat stâlpilor - stâlpi pentru dans. Desigur, modulul de acolo era foarte alungit pe verticală. Am folosit un raport latime/inaltime de aproape 1:3. În primul rând, pentru că marea majoritate a ilustrațiilor au fost în orientare portret și, de asemenea, alungite. În al doilea rând, pentru că produsul în sine și întregul stil implicau o anumită cantitate de simbolism falic. Un modul este determinat de conținut, compoziție și stil.
Dacă faci ceva „stabil”, atunci invers: este logic să te gândești la un modul care este ușor alungit pe orizontală. Dacă așezați un tabel lung uriaș care servește ca conținut principal în aspect, atunci este evident că trebuie să luați unul sau două rânduri de bază ale acestui tabel ca modul. Într-un cuvânt, gândește.*
În principiu, nimeni nu vă împiedică să construiți ochiuri mai complexe. De exemplu, pot alterna module de diferite înălțimi. Principalul lucru este că există un fel de logică și model în asta care menține un ritm vertical.
Să presupunem că faci un portal. Aveți un meniu cu 3 rânduri înălțime, urmat de un banner principal de știri cu 9 rânduri înălțime, apoi o serie de câteva numere (cursuri valutare, vreme, etc.) cu 3 rânduri înalte, apoi o serie de câteva știri secundare cu 9 rânduri înalte. Adică tot conținutul alternează: 3-9-3-9-3-9-3... În practică, această tehnică este rar justificată, nu este foarte flexibilă. Dar rețineți că ritmul poate fi complex.
Grilă în cadrul unei grileDa, se întâmplă și asta. Când proiectul este complex și cu mai multe componente, puteți utiliza mai multe grile imbricate. Cel mai simplu exemplu: Aspectul general folosește coloane gigantice cu în text mare, iar în interiorul unuia dintre ele există un formular de calculator cu o grămadă de comenzi așezate pe o grilă pătrată de 4px. Nu este nimic deosebit de criminal în asta.
Mai mult, când vine vorba de site-uri web, o parte din conținutul tău poate fi complet străin și încorporat: jucători, hărți online, widget-uri, cadre de plată etc. Un milion de opțiuni. Aceste elemente vor avea propriile lor elemente plasă interioară, pe care nu ai niciun control. Și asta e în regulă.
Ceea ce poți face este să urmezi regula internă și externă pentru containere care conțin aceste blocuri. Mai precis, dați suficient aer în jur (inclusiv pe verticală), astfel încât să nu se lipească de restul conținutului, să arate separat și să nu trage elementele străine în zona lor vizuală. Toate spațiile și proporțiile din aspectul dvs. sunt relative, așa că, aproximativ vorbind, puteți echilibra conținutul altcuiva în „exterior”, aproape la fel de bine să redimensionați conținutul în „interior”.
Compensare opticăAcest punct poate fi greu de înțeles pentru designerii perfecționiști. O grilă este pur și simplu o metodologie de simplificare a calculelor. Acesta nu este un crez, nu este o lege a universului și nu este un panaceu. În plus, proporțiile matematice sunt pur motive fiziologice nu sunt ideale pentru percepția umană. Grila nu ține cont de apariția distorsiunilor.
Deci, dacă ochiul vă spune că un element trebuie mutat cu câțiva pixeli la dreapta ghidului grilei, puteți face acest lucru. (Nu este un fapt că designerul de layout vă va observa și vă va salva cârja optică, dar totuși).
Separa punct important: Elementele dintr-o grilă sunt aliniate mai degrabă în funcție de masa vizuală decât de limitele dimensionale. Aceasta înseamnă că (ideal) un cerc aliniat la stânga va ajunge aproape întotdeauna la câțiva pixeli la stânga unui pătrat care este aliniat la aceeași margine. Și un mic interliniar sub un titlu mare trebuie să fie mutat aproape întotdeauna la dreapta, deoarece marginea optic din stânga a primei litere a titlului va fi mai la dreapta decât „conform calculelor”. Acest lucru este deosebit.
Există destul de multe astfel de subtilități. Dar este important să înțelegeți că, cu designul web, aproape niciodată nu veți obține o imagine perfectă. Aspectul web este adesea formalizat; se bazează pe dependențe formulate ale cadrelor pentru a se adapta în mod flexibil diferite dispozitiveși platforme. Și scalarea adecvată a offset-ului antetului de 3 pixeli, ținând cont de toate caracteristicile de anti-aliasing, anti-aliasing și alte cuvinte murdare, este aproape imposibilă. Acest lucru trebuie luat filozofic.
rezumatPoate asta e tot. Textul este deja voluminos, nu sunt necesare concluzii speciale: ori te adâncești în el, ori nu. În orice caz, vă mulțumesc pentru atenția și interesul acordat elementelor de bază ale designului și tipografiei. Noroc.
Etichete:
- grilă modulară
- tipografie
O grilă modulară este un sistem de organizare a obiectelor în spațiu, bazat pe rânduri și coloane de o anumită dimensiune, strict specificată. Celulele pot conține unități de conținut: blocuri de text, titluri, cadre și imagini.
Grilele pot fi găsite nu numai în designul informațional, ci și în arhitectură, interioare și urbanism. În toate aceste zone, grilele sunt construite după principii similare legate de dorința de a aduce ordine și armonie spațiului care se delimitează.
Observați una dintre schițele din 1807 ale dezvoltării Manhattanului, care urmează o grilă strictă de străzi care merg de la vest la est și de la nord la sud.
De ce sunt necesare ochiuri?Inițial, plasa a fost folosită în afacerile cu ziare pentru a crește eficiența. Foile de aspect au făcut posibilă reducerea costurilor de întreținere a tipografilor cu normă întreagă, standardizând aspectul paginilor și economisind timpul „artiștilor de design” înșiși. Foile de aspect au fost în curând înlocuite cu grile modulare mai flexibile.
Urmând o nouă tendință, la începutul anilor 1960, designerul grafic Peter Palazzo a actualizat designul ziarului New York Herald Tribune. În 1966, editorul artistic Janet Collins a introdus un nou aspect pentru Times of London. Ambele schimbări au arătat lucrătorilor din industrie că stil uniform designul îmbunătățește calitatea interacțiunii cititorului cu publicația. Editorii de ziare și reviste și-au dat seama rapid de necesitatea grilelor și au început să le aplice în practica lor.
Ca și în zilele ziarelor, în era digitală, grilele aplicate corect ajută la reținerea atenției cititorului, la îmbunătățirea calității percepției textului și, în general, la îmbunătățirea experienței interacțiunii acestuia cu materialul. În designul media de astăzi, grila dă ordine și coerență informațiilor. Ea este responsabilă pentru structurarea conținutului articolelor individuale și a publicației în ansamblu.
Joseph Müller-Brockmann scrie despre grile în manualul său „Sisteme modulare în design grafic”:
„Prin structurarea planurilor și a spațiului folosind o grilă modulară, designerul are posibilitatea de a organiza texte, fotografii și imagini grafice conform principiilor obiectivitatii si functionalitatii. Designul organizat logic menține credibilitatea informațiilor și atrage cititorul către ea.”
Ce tipuri de ochiuri există?Există multe tipuri și configurații de grile: de la „celule” primitive, ca într-un caiet de școală, la structuri complexe cu distante diferiteîntre orizontale și verticale.
Am colectat cele mai comune și deja „clasice” mostre, familiaritatea cu care vă va ajuta să înțelegeți mai bine designul modular:
Cea mai simplă grilă, care a stat la baza sistemului modular, a constat din pătrate și arăta ca o masă obișnuită. A început să fie folosit la sfârșitul primului sfert al secolului al XX-lea. Designerii tipografici din Zurich și Basel l-au rafinat în anii postbelici, ceea ce a coincis cu o creștere a interesului pentru Helvetica și fonturi similare, dând naștere școlii de „tipografie elvețiană”.
Exemplu: Robert Buechler, 1914
Sursă:
Orice designer de layout care se confruntă cu următoarea sarcină de a stabili un layout adaptiv are nevoie de grile. În cele mai multe cazuri, este luat un bootstrap vechi și div-uri 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 în hack-ul nostru pentru grile fără probleme.
Probleme Grile non-standardDeci, designerul nostru de layout are foarte puțin timp, aspectul arde, totul trebuie făcut ieri. Prin urmare, el ia ca bază popularul framework CSS bootstrap și își începe munca. Și apoi, în mijlocul muncii sale, dă brusc peste un bloc de bannere „5 la rând”. Oricine a lucrat cu bootstrap știe că grila sa implicită este de 12 ori, așa că nu puteți face 5 coloane la rând cu o grilă standard bootstrap. Da, desigur, puteți asambla o plasă arbitrară în bootstrap, dar aceasta este o pierdere de timp, descărcarea dependențelor, colectarea mai puține (și noi, de exemplu, scriem în sass).
Poate conectați o bibliotecă pentru grile personalizate? Per total asta ieșire bună, singurul dezavantaj al acestei abordări este că aproape toate sunt proiectate fie pentru scriere lungă și plictisitoare @media(min-width:)() , fie generează propriul set de clase, cu o grămadă de col15-xs- probabil inutile. offset-3 , care va fi inclus în CSS-ul final.
Prin urmare, cu o probabilitate mare, designerul de layout va scrie pur și simplu toate stilurile manual (în principiu, nu este mult de scris acolo).
Foarte des, unei grile 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 ce zici monitoare mari? Un punct de întrerupere xl la 1600px cere doar să fie folosit set standard. Dar din nou, nu există și apar aceleași opțiuni de soluție 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 ne apropiem treptat următoarea problemă. Imaginați-vă că trebuie să specificați diferite dimensiuni de bloc pentru fiecare grilă, apoi veți ajunge la 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, imaginați-vă câte clase trebuie scrise în css pentru toate combinațiile unei grile de 60 de ori!
Separarea stilurilor de marcajOrice designer de layout știe că stilurile inline sunt proaste. Deci, de ce scriem stiluri în clasele de markup? col-xs-6 , visible-sm și Doamne ferește text-right - acestea sunt toate stilurile și, dacă este necesar să se facă modificări la aspectul care a fost deja stabilit, va apărea cu siguranță o problemă pe care designerul de layout o va avea pentru a cere designerului backend să schimbe col-sm-6 pe col-sm-4.
Ignorarea stilurilor inutileAdesea, întregul cadru CSS este inclus doar de dragul grilelor și a câteva funcții mici, ceea ce duce ulterior la resetarea excesivă a stilurilor și dimensiune dubla css 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 începe să interfereze. Ca să nu mai vorbim de caracteristici adesea inutile, cum ar fi .glyphicon . Desigur, puteți asambla din nou bootstrap din ceea ce aveți nevoie, dar este timpul din nou.
Standardele altor oameni și stilul de codSă presupunem că un designer de layout a studiat BEM și a început să-l folosească. Dar necesitatea de a folosi bootstrap îi dictează excepțiile - în el toate clasele sunt scrise cu o cratimă, fără a respecta principiile BEM. Și aici apare problema alegerii - fie suportați amestecul de nume de clasă (btn-block disabled component__btn component__btn_disabled), fie aruncați bootstrap-ul.
Metode învechiteDupă cum știți, grilele din Bootstrap 3 se bazează pe floats. Ceea ce provoacă adesea probleme, una dintre cele mai frecvente este diferitele înălțimi ale blocurilor, în urma cărora grila frumoasă „se rupe”. Nu mai folosi float-urile în alte scopuri, toate browserele care nu acceptă flexbox sunt aproape dispărute!
Susy! - asta e o cale de ieșire? 
În timp ce căutam o soluție la toate problemele enumerate mai sus, am dat peste minunatul cadru de grilă Susy! Per total foarte bine. Dar nu am avut suficientă viteză, 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 Susy! presupune că te vei ocupa singur de 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 fi posibil să fie fixate în pixeli). De asemenea, a învățat recent flex și înainte de asta a construit grile folosind 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 cazul cu bootstrap.
Căutarea altor sisteme de grilă 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 gestionarea grilelor în html!
Fabricarea de bicicleteAșadar, s-a decis să scriem ceva al nostru și, ca urmare, s-a născut fast-grid. Ea, ca și Susy, este 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:
1 2
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 markupfast-grid este un cadru de grilă pentru utilizare în css, mai degrabă decât în html, bazat pe seturi generate de clase. Acest lucru păstrează marcajul separat de stiluri, ceea ce este benefic pentru suportul viitor. Acest lucru elimină, de asemenea, nevoia de a genera o grămadă de clase de ajutor (.col-xs-push-4 etc.) care sunt în mare parte neutilizate.
Ignorarea stilurilor inutileDeoarece fast-grid este un set de mixin-uri, el însuși nu generează nicio regulă în css. 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.
Standardele altor oameni și stilul de codFast-grid este mixurile pe care ar trebui să le utilizați intern a ta clase, cu denumirile pe care le preferi. Îți place BEM? Nici o problemă!
Metode învechiteÎn mod implicit, se folosește flexbox, care deschide multe posibilități și rezolvă problemele floaturilor clasice. De exemplu, puteți schimba cu ușurință ordinea coloanelor.
În exemplul de mai jos, afișăm o bară laterală sub conținutul principal pentru versiune mobilași fă-l primul bloc pe ecrane mari:
Desigur, acest lucru ar putea fi realizat folosind trage/împingere pentru plutire, dar aceasta este o cârjă foarte mare.
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 consulta exemple:
Mai folosești bootstrap? Atunci mergem la tine!
