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

— Joseph Müller-Brockmann

U stvari, sama upotreba mreže odnosi se na jedan od najstarijih i najosnovnijih principa dizajna: poravnanje. Naš mozak želi sve pojednostaviti i učiniti razumljivijim. Zato pokušavamo da uvedemo red u stvari koje izgledaju kaotično.

Naravno, što brže sve pravilno organiziramo, brže će naš mozak moći 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 donjoj slici:

Iako su obje ove slike samo nekoliko pravokutnika, skup na vrhu izgleda fundamentalno bolji od onog na dnu. Možemo momentalno prepoznati obrazac, prihvatiti ga i krenuti dalje. Slika ispod izaziva vizualnu nelagodu jer nema jasan uzorak, red ili svrhu i izgleda kao nasumična kolekcija oblika.

Treba napomenuti da i neorganiziranost može biti lijepa . U prirodi, na primjer, nema jasnih linija. Mrežice izgledaju hladno i tvrdo, ali zapamtite da su vrlo efikasne i efikasan metod Ne dozvolite da se vaša mašta zaglavi u strukturama.

Pogledajte neke od najpopularnijih web stranica s vrhunskim dizajnom. Najvjerovatnije su koristili mrežicu. Mreže pomažu u stabilizaciji strukture web stranice i pružaju logičan predložak za dizajnera za kreiranje web stranice.

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

Jednostavno rečeno, mreža je podjela rasporeda po vertikalnim i/ili horizontalnim smjernicama uključujući margine, prostor i broj kolona kako bi se pružio okvir za organiziranje sadržaja.

Mreže se tradicionalno koriste u štampi, ali se često koriste i 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 treba slijediti preporuke. 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

Ima ih mnogo na razne načine kreirajte vlastitu mrežu, ali na kraju imate pravo da odaberete opciju koja vam najviše odgovara.

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 god želite.

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

