Nastavljam temu adaptivni raspored... Danas ćemo govoriti o jednom od tri kita adaptivnog rasporeda - raspored zasnovan na mreži(fleksibilni raspored na mreži). Druge dvije su fleksibilne slike.

Sredinom 20. stoljeća, grafički dizajneri populariziraju koncept tipografski, ili modularni, mrežasti- racionalan sistem kolona i redova u koje se mogu postaviti 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 stvar ovdje je veličina stranice. U tipografiji je to fiksno, a web stranica se može rastezati i skupljati ovisno o tome na čemu se gleda.

Za primjenu modularne mreže na web stranicu, koristite jednostavnu formulu proporcionalnosti:

cilj / kontekst = rezultat

Najlakši način za razumijevanje ove formule je ilustrativni primjer. Recimo da imamo nacrtan izgled stranice u dvije kolone - dio sadržaja i bočna traka:

Pravimo ga "gumenim". Ali ovdje je problem: kako postaviti širinu oba bloka? Uostalom, ako to napišete u pikselima, onda oni više neće biti gumeni. To znači da trebate koristiti procente, a ne piksele. Ali izvinite, koja značenja da napišem? Ipak, na kraju krajeva, od nečega treba krenuti.

Naravno, možete to shvatiti na oko: sadržaj zauzima oko 70% ukupne širine stranice, a bočna traka - 30%. Ali pravi dizajner rasporeda nikada ništa ne procjenjuje na oko. Potrebna nam je tačna veličina.

Tome služi formula proporcionalnosti. Uzimamo samo širinu unutrašnjih blokova i dijelimo je sa ukupnom širinom stranice. Ovdje je cijela stranica kontekstu, odnosno svaka od unutrašnjih jedinica, cilj iz gornje formule.

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

Ostaje samo prevesti ove podatke u procente. Bez previše muke, samo pomaknite zarez dva znaka udesno. Dobijamo:

68,75%
31,25%

To je tako jednostavno. Ipak, zakomplikujmo zadatak. Pretpostavimo da imamo sadržajni dio podijeljen na još dva nejednaka dijela. Na primjer, lijevo je uska kolona s datumom članka i društvenim gumbima raspoređenim okomito, a desna je široka i u njoj imamo tekst članka.

Iz izgleda dizajna znamo da je širina ove uske kolone 120 piksela, a široke 520. Kako prevesti ove brojke u%? Ponovo primijenite formulu proporcija. No, ovoga puta ne koristimo cijelu širinu stranice kao kontekst, već širinu bloka koji sadrži ove dvije kolone, odnosno širinu dijela sadržaja koji imamo je 660 piksela. dijelimo:

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

U procentima dobijamo, respektivno, 18,18% i 78,78%

Usput, u datoteke modernog stila koje koriste responzivni izgled, dizajneri ispravnih rasporeda dodaju slične proračune kao komentare. Radi bolje jasnoće. Ovako to obično izgleda:

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

Nadam se da ovo nije bio problem. Idemo dalje!

Raspored zasnovan na mreži

Gore navedeni primjeri, naravno, još uvijek nisu mreža. Pa, šta je mreža od dvije kolone? Prava modularna mreža je dizajnirana da pomogne i dizajnerima i dizajnerima izgleda da kreiraju složene web stranice s mnogo kolona i pojedinačnih blokova.

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

U stvari, ovakvih usluga je sada desetka! 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, potrebne su modularne mreže kako bi se vizualno organizirao sadržaj na web stranici. Nije samo lijep sa estetske tačke gledišta i ugodan oku korisnika, već i pogodan za same programere. Pogotovo ako je stranica zaista složena po strukturi i sadržaju.

Osim toga, takve modularne mreže je mnogo lakše napraviti prilagodljivim nego nasumično razbacane blokove različitih veličina.

I, naravno, brzina razvoja takvih stranica je mnogo veća. Ne morate se zavaravati i iznova izmišljati točak od nule. Dovoljno je odabrati odgovarajući okvir i na njemu napraviti web stranicu.

Nadam se da sada znate šta je responzivni raspored zasnovan na mreži.

Sljedeći put, hajde da pričamo o fleksibilnim slikama u prilagodljivom izgledu. Veoma važna i kontroverzna tema. Preporučujem da i vi to dobro proučite, da ne uđete u nered. Ostati u kontaktu! Još bolje, pretplatite se na bilten Web Council-a.

