Implementácia návrhu interiéru modulárnej siete. Modulárna mriežka

Ako začína návrh loga? Premýšľate nad myšlienkou grafického znaku? Alebo výber písma? Alebo možno z modulárnej siete? Je ťažké povedať, pretože v rôznych prípadoch sú potrebné rôzne prístupy. Mnoho dizajnérov, ktorí už majú približnú predstavu o tom, ako by malo logo vyzerať, však začína vytvorením modulárnej mriežky. Použitie mriežky vám umožňuje vytvoriť harmonické, geometricky overené a dobre usporiadané logo, ktoré je možné následne reprodukovať v akejkoľvek veľkosti.

Modulárna mriežka je veľmi užitočným nástrojom v arzenáli dizajnérov. Zvlášť pre začiatočníkov - aj zvládnutím základov práce s sprievodcami sa môžete vyhnúť mnohým chybám pri navrhovaní. Najčastejšie sa používa pravidelná štvorcová mriežka s bunkami danej veľkosti, ale to vôbec neznamená, že je potrebné použiť túto možnosť. Štruktúra mriežky na vytvorenie loga môže byť ľubovoľná, napríklad môže ísť o kombináciu vodorovných, zvislých a naklonených vodidiel, ktoré interagujú s kruhmi rôznych priemerov. Čo bude modulárna mriežka, rozhoduje sám dizajnér. Ak potrebujete vytvoriť prísne jednoduché logo na základe princípov geometrickej harmónie, bez modulárnej mriežky sa nezaobídete. Toto je jediný spôsob, ako vytvoriť jedinečné logo, v ktorom bude šírka písmen, polomer zakrivenia prvkov a vzdialenosť medzi znakmi dodržiavať určité štandardy.

Áno, tento prístup k návrhu loga možno nazvať príliš mechanickým, ale logá postavené na základe modulárnej mriežky vyzerajú „správnejšie“ - koniec koncov sú vytvárané pomocou určitých zásad. Okrem toho nezabúdajte, že po vytvorení loga budú potom reprodukované inými dizajnérmi a ak budú vedieť, ako modulárna mriežka vyzerá, bude pre nich oveľa jednoduchšie zvládnuť túto úlohu.

Modulárne mriežky sa používajú v rôznych prevedeniach. Základné pravidlá pre konštrukciu mriežok boli vytvorené už dávno - prvé známky používania sprievodcov možno vidieť napríklad v starých rukopisoch. Mriežky boli v tlači široko používané a s príchodom počítačovej doby si prirodzene našli cestu do webdizajnu.

Najzaujímavejšie je, že mnoho ľudí, nielen dizajnérov, nevedome dodržiava pravidlá pre stavbu modulárnych sietí. Napríklad fotografi, ktorí sa pokúšajú získať kompozične overený záber, používajú pravidlo tretín alebo pravidlo zlatého rezu. Aj klasický výraz „horizont je zakrytý“ znamená, že fotograf nesprávne „použil“ horizontálne vodítka. Takže návrhári loga, ktorí neradi používajú mriežku a tvrdia, že to obmedzuje ich kreativitu, by si mali uvedomiť, že každý vizuálny objekt, ktorý má kompozíciu, je vytvorený pomocou modulárnej mriežky. Aj keď sa to stalo úplne náhodou.

VÝHODY MODULÁRNEJ Mriežky

Aký typ sieťoviny si vyberiete, závisí od mnohých dôvodov - záleží iba na konkrétnom prípade. Zároveň je dôležité nezabudnúť, že dizajnérovi by mala byť práca v tomto prostredí príjemná. Ak je používanie mriežky nepohodlné a neprospieva logu, je potrebné zrevidovať jeho štruktúru. Neviditeľné rámy vám môžu skutočne prekážať, takže musíte byť celkom pokojní v tom, že niektoré prvky budú porušovať prísnu organizáciu. A to je úplne normálne - napokon symboly, pomocou ktorých je logo napísané, majú rôznu šírku. Je veľmi ťažké dodržať geometrické zásady v logách, ktoré používajú azbuku. Azbuka obsahuje písmená, ktoré môžu dizajnéra priviesť do zúfalstva. Ak sa pozriete na rovnaké písmeno Y, je zrejmé, že vidíme úplne smiešny dizajn, ktorý nie je v dobrej zhode s obrysom ostatných písmen prevzatých z latinskej abecedy. A žena podobná hmyzu? Toto je spravidla nočná mora pre akéhokoľvek návrhára loga. Musíte však pracovať s tým, čo je, a na modulárnu sieť nie je čas. Takéto symboly budú stále presahovať hranice sprievodcov a musíte sa s tým zmieriť.

