Co je modulární mřížka v grafickém designu. Návrh loga: je nutná modulární mřížka? Příběh o tom, jak to všechno začalo
Modulární mřížka je systém pro organizaci objektů v prostoru, založený na řádcích a sloupcích určité, přesně stanovené velikosti. Buňky mohou obsahovat jednotky obsahu: textové bloky, nadpisy, rámečky a obrázky.
Mřížky najdeme nejen v informačním designu, ale také v architektuře, interiérech a urbanismu. Ve všech těchto oblastech jsou mřížky budovány podle podobných principů souvisejících s touhou vnést do vytyčovaného prostoru řád a harmonii.
Všimněte si jednoho z náčrtů vývoje Manhattanu z roku 1807, který sleduje přísnou síť ulic probíhajících od západu na východ a od severu k jihu.
Proč jsou potřeba sítě?
Zpočátku se síť používala v novinovém průmyslu ke zvýšení efektivity. Layoutové listy umožnily snížit náklady na údržbu typografů na plný úvazek, standardizovat vzhled stránek a šetřit čas samotných „designérů“. Brzy byly rozvržené listy nahrazeny flexibilnějšími modulárními mřížkami.
V návaznosti na nový trend, na počátku 60. let, grafický designér Peter Palazzo aktualizoval design novin New York Herald Tribune. V roce 1966 představila umělecká redaktorka Janet Collins nový vzhled pro Times of London. Obě tyto změny ukázaly průmyslu, že konzistentní styl designu zlepšuje kvalitu interakce čtenáře s publikací. Redaktoři novin a časopisů rychle pochopili potřebu mřížek a začali je uplatňovat ve své praxi.
Stejně jako v dobách novin, i v digitální éře, správně aplikované mřížky pomáhají udržet čtenářovu pozornost, zlepšují kvalitu vnímání textu a obecně zlepšují zážitek z jeho interakce s materiálem. V dnešním mediálním designu mřížka dává informacím řád a koherenci. Je odpovědná za strukturování obsahu jednotlivých článků a publikace jako celku.
Joseph Müller-Brockmann ve svém manuálu „Modulární systémy v grafickém designu“ píše o mřížkách takto:
„Díky strukturování rovin a prostoru pomocí modulární mřížky je designér schopen uspořádat texty, fotografie a grafické obrázky podle principů objektivity a funkčnosti.<…>Logicky uspořádaný design zachovává důvěryhodnost informací a přitahuje k nim čtenáře.“
Jaké typy sítí existují?
Existuje mnoho typů a konfigurací mřížek: od primitivních „buněk“, jako ve školním sešitě, až po složité struktury s různými vzdálenostmi mezi horizontálami a vertikálami.
Shromáždili jsme nejběžnější a již „klasické“ vzorky, jejichž znalost vám pomůže lépe porozumět modulárnímu designu:
Čtvercová mřížka
Nejjednodušší mřížka, která tvořila základ stavebnicového systému, se skládala ze čtverců a vypadala jako obyčejný stůl. Začal se používat na konci první čtvrtiny dvacátého století. Typografičtí designéři z Curychu a Basileje jej zdokonalili v poválečných letech, což se časově shodovalo s prudkým nárůstem zájmu o Helvetica a podobná písma, což dalo vzniknout škole „švýcarské typografie“.
Například: Robert Buechler, 1914
Zdroj: ThinkingForm
Max Bill mřížky
První zkušeností s používáním mřížek v knihách byl systém vyvinutý Maxem Billem pro knihu „Die Neue Architektur“. V této knize, vydané v roce 1940, Alfred Roth použil rozdělení stránky do devíti horizontálních modulů. Umožnily volně uspořádat ilustrace a umístit na ně text ve třech jazycích. O několik let dříve Bill čerpal z myšlenek „nové typografie“ Bauhausu a použil šestimodulovou mřížku ve svém slavném plakátu „Negerkunst“ vytvořeném pro výstavu jihoafrického rockového umění v roce 1931.
Není to tak dávno, co jsem při práci na další lekci pro kurz „Grafický design. Základy“ (vydání je naplánováno na začátek ledna), uvědomil jsem si, že téma používání a budování modulárních gridů je pokryto jen zřídka.
Informací o tom, co je modulární grid a k čemu je potřeba, je poměrně hodně, ale jen velmi málo o tom, jak jej postavit a jaká pravidla dodržovat. Proto jsem se rozhodl, že dnešní příspěvek bude mít praktické zaměření a pokusím se toto téma pokrýt co nejjasněji.
Modulární mřížka je tedy rozložením vaší práce, způsobem, jak systematizovat a zarovnat prvky. Je páteří kompozičního řešení a slouží jako prostředek k uspořádání nejen složek díla, ale i volného prostoru.
Mřížka nám může pomoci vyřešit naše problémy a být součástí řešení. Nejvýraznějším příkladem je rozhraní Windows Phone:
Pro ty, kteří potřebují podrobnější teoretickou část otázky, je zde možnost využít vyhledávání nebo se přihlásit do kurzu a obdržet odpovídající dopis, kde je toto dostatečně podrobně popsáno a přecházíme přímo do praxe.
Nejprve se musíme rozhodnout, proč potřebujeme modulární mřížku. Děláme webové stránky, navrhujeme časopis, obálku knihy nebo něco jiného? V závislosti na typu činnosti by měly být identifikovány hlavní konstrukční prvky. Velikost modulu je často určena jedním z těchto prvků, například logem, pozicí nabídky na webu atd. V rozložení je minimální velikost určena velikostí písma, které je čitelné v konkrétní situaci.
Pro názornost uvedu příklad modulární mřížky tištěného periodika. Pokud rozvrhneme časopis, pak strukturálními prvky mohou být titulek, podnadpis, text a ilustrace. Časopisy obvykle obsahují různé typy článků, kde se role textové části může měnit. V takových případech, aby byla mřížka flexibilnější, používám 5-7 modulů (horizontálně):
Kombinování modulů lze provést téměř v jakémkoli formátu, který vám vyhovuje:
Ve skutečnosti platí, že čím menší je síťový modul, tím bude flexibilnější, aniž by došlo ke ztrátě proporcionality. Ale pro mnohé je nepohodlné pracovat s mřížkami, pokud velikost jejich modulu má tendenci k velikosti vzdálenosti mezi moduly. Taková mřížka oslňuje oči a je snadné ji zmást, zejména pro začátečníka:
Možností sestavení modulární mřížky může být mnoho, zde jste omezeni pouze přáním zákazníka a vaší fantazií. Nezapomeňte, že modulární mřížky nemusí být vertikální, mohou být také postaveny diagonálně, pod určitým úhlem sklonu atd.
V případě webových stránek se za optimální počet sloupců považuje 12, 16 a 24, což je způsobeno zvláštnostmi uspořádání webových stránek a využitím schopností frameworku. Za minimální výšku modulu pro web považuji 20px, což je dáno optimální velikostí písma (12-14pt) a jeho čitelností.
Nyní je čas mluvit o technické stránce problému.
Vytvoření modulární mřížky v
- Prvním a nejjednodušším způsobem je zapnout mřížku samotného grafického editoru (Ctrl+’) a podle ní nastavit vodítka. Bude to trvat dlouho a s vysokou pravděpodobností chyb.
- Nainstalujte speciální pluginy pro Photoshop ( Průvodce , Modulární mřížkový vzor , GridMaker 2).
- Stáhněte si hotovou šablonu z jednoho z bezplatných generátorů mřížky, jako je 960.gs, Golden Grid, 1Kb Grid, Simple Grid. Nastavte požadované parametry a klikněte na „GENERATE“.
Ve skutečnosti existuje poměrně velké množství služeb pro vytváření mřížek, včetně „gumových“ webů. Dají se najít velmi snadno pomocí vyhledávání, takže nevidím smysl je v článku všechny vypisovat. Takové služby jsou vynikajícími pomocníky pro začátečníky.
Vytvoření modulární mřížky v
Na rozdíl od Photoshopu má InDesign vlastní nástroje pro vytváření modulární mřížky. V nabídce Rozložení musíte vybrat položku Vytvořte průvodce a do dialogového okna zadejte potřebné parametry:
Tento nástroj má poměrně flexibilní nastavení, takže vytvoření požadované struktury nebude obtížné. Vytvoření sítě se nejlépe provádí pomocí Hlavní stránka, aby se postup neopakoval pro každou stránku.
Vytvoření modulární mřížky v
- První metodou (podobně jako ve Photoshopu) je zapnout mřížku samotného grafického editoru a podle ní nastavit vodítka. Je také možné vytvořit jakýkoli tvar vodítka, které pomůže při organizaci nakloněné mřížky.
- Stáhněte si hotové šablony mřížky. Kde - hledání vám řekne. Na internetu jich najdete spoustu.
Doufám, že se vám téma modulárních mřížek stalo bližší a jasnější. Určitě si jejich stavbu procvičte. Velmi dobře chápu, že je to velmi únavná činnost, ale stojí za to. Vytváření mřížek rozvíjí váš smysl pro proporce a umožňuje vám lépe vidět případné nepřesnosti zarovnání v budoucnu.
Vše, co nás obklopuje, má své vlastní proporce. Už jako dítě nás kreslený film „38 papoušků“ učil, že vše lze rozdělit na části, které si navzájem rovny (délka hroznýše se skládala z 38 papoušků). Všichni také víme, že výška člověka se rovná sedmi jeho hlavám, centimetr se skládá z deseti milimetrů, metr se skládá ze sta centimetrů a tak dále. Moduly jsou tedy kreslený papoušek, lidská hlava, milimetr a centimetr.
Z toho všeho můžeme pochopit, že modul je konvenční jednotka, krok v rytmu mřížky. A samotná mřížka je systém proporcí.
Jak nám tato modulární mřížka pomůže? Za prvé to urychlí práci, protože nebudeme muset trávit spoustu času snahou o harmonické uspořádání všech prvků. Za druhé, s pomocí mřížky můžeme pochopit, který bod musíme použít a jakou velikost by měl mít každý blok. Obecně platí, že modulární mřížka je rámec, který výrazně usnadňuje stavbu webu.
Podívejme se, co jsou to sítě.
1. Nejjednodušším typem je bloková mřížka. To znamená, že dělá hrubé značky a rozděluje oblast na bloky.
Bloková mřížka 
3. Modulární rastr má nejen vertikální dělení, ale i horizontální dělení. To, co se tedy získá na průsečících čar, je modul.
4. K dispozici je také hierarchická mřížka, jejíž bloky jsou umístěny intuitivně a nesledují žádné vzory.
Jak tedy vytvořit modulární mřížku.
1. Nejprve musíme pochopit, jakou funkci bude mít náš web, identifikujeme jeho strukturu a složení stránek. Poté určíme, které stránky budou nejdůležitější, a začne se s nimi pracovat. Pro ně vytvoříme seznam funkcí a seřadíme ho podle priority.
Musíme popsat každý blok funkčnosti a detailně jej popsat do nejmenších detailů. Výsledkem by měl být seznam, ve kterém jsou bloky a jejich prvky seřazeny podle úrovně. Tím pádem máme puzzle vysypané z krabice a stačí je poskládat do uceleného obrazu.
3. Se stavbou sítě začneme určením velikosti pracovní plochy. Dále musíme vytvořit mřížku písem. Chcete-li to provést, vyberte výšku čáry, která by měla být stejná pro celé rozvržení. V prvcích, které mají velikost písma odlišnou od velikosti písma hlavního textu, musí být řádková mezera násobkem naší výšky řádku.
Tak získáme základ naší budoucí sítě. Na tomto základě bude stát celý text.
4. Nyní se musíme rozhodnout, jak široký bude náš modul. Zde můžeme vycházet ze šířky libovolného trvalého prvku. Pokud máte za úkol umístit nějaké identické prvky přes šířku stránky, pak se vše ještě zjednoduší, protože už znáte její rozměry.
Pro pohodlí musíme určit, jaká bude vzdálenost mezi moduly. Musí se rovnat alespoň jedné výšce řádku z předchozího odstavce.
Je tu jedno upozornění – je třeba zvolit správné velikosti modulů, protože pokud jsou příliš velké, zmizí flexibilita sítě, a pokud jsou malé, síť se prostě ztratí.
5. Horizontální dělení je poměrně jednoduché. Jeho výška musí být násobkem výšky naší linie. A kolik čar vložíte do jednoho rozdělení závisí na vaší skice.
Pojďme si promluvit o tom, jak nejlépe uspořádat designové prvky na stránce.
Jednou z častých chyb začínajících designérů je, že kompozici přesycují všemožnými prvky a umisťují je příliš blízko sebe.
Do malého prostoru se snaží vměstnat příliš mnoho informací. Pamatuj si to volný prostor je váš dobrý přítel. Usnadňuje vašemu publiku čtení vašeho materiálu. Správně využitý prostor učiní váš projekt elegantnějším a snáze pochopitelným.
Základní kompoziční strategie vašeho návrhu by měla začít rozvržením. Pokud nechcete, aby vaše práce vypadala chaoticky, musíte systematizovat všechny vizuální informace. Tady nám přichází na pomoc modulární mřížka nebo, jinak řečeno, označení pro uspořádání prvků na stránce. Ve webovém designu hraje roli modulární mřížka tabulka.
