Nastavimo temu prilagodljivi raspored. Danas ćemo govoriti o jednom od tri stupa prilagodljivog izgleda - raspored temeljen na mreži(fleksibilni raspored temeljen na mreži). Druge dvije su fleksibilne slike.

Sredinom 20. stoljeća grafički dizajneri popularizirali su koncept tipografski, ili modularni, mrežasti- racionalan sustav stupaca i redaka u koje se mogu smjestiti moduli sa sadržajem. Izgledalo je svježe i vrlo skladno.

Međutim, grafički dizajn i web dizajn su, kako kažu u Odesi, dvije velike razlike. Ključna točka ovdje je veličina stranice. U tipografiji je to fiksno, ali web-stranica se može rastezati i skupljati ovisno o tome na čemu se gleda.

Da biste primijenili modularnu mrežu na web stranicu, upotrijebite jednostavnu formulu proporcionalnosti:

cilj/kontekst=rezultat

Ovu formulu najlakše ćete razumjeti na jasnom primjeru. Recimo da imamo izgled web stranice u dva stupca - sadržajni dio i bočna traka:

Obložit ćemo ga gumom. Ali evo problema: kako postaviti širinu oba bloka? Uostalom, ako to napišete u pikselima, oni više neće biti gumeni. To znači da morate koristiti postotke, a ne piksele. Ali oprostite, koje vrijednosti trebam napisati? Svejedno, od nečega treba krenuti.

Možete, naravno, procijeniti okom: sadržaj zauzima približno 70% ukupne širine stranice, a bočna traka - 30%. Ali pravi dizajner izgleda nikad ništa ne pogađa na oko. Trebamo točnu veličinu.

Tome služi formula proporcionalnosti. Jednostavno uzmemo širinu unutarnjih blokova i podijelimo je s ukupnom širinom stranice. Ovdje je cijela stranica kontekst, odnosno svaki od unutarnjih blokova, cilj iz gornje formule.

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

Ostaje samo pretvoriti te podatke u postotke. Bez previše brige, samo pomaknite zarez dva mjesta udesno. Dobivamo:

68,75%
31,25%

To je tako jednostavno. Međutim, zakomplicirajmo zadatak. Pretpostavimo da je naš sadržajni dio podijeljen na još dva nejednaka dijela. Na primjer, lijevo je uzak stupac s datumom članka i društvenim gumbima koji se nalaze okomito, a desni stupac je širok i u njemu imamo tekst članka.

Iz dizajna izgleda znamo da je širina ovog uskog stupca 120 piksela, a širokog 520. Kako pretvoriti te brojeve u %? Opet primijenite formulu proporcije. Ali ovoga puta kao kontekst koristimo ne cijelu širinu stranice, već širinu bloka koji sadrži ta dva stupca, odnosno širinu sadržaja, a to je 660 piksela. Podijeliti:

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

Kao postotak dobivamo 18,18% odnosno 78,78%.

Usput, u datotekama modernog stila koje koriste prilagodljivi izgled, dizajneri pravilnog izgleda dodaju takve izračune kao komentare. Radi bolje preglednosti. Ovako to obično izgleda:

Sadržaj (
širina: 68,75%; /* 660px / 960px */
}

Nadam se da s tim nema poteškoća. Idemo dalje!

Mrežni raspored

Gore razmotreni primjeri, naravno, još nisu rešetka. Pa, kakva mreža u dva stupca? Ova modularna mreža dizajnirana je kako bi dizajnerima i dizajnerima izgleda pomogla u stvaranju složenih stranica s mnogo stupaca i pojedinačnih blokova.

Stoga se pojavilo mnogo praktičnih usluga i alata koji lako i jednostavno provode ovu metodu. Na primjer, 960.gs. Ovdje ne možete samo vizualno proučiti princip označavanja na temelju modularne mreže, već i preuzeti predloške i koristiti ih.

U stvari, takve usluge su sada desetke! Nazivaju se i okviri. Odaberite koji vam se najviše sviđa. Evo sjajnog izbora od 30 CSS okvira za responzivni web dizajn.

Čemu služe ove modularne rešetke?

Prije svega, modularne rešetke potrebne su za vizualnu organizaciju sadržaja na web stranici. Ovo nije samo estetski lijepo i ugodno oku korisnika, već je i zgodno za same programere. Pogotovo ako je stranica stvarno složene strukture i sadržaja.