PREČO SA STOJÍ ZA POUŽÍVANIE Mriežky

Logo je možné vytvoriť bez použitia modulárnej mriežky. Prevezme sa pripravené písmo, napíše sa doň názov značky a je to. Pri grafickom znaku často nepotrebujete pracovať ani so sprievodcami. Existuje veľa takýchto log a často to nijako neovplyvňuje povedomie o značke. Logo Google je napríklad písmo Catull. Dizajnérka Ruth Kedar iba namaľovala písmená v rôznych farbách a pridala tiene.

Ak je však logo vytvorené úplne od začiatku, potom môže byť použitie sprievodcov pre návrhára veľmi užitočné. Mriežka vám pomôže zamerať sa a venovať väčšiu pozornosť organizačnej štruktúre loga. Použitie modulárnej mriežky vám umožňuje zamerať sa a vytvoriť logo, ktoré je jednoduché, ale stále relevantné. Keď sa pozriete na logá spoločností ako Apple, Shell alebo Nike, uvidíte, že používali jednoduché, klasické tvary.

Pomocou mriežky môžete vytvoriť všestranné logo, ktoré bude skvele vyzerať na vizitke aj na veľkom banneri. Sprievodcovia, kruhy a krivky zároveň vôbec neobmedzujú let myšlienok dizajnéra, naopak, robia jeho myslenie flexibilnejším. Občas môžete v mriežkach vidieť oveľa viac možností návrhu - bunky akoby naznačovali, ako môžete symboly posúvať tak, aby vyzerali harmonicky. To znamená, že pri práci s mriežkou pracuje dizajnér efektívnejšie s dostupným priestorom.

KEDY NEMUSÍTE POUŽÍVAŤ Mriežku

Vo všeobecnosti, ako je uvedené vyššie, na akékoľvek logo vytvorené pomocou základnej kompozície môžete použiť modulárnu mriežku, ktorá presne ukáže, ako bola vytvorená. Proti používaniu sprievodcov však existuje niekoľko argumentov.

Mriežka môže obmedziť kreativitu, pretože sa dizajnér cíti „uzamknutý“ v sprievodcoch. Takýto dizajnér sa snaží neprekračovať stanovené hranice a zažíva nepohodlie, ktoré neprispieva k vytváraniu vysokokvalitného loga.

Vytvorenie mriežky môže byť časovo veľmi náročné, najmä ak je logo zložité. Často sa s tým stretávajú začínajúci dizajnéri, ktorí ešte nie sú oboznámení so zákonmi kompozície, a preto nevedia rýchlo vytvoriť pletivo.

Pretože sieťovina má matematický charakter, je ľahké sa vo všetkých týchto tvaroch zameniť a v dôsledku toho zabudnúť na hlavnú myšlienku. Vždy by ste mali pamätať na to, že úspešné logo nie je len súbor geometrických tvarov, ale ich harmonická kombinácia. Tendencia niektorých návrhárov „hrať podľa pravidiel“ často vedie k tomu, že skončia s anonymným a vyslovene nešťastným logom.

VÝKON

Všetci návrhári loga pracujú odlišne. Niektorí ľudia radšej najskôr načrtnú na papier, iní okamžite začnú kresliť logo na počítači. Niektorí začínajú budovaním modulárnej siete, zatiaľ čo iní dávajú prednosť vytvoreniu obrázku a až potom súdržnosti. Nedá sa teda jednoznačne povedať, že modulárna mriežka je pri vytváraní loga nevyhnutnosťou. Navrhovanie loga sa však dá prirovnať k stavbe budovy. Správne navrhnutý dom vydrží dlhšie, pretože vychádza z premysleného plánu. To isté platí pre logo: ak ide o firemnú identitu, tvár značky, potom je najlepšie použiť modulárnu mriežku - logo predsa bude spoločnosť používať mnoho rokov. A bude veľmi dobré, ak bude kompozične správny. Pre každú stránku, ktorá je vytvorená, ako sa hovorí, pre dušu, je logo napísané akýmkoľvek krásnym písmom celkom vhodné. A modulárna mriežka nie je v tomto prípade potrebná.

