Jak rozvíjet roli mřížky?

Po otevření designového programu můžete mít otázky: „Kde začít?“ a „Kam mám dát název?“ Odpověď je velmi jednoduchá: měli byste začít vytvořením sítě.

Co je to pletivo

Mřížka je kostrou projektu. Mřížka je zodpovědná za zarovnání, pomáhá vytvářet řád a reguluje obsah. Tento nástroj vám pomůže vytvořit dobrou uživatelskou zkušenost. Mřížka je vhodná pro úkoly, jako je vytvoření rozvržení pro časopis a kombinace obrázků a textu pro vstupní stránku.

Mřížka však netoleruje unáhlená rozhodnutí. Při správném použití nebudete muset umisťovat komponenty na náhodná místa. Tímto způsobem budete přesně vědět, kam umístit prvky, jako je vaše logo, záhlaví, položky nabídky, text, obrázky atd. Mřížka urychlí pracovní postup.

Jak vznikly mřížky?

Než odhalíme vliv mřížek na webdesign, nejprve se dozvíme, jak vznikly a jak se používaly. Mřížky jsou nezbytné pro správu typografie, protože se původně používaly k uspořádání písma v rozvrženích rukopisu. Níže je uveden příklad dobře strukturovaného šíření starého rukopisu.

Během průmyslové revoluce a zavedení hromadné výroby se noviny, plakáty, reklamy a další tiskoviny vyráběly ve velkém.

Ve 20. století vyvinuli designéři jako Jan Tschichold a Josef Müller-Brockmann nové mřížkové systémy. Dnes jsou nám známé jako švýcarský styl nebo mezinárodní typografický styl. Představili modulární přístup, který zahrnuje velké množství prostorů.

Proč jsou mřížky důležité pro digitální design

Mřížky pomáhají dát digitálnímu designu tvar a hierarchii. Bez toho nebudete schopni přijít na to, jak označit prvky. Mřížky jsou potřebné k vytvoření dobré uživatelské zkušenosti. S jejich pomocí se lidé na webu snadno zorientují a najdou, co potřebují.

Mřížky jsou také nepostradatelné při vývoji responzivního designu. Při použití počítače může vstupní stránka obsahovat více sloupců pro pokrytí textu a obrázků. Proto musí být návrh dostatečně flexibilní, aby se do něj vešly 2–3 sloupce v tabulce a 1 sloupec na mobilním zařízení. Všimněte si, jak je v tomto příkladu mobilní mřížka složena do 1sloupcové modulární mřížky.

5 typů sítí

Existuje 5 hlavních typů pletiva. Některé se pro webdesign hodí lépe než jiné. S největší pravděpodobností jste v celé své designérské kariéře používali všech 5 typů.

Základní mřížka

Text je v základní mřížce. V podstatě funguje jako interval mezi hlavními liniemi. Základní mřížka pomáhá vytvořit dobrý zážitek pro čtenáře, zvláště když je tam hodně textu.

Základní mřížka je důležitá nejen pro design tisku, ale také pro webdesign. Mezery mezi řádky výrazně ovlivňují čitelnost stránky. Pokud je text příliš komprimovaný, uživatel může web opustit. Nezapomínejte proto na správné vyvážení prostoru.

Ručně psaná mřížka

Tento typ mřížky slouží jako základ pro všechny knihy, noviny a časopisy. Nazývá se také Single Column Grid, protože má jednoduchou strukturu a je vhodný pro velké souvislé bloky textu a obrázků. Je to v podstatě velká obdélníková oblast na stránce, podobná ohraničovacímu rámečku pro text.

Sloupcová mřížka

Sloupcové mřížky vám pomohou rozdělit text, fotografie a ilustrace. Na webu můžete použít 2 až 16 sloupců, které pokrývají šířku stránky. Text a obrázky můžete umístit pouze do jednoho nebo více sloupců.

Žlab je prostor mezi sloupy. Zpravidla by měly mít stejnou velikost.

Můžete také použít asymetrickou mřížku sloupců. To může být užitečné v závislosti na hierarchii návrhu.

Asymetrické sloupcové mřížky se používají na blogových webech, kde je hlavní obsah ve dvou třetinách rozvržení obsažen ve větším kontejneru. Menší třetina může obsahovat postranní panel, který poskytuje informace o blogu a autorovi.