Osim toga, takve modularne rešetke puno je lakše učiniti prilagodljivima nego nasumično razbacane blokove različitih veličina.

I, naravno, brzina razvoja takvih stranica je mnogo veća. Ne morate se zavaravati i izmišljati kotač od nule. Sve što trebate učiniti je odabrati odgovarajući okvir i pomoću njega dizajnirati svoju web stranicu.

Nadam se da sada znate što je prilagodljivi raspored temeljen na modularnoj mreži.

Sljedeći put ćemo govoriti o fleksibilnim slikama u responzivnom izgledu. Vrlo važna i kontroverzna tema. Također preporučujem da ga temeljito proučite kako ne biste upali u nevolje. Ostati u kontaktu! Još bolje, pretplatite se na bilten bloga Web Councila.

Izrada web stranice

Svaki dizajner izgleda koji se suočava sa sljedećim zadatkom postavljanja prilagodljivog izgleda treba rešetke. U većini slučajeva koristi se dobri stari bootstrap i divovi s klasama poput col-xs-6 col-sm-4 col-md-3 počinju se pojavljivati ​​u HTML-u. I čini se da je sve dobro i brzo, ali u ovom pristupu često postoje mnoge zamke. U ovom ćemo članku pogledati ove zamke i baciti trule rajčice na naš hack za mreže bez problema.

Problemi

Nestandardne rešetke

Dakle, naš layout dizajner ima jako malo vremena, layout gori, sve treba biti gotovo jučer. Stoga uzima popularni CSS framework bootstrap kao osnovu i započinje svoj rad. A onda, usred posla, iznenada naiđe na blok transparenta "5 u nizu". Svatko tko je radio s bootstrapom zna da je njegova zadana rešetka 12-struka, tako da ne možete napraviti 5 stupaca u nizu sa standardnom bootstrap mrežom. Da, naravno, možete sastaviti proizvoljnu mrežu u bootstrapu, ali to je gubljenje vremena, preuzimanje zavisnosti, manje prikupljanja (a mi, na primjer, pišemo u sass-u).

Možda spojiti neku knjižnicu za prilagođene mreže? Općenito, ovo je dobro rješenje, jedini nedostatak ovog pristupa je da su gotovo svi dizajnirani ili za dugo i zamorno pisanje @media(min-width:)() , ili generiraju vlastiti skup klasa, s hrpa vjerojatno nepotrebnih col15-xs- offset-3 , koji će biti uključeni u konačni css.

Stoga će s velikom vjerojatnošću dizajner izgleda jednostavno ručno napisati sve stilove (u načelu nema puno toga za napisati).

Vrlo često standardna bootstrap rešetka nema dodatne prijelomne točke, tj. postoje xs, sm, md, lg - sve do širine od 1200px. Što je s velikim monitorima? Neka xl breakpoint na 1600px jednostavno moli da bude uključena u standardni set. Ali opet, nema ga i pojavljuju se iste mogućnosti rješenja kao u prethodnom odlomku. Ali može biti puno kontrolnih točaka - 320, 360, 640, 768, 992, 1200, 1600, 1900...

Redundancija i opširnost

I tu se postupno približavamo sljedećem problemu. Zamislite da morate navesti različite veličine blokova za svaku mrežu, a onda ćete završiti s nečim poput ovoga:

Je li previše? Dodajte ovdje moguće povlačenje/guranje i vidljivo/skriveno i tada možete sigurno početi ludovati. Ali sve te klase su napisane u css-u, zamislite koliko klasa treba biti napisano u css-u za sve kombinacije mreže od 60 puta!

Odvajanje stilova od markupa

Svaki dizajner izgleda zna da su ugrađeni stilovi loši. Pa zašto pišemo stilove u markup klasama? col-xs-6 , visible-sm i ne daj bože text-right - sve su to stilovi, a ako je potrebno napraviti izmjene na već postavljenom layoutu, svakako će se pojaviti problem koji će layouter imati zatražiti od pozadinskog dizajnera da promijeni col-sm-6 na col-sm-4.

Nadjačavanje nepotrebnih stilova