Nie je to tak dávno, keď som pracoval na ďalšej lekcii kurzu „Grafický dizajn. Základy “(naplánované na vydanie začiatkom januára) som si uvedomil, že téma používania a budovania modulárnych sietí nie je na mnohých miestach pokrytá.

Existuje veľa informácií o tom, čo je modulárna sieť a na čo slúži, ale veľmi málo o tom, ako ju vybudovať a aké pravidlá je potrebné dodržiavať. Preto som sa rozhodol, že dnešný vstup bude mať praktické zameranie a pokúsim sa túto tému spracovať čo najjasnejšie.

Modulárna mriežka je teda rozložením vašej práce, spôsobom organizovania a zarovnávania prvkov. Je to chrbtica kompozičného riešenia a slúži ako prostriedok na organizáciu nielen základných častí diela, ale aj voľného priestoru.

Mriežka nám môže pomôcť vyriešiť zadané úlohy a môže byť súčasťou riešenia. Najvýraznejším príkladom je rozhranie Windows Phone:

Pre tých, ktorí potrebujú podrobnejšiu teoretickú časť otázky, je tu možnosť využiť vyhľadávanie alebo sa prihlásiť na kurz a získať zodpovedajúci list, kde je to dostatočne podrobne popísané, a ideme priamo do praxe.

Najprv sa musíme rozhodnúť, na čo potrebujeme modulárnu sieť. Vyrábame webovú stránku alebo vysádzame časopis, obálku knihy alebo niečo iné? V závislosti od druhu činnosti by sa mali zvýrazniť hlavné štrukturálne prvky. Veľkosť modulu je často určená jedným z týchto prvkov, napríklad logom, umiestnením ponuky na webe atď. Pri rozložení je minimálna veľkosť určená veľkosťou, ktorá je v konkrétnej situácii čitateľná.

Pre prehľadnosť uvediem príklad modulárnej mriežky tlačeného periodika. Ak vytvoríme časopis, potom štruktúrnymi prvkami môžu byť nadpis, podnadpis, text, ilustrácie. V časopisoch obvykle existujú rôzne druhy článkov, kde sa úloha textovej časti môže líšiť. V takýchto prípadoch, aby bola mriežka flexibilnejšia, používam 5-7 modulov (horizontálne):

Kombináciu modulov je možné vykonať v takmer akomkoľvek formáte, ktorý vám vyhovuje:

V skutočnosti, čím menší je modul mriežky, tým bude flexibilnejší bez straty proporcionality. Mnoho ľudí však považuje za nepohodlné pracovať s mriežkami, ak veľkosť ich modulu smeruje k veľkosti vzdialenosti medzi modulmi. Takáto mriežka je oslnivá v očiach a je ľahké sa v nej zmiasť, najmä pre začiatočníkov:

Možností na vybudovanie modulárnej siete môže byť veľa, tu ste obmedzení iba prianím zákazníka a vašou predstavivosťou. Nezabudnite, že modulárne mriežky nemusia byť zvislé, môžu byť tiež postavené diagonálne, pod určitým uhlom atď.

V prípade lokalít sa za optimálny počet stĺpcov považuje 12, 16 a 24, čo je spôsobené zvláštnosťami rozloženia stránok a využívaním schopností rámca. Za minimálnu výšku modulu považujem web 20px, s čím súvisí optimálna veľkosť písma (12-14pt) a jeho čitateľnosť.

Teraz je načase hovoriť o technickej stránke problému.

Vytvorenie modulárnej siete v