Níže vidíte, jak domovská stránka blogu používá asymetrickou mřížku sloupců.

Modulární mřížka

Modulární mřížky jsou podobné mřížkám sloupců, ale mají také další řady. Noviny a časopisy poměrně často používají modulární mřížky ke strukturování obsahu, ale lze je použít také při návrhu webu nebo aplikace, například v sekci mřížky produktu.

Podívejte se, jak online prodejce Everlane používá modulární mřížku k zobrazení stylů džínů.

Domovská stránka YouTube je dalším příkladem modulární mřížky. Postranní panel pro sekci trendy a odběry je vlevo a veškerý videoobsah zabírá modulární mřížku se 4 sloupci, aby se zvýšil počet videí, která může uživatel sledovat.

Hierarchická mřížka

Hierarchické mřížky se nejčastěji vyskytují ve webovém designu. Jejich hlavním úkolem je seřadit prvky podle důležitosti. Tento typ mřížky používá sloupce, řádky a moduly. Nejprve umístí na stránku nejdůležitější součásti a poté kolem nich vytvoří mřížku.

Zpravodajské weby se obvykle uchylují k hierarchickým mřížkám, aby upozornily na určité články. Podívejte se, jak tento typ mřížky používá New York Times na své domovské stránce.

Jak vytvořit síť v Adobe XD

Adobe XD usnadňuje vytvoření jednoduché mřížky sloupců pro vstupní stránky. Jednoduše vyberte kreslicí plátno a umístěte rám do sekce „Mřížky“. Poté vyberte „Rozvržení“.

Mřížku si můžete přizpůsobit, jak chcete: zvolte počet sloupců, šířku okapu, šířku sloupce a dokonce vytvořte výchozí mřížku pro budoucí projekty webdesignu.

Tipy pro použití mřížky

Nyní víte, co je to síť, její typy a jak ji vytvořit. Nyní se podíváme na několik tipů, jak je nejlépe využít ve svém návrhu.

Promyslete si design předem

Jakmile provedete průzkum a uděláte nějaké náčrty, začněte vytvářet mřížku pro svou vstupní stránku. V budoucnu jej můžete použít pro další stránky.

Než začnete navrhovat, přemýšlejte nejprve o mřížce, abyste se do ní nemuseli snažit vměstnat návrh.

V případě potřeby můžete změnit mřížku

Začátečníci mohou svá rozhodnutí omezit na mřížku. Na jeho změně však není nic špatného. Hlavní věc je dělat to vědomě.

Čím více budete mřížku používat, tím více pochopíte, jak řídí a urychluje vaši práci.

Nebojte se bílých míst

Ve webdesignu je důležité vyvážit bílé místo a negativní místo. Není potřeba zaplňovat každý kout designu stránky. Zvažte velké okraje a nezbytné mezery mezi obsahem, aby se uživatel mohl při procházení webu pozastavit.

Zkuste použít 960 Grid System

Systém 960 Grid umožňuje urychlit váš pracovní postup. Systém poskytuje běžně používané rozměry založené na šířce 960 pixelů. Máte dvě možnosti: 12 a 16 sloupců.

Mřížka 960 má následující strukturu.

• Celková šířka je 960 pixelů.
• 12 sloupců o šířce 60 pixelů.
• Mezera (10px) nalevo a napravo od každého sloupce pro vytvoření celkové mezery mezi okapy (20px).
• Celková plocha obsahu je 940 pixelů.

Systém mřížky s 12 sloupci je poměrně flexibilní. Níže vidíte příklad, jak použít tuto mřížku k přidání obsahu do rozvržení se 3 sloupci.

Analyzujte sítě jiných webů

Když surfujete na internetu, platíte účty za energie nebo prohlížíte sociální média, věnujte pozornost základní mřížce. Jakou mřížku používá návrhář? Zlepšuje to pohodlí?

Čím častěji budete věnovat pozornost tomu, jak je obsah uspořádán na různých stránkách, tím rychleji se naučíte rozpoznat úspěšnou mřížku. Pozorujte, studujte a používejte mřížky k vytvoření nejlepšího designu.

• Průvodce pro začátečníky vytvořením online kurzu nebo webové stránky elektronického obchodu od začátku
• 7 vizuálních prvků v designu
• Jak může datový vědec vytvořit skvělé portfolio a připojit k němu chatbota