Često je cijeli CSS framework uključen samo radi rešetki i par sitnih funkcija, što naknadno rezultira pretjeranim resetiranjem stilova i dvostrukom veličinom konačnog CSS-a. Na primjer, spoji se cijeli bootstrap.min.css, a onda se veselo i veselo uklanjaju sjene i zaobljeni kutovi .btn, .form-control i slično, uključujući :hover, :focus, :first-child . Kao rezultat toga, umjesto da pomaže, okvir se počinje miješati. Da ne spominjemo često nepotrebne značajke poput .glyphicon. Naravno, možete ponovno sastaviti bootstrap od onoga što vam je potrebno, ali ponovno je vrijeme.

Tuđi standardi i stil koda

Recimo da je dizajner izgleda proučavao BEM i počeo ga koristiti. Ali potreba za korištenjem bootstrapa diktira svoje iznimke - u njemu su sve klase napisane s crticom, ne slijedeći načela BEM-a. I tu se javlja problem izbora - ili se pomiriti s zbrkom naziva klasa (btn-block disabled component__btn component__btn_disabled), ili izbaciti bootstrap.

Zastarjele metode

Kao što znate, rešetke u Bootstrapu 3 temelje se na floatovima. Ono što često zadaje probleme, jedan od najčešćih su različite visine blokova, zbog čega lijepa rešetka “pukne”. Prestanite koristiti float u druge svrhe; svi preglednici koji ne podržavaju flexbox su gotovo izumrli!

Susy! - je li ovo izlaz?

U potrazi za rješenjem za sve gore navedene probleme, okrenuo sam se prekrasnom grid frameworku Susy! Sveukupno vrlo dobro. Ali nisam imao dovoljno brzine, jer susy! predložio opisivanje stupaca za svaku prijelomnu točku zasebno:

.col ( @media (min. širina: 768px) ( @include galerija(4 od 12); ) @media (min. širina: 1200px) ( @include galerija(3 od 12); ) )

To je suzno! pretpostavlja da ćete se sami pozabaviti prijelomnim točkama. Također, susy! ne piše display: flex za retke za vas, morate se sjetiti da ih sami pišete. Uvlake između stupaca u njemu su postavljene samo relativno (neće ih biti moguće fiksirati u pikselima). Također, tek je nedavno naučio flex, a prije toga je gradio mreže koristeći float i:nth-child() . Općenito, susy! ovo je dobro, ali želio bih brzinu i jednostavnost opisivanja rešetki za sve prijelomne točke, kao što je bio slučaj s bootstrapom.

Potraga za drugim grid sustavima također nije dala puno rezultata - svi ili slijede susy!put, zaboravljajući na prijelomne točke, ili slijede bootstrap put, pružajući skup generiranih klasa za upravljanje gridovima u html-u.

Proizvodnja bicikala

Dakle, odlučeno je da napišemo nešto svoje, i kao rezultat, rođena je brza mreža. Ona je, kao i susy, izgrađena na drskosti. Koje su glavne prednosti koje pruža u usporedbi s drugim rješenjima, posebice susy!? Prije svega, brzina zbog manje koda, uzmimo standardni primjer bootstrapa:

Koristeći brzu mrežu, takvu je mrežu vrlo lako opisati:

@import "~brza-mreža/brza-mreža"; .row ( @include grid-row(); ) .col ( @include grid-col(6 4 3 2); )

Prođimo sada kroz naše nedostatke i vidimo kako brza mreža rješava sve te probleme.

Nestandardne rešetke

@import "~brza-mreža/brza-mreža"; .cols ( $grid: (razmak: 5px); @include grid-row($grid); &__item ( @include grid-col(12 6 null (1 od 5), $grid); ) )

Potreba za vlastitim skupom prijelomnih točaka

@import "~brza-mreža/brza-mreža"; .cols ( $grid: (prijelomne točke: (xxs: 0px, xs: 360px, sm: 640px, md: 960px, lg: 1200px, xl: 1600px), stupci: 60); @include grid-row($grid); &__item ( @include grid-col((xxs: 60, xs: 30, sm: 20, md: 15, lg: 12), $grid); ) )

Redundancija i opširnost / Odvajanje stilova od označavanja