Izrada web stranica

Svakom dizajneru izgleda koji se suočava sa sljedećim zadatkom kodiranja adaptivnog izgleda potrebne su mreže. U većini slučajeva, koristi se stari dobri bootstrap i divovi sa klasama poput col-xs-6 col-sm-4 col-md-3 počinju da se pojavljuju u html-ke. I čini se da je sve dobro i brzo, ali u ovom pristupu često se pojavljuju mnoge zamke. U ovom članku ćemo pogledati ove zamke i baciti trule rajčice, razmotriti moj zanat za mreže bez problema.

Problemi

Prilagođene mreže

Dakle, naš layout dizajner ima jako malo vremena, raspored gori, sve treba da se uradi juče. Stoga on uzima popularni bootstrap css framework kao osnovu i započinje svoj rad. A onda, usred posla, iznenada naiđe na blok transparenta "5 u nizu". Svako ko je radio sa bootstrap-om zna da je njegova zadana mreža 12x, dakle 5 kolona u nizu sa standardnom bootstrap mrežom, pa ne možete to učiniti. Da, naravno, možete sastaviti proizvoljnu mrežu u bootstrapu, ali ovo je vrijeme za gubljenje, preuzimanje zavisnosti, prikupljanje manje-ki (a mi, na primjer, pišemo u sass).

Mogu li uključiti neku biblioteku za prilagođene mreže? Općenito, ovo je dobar izlaz, jedina mana ovog pristupa je što su skoro svi dizajnirani ili za dugo i zamorno pisanje @media (min-width:) (), ili generiraju vlastiti skup klasa, sa gomilom verovatno nepotrebnih col15-xs- offset-3, koji će biti uključeni u konačni css.

Stoga će, s velikom vjerovatnoćom, dizajner izgleda jednostavno napisati sve stilove rukom (u principu, nema puno toga za pisanje).

Vrlo često standardnoj bootstrap mreži nedostaju dodatne tačke prekida, tj. postoje xs, sm, md, lg - sve do 1200px širine. Ali šta je sa velikim monitorima? Bilo koja tačka prekida xl na 1600px samo traži standardni set. Ali opet, ne postoji, a nastaju ista rješenja kao u prethodnom pasusu. Ali može biti puno kontrolnih tačaka - 320, 360, 640, 768, 992, 1200, 1600, 1900 ..

Redundantnost i opširnost

I tu lagano dolazimo do sljedećeg problema. Zamislite da trebate napisati vlastite veličine bloka za svaku mrežu, tada ćete dobiti nešto poput ovoga:

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

Odvajanje stilova od markupa

Svaki slagač zna da su inline stilovi loši. Zašto onda pišemo stil u našim razredima za označavanje? col-xs-6, visible-sm i ne daj Bože text-right - sve su to stilovi, a ako treba da izvršite izmjene na već rastegnutom izgledu, sigurno će postojati problem koji će dizajner izgleda morati pitati backend za promjenu col-sm- 6 na col-sm-4.

Preklapanje nepotrebnih stilova

Često se css framework povezuje samo radi mreža i nekoliko malih funkcija, što naknadno rezultira prekomjernim resetiranjem stilova i dvostrukom veličinom konačnog css-a. Na primjer, cijeli bootstrap.min.css se povezuje, a zatim se sjene i zaobljeni uglovi .btn, .form-control i slično veselo i veselo uklanjaju, uključujući: hover,: focus,: first-child. Kao rezultat, umjesto da pomogne, okvir stoji na putu. Da ne spominjemo često nepotrebne funkcije poput .glyphicona. Naravno, opet, možete prikupiti bootstrap od onoga što vam je potrebno, ali ovo je opet vrijeme.

Strani standardi i kodni stil

Recimo da je dizajner izgleda proučio BEM i počeo ga koristiti. Ali potreba za korištenjem bootstrapa diktira svoje izuzetke - u njemu se sve klase pišu crticom, ne slijedeći principe BEM-a. I tada se javlja problem izbora - ili se pomiriti sa neredom u imenima klasa (btn-block disabled component__btn component__btn_disabled), ili ipak izbaciti bootstrap.

Zastarjele metode

Kao što znate, mreže u bootstrapu 3 su zasnovane na float-u. Ono što često stvara probleme, a jedan od najčešćih je različita visina blokova, usled čega se prelepa mreža "puca". Prestanite koristiti float u druge svrhe, svi pretraživači koji ne znaju flexbox su skoro izumrli!