Prvým a najľahším spôsobom je zapnúť mriežku samotného grafického editora (Ctrl + ‘) a podľa neho nastaviť sprievodcu. Bude to trvať dlho a s vysokou pravdepodobnosťou chýb.
Nainštalujte si špeciálne doplnky pre Photoshop ( GuideGuide , Modulárny vzor mriežky , GridMaker 2).
Stiahnite si pripravenú šablónu z jedného z bezplatných generátorov mriežky, ako sú 960.gs, Golden Grid, 1 kB mriežka, jednoduchá mriežka. Nastavte požadované parametre a kliknite na „GENEROVAŤ“.

V skutočnosti existuje pomerne veľa služieb na vytváranie mriežok, vrátane „gumových“ stránok. Dajú sa veľmi ľahko nájsť pomocou vyhľadávania, takže nevidím dôvod uvádzať ich všetky v článku. Tieto služby sú skvelými pomocníkmi pre začiatočníkov.

Vytvorenie modulárnej siete v

Na rozdiel od Photoshopu má InDesign vlastné nástroje na vytváranie modulárnej mriežky. V ponuke Rozloženie musíte vybrať položku Vytvorte sprievodcov a v dialógovom okne zadajte potrebné parametre:

Tento nástroj má celkom flexibilné nastavenia, takže nebude ťažké vytvoriť požadovanú štruktúru. Sieťovanie sa najlepšie robí na Hlavná stránka aby ste sa vyhli opakovaniu postupu pre každú stránku.

Vytvorenie modulárnej siete v

Prvá metóda (podobná Photoshopu) je zapnúť mriežku samotného grafického editora a podľa neho nastaviť sprievodcu. Je tiež možné urobiť z ľubovoľného tvaru sprievodcu, ktorý pomôže pri organizácii šikmej mriežky.
Stiahnite si pripravené šablóny mriežky. Kde - zobrazí sa výzva na vyhľadávanie. Veľa z nich nájdete na internete.

Dúfam, že sa vám téma modulárnych sietí stala bližšou a jasnejšou. Určite si ich stavbu precvičte. Rozumiem úplne dobre, že je to veľmi nudné povolanie, ale stojí to za to. Mriežky rozvíjajú váš zmysel pre proporcie, čo vám umožní neskôr lepšie vidieť prípadné nepresnosti zarovnania.

Mimoriadne užitočný článok o pravidlách vytvárania rozloženia časopisu! Vrelo odporúčam prečítať si to.

Predtým, ako budeme hovoriť o modulárnej sieti, pochopme, čo je to modul.

Modul Ide o viacnásobne sa opakujúci obrázok, veľkosť alebo pomer. Je štruktúra (rám, šablóna) usporiadania grafických prvkov na stránkach. Základom modulárnej siete je „modul“, inými slovami, hlavný krok siete, ktorý je vizuálne určený šírkou a výškou klietky (modulárna jednotka). Bunky sú zostavené pomocou zvislých stĺpcov a vodorovných čiar.

Prevažná väčšina mriežok je založená na veľkosti papiera použitého ako základ pre publikáciu. Dokážete si asi predstaviť, že stĺpce a základná mriežka stránok sú vytvorené pomocou automatických príkazov programu. Mriežka môže byť veľmi rôznorodá, v závislosti od účelu publikácie a nápadu dizajnéra.

Mriežka je vytvorená pre celú šírku, nie pre každú stránku zvlášť. Deje sa to tak, aby celý časopis bol vnímaný ako jeden celok, nerozdelený na pravú a ľavú časť a celá publikácia by nevyzerala ako spojivo heterogénnych strán. Reverzná mriežka môže byť zložená z 2, 3, 4 atď. rovnaké a nerovnaké šírky stĺpcov.

Stĺpce rovnakej šírky sa vytvoria v okne na vytváranie dokumentu alebo na paneli „Okraje a kolóny“. Ak potrebujeme nastaviť 3 stĺpce, zadáme číslo 3 do zodpovedajúceho poľa atď.

Ale čo keď by podľa nášho plánu nemali mať všetky stĺpce rovnakú šírku? Čo napríklad, ak sú text a obrázky v 2 širokých stĺpcoch a vysvetľujúce informácie v úzkom bočnom stĺpci?