fast-grid je mrežni okvir za korištenje u css-u umjesto u html-u na temelju generiranih skupova klasa. Ovo drži oznake odvojene od stilova, što je korisno za buduću podršku. Ovo također eliminira potrebu za generiranjem gomile pomoćnih klasa (.col-xs-push-4, itd.) koje se uglavnom ne koriste.

Nadjačavanje nepotrebnih stilova

Budući da je fast-grid skup mixina, on sam ne generira nikakva pravila u css-u. Stoga se ovdje nećete susresti s činjenicom da okvir stilizira elemente na način koji vam nije potreban. I općenito, to su samo rešetke i ništa više.

Tuđi standardi i stil koda

fast-grid je mixins koji biste trebali koristiti interno tvoje razreda, s nazivima koje sami preferirate. Volite li BEM? Nema problema!

Zastarjele metode

Default je flexbox, što otvara puno mogućnosti i rješava probleme klasičnih plovaka. Na primjer, možete jednostavno promijeniti redoslijed stupaca.

U donjem primjeru prikazujemo bočnu traku ispod glavnog sadržaja za mobilnu verziju i činimo to prvim blokom na velikim zaslonima.

Naravno, to se može postići korištenjem povlačenja/guranja za plutanje, ali ovo je vrlo teško.

Zaključak

Općenito, zadatak postavljen za mene je izvršen - sada mi mreže više ne stvaraju probleme, a raspored je brz i jednostavan. Više o mogućnostima brze mreže možete pročitati u repozitoriju i pogledati primjere:

Još uvijek koristite bootstrap? Onda idemo k vama!

Oznake:

• css
• sass
• rešetka

Dodaj oznake

Modularna mreža je poseban predložak prema kojem se izrađuje dizajn web stranice. U biti, radi se o sustavu prezentiranja vizualnih informacija posjetitelju na temelju pojedinačnih blokova koji se nazivaju moduli. Web mjesto razvijeno korištenjem takvog predloška mnogo je lakše za čitanje i navigaciju.

Kako se koristi mreža

Modularni grid koristi se za razvoj dizajna knjiga, posjetnica, zaštitnih znakova, logotipa itd. Također je obavezno koristiti ga prilikom izrade web stranica. Pravilno napravljena rešetka skladno sastavlja okruženje za sve elemente resursa - grafiku i tekst. Mnogo ih je lakše smjestiti na stranicu i stvoriti jasne granice između njih. Raspoređivanjem elemenata na određeni način svaki od njih možete učiniti uočljivim i ujedno povezati sve informacije o samoj stranici.

Vrste modularnih rešetki

Najčešća modularna mreža u dizajnu stranica sastoji se od tri osnovna stupca. U ovom slučaju, zaglavlje i podnožje imaju širinu jednaku njihovoj veličini. Ovu standardnu ​​opciju obično koriste amateri pri izradi web stranica. Ponekad se širina jedne ćelije povećava na račun širine druge.

Stvaranje druge verzije modularnih mreža - nestandardnih - moguće je samo za ljude koji se profesionalno bave web dizajnom. U ovom slučaju točno su definirane samo širina stupova i razmak između pojedinih elemenata. Modularna mreža u dizajnu različitih vrsta izvora vijesti i online časopisa obično se razvija na sljedeći način:

1. Stvoreno je zaglavlje i podnožje. Ovdje se trebaju nalaziti naziv stranice, navigacijski izbornik i razne vrste video materijala.
2. Stranica je podijeljena u tri stupca. Štoviše, dva od njih imaju iste dimenzije. Treći stupac podijeljen je okomitom crtom na dva dijela. Tako dobivamo četiri rubrike (vijesti, fotogalerija, oglasni prostor, najnovije promjene informacija na stranici).

Modularna mreža za internetske trgovine različitih specijalizacija stvara se nešto drugačije. U ovom slučaju vrlo je važno posjetiteljima osigurati jednostavnost navigacije. U ovom slučaju, elementi su grupirani na standardan i jedinstven način. Za svaki objekt u mreži istaknute su važne informacije koje ga karakteriziraju.

Ravnalo u uređivaču Photoshopa

Web stranice se izrađuju pomoću rasterskih ili vektorskih, vrlo je zgodno napraviti mrežu u njima. Pogledajmo kako se to radi u popularnom Photoshop editoru. Stvaranje modularne mreže u Photoshopu vrlo je jednostavno.