Susy! da li je ovo izlaz?

U potrazi za rješenjem za sve gore navedene probleme, nalazim se na prekrasnom Susy grid frameworku! , generalno vrlo dobro. Ali nedostajala mi je brzina, jer Susy! predložio je opisivanje stupaca za svaku tačku prekida posebno:

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

To je, Susy! pretpostavlja da ćete sami napraviti prekidne tačke. Takođe, Susy! ne piše display: flex for, lines for you, morate zapamtiti da ih sami napišete. Uvlake između kolona u njemu su postavljene samo relativno (neće raditi fiksno u pikselima). Također, nedavno je naučio flex, a prije toga je napravio mreže sa plutajućim i: nth-child (). Generalno, Susy! ovo je dobro, ali bih volio brzinu i lakoću opisivanja mreža za sve tačke prekida, kao što je to bilo sa bootstrapom.

Potraga za drugim grid sistemima takođe nije dala mnogo rezultata - svi ili prate susy! putanju, zaboravljajući na tačke prekida, ili prate bootstrap putanju, obezbeđujući skup generisanih klasa za taksiranje mreža u html-u.

Biciklistička zgrada

Tako je odlučeno da napišu nešto svoje, kao rezultat toga je rođen fast-grid. Takođe je napravljen sa sass-om kao što je susy. Koje su njegove glavne prednosti u poređenju sa drugim rešenjima, posebno sa susy !? Prije svega, brzina zbog manje koda, uzmimo standardni primjer za pokretanje:

Sa brzom mrežom, takvu mrežu je vrlo lako opisati:

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

Hajdemo sada da prođemo kroz naše nedostatke i vidimo kako brza mreža rješava sve ove probleme.

Prilagođene mreže

@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 tačaka

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

Redundantnost i opširnost / odvajanje stilova od markupa

fast-grid je mrežni okvir koji se koristi u css-u, a ne u html-u na osnovu generisanih skupova klasa. Ovo odvaja oznake od stilova, što je korisno za buduću podršku. Takođe eliminiše potrebu za generisanjem gomile pomoćnih klasa (.col-xs-push-4, itd.) koje se uglavnom ne koriste.

Preklapanje nepotrebnih stilova

Pošto je brza mreža gomila miksina, ona sama po sebi ne generiše nikakva pravila u css-u. Stoga, ovdje nećete naići na činjenicu da okvir stilizira elemente onako kako vam nisu potrebni. U svakom slučaju, ovo su samo rešetke i ništa više.

Strani standardi i kodni stil

fast-grid su miksini koje morate koristiti interno vaš razrede sa imenima po vama. Volite BEM? Nema problema!

Zastarjele metode

Zadani je flexbox, koji otvara puno mogućnosti i rješava probleme klasičnih float-a. Na primjer, možete lako promijeniti redoslijed kolona.

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

Naravno, to bi bilo moguće postići korištenjem povlačenja/guranja za plutanje, ali ovo je vrlo stabilno.

Zaključak

Generalno, zadatak postavljen za mene je završen - sada mi rešetke više ne stvaraju probleme, a raspored je brz i lak. Možete pročitati više o mogućnostima brze mreže u spremištu i vidjeti primjere:

Da li još uvijek koristite bootstrap? Onda idemo do vas!

Tagovi:

• css
• sass
• grid

Dodaj oznake

Modularna mreža je poseban predložak koji se koristi za izradu dizajna web stranice. U stvari, to je sistem za predstavljanje vizuelnih informacija posetiocu na osnovu zasebnih blokova, koji se nazivaju moduli. Web stranica razvijena pomoću takvog predloška mnogo je lakša za čitanje i navigaciju.

Kako se mreža nanosi

Modularna mreža se koristi u izradi dizajna knjiga, vizitkarti, zaštitnih znakova, logotipa itd. Obavezno je koristiti pri izradi sajtova. Pravilno napravljena mreža skladno komponuje okruženje za sve elemente resursa – grafičke i tekstualne. Mnogo ih je lakše postaviti na stranicu i stvoriti jasne granice između njih. Poređajući elemente na određeni način, svaki od njih možete učiniti uočljivim i istovremeno povezati sve informacije o samom sajtu.

Vrste modularnih mreža

