pzeleny@kurzygrafiky.cz        Tel.: 724 810 701

Košík je prázdný

Design založený na principu mřížky

Možná přemýšlíte jak správně rozložit objekty ve webové stránce, jakou správnou velikost a poměry zvolit. V následujícím článku jsou stručně popsány dvě perfektní pomůcky, které vám pomohou dosáhnout dokonalého rozložení stránky.

Mřížka se již tradičně využívá v grafice a designu k zarovnání objektů. Lidské vnímání je  založeno na tom, že lidský mozek se snaží věci zjednodušovat pro čitelnost a pochopitelnost. Čím jednoduší je rozpoznat pořádek (zarovnání) tím rychleji je náš mozek schopen identifikovat daný vzor. Mřížka je natolik přehledná, že není nutná žádná složitá interpretace.

Někdy se design založený na mřížce může zdát nudný, je dobré si ale uvědomit, že je to jeden z nejsilnějších a nejefektivnějších systémů, známých již několik tisíc let. Většina mřížkových totiž systémů vychází z dávno známých principů, jako je pravidlo třetin, nebo zlatý řez.

mřížkový systém

Mřížku využijete především pokud chcete vytvořit uspořádaný, přehledný design. Hlavním principem je volba vhodných velikostí objektů tak, aby vytvořily vyváženou strukturu. Vždy se v první řadě zaměřujeme na vodorovné rozmístění (do sloupců), svislé rozložení nebývá u webových stránek tak důležité a často se nastavuje pouze odhadem.

Opakem přehlednosti mřížky může být náhodnost. Náhodné rozložení objektů může být vizuálně zajímavé, ale je mnohem obtížnější vytvořit dobrý design. Princip náhodnosti je naprosto nevhodný pro logické organizování informací.

Níže je uvedeno několik pomůcek pro vytváření designu na mřížce.

 

960 Grid System

960 mřížkový systém je výborná pomůcka pro webdesignery a grafiky, kteří chtějí svůj layout dotáhnout k dokonalé vyváženosti.

Složka, kterou je možné si zdarma stáhnout (na http://www.960.gs ) obsahuje podklady pro většinu grafických programů. V jednotlivých souborech najdete přednastavenou sadu sloupců (mřížku) založenou na principech zlatého řezu a ideálních poměrů. Na první pohled se systém může zdát poněkud složitý, ale opak je pravdou. Jakmile pochopíte design založený na sloupcích pak jde vše poměrně rychle.

960 grid systém je založený na šířce webové stránky 960 pixelů, která umožňuje rozdělit plochu do sloupců za použití celých čísel. 960 pixelů je ideální rozlišení webu pro většinu běžných monitorů. Základní systém vychází z 12, nebo 16 sloupců (včetně okrajů). Dostupná je i verze s 24 sloupci, pro ty, kteří chtějí mít dokonalou kontrolu.

Ve verzi s 12ti sloupci je nejužší sloupec 60 pixelů široký, a každý další se zvětšuje o 80 pixelů. Dostupné šířky jsou tedy: 60, 140, 220, 300, 380, 460, 540, 620, 700, 780, 860 a 940.

Je jasné, že některé stránky nemohou být založeny na systému mřížky. Přesto tento systém může být užitečnou pomůckou jak váš design vylepšit. Jakmile začnete s 960 GS experimentovat zjistíte, jak silnou pomůckou může při vytváření layoutu být.

 

Responsive Grid System

Dalším mřížkovým systémem, které má časté využití při tvorbě webu, je Responsive Grid Systém. Je založený čistě na HTML a Kaskádových stylech, proto je jeho implementace ve stránkách velmi jednoduchá.

Výhodou je, že si můžete zvolit libovolný počet sloupců, případně vše upravovat podle svých potřeb. Layout založený na tomto systému je plovoucí, tzn. přizpůsobuje se automaticky obrazovce. Důvodem je použití šířky sloupců v procentech. Možné je  kombinovat různé počty sloupců na jednotlivých podstránkách. Dostupné jsou i verze pro mobilní zařízení, což je velmi užitečné. Možnost stažení na: http://www.responsivegridsystem.com/

 

Obecně se dá říci, že 960GS je systém vhodnější pro grafiky a designery. Lze ho použít i pro jinou grafiku než jen webovou. Jeho výhody můžete ocenit například při tvorbě vizitek, nebo letáků.

Naopak Responsive GS je hlavně webovou záležitostí. Rozhodně jej doporučuji využít pokud potřebujete sestavit jednoduchý a rychlý layout. Nutnou znalostí jsou alespoň základy HTML a CSS.

 

mřížkový systém webdesign mřížkový systém

------ © 2015 KURZY GRAFIKY ------ Všechna práva vyhrazena. Kopírovat obsah bez souhlasu autora je zakázáno.

Icons made by Freepik from www.flaticon.com is licensed by
CC BY 3.0

Soubory cookie nám pomáhají poskytovat, chránit a zlepšovat naše služby. Pokud budete náš web používat i nadále, vyjádříte tím svůj souhlas s našimi zásadami týkajícími se souborů cookie.

 

OBCHODNÍ PODMÍNKY

KURZYGRAFIKY.CZ

Prokop Zelený, DiS.
Veronské nám. 331
Praha 10  10900

pzeleny@kurzygrafiky.cz
tel.: 724 810 701

Soubory cookie nám pomáhají poskytovat, chránit a zlepšovat naše služby. Pokud budete náš web používat i nadále, vyjádříte tím svůj souhlas s našimi zásadami týkajícími se souborů cookie. Informace o cookies ZDE.

  
EU Cookie Directive Module Information