Modulární mřížky v designu: k čemu jsou potřeba, typy a příklady použití

Modulární mřížky jsou jedním z hlavních návrhářských nástrojů. Tento materiál je pro ty, kteří chtějí samostatně porozumět typům modulárních mřížek, vybrat si optimální nástroj pro práci s nimi a naučit se nové trendy v tomto směru.

ovládat povolání
Návrhář UX/UI od nuly
za 9 týdnů

1. Co jsou modulární mřížky
2. Z pozadí
3. Jaké typy sítí existují?
4. Modulární mřížky se používají všude
5. Jak vypočítat mřížku?
6. Mřížkový systém je součástí systému návrhu produktu
7. Trendy v modulárních systémech

Co jsou modulární mřížky

Modulární mřížka je systém vzdáleností a odsazení, které rozdělují stránku na moduly. Modulární mřížka určuje, kde a jak budou umístěny vaše prvky návrhu: text, obrázky, tlačítka a tak dále.

Proč potřebujete modulární mřížku?

• Šetří čas při práci s prvky stránky a fonty
• Usnadňuje nalezení místa pro jakýkoli prvek a určení vzdáleností od jednoho prvku k druhému
• Pomáhá rychle vytvořit responzivní design stránky pro mnoho formátů
• Učiní design čistším a harmoničtějším

20 měsíců
profese grafika od nuly až po profesionála

Staňte se grafickým designérem tím, že se poučíte z reálných problémů

Z pozadí

Lidé začali používat modulární mřížky dávno před vynálezem internetu. Pokusy podpořit intuitivní smysl pro proporce přísnými matematickými výpočty jsou charakteristické pro všechny kultury a doby.

Mřížky založené na zlatém řezu využívali architekti a umělci a po vynálezu Guttenbergovy tiskárny přešli do oblasti knihtisku.

Například první typografickou sekci, jejímž autorem jsou italský matematik Luca Pacioli a Leonardo da Vinci, jimi sestavili pro pojednání „O božském poměru“ založené na modulech.

Modulární mřížky byly také použity k výstavbě celých měst. Například známé letovisko Anapa, které bylo po Velké vlastenecké válce téměř zničeno, bylo přestavěno podle přísné ortogonální sítě.

Opravdový rozkvět modulárních systémů nastal v padesátých a šedesátých letech, kdy se začaly aktivně využívat pro časopisy a noviny. To bylo nejen estetické, ale i praktické – díky mřížkám se daly standardizovat materiály, ušetřit místo na stránce a zkrátit dobu návrhu (to vše ale u webdesignu stále funguje).

V padesátých letech Josef Müller-Brockmann a Karl Gerstper aktivně pracovali na mřížkách pro tiskoviny, což vyneslo švýcarský design do popředí výtvarného umění a nastartovalo nový směr tisku. Tento styl se vyznačuje extrémně přísnou estetikou a systematickým používáním vizuálních prvků.

Müller-Brockmann ve své knize „Modulární systémy v grafickém designu“ formuloval základy práce s modulárními systémy. Tato kniha se stala základní a mnohé z toho, co Müller-Brockmann vynalezl, se v designu používá dodnes.

Jaké typy sítí existují?

V současné době existuje mnoho typů mřížek, my se podíváme na ty hlavní.

Sloupcová síť, jak název napovídá, rozděluje stránku do několika sloupců. Čím více sloupců je na stránce, tím vyšší je její flexibilita, a to je třeba pochopit při vývoji návrhu s velkým počtem prvků.

Sloupově-horizontální mřížka se téměř neliší od předchozí, ale obsahuje také vodorovné čáry.

Modul – to je to, co se tvoří na průsečíku svislých a vodorovných čar. Modul slouží jako výchozí bod pro všechny dimenze ve vašem rozvržení. Pokud například zvolíte velikost obrázku pro rozvržení, měl by to být násobek modulu. Na průsečíku mezisloupcových vzdáleností a mikromodula je to nejmenší nedělitelná veličina ve vašem rozvržení.

K dispozici je také tzv. mřížka „fontů“. Tento fenomén migroval na web z grafického designu a tisku. Mřížka písma se skládá z vodorovných čar – čar (jako ve školním sešitě). Přijde vhod, když pracujete s textem a hledáte optimální řádkování.

povolání| 20 měsíců

grafický designér od nuly až po profesionála

Staňte se designérem potřebným v marketingu, PR, IT. Poskytneme nejen znalosti, ale i reálné zkušenosti v profesi