Najčešća modularna mreža u dizajnu stranice su tri stupca osnovnih ćelija. U ovom slučaju, zaglavlje i podnožje imaju širinu jednaku njihovoj veličini. Ovu standardnu ​​opciju obično koriste amateri prilikom kreiranja web lokacija. Ponekad se širina jedne ćelije povećava zbog širine druge.

Kreiranje druge verzije modularnih mreža - nestandardnih - moguće je samo za ljude koji se profesionalno bave web dizajnom. U ovom slučaju precizno se definira samo širina stupova i razmak između pojedinih elemenata. Modularna mreža u dizajnu raznih vrsta novinskih resursa i online časopisa obično se razvija na sljedeći način:

1. Kreira se zaglavlje i podnožje. Ovdje se treba nalaziti naziv stranice, navigacijski meni, razne vrste video materijala.
2. Stranica je podijeljena u tri kolone. Štaviše, dva od njih imaju iste dimenzije. Treća kolona je vertikalnom linijom podijeljena na dva dijela. Tako se dobijaju četiri sekcije (vesti, galerija fotografija, oglasni prostor, najnovije informativne promene na sajtu).

Modularna mreža za online trgovine različitih specijalizacija kreirana je na malo drugačiji način. U ovom slučaju, veoma je važno da se posetiocima obezbedi laka navigacija. Istovremeno, elementi su grupirani na standardan i ujednačen način. Za svaki od objekata u mreži istaknute su važne informacije koje ga karakteriziraju.

Lenjir u Photoshop editoru

Web stranice se kreiraju pomoću rastera ili vektora, a mreže u njima su vrlo zgodne za kreiranje. Pogledajmo kako se to radi u popularnom Photoshop editoru. Vrlo je jednostavno napraviti modularnu mrežu u Photoshopu.

Da bi se lenjiri pojavili duž perimetra prozora radne slike, idite na stavku glavnog menija „Pregled“ i kliknite na liniju „Lenjiri“. U ovom uređivaču možete koristiti širok izbor elemenata - s podjelama u centimetrima, milimetrima, inčima ili pikselima. Da biste izvršili potrebna podešavanja, idite na stavku glavnog menija "Uredi". Zatim odaberite liniju "Preferences" - "Units & Rulers". Nakon toga će biti istaknut prozor u kojem možete promijeniti izgled ravnala. U gornjem padajućem meniju odaberite centimetre, milimetre, piksele itd.

Međutim, obično kada rade u uređivaču "Photoshop" koriste malo drugačiju, jednostavniju metodu. Da biste promijenili mjerne jedinice, jednostavno kliknite na samo ravnalo u prozoru slike desnim dugmetom miša. Nakon toga, u meniju koji se pojavi, možete izvršiti željenu radnju. Obično se prilikom kreiranja web stranice koristi mreža u pikselima.

Photoshop mreža

Sama modularna mreža programa Photoshop će postati vidljiva nakon što odete na stavku glavnog menija "View" - "Show" - "Grid". Razmak između linija mreže je podesiv. Da biste to učinili, izvršite naredbu "Uredi" - "Postavke" - "Vodice, mreža i isječci" (Vodice, rešetka, kriške). Ovdje možete promijeniti ne samo korak između linija, već i njihovu boju. Koristeći ovu mrežu, bit će prilično lako brzo i precizno postaviti sve objekte buduće lokacije na radno polje.

Rad sa kursorom

Modularna mreža stranice je vrlo jednostavna za kreiranje na ovaj način. Kursor se drži linija tokom rada. Ovo može biti zgodno ako trebate napraviti blokove preciznih, definiranih veličina. Ako se iz nekog razloga pokaže da ova funkcija nije potrebna, možete je onemogućiti. Podrazumevano, ishodište mreže u Photoshopu se nalazi u gornjem levom uglu prozora. Ako želite, možete ga premjestiti na bilo koje drugo mjesto na platnu. Da biste to uradili, postavite kursor na kvadrat porekla i jednostavno ga prevucite dok držite taster miša. Da vratite početnu tačku na njeno mjesto, dvaput kliknite na isti kvadrat u uglu.

Između ostalog, postoje sve vrste dodataka za uređivač "Photoshop", koji vam omogućavaju da kreiranje stranice pomoću modularne mreže učinite još praktičnijim. Preuzmite ih na mreži. Koristeći ove dodatke, možete kreirati mreže sa određenim parametrima.