V tomto prípade bude naša modulárna sieť postavená na základe Zmiešaný počet automatických stĺpcov programu. Ak napríklad pre stránku nastavíme 8 automatických stĺpcov, potom naše 2 široké stĺpce (pre text a obrázky) zaberú 3 automatické stĺpce a na základe 2 automatických stĺpcov bude vytvorený úzky bočný stĺpček.

Okrem distribúcie podľa stĺpcov používa aj modulárna sieť základné horizontálne pravítka... Na vizuálne usporiadanie a zarovnanie sú k nim ukotvené riadky textu a okraje grafických prvkov.

Nadpisy zmestí sa do jedného stĺpca alebo môže zahŕňať viacero stĺpcov. Nie je neobvyklé, že nadpis je jediným prvkom na celej stránke. Všetko závisí od kreatívnej myšlienky a osobných preferencií dizajnéra.

Rovnako grafické obrázky (fotografie alebo ilustrácie) môžu zaberať jeden alebo niekoľko stĺpcov alebo môžu vyplniť celú šírku. Pomerne bežnou technikou je, keď fotografia zaberá jednu časť nátierky ako celok a mierne sa rozprestiera do druhej časti, aby sa obe časti vizuálne spojili.

Modulárna mriežka nie je nevyhnutne postavená z kolmých čiar. Niekedy sa návrhár rozhodne sieťku nakloniť alebo jej dokonca dať originálny tvar. Ak chcete prekročiť rámec bežného, choďte von!
Len sa snažte nepremieňať svoju prácu na sizyfovskú prácu v honbe za originalitou. Predstavte si, aké by to bolo napísať 40-50 strán šikmou alebo kučeravou mriežkou ...

Preto si skôr, ako získate originál, položte otázku, je to skutočne také nevyhnutné a na čo? Ak je celý časopis postavený na šikmej, obrátenej alebo kučeravej mriežke, potom s najväčšou pravdepodobnosťou takáto originalita čitateľa neprekvapí dlhšie ako počas prvých 5 strán, a potom to začne byť otravné.

Prečo? Pretože čitateľ chce predovšetkým pokojne čítať a asimilovať zaujímavé informácie a nenechať sa rozptýliť žiadnym prebytkom geniality dizajnéra.

Ak sa však pôvodné rozloženie objaví iba v jednej konkrétnej časti časopisu, bude to nielen zaujímavé, ale aj vhodné, pretože sekcii dodá štýlový a rozpoznateľný vzhľad.

"Mriežka je systém pomoci, ale nie je zárukou, má iba niekoľko možných použití a každý dizajnér môže nájsť riešenie, ktoré vyhovuje jeho individuálnemu štýlu. Musíte sa však naučiť používať mriežku. Je to umenie, ktoré vyžaduje prax. “

— Joseph Müller-Brockmann

V skutočnosti je samotné používanie mriežky spojené s jedným z najstarších a najzákladnejších princípov návrhu - zarovnaním. Náš mozog chce všetko zjednodušiť a urobiť zrozumiteľnejším. Preto sa snažíme vniesť poriadok do vecí, ktoré pôsobia chaoticky.

Prirodzene, čím rýchlejšie všetko správne zorganizujeme, tým rýchlejšie dokáže náš mozog model identifikovať a pokračovať ďalej. Mriežky sú také usporiadané, že z našej strany nevyžadujú takmer žiadny výklad. .

Zvážte dve rozloženia stránky uvedené na obrázku nižšie:

Napriek tomu, že oba tieto obrázky sú iba niekoľkými obdĺžnikmi, sada v hornej časti sa zdá byť v zásade lepšia ako v spodnej časti. Vzorec môžeme okamžite rozpoznať, prijať ho a pokračovať. Nasledujúci obrázok na druhej strane spôsobuje vizuálne nepohodlie, pretože nemá jasný obraz, poradie alebo účel a vyzerá ako náhodný súbor tvarov.

Treba poznamenať, že dezorganizácia môže byť aj krásna. . V prírode napríklad neexistujú jasné čiary. Sieťky pôsobia chladne a tuho, ale pamätajte na to, že sú veľmi účinnou a účinnou metódou na zabránenie zapadnutiu fantázie do štruktúr.