Modulární mřížky se používají všude

Modulární mřížky jsou nástrojem nejen pro digitální, ale i pro práci s jakýmkoli obrazovým materiálem. Pomocí mřížky můžete vytvořit kompozici fotorámečku, stránky časopisu nebo písmen v logu.

Modulární mřížka vám pomůže dodržet pravidlo třetin při skládání snímku ve filmu.

Pokud jde o identitu, logo Twitteru je také postaveno na základě modulů, ty však nemají obvyklý hranatý tvar, ale kulatý. Z modulů vychází i logo Apple. Z mřížky vychází i redesign loga německého koncernu Braun.

Jak vypočítat mřížku?

Počítat mřížku sami v tuto chvíli nedává smysl. Na internetu najdete mnoho mřížkových kalkulátorů, například:

Nástroje jako Sketch a Figma již mají mřížky zabudované v editoru. Existují i ​​speciální pluginy pro grafické editory. Například pluginy pro Adobe Photoshop a Adobe Illustrator.

Zda použijete vestavěné mřížky nebo počítáte samostatně, není až tak důležité, nakonec je to jen nástroj pro vaši práci.

Mřížkový systém je součástí systému návrhu produktu

Systém návrhu je soubor pravidel, omezení a principů implementovaných do návrhu a kódu. Designový systém vám pomůže proměnit vaši aplikaci v hotové multiplatformní řešení nebo webovou stránku, aniž byste ztratili uznání a aniž byste zabírali spoustu času rutinní prací s kontrolou prvků.

Designové systémy však mohou využívat nejen majitelé produktů či médií, ale také agentury s mnoha klienty. Například francouzská designová agentura Area 17 vydala velkou příručku, kde sdílela svůj vlastní vyvinutý designový systém.

Area17 striktně dodržuje princip 5×5 px – všechna rozvržení staví na mikromodulu o šířce 5 px. Kupodivu vám to pomáhá pracovat s rozvržením pokaždé jinak, a přitom si zachovat svůj vlastní styl.

Tímto principem se řídí i moskevské studio Charmer, specializující se na design mediálních prostorů (jejich weby jsou Afisha, Medusa a Vedomosti). To pomáhá navrhovat neustále aktualizované stránky s různými materiály.

Rambler, který byl aktualizován v loňském roce, se nejen změnil vzhled, ale také získal jasný designový systém, který produktový tým služby sdílel se všemi. I tento systém je postaven na principu 5×5 px.

Dalším oblíbeným přístupem je systém „sudý modul“. V tomto systému se mřížka skládá ze dvou, čtyř nebo osmi pixelových sloupců. Na základě „sudého modulu“ byl vyvinut systém designu produktů Google – slavný „Material Design“. Tento systém zohledňuje práci všech prvků stránky nebo aplikace, až po animaci, a vytvořil základ mnoha produktů a webových stránek po celém světě.

Společnost VK Group využívá svůj návrhový systém Paradigm, který je rovněž založen na „sudém modulu“.

Trendy v modulárních systémech

Rozbité pletivo

Dnes je to jeden z nejpopulárnějších přístupů k tvorbě webových stránek.

Diagonální mřížky

Po trendu přerušované mřížky se objevil trend směrovat „horizontální“ diagonálně. Vypadá stále svěže a mnoho portálů jej uvádí jako jeden z hlavních trendů roku 2018. Podívejte se, jak změna úhlu o pouhých deset stupňů změní vizuální vzhled stránky:

Rozdělená obrazovka

Zdaleka ne nový, ale stále aktuální trend je založen na rozdělení obrazovky a hlavního obrazu do dvou zón. Zde se můžete podívat, jak funguje rozdělená obrazovka nejen s obrázkem, ale také s rolováním na stránce.

Ne vše, co je řečeno, je třeba si zapamatovat, ale je důležité pochopit globální princip mřížky – systému, kolem kterého jsou postaveny všechny prvky vašeho návrhu. Flexibilita, proporcionalita, harmonie – to vše lze snadno vnést do vašeho návrhu tím, že se naučíte správně pracovat s modulárními mřížkami.

profese grafika od nuly až po profesionála

Marketing, PR, IT – nevíme, jaký obor si vyberete, až se stanete grafikem. Ale víme, že se jím můžete stát tím, že získáte skutečné zkušenosti. Takový, který zaměstnavatelé ocení