Mreža u CorelDrawu

Sada da vidimo kako da kreiramo modularnu mrežu u vektorskom uređivaču CorelDraw. Ovdje je kreiran na isti način kao u Photoshopu. Njegova ikona se nalazi na gornjoj ploči (oko u mreži). Nakon što kliknete na njega, možete izvršiti sva potrebna podešavanja. Možete odabrati razmak između linija, promijeniti mjernu jedinicu itd. Označite radnu oblast u prozoru slike u CorelDraw-u i pomoću vodiča. Mogu se učiniti vidljivim ili nevidljivim ako je potrebno.

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

"Mreža je sistem pomoći, ali nije garancija, samo ima niz mogućih upotreba i svaki dizajner može pronaći rješenje koje odgovara njegovom individualnom stilu. Ali morate naučiti kako koristiti mrežu. To je umjetnost koja zahtijeva praksu."

— Joseph Müller-Brockmann

Zapravo, sama upotreba mreže povezana je s jednim od najstarijih i najosnovnijih principa dizajna - poravnanjem. Naš mozak želi sve pojednostaviti i učiniti razumljivijim. Zbog toga pokušavamo da uvedemo red u stvari koje izgledaju haotično.

Naravno, što brže sve pravilno organiziramo, brže naš mozak može identificirati model i krenuti dalje. Mreže su toliko uređene da ne zahtijevaju gotovo nikakvu interpretaciju s naše strane. .

Razmotrite dva izgleda stranica prikazana na slici ispod:

Iako su obje ove slike samo nekoliko pravokutnika, čini se da je set na vrhu fundamentalno bolji od donjeg. Možemo momentalno prepoznati obrazac, prihvatiti ga i krenuti dalje. Slika ispod, s druge strane, izaziva vizuelnu nelagodu, jer nema jasnu sliku, red ili svrhu i izgleda kao nasumični skup oblika.

Treba napomenuti da i neorganiziranost može biti lijepa. . U prirodi, na primjer, nema jasnih linija. Mreže izgledaju hladno i kruto, ali imajte na umu da su one vrlo djelotvoran i efikasan način da spriječite da vaša mašta zaglavi u strukturama.

Pogledajte neke od najpopularnijih web stranica s vrhunskim dizajnom. Najvjerovatnije su koristili rešetku. Mreže pomažu u stabilizaciji strukture web stranice i pružaju dizajneru logičan predložak za izradu web stranice.

Korištenje mreže ne znači da će vaš dizajn imati dosadan dizajn. Dobar dizajner bi trebao znati i biti u stanju primijeniti osnovna pravila za korištenje mreže, ali to ne znači da ne može kršiti pravila.

Jednostavno rečeno, mreža je podjela rasporeda s vertikalnim i/ili horizontalnim vodičima uključujući margine, prostor i neke stupce za postavljanje temelja za organiziranje vašeg sadržaja.

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

Kada počnete učiti nove vještine u određenom području, prvo morate slijediti smjernice. Učenje osnova osigurava da možete efikasno primijeniti principe. Odnosno, prvo - teorija, a onda - praksa.

Vrijedi napomenuti da postoje dva načina za kreiranje mreže šablona:

Metoda # 1: Kreirajte vlastitu mrežu

Postoji mnogo različitih načina za kreiranje vlastite mreže, ali na kraju dana, slobodni ste odabrati koji najbolje funkcionira.

Prazan dokument možete matematički podijeliti, 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ćine ili zlatni omjer kako želite.

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

• Kako pravite mrežu (knjiga na engleskom u .pdf formatu)

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

Dodaci za kreiranje mreža u Photoshopu

5. Grid System Generator -generator popularnih mreža kao što su 960.gs, Golden Grid, 1Kb Grid, Simple Grid / podesite potrebne parametre i pritisnite "GENERIRAJ".

Mreže za gumene / responzivne stranice

Responzivni web dizajn je danas izuzetno popularan. Glavni od njegovih principa je upotreba gumene mreže. Možete pročitati više o njima, ali bih želio malo dopuniti ovu kolekciju i dodati još nekoliko izvora.

1. - adaptivni mrežni generator

2. Kalkulator fluidne mreže - usluga koja vam omogućava kreiranje gumene mreže. Unesite parametre i dobijete gotov kod.

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

U današnjem članku pokušat ću vam reći o tome što je modularna mreža, koje zadatke obavlja, kako je možete sami izgraditi, a također vam pokazati primjer kreiranja izgleda dizajna stranice na njegovom primjeru.

Kao primjer, napravio sam jednostavan izgled blog dizajna. Naravno, neću razmatrati sve detalje kreiranja dizajna u okviru ovog članka, samo ću pokazati opći princip kako možete koristiti mrežu za kreiranje dizajna web stranice.

Šta je modularna mreža?

Modularna mreža To je sistem modularnog rasporeda, koji predstavlja mrežu sa vertikalnim i horizontalnim ritmovima, preseci ritmova formiraju module. Dakle, cijela mreža se sastoji od takvih modula, pa se tako i pojavio njen naziv.

Jedinica se može nazvati mjernom jedinicom stvorenom da daje proporcionalnost i proporcionalnost.

Vjerovatno je pisao previše nerazumno. Pokušat ću objasniti jednostavnim riječima, u našem svijetu postoji dosta primjera modularnih rešetki, na primjer, zid od cigle u pola cigle, to će biti samo modularna mreža, a cigla će biti modul .

Pločica u kupatilu, takođe, ceo zid je modularna rešetka (pod uslovom da su sve pločice iste veličine), a jedna pločica je modul ili jedinica mere, kao u našem slučaju.

Čemu služi mreža i koje zadatke obavlja?

Mreža je neophodna za brzi razvoj izgleda, prototipa, web stranice ili dizajna aplikacije. Značajno štedi vrijeme na razvoju, strukturiranju, šabloniranju šablona. Eliminiše rutinski posao pozicioniranja i poravnanja blokova dizajna. Pojednostavljuje rad i dizajnera, dizajnera izgleda i razvojnog tima u cjelini.

• Ubrzava razvojni proces. Potrebno nam je mnogo manje vremena da pronađemo prostor za blokove u rasporedu.
• Pomaže u pozicioniranju. Svi elementi su poravnati jedan u odnosu na drugi na mreži, a pozicioniranje traje minimalno vrijeme.
• Dozvoljava šabloniranje. Nakon što smo razvili modularnu mrežu, kreiramo šablonsku osnovu za ceo projekat, kako tokom razvoja tako i za buduća rešenja. Također pružamo mogućnosti za brze izmjene.
• Eliminiše greške. Mreža izbjegava neke od najčešćih grešaka s pozicioniranjem, strukturiranjem, dimenzioniranjem i razmakom između blokova.
• To je jedinstven sistem proporcija. Zahvaljujući modulima, svi elementi u rasporedu su proporcionalni i međusobno proporcionalni.
• Strukturira i organizuje. Zahvaljujući modularnoj mreži, raspored postaje strukturiraniji i uređeniji, dizajn se doživljava ugodnijim.
• Dovodi do estetskijeg izgleda. Jasna i logična struktura rezultirajuće stranice daje estetskiji izgled.
• Pomaže u daljem razvoju ostalih učesnika u projektu. Dizajn izgrađen korišćenjem modularnog sistema rasporeda je mnogo lakši za kucanje nego raspored izgrađen bez mreže. Mreža daje dizajneru izgleda standardizaciju rješenja, ubrzava proces izgleda. Olakšava rad velikom timu na velikim projektima. Takođe omogućava novim programerima i učesnicima projekta da shvate izgled mnogo brže. Što zauzvrat dovodi do holističkog rezultata rada.

Izgradnja modularne mreže

Prije svega, prije nego počnemo stvarati modularnu mrežu, moramo odlučiti o veličini izgleda buduće stranice. Odlučujemo u kojoj minimalnoj rezoluciji ćemo kreirati izgled.

Minimalna rezolucija se najčešće uzima kao rezolucija monitora od 1024x768 i 1280x720 piksela. Naravno, mogu se birati i druge rezolucije, kao i uvek, zavisi od zadatka sa kojim se suočavate. Na osnovu ovih parametara, moraćemo da kreiramo. Od njih nam je najvažnija širina, jer je često fiksirana za stranice, a visina, naprotiv, varira zbog sadržaja stranice.

U ovom slučaju, kreirat ću platno širine 1000 piksela za minimalnu rezoluciju od 1024x768 piksela. Napravit ću dio sa sadržajem u 960 piksela, razmak na ivicama za 20 piksela (širina naših margina).

Kreirajte mrežu fontova