• Kako napraviti mrežu (knjiga na engleski jezik 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. Generator Grid sistema - generator popularnih mreža kao što su 960.gs, Golden Grid, 1Kb Grid, Simple Grid / postavite potrebne parametre i kliknite na “GENERIRAJ”.

Mreže za fluidne/responzivne web stranice

Responzivni web dizajn je danas vrlo popularan. Njegov glavni princip je upotreba gumene mreže. Možete pročitati više o njima, ali ja bih želio malo proširiti ovu kolekciju i dodati još nekoliko resursa.

1. - adaptivni mrežni generator

2. Kalkulator fluidne mreže - usluga koja vam omogućava da kreirate gumenu mrežu. Unesite parametre i dobijete gotov kod.

Modularna mreža - e uzorak, uzorak, veličina ili proporcija koji se ponavlja više puta. Zapamtite Escherove slike. Gušteri, ribe, ptice u nekim radovima - ovo je modul. Svaki korisnik interneta vidi module u obliku pozadine.

Prva opcija za korištenje modula u dizajnu je ista kao na Internetu, odnosno pozadinska slika. U raznim oblicima, kako samostalno tako iu raznim kombinacijama. I iste ilustracije od Eschera.

Druga opcija, dimenzionalna, vrlo je bliska trećoj, proporcionalnoj. U osnovi, to su modularne mreže za različite tipografske tipove štampanih proizvoda.

Treću opciju je teže uočiti, ali upravo ona leži u osnovi svih dizajna, arhitekture i ostalog što stvara priroda i čovjek. Čovjek je uvijek oblikovao okolinu, intuitivno vođen osjećajem za proporciju, odnosno odnose.

Fidija (tvorac Akropolja) i Iktin (Partenon) su takođe pokazali poznavanje zakona zlatnog preseka. Suština ovog zakona je da je manji segment vezan za veći, kao što je veći za cijelu dužinu. Ne sjećam se da li se ovaj zakon izučava u školi, ali u umjetničkim školama, umjetničkim i arhitektonskim institutima je kao "Oče naš..." U jednom broju ova vrijednost je izražena kao 1.618..... algebarski izgleda kao : b=b:( a+b). Poenta je da je takav omjer koristan za oko zbog mentalnih i fizičkih karakteristika strukture oka, radnih frekvencija mozga i mnogih, mnogo... (Slika 4.2.)

Drugi aktivni element u izgradnji nekih vizuelno povoljnih odnosa je kvadrat. Konstruisanjem od njega lako se dobijaju omjeri 1:2, 2:3, 3:4.

Slika 4.2.

Slika 4.3.

Za web, modularna konstrukcija stranice može se organizirati pomoću tabela. Kao modul možete uzeti omjer ekrana (na 800x600 to je 4:3) (Slika 4.3.). Standardna veličina lista papira A4 je takođe modul za crtanje i tipografiju

Ogroman broj tipografskih mreža zasnovan je na formatu lista papira, koji je uzet kao osnova za publikaciju. Dizajn mreže zavisi od sadržaja i namjere projekta, kao i od individualnog stila određenog umjetnika. A ako se dizajn radi pomoću kompjutera, tada proces postaje prilično brz, posebno u fazi implementacije. Većina grafičkih (uglavnom izdavačkih) programa ima ugrađene opcije za kreiranje modularne mreže, a gotovo svi imaju prilično veliki skup modularnih predložaka mreže pod prilično uobičajenim nazivima “Knjižica”, “Kalendar” itd.

Na slici 4.4. predstavljeno modularna mreža prve trake. Malo se razlikuje od opće modularne mreže u gornjem bloku. Za jasniju percepciju logotipa trebalo ga je istaknuti vrlo značajnim pauzama. Ali nema problema s čitanjem i isticanjem.

Slika 4.4.

Slika 4.5. Modularna mreža preostalih pruga

Kao što vidite, pored jasno definisanog gornjeg bloka, traka ima i jasno definisan "podrum" - tako novinari nazivaju donji deo trake. Pomaže da se informacije na stranici podijeli u tematske zone. Krug modulacije pojasa vidljiv je u dva dijagrama boja.

Modularna mreža nije uvijek tako ujednačena i simetrična. Može biti potpuno apstraktan, sa proizvoljnim rasporedom elemenata, ali u svakom slučaju njegov zadatak je osigurati kontinuitet u prezentaciji materijala.

Module koriste arhitekte, dizajneri namještaja i dizajneri automobila, njihov modul je vezan za proporcije i dimenzije ljudskog tijela.

Slika 4.6.

U web dizajnu, modularna mreža se koristi mnogo češće nego što se čini na prvi pogled. Ako koristite

za formiranje elemenata na stranici - već koristite modularnu mrežu, pogotovo ako ovu mrežu ponavljate ne na jednoj stranici, već na nekoliko. Ponekad mreža može biti skrivena, ponekad može biti eksplicitna (kada koristite drugu boju kao pozadinu ćelije, različitu od glavne pozadine) (Slika 4.6.)

Treba dodati da je suština mreže ista, osim što mrežna mreža može sadržavati dinamičke (promjenjive) parametre ćelije. Stranica može biti različite visine, što zavisi od količine teksta i slika na njoj, i automatski se proširiti (ili ne proširiti) u zavisnosti od rezolucije monitora koja se koristi.

Veličine ekrana

WITH

Širina platna

Trebali biste izbjegavati tvrdo kodirane veličine ekrana, ali ako postavite tvrdo kodirane veličine ekrana, morate imati na umu da je postavljanje tvrdih parametara određeno veličinom platna.

Rezolucija ekrana
Veličine platna

Veličina ekrana se može odrediti pomoću jednostavnih programa (pogledajte laboratorijsku praksu).

Pogledajmo primjer modularne mreže i specificiranja dimenzija, organiziranih pomoću tablice

U HTML-u možete označiti cijeli sadržaj tabele oznakom . Tada je zaglavlje tabele označeno oznakom i zaključak sa oznakom .Sve tri oznake su završne oznake i imaju atribute. Ćelije zaglavlja tabele koriste oznaku .

Međutim, najlakši način da ne ovisite o veličini platna je da koristite relativne veličine, odnosno postavite veličine u %.

Izuzetno koristan članak o pravilima za kreiranje izgleda časopisa! Toplo preporučujem čitanje.

Prije nego što govorimo o modularnoj mreži, hajde da shvatimo šta je modul.

Modul je slika koja se višestruko ponavlja, veličina ili proporcija. – ovo je struktura (okvir, šablon) rasporeda grafičkih elemenata na stranicama. Osnova modularne mreže je “modul”, drugim riječima, glavni korak mreže, koji je vizualno određen širinom i visinom ćelije (modularne jedinice). Ćelije se grade pomoću vertikalnih stupova i horizontalnih linija.

Velika većina tipografskih mreža zasnovana je na formatu lista papira, koji je uzet kao osnova za publikaciju. Kao što razumete, kolone i osnovna mreža stranica kreiraju se pomoću automatskih programskih komandi. Mreža može biti vrlo raznolika, ovisno o namjeni publikacije i idejama dizajnera.

Mreža se kreira za cijeli širenje, a ne za svaku stranicu posebno. To je učinjeno tako da se čitava lista časopisa percipira kao jedinstvena cjelina, da se ne raspada na desni i lijevi dio, te da cijela publikacija ne izgleda kao povezivač različitih stranica. Reverzna mreža se može sastojati od 2, 3, 4, itd. kolone jednake i nejednake širine.

Kolone jednake širine kreiraju se u prozoru za kreiranje dokumenta ili u panelu „Margine i kolone“. Ako treba da navedemo 3 kolone, onda unosimo broj 3 u odgovarajuće polje itd.

Ali šta ako, prema našem planu, ne bi svi stupci trebali imati istu širinu? Na primjer, šta ako se tekst i slike stave u 2 široke kolone, a informacije s objašnjenjima u bočnu usku kolonu?

U ovom slučaju, naša modularna mreža će biti izgrađena na bazi razno broj kolona automatskih programa. Na primjer, ako postavimo 8 automatskih kolona za stranicu, tada će 2 široke kolone koje smo planirali (za tekst i slike) zauzimati 3 automatske kolone, a uski bočni stupac će biti izgrađen na bazi 2 automatske kolone.

Osim raspodjele po stupcima, koristi se i modularna mreža osnovni horizontalni lenjiri. Na njih su pričvršćene linije teksta i ivice grafičkih elemenata radi vizuelnog uređenja i poravnanja.

Naslovi može stati u jednu kolonu ili se protezati kroz nekoliko kolona. Nije neuobičajeno da naslov bude jedini element za cijelu stranicu. Sve ovisi o kreativnoj ideji i ličnim preferencijama dizajnera.

Na isti način, grafičke slike (fotografije ili ilustracije) mogu zauzeti jednu ili više kolona, ​​ili mogu ispuniti širenje vijesti. Prilično uobičajena tehnika je kada fotografija u cijelosti zauzima jedan dio širenja i lagano se proteže na drugi dio kako bi vizualno ujedinila oba dijela.

-

Modularna mreža nije nužno izgrađena od okomitih linija. Ponekad dizajner odluči nagnuti mrežu ili joj čak dati originalan oblik. Ako želite ići dalje od uobičajenog, samo naprijed!
Samo pokušajte osigurati da se u potrazi za originalnošću vaš rad ne pretvori u Sizifov rad. Zamislite kako bi bilo postaviti 40-50 stranica sa kosom ili kovrčavom mrežom...

-

Stoga, prije nego što budete originalni, zapitajte se da li je to zaista potrebno i zašto? Ako je cijeli časopis izgrađen na kosoj, obrnutoj ili kovrčavoj mreži, onda će, najvjerovatnije, takva originalnost čitatelja iznenaditi tek na prvih 5 stranica, a zatim će početi iritirati.

Zašto? Da, jer čitalac, prije svega, želi mirno čitati i asimilirati zanimljive informacije, i da vas ne ometaju ekscesi dizajnerskog genija.

Ali ako se originalna oznaka pojavi samo u jednom određenom dijelu časopisa, to neće biti samo zanimljivo, već i prikladno, jer će rubrici dati moderan i prepoznatljiv izgled.

Sve što nas okružuje ima svoje proporcije. Još kao dijete crtani film “38 papagaja” učio nas je da se sve može podijeliti na dijelove jednake jedni drugima (dužina boa constrictora sastojala se od 38 papagaja). Takođe svi znamo da je visina osobe jednaka sedam njegovih glava, centimetar se sastoji od deset milimetara, metar se sastoji od stotinu centimetara itd. Dakle, papagaj iz crtića, ljudska glava, milimetar i centimetar su moduli.

Iz svega ovoga možemo shvatiti da je modul konvencionalna jedinica, korak u ritmu mreže. A sama mreža je sistem proporcija.

Kako će nam ova modularna mreža pomoći? Prvo, to će ubrzati rad, jer nećemo morati trošiti puno vremena pokušavajući da skladno rasporedimo sve elemente. Drugo, uz pomoć mreže možemo razumjeti koju točku trebamo koristiti i koje veličine svaki blok treba biti. Općenito, modularna mreža je okvir koji uvelike olakšava izgradnju web stranice.

Pogledajmo šta su mreže.

1. Najjednostavniji tip je blok mreža. To jest, ona pravi grube oznake, dijeleći područje na blokove.

Blok mreža

3. Modularna mreža ima ne samo vertikalnu, već i horizontalnu podelu. Dakle, ono što se dobija na presecima linija je modul.

4. Postoji i hijerarhijska mreža u kojoj su blokovi postavljeni intuitivno i ne prate nikakve obrasce.

Dakle, kako napraviti modularnu mrežu.

1. Prvo, moramo razumjeti koju funkciju će naš sajt imati, identificiramo njegovu strukturu i sastav stranica. Zatim određujemo koje će stranice biti najvažnije i s njima počinje rad. Za njih ćemo kreirati listu funkcionalnosti i sortirati je po prioritetu.

Moramo opisati svaki blok funkcionalnosti i detaljizirati ga do najsitnijih detalja. Rezultat bi trebao biti lista u kojoj su blokovi i njihovi elementi navedeni po nivoima. Dakle, sada imamo slagalice izlivene iz kutije, a sve što treba da uradimo je da ih sastavimo u kompletnu sliku.

3. Konstruisanje mreže počinjemo određivanjem dimenzija radni prostor. Zatim moramo napraviti mrežu fonta. Da biste to učinili, odaberite visinu reda, koja bi trebala biti ista za cijeli raspored. U elementima koji imaju veličinu fonta različitu od veličine fonta glavnog teksta, razmak između reda mora biti višekratnik visine naše linije.

Tako dobijamo osnovu naše buduće mreže. Cijeli tekst će počivati ​​na ovom temelju.

4. Sada moramo odlučiti koliko će širok naš modul biti. Ovdje možemo početi od širine bilo kojeg trajnog elementa. Ako imate zadatak da po širini stranice postavite neke identične elemente, onda sve postaje još lakše, jer već znate njegove dimenzije.

Radi praktičnosti, moramo odrediti kolika će biti udaljenost između modula. Mora biti jednaka visini najmanje jedne linije iz prethodnog stava.

Postoji jedno upozorenje - morate odabrati prave veličine modula, jer ako su prevelike, fleksibilnost mreže će nestati, a ako su male, mreža će se jednostavno izgubiti.

5. Horizontalna podjela je prilično jednostavna za napraviti. Njegova visina mora biti višestruka od visine naše linije. A koliko linija ćete umetnuti u jednu podjelu ovisi o vašoj skici.

Ne tako davno, dok sam radio na još jednoj lekciji za kurs „Grafički dizajn. Osnove” (zakazano za početak januara), shvatio sam da se tema korištenja i izgradnje modularnih mreža rijetko obrađuje.

Postoji dosta informacija o tome šta je modularna mreža i za šta je potrebna, ali vrlo malo o tome kako je izgraditi i koja pravila se pridržavati. Stoga sam odlučio da će današnji post imati praktičan fokus i pokušati što jasnije obraditi ovu temu.

Dakle, modularna mreža je raspored vašeg rada, način da sistematizirate i poravnate elemente. On je okosnica kompozicionog rješenja i služi kao sredstvo organiziranja ne samo komponente rad, ali i slobodan prostor.

Mreža nam može pomoći u rješavanju problema i biti dio rješenja. Najupečatljiviji primjer bi bio windows interfejs telefon:

Za one kojima je potreban detaljniji teorijski dio pitanja, postoji mogućnost da koriste pretragu ili se pretplate na kurs i dobiju odgovarajuće pismo, gdje je to dovoljno detaljno opisano, te prelazimo direktno na praksu.

Prvo moramo odlučiti zašto nam je potrebna modularna mreža. Radimo li web stranicu, ili dizajniramo časopis, ili naslovnicu knjige, ili nešto treće? U zavisnosti od vrste aktivnosti, treba identifikovati glavne strukturne elemente. Često je veličina modula određena jednim od ovih elemenata, na primjer logotipom, položajem menija na stranici, itd. U rasporedu minimalna veličina određena veličinom koja je čitljiva u određenoj situaciji.

Radi jasnoće, dat ću primjer modularne mreže štampane periodike. Ako izlažemo časopis, onda strukturni elementi mogu biti naslov, podnaslov, tekst i ilustracije. Obično ih ima u časopisima različite vrstečlanci u kojima se uloga tekstualnog dijela može promijeniti. U takvim slučajevima, kako bih mrežu učinio fleksibilnijom, koristim 5-7 modula (horizontalno):

Kombiniranje modula može se obaviti u gotovo bilo kojem formatu koji vam odgovara:

Zapravo, što je mrežni modul manji, to će biti fleksibilniji bez gubitka proporcionalnosti. Ali mnogi smatraju da je nezgodno raditi s mrežama ako veličina njihovog modula teži veličini udaljenosti između modula. Takva mreža zasljepljuje oči i lako se zbuniti, posebno za početnike:

Mogućnosti za izradu modularne mreže može biti mnogo, ovdje ste ograničeni samo željama kupca i vašom maštom. Ne zaboravite da modularne mreže ne moraju biti vertikalne, mogu se graditi i dijagonalno, pod određenim uglom nagiba itd.

U slučaju web stranica optimalnim brojem kolona smatra se 12, 16 i 24, što je zbog specifičnosti izgleda web stranice i korištenja mogućnosti okvira. Smatram da je minimalna visina modula za web 20px, što je zbog optimalne veličine fonta (12-14pt) i njegove čitljivosti.

Sada je vrijeme da razgovaramo o tehničkoj strani problema.

Kreiranje modularne mreže u

• Prvi i najlakši način je da omogućite samu mrežu grafički editor(Ctrl+’) i, vođeni njime, postavite vodilice. To će potrajati dugo i sa velikom vjerovatnoćom grešaka.
• Instalirajte posebne dodatke za Photoshop ( GuideGuide , Modularni rešetkasti uzorak , GridMaker 2).
• Preuzmite gotov šablon iz jednog od besplatnih generatora mreže, kao što su 960.gs, Golden Grid, 1Kb Grid, Simple Grid. Postavite željene parametre i kliknite na “GENERIRAJ”.

U stvari, postoji prilično veliki broj usluga za kreiranje mreža, uključujući i "gumene" stranice. Mogu se vrlo lako pronaći pomoću pretrage, tako da ne vidim smisla da ih sve navodim u članku. Takve usluge su odlični pomagači za početnike.

Kreiranje modularne mreže u

Za razliku od Photoshopa, InDesign ima sopstvene alate za kreiranje modularne mreže. Na meniju Layout morate odabrati stavku Kreirajte vodiče i unesite potrebne parametre u dijaloški okvir:

Ovaj alat ima prilično fleksibilne postavke, tako da stvaranje željene strukture neće biti teško. Kreiranje mreže je najbolje uraditi pomoću Glavna stranica, kako ne bi ponavljali postupak za svaku stranicu.

Kreiranje modularne mreže u

• Prva metoda (slično Photoshopu) je da uključite mrežu samog grafičkog uređivača i, vođeni njome, postavite vodiče. Također je moguće napraviti bilo koji oblik vodiča, koji će pomoći u organiziranju nagnute mreže.
• Skinuti gotovi šabloni mreže Gdje - pretraga će vam reći. Možete ih pronaći na internetu.

Nadam se da vam je tema modularnih mreža postala bliža i jasnija. Obavezno vježbajte njihovu izgradnju. Savršeno razumijem da je ovo vrlo zamorna aktivnost, ali vrijedi. Izgradnja mreža razvija vaš osjećaj za proporciju i omogućava vam da bolje vidite sve netačnosti poravnanja u budućnosti.

Svijet besplatnih programa i korisnih savjeta
2024 whatsappss.ru

naslov
meni	modul1		Modul 2	modul 3	modul4
	zaključak