Pozrite sa na niektoré z najobľúbenejších webových stránok so špičkovým dizajnom. S najväčšou pravdepodobnosťou použili mriežku. Mriežky pomáhajú stabilizovať štruktúru webovej stránky a poskytujú návrhárovi logickú šablónu na zostavenie webovej stránky.

Použitie mriežky neznamená, že váš návrh bude mať nudný dizajn. Dobrý dizajnér by mal vedieť a byť schopný uplatňovať základné pravidlá používania mriežky, to však neznamená, že nemôže pravidlá porušovať.

Jednoducho povedané, mriežka je rozdelenie rozloženia na zvislé a / alebo vodorovné vodiace čiary vrátane okrajov, priestoru a niektorých stĺpcov, čím sa položí základ pre organizáciu vášho obsahu.

Mriežky sa tradične používajú v polygrafickom priemysle, ale bežne sa používajú aj vo webdizajne. Pletivo je jednoducho nástroj, ktorý pomáha s dizajnom.

Keď sa začínate učiť nové zručnosti v určitej oblasti, musíte najskôr postupovať podľa pokynov. Naučenie sa základov zaručuje, že tieto zásady môžete efektívne uplatňovať. To je najskôr teória a potom prax.

Stojí za zmienku, že existujú dva spôsoby vytvorenia mriežky šablón:

Metóda č. 1: Vytvorte si vlastnú mriežku

Existuje mnoho rôznych spôsobov, ako vytvoriť vlastnú sieť, ale na konci dňa si môžete slobodne vybrať ten, ktorý vám najviac vyhovuje.

Prázdny dokument môžete rozdeliť matematicky tak, že vytvoríte párny alebo nepárny počet stĺpcov, s ktorými budete pracovať. Vaša sieť môže byť zložitá alebo jednoduchá, môžete podľa potreby používať pravidlá tretín alebo zlatý rez.

S týmto vám možno pomôžu nasledujúce články:

How You Make A Grid (kniha v angličtine vo formáte .pdf)

Tu je niekoľko príkladov ôk vytvorených vo Photoshope pomocou sprievodcov ( Zobraziť> Nový sprievodca):

Doplnky na vytváranie mriežok vo Photoshope

5. Generátor mriežkového systému -generátor takých populárnych mriežok, ako sú 960.gs, Golden Grid, 1Kb Grid, Simple Grid / nastavte potrebné parametre a kliknite na „GENEROVAŤ“.

Mriežky pre gumené / responzívne weby

Responzívny webový design je dnes veľmi populárny. Hlavnou zásadou je použitie gumovej sieťoviny. Môžete si o nich prečítať viac, ale chcel by som túto zbierku trocha doplniť a pridať niekoľko ďalších zdrojov.

1. - generátor adaptívnej siete

2. Kalkulačka tekutých mriežok - služba, ktorá vám umožní vytvoriť gumovú mriežku. Zadajte parametre a získajte hotový kód.

Napísal Josef Müller-Brockmann (1914–1996) je grafický dizajnér a učiteľ. Jeho práca je ukážkou jednoduchosti dizajnu a jemného použitia typografie, tvaru, farby. Ovplyvnili mnoho súčasných dizajnérov.

Web Lebedev Studio uvádza, že kniha nie je na predaj. Odporúčame vám pozrieť sa do jedného z oficiálnych obchodov. Modulárne systémy v grafickom dizajne som si chcel prečítať už dlho. Myslel som si, že sa už nepredáva. Po obhajobe semestrálnych prác na BHShD som narazil na Lebedevov ateliér. Ukáže sa, že to vytlačia a predajú.

Kúpil som a prečítal knihu. Podelím sa o svoje dojmy a zaujímavé nápady.

Príklady rozložení sú uvedené pre každú tému. Keďže je kniha o niečo väčšia ako hárok A4, ilustrácie sú veľké a podrobné.

Ukážkové stránky pomocou modulárnej mriežky

Poznámka pre projektanta

Josef opisuje proces práce na rozložení plagátu, rozložení stránky knihy a časopisu. Časť je venovaná problematike typografie, pretože ovplyvňuje vnímanie. Aby mohol dizajnér úspešne dokončiť svoju prácu, musí byť schopný porozumieť týmto zložitostiam.