Prva stvar koju radimo je kreiranje mreže fontova. Odabir visine jedne linije za cijeli izgled stranice. Ređamo ga kao svesku u kopiju, na kojoj ćemo imati sve tekstove, liste, ilustracije, naslove, pasuse i druge tablice. Obično kreiram visinu linije od 18 piksela, ali može postojati i druga veličina, sve zavisi od odabrane veličine i fonta.

Prored(u css visini linije) može se izračunati na dva načina:

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

Izgradnja vertikalne zglobne ili stupaste mreže

Sada za zabavni dio, moramo kreirati stupastu mrežu. Širina kolone određuje širinu našeg modula. Dakle, treba da odredimo ovu širinu, kako se to može uraditi.

1. Ako stranica planira imati blok sa konstantnom veličinom (baner, video, ilustracije, itd.). Ovi blokovi su fiksne veličine i često uključuju nekoliko modula. Dakle, znajući njihovu veličinu, lako možemo odrediti širinu modula, dovoljno je razumjeti da blok mora biti unutar širine modula.
2. Drugi način je kada imate određene zadatke na koje se možete osloniti. Na primjer, prema zadatku, vrijedi postaviti određeni broj blokova u liniju po cijeloj širini tijela stranice, recimo 6. Tada, znajući ovaj parametar, možemo procijeniti da jedan takav blok uključuje dva modula širine . U skladu s tim, za nas je prikladna mreža od 12 stupaca.

Dodatno, moramo odrediti udaljenost između modula ili stupaca. Uglavnom koristim veličinu linije fonta, u ovom slučaju 18px.

Tako dobijamo širinu modula od 63,5, zaokruženo na 63 piksela. Ostalo nam je 0,5 piksela za svaki modul, imamo ukupno 12 od 6 piksela, rasporedimo ih u polja od 3 piksela, pri čemu će se naša polja povećati i postati jednaka 23 piksela, a ne 20, a sadržajni dio će postati jednako 954 piksela...

Bilješka: broj kolona zavisi od potreba i zadataka i može se razlikovati. Međutim, vrijedi uzeti u obzir činjenicu da je prikladnije raditi sa srednjim modulima nego velikim ili malim. Veliki moduli ispadaju glomazni i manje fleksibilni za upotrebu, dok su mali vrlo razbacani i izgubljeni, što takođe postaje nezgodno za rad.

Izrada horizontalne podjele

Ovdje samo uzimamo nekoliko redova i kombiniramo ih u jedan red, zatim preskačemo jedan red i opet kombiniramo nekoliko redova. U našem slučaju ću kombinovati tri. Sve linije su kreirane u polutransparentnom obliku, tako da se na mjestima njihovog sjecišta formiraju kvadrati, koji će biti naši moduli. U principu, sva modularna mreža je kreirana.

Kreiranje prototipa izgleda

Sada ću vam na malom primjeru pokazati kako se ova mreža može koristiti. Vrlo često, prije svega, nacrtam skicu na papiru, tako je lako brzo skicirati opcije na osnovu zadatka koji je pri ruci, a kada već postoji određena struktura, prebacim je na mrežu i uradim. Prilikom kreiranja prototipa, gdje je potrebno, kombiniram nekoliko modula u regije i pokrivam sve blokove matricama.

Dizajniramo, detaljno radimo, radimo

Imajući prototip, lako možete zamisliti strukturu dizajna, blokove stranice. Možete procijeniti praktičnost, upotrebljivost i, ako je potrebno, brzo podesiti. Dalje, nakon što nam prototip u potpunosti odgovara, možemo preći na crtanje samog dizajna, crtanje detalja.

A ovako izgleda izgled bez modularne mreže, na kraju, nakon obavljenog posla.

Izgled je napravljen isključivo za ovaj članak. Da na primjeru pokažem kako koristiti modularnu mrežu u web dizajnu. Želio bih napomenuti da se mreža može koristiti u kombinaciji s vodičima, ova metoda je još učinkovitija.

I kao zaključak, želim da kažem da li je vaš posao da koristite grid u svom radu, samo sam hteo da vam kažem nešto o ovom alatu za web dizajner, koji mi mnogo pomaže u radu.

U nastavku se možete upoznati s postupnim procesom kreiranja dizajna od prototipa do gotovog izgleda stranice iz ovog članka.

Video proces za kreiranje dizajna web stranice pomoću modularne mreže:

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