Kako bi se ravnala pojavila oko perimetra prozora radne slike, idite na stavku glavnog izbornika "Prikaz" i kliknite liniju "Ravnala". U ovom editoru možete koristiti različite elemente - s podjelama u centimetrima, milimetrima, inčima ili pikselima. Da biste napravili potrebne postavke, idite na stavku glavnog izbornika "Uredi". Zatim odaberite redak "Postavke" (Preferences) - "Jedinice i ravnala". Nakon toga će se pojaviti prozor u kojem možete promijeniti vrstu ravnala. U gornjem padajućem izborniku odaberite centimetre, milimetre, piksele itd.

Međutim, obično kada rade u Photoshop editoru koriste nešto drugačiju, jednostavniju metodu. Za promjenu mjernih jedinica jednostavno desnom tipkom miša kliknite samo ravnalo u prozoru slike. Nakon toga možete izvršiti željenu akciju u izborniku koji se pojavi. Obično se prilikom izrade web stranice koristi mreža piksela.

Photoshop mreža

Modularna mreža samog programa Photoshop postat će vidljiva nakon što odete na stavku glavnog izbornika "View" - "Show" - "Grid". Razmak između linija mreže može se podesiti. Da biste to učinili, izvršite naredbu "Uređivanje" - "Postavke" - "Vodilice, rešetka, kriške". Ovdje možete promijeniti ne samo korak između redaka, već i njihovu boju. Pomoću ove mreže bit će vrlo lako brzo i točno postaviti sve objekte budućeg mjesta na radno polje.

Rad s kursorom

Modularni grid web stranice na ovaj se način izrađuje vrlo jednostavno. Kursor se zalijepi za linije tijekom rada. To može biti zgodno ako trebate napraviti blokove preciznih, specifičnih veličina. Ako se iz nekog razloga ova funkcija pokaže nepotrebnom, može se onemogućiti. Prema zadanim postavkama, ishodište mreže u Photoshopu nalazi se u gornjem lijevom kutu prozora. Po želji se može premjestiti na bilo koje drugo mjesto na platnu. Da biste to učinili, postavite kursor iznad kvadrata ishodišta i jednostavno ga povucite dok držite tipku miša. Da biste vratili početnu točku na svoje mjesto, dvaput kliknite na isti kvadrat u kutu.

Između ostalog, postoje različiti dodaci za Photoshop editor koji čine izradu web stranice pomoću modularne mreže još praktičnijom. Preuzmite ih online. Pomoću ovih dodataka možete izraditi rešetke s određenim parametrima.

Mreža u CorelDrawu

Pogledajmo sada kako napraviti modularnu mrežu u vektorskom uređivaču CorelDraw. Ovdje se stvara na gotovo isti način kao u Photoshopu. Njegova se ikona nalazi na gornjoj ploči (oko u mreži). Nakon što kliknete na njega, možete napraviti sve potrebne postavke. Možete odabrati udaljenost između linija, promijeniti mjernu jedinicu itd. Oni ograničavaju radno polje u prozoru slike u CorelDrawu i pomoću vodiča. Po potrebi se mogu učiniti vidljivima ili nevidljivima.

Modularna mreža u dizajnu web stranice temeljni je element čijem razvoju treba pristupiti s maksimalnom odgovornošću. Uostalom, pogodnost njegovih posjetitelja, a time i vrijeme koje provode na njegovim stranicama, ovisi o tome koliko je resurs pravilno strukturiran.

"Mreža je sustav pomoći, ali nije garancija, već jednostavno ima niz mogućih namjena, a svaki dizajner može pronaći rješenje koje odgovara njegovom ili njezinom individualnom stilu. Ali treba naučiti koristiti rešetku. Ona je umjetnost koja zahtijeva praksu."

— Joseph Müller-Brockmann

Zapravo, sama upotreba mreže povezana je s jednim od najstarijih i najosnovnijih načela dizajna: poravnanjem. Naš mozak želi sve pojednostaviti i učiniti razumljivijim. Zato se trudimo uvesti red u stvari koje se čine kaotičnim.

Naravno, što brže sve ispravno organiziramo, to će naš mozak brže moći prepoznati model i krenuti dalje. Mreže su tako uredne da ne zahtijevaju gotovo nikakvo tumačenje s naše strane. .

Razmotrite dva izgleda stranica prikazana na donjoj slici:

Iako su obje ove slike samo nekoliko pravokutnika, skup na vrhu čini se fundamentalno boljim od onog na dnu. Možemo odmah prepoznati obrazac, prihvatiti ga i krenuti dalje. Slika ispod uzrokuje vizualnu nelagodu jer nema jasan uzorak, poredak ili svrhu i izgleda kao nasumična zbirka oblika.

Valja napomenuti da neorganiziranost može biti i lijepa . U prirodi, na primjer, nema jasnih linija. Rešetke izgledaju hladno i tvrdo, ali imajte na umu da su one vrlo djelotvorna i djelotvorna metoda da ne dopustite da vaša mašta zaglavi strukture.

Pogledajte neke od najpopularnijih web stranica s vrhunskim dizajnom. Najvjerojatnije su koristili mrežicu. Mreže pomažu stabilizirati strukturu web-stranice i pružaju logičan predložak za dizajnera za izradu web-mjesta.

Korištenje mreže ne znači da će vaš dizajn biti dosadan. Dobar dizajner treba znati i moći primijeniti osnovna pravila korištenja mreže, ali to ne znači da ne može kršiti pravila.

Jednostavno rečeno, rešetka je podjela izgleda okomitim i/ili vodoravnim smjernicama uključujući margine, prostor i niz stupaca kako bi se pružio okvir za organiziranje sadržaja.

Mreže se tradicionalno koriste u tisku, ali se također često koriste u web dizajnu. Mrežica je jednostavno alat koji pomaže u dizajnu.

Kada počinjete s učenjem novih vještina u određenom području, prvo biste trebali slijediti preporuke. Učenje osnova osigurava da možete učinkovito primijeniti načela. Odnosno, prvo - teorija, a zatim - praksa.

Vrijedno je napomenuti da postoje dva načina za izradu rešetke predloška:

Metoda #1: Napravite vlastitu mrežu

Postoji mnogo različitih načina za izradu vlastite mreže, ali na kraju je na vama da odaberete opciju koja vam najviše odgovara.

Možete podijeliti prazan dokument matematički, stvarajući paran ili neparan broj stupaca za rad. Vaša mreža može biti složena ili jednostavna, možete koristiti pravila trećina ili zlatnog reza, što god želite.

Možda će vam sljedeći članci pomoći u tome:

• How You Make A Grid (knjiga na engleskom u .pdf formatu)

Evo nekoliko primjera mreža stvorenih u Photoshopu pomoću vodiča ( Pogled>Novi vodič):

Dodaci za izradu rešetki u Photoshopu

5. Grid System Generator - generator tako popularnih mreža kao što su 960.gs, Golden Grid, 1Kb Grid, Simple Grid / postavite potrebne parametre i kliknite “GENERATE”.

Mreže za fluidne/responzivne web stranice

Responzivni web dizajn danas je vrlo popularan. Njegovo glavno načelo je korištenje gumene mreže. Možete pročitati više o njima, ali ja bih želio malo proširiti ovu zbirku i dodati još nekoliko izvora.

1. - generator adaptivne mreže

2. Fluid grid calculator - usluga koja vam omogućuje izradu gumene mreže. Unesite parametre i dobit ćete gotov kod.

Nekako nemam dovoljno vremena, pa sam odlučio napisati članak na temu modularnih mreža u web dizajnu, možda će nekome informacije biti korisne i zanimljive. Modularna mreža vrlo je koristan alat za web dizajnera, a mnogi ga početnici iz nekog razloga zanemaruju, ali uzalud.

U današnjem ću članku pokušati govoriti o tome što je modularna mreža, koje zadatke obavlja, kako je možete sami izgraditi, a također ću pokazati primjer izrade dizajna web stranice koristeći ga kao primjer.

Kao primjer, izradio sam jednostavan mockup dizajna bloga. Naravno, neću razmatrati sve pojedinosti izrade dizajna u okviru ovog članka, pokazat ću samo opći princip kako možete koristiti mrežu za izradu dizajna web stranice.

Što je modularna mreža?

Modularna rešetka je modularni sustav rasporeda, koji je mreža s vertikalnim i horizontalnim ritmovima; sjecišta ritmova tvore module. Dakle, cijeli grid se sastoji od takvih modula, otuda i njegovo ime.

Modul se može nazvati mjernom jedinicom stvorenom za davanje proporcionalnosti i proporcionalnosti.

Možda sam to prepametno napisao. Pokušat ću objasniti jednostavnim riječima, u našem svijetu postoji dosta primjera modularnih rešetki, na primjer, zid od opeke od pola opeke bit će modularna mreža, a cigla će biti modul.

Pločice u kupaonici također, cijeli zid je modularna mreža (pod uvjetom da su sve pločice iste veličine), a jedna pločica je modul ili mjerna jedinica, kao u našem slučaju.

Čemu služi grid i koje zadatke obavlja?

Mreža je ključna za brzi razvoj makete, prototipa, dizajna web stranice ili aplikacije. Značajno štedi vrijeme na razvoju, strukturiranju i predlošcima predložaka. Uklanja potrebu za dosadnim radom pozicioniranja i poravnavanja dizajnerskih blokova. Pojednostavljuje rad dizajnera, dizajnera izgleda i razvojnog tima u cjelini.

• Ubrzava razvojni proces. Potrebno nam je puno manje vremena za odabir mjesta za blokove u izgledu.
• Pomaže pri pozicioniranju. Svi elementi su međusobno poravnati na mreži, a pozicioniranje traje minimalno.
• Omogućuje izradu predložaka. Razvojem modularne mreže stvaramo predložak za cijeli projekt, kako tijekom razvoja tako i za buduće odluke. Nudimo i mogućnosti brze izmjene.
• Otklanja greške. Mreža omogućuje izbjegavanje niza najčešćih pogrešaka s pozicioniranjem, strukturiranjem, veličinama i razmakom između blokova.
• To je jedinstveni sustav proporcija. Zahvaljujući modulima, svi elementi u rasporedu su proporcionalni i međusobno usporedivi.
• Strukturira i organizira. Zahvaljujući modularnoj rešetki, raspored postaje strukturiraniji i uređeniji, a dizajn se doživljava ugodnijim.
• Dovodi do estetskijeg izgleda. Jasna i logična struktura dobivenog mjesta daje estetskiji izgled.
• Pomaže ostalim sudionicima projekta u daljnjem razvoju. Dizajn izrađen korištenjem modularnog sustava rasporeda puno je lakši za raspored nego izgled izgrađen bez rešetke. Mreža daje dizajneru izgleda standardizaciju rješenja i ubrzava proces izgleda. Olakšava velikom timu rad na velikim projektima. Također omogućuje novim programerima i sudionicima projekta da razumiju izgled puno brže. Što zauzvrat dovodi do cjelovitijeg rezultata rada.

Izgradnja modularne mreže

Prije svega, prije nego što počnemo stvarati modularnu mrežu, moramo odlučiti o dimenzijama izgleda budućeg mjesta. Mi odlučujemo za koju minimalnu rezoluciju stvaramo izgled.

Minimalna razlučivost se najčešće prihvaća kao razlučivost monitora od 1024x768 i 1280x720 piksela. Naravno, mogu se odabrati i druge rezolucije, kao i uvijek, sve ovisi o zadatku koji se radi. Na temelju ovih parametara morat ćemo stvoriti . Od toga, širina nam je najvažnija, jer je često fiksna za stranice, dok visina, naprotiv, varira ovisno o sadržaju stranice.

U ovom slučaju, izradit ću platno širine 1000 piksela s minimalnom rezolucijom od 1024x768 piksela. Napravit ću sadržajni dio od 960 piksela, s 20 piksela ispune duž rubova (širina naših margina).

Izrada rešetke fonta

Prije svega, stvaramo mrežu fonta. Odaberite jednu visinu retka za cijeli izgled stranice. Obložimo ga kao bilježnicu, na kojoj ćemo imati sve tekstove, popise, ilustracije, naslove, paragrafe i druge matrice. Obično kreiram liniju visine 18 piksela, ali može biti i druge veličine, sve ovisi o odabranoj veličini i fontu.

Razmak između redova(u css visini retka) može se izračunati na dva načina:

1. Glavna veličina fonta za sadržaj (16 pt.) / 2 + glavna veličina fonta za sadržaj (16 pt.) = 24 pt.
2. Glavna veličina fonta za sadržaj (16 pt.) x 1,5 = 24 pt.

Izgradnja vertikalne podjele ili stupčaste mreže

Sada zabavni dio, moramo stvoriti mrežu stupaca. Širina stupca određuje širinu našeg modula. Dakle, moramo odrediti upravo ovu širinu, kako se to može učiniti.

1. Ako planirate imati blok konstantne veličine na stranici (banner, video, ilustracija itd.). Ovi blokovi imaju fiksne veličine i često uključuju nekoliko modula. Dakle, znajući njihovu veličinu, lako možemo odrediti širinu modula, dovoljno je shvatiti da blok mora biti unutar širine modula.
2. Drugi način je kada imate specifične zadatke na koje se možete osloniti. Na primjer, zadatak zahtijeva postavljanje određenog broja blokova u liniji preko cijele širine tijela stranice, recimo 6. Zatim, znajući ovaj parametar, možemo procijeniti da jedan takav blok uključuje dva modula u širinu. Prema tome, za nas je prikladna mreža od 12 stupaca.

Dodatno, moramo odrediti udaljenost između modula ili stupova. Uglavnom koristim veličinu crte rešetke fonta, u ovom slučaju to je 18 piksela.

Tako dobivamo širinu modula od 63,5, zaokruženu na 63 piksela. Ostalo nam je 0,5 piksela za svaki modul, imamo ih 12 za ukupno 6 piksela, raspršit ćemo ih u polja od 3 piksela, čime će se naša polja povećati i postati jednaka 23 piksela, a ne 20, redom, i sadržajni dio postat će jednak 954 piksela.

Bilješka: Broj stupaca ovisi o potrebama i zadacima i može varirati. Međutim, vrijedi uzeti u obzir činjenicu da je prikladnije raditi s modulima srednje veličine nego s velikim ili malim. Veliki moduli ispadaju glomazni i manje fleksibilni za rukovanje, dok su mali jako raštrkani i izgubljeni, što ih također čini nezgodnima za korištenje.

Izrada horizontalnih podjela

Ovdje samo uzmemo nekoliko redaka i kombiniramo ih u jedan redak, zatim preskočimo jedan redak i ponovno kombiniramo nekoliko redaka. U našem slučaju spojit ću tri. Sve linije su napravljene u prozirnom obliku, tako da na mjestima gdje se sijeku formiraju kvadrate koji će biti naši moduli. U principu, izrađena je cijela modularna mreža.

Izrada prototipa izgleda

Sada ću s malim primjerom pokazati kako se ova mreža može koristiti. Vrlo često prvo što napravim je nacrtati skicu na papiru, tako da je lakše skicirati opcije prema zadatku, a kada već imam određenu strukturu, prenesem je na mrežu i napravim. Prilikom izrade prototipa, gdje je to potrebno, spajam nekoliko modula u regije i dodajem matrice svim blokovima.

Dizajniramo, izrađujemo detalje

Imajući prototip, lako možete zamisliti strukturu dizajna i blokova stranice. Možete procijeniti praktičnost, upotrebljivost i, ako je potrebno, brzo ispraviti. Zatim, nakon što smo potpuno zadovoljni s prototipom, možemo prijeći na crtanje samog dizajna i iscrtavanje detalja.

A ovako izgleda raspored bez modularne rešetke na kraju nakon svih obavljenih radova.

Izgled je napravljen isključivo za ovaj članak. Na primjeru pokazati kako koristiti modularni grid u web dizajnu. Želio bih napomenuti da se rešetka može koristiti u kombinaciji s vodilicama; ova metoda je još učinkovitija.

I na kraju, želim reći hoćete li koristiti rešetke u svom radu ili ne ovisi o vama, samo sam htio malo razgovarati o ovom alatu za web dizajnere, koji mi puno pomaže u mom radu.

U nastavku možete vidjeti korak po korak postupak stvaranja dizajna od prototipa do gotovog izgleda web stranice iz ovog članka.

Video postupak za izradu dizajna web stranice pomoću modularne mreže:

• Lekcija 1:
• Lekcija 2:
• Lekcija 3: