Jak zvládnout konstrukční mřížku

Havarijní kurz pro návrh digitálních materiálů pomocí gridového systému

Popadněte tento soubor skici sem

Uplynulý rok učím UX a produktový design na Valném shromáždění zde v Torontu. Naučil jsem se tunu a studenti, kteří přicházejí skrz dveře, jsou plné vzrušení, naděje a nadšení pro stavbu produktů a služeb zítřka.

Několikrát jsem viděl, jak se z jejich tváří vytéká vzrušení, naděje a nadšení, a nechám je utopit v kaluži zoufalství. Příčina? Všemocná mřížka.

Ve snaze pomoci těm z vás, kteří právě začínají v UX / UI Design, překonat paniku a zmatek, které někdy obklopují mřížku, sestavil jsem praktický nárazový kurz, takže můžete zaútočit na mřížku jako šampion a získat trhliny o vašich nápadech na změnu světa. Pokryjeme zde několik různých témat, včetně:

  1. The Grid Guts - Z čeho se skládá mřížka?
  2. Navrhování na mřížce - Jak vlastně položit věci na mřížku.
  3. Kreativní flexibilita - Vědět, jak ohnout mřížku podle vaší vůle
  4. Základní linie - druhá část mřížkového systému, která dělá zázraky pro vertikální rytmus.

Výzva - Tento průvodce je zaměřen více na responzivní webový design a točí se kolem tekuté mřížky ve 12 sloupcích, ale principy mřížky lze aplikovat na jakoukoli digitální věc, kterou navrhujete. Pojďme se ponořit.

Grid Guts

Mřížka se skládá ze dvou hlavních komponent - sloupců a okapů. Společně vytvářejí vodorovnou šířku obrazovky a pracují společně, ale existuje několik pravidel, která byste měli vědět.

Hlavní je, že sloupce jsou šťastným místem, kde mohou vaše návrhové prvky začínat a končit, a okap je nebezpečnou propast, které se chcete vyhnout. Je to dost jednoduché, že?

Teď, když máme základy mřížky z cesty, pojďme se ve skutečnosti navrhnout.

Navrhování na mřížce

Za účelem „zarovnání k mřížce“, která odkazuje na vodorovnou mřížku sloupců a okapů, by objekty a typografie mimo nadřazený kontejner měly vždy začínat a končit na okraji sloupce. Na tomto prvním obrázku vypadají tyto obdélníky dost nevinně.

Aw, jen se na ně podívej. Jen jsou obdélníky.

Když ale v náčrtu odhalíme překrytí mřížky, OH DOBRODRUŽSTVÍ. Náš přítel malý obdélník není na mřížce. Jak můžete vidět nahoře, levý a pravý okraj malého obdélníku začínají a končí v okapu, zatímco okraje většího obdélníku začínají a končí ve sloupci. Ten obdélník ví, co se děje.

JAK SE OPOVAŽUJEŠ.

Kreativní flexibilita

Vím, že někteří z vás by si mohli myslet, že mřížka vypadá docela omezeně, a určitě existují pravidla, ale existují i ​​způsoby, jak je trochu ohnout, což může být velmi osvobozující. Tady je jedna z mých oblíbených nabídek, které mi paní Vivona, moje učitelka dramatu na střední škole řekla:

"Nemůžete jednat, dokud neznáte své linie."

Vždycky říkala, že nemůžeme být opravdu herci, dokud se nenaučíme naše linie studené. Jak bychom mohli být opravdu kreativní a uvést své osobnosti do role, kdybychom stále přemýšleli o tom, co říci dále?

U mřížek to znamená, že nemůžete začít experimentovat, posouvat hranice nebo vkládat svůj vlastní styl do svých návrhů, dokud se nenaučíte omezení. Takže buďte divočejší a navrhněte svá srdce, ale mějte na paměti pravidla.

Pokud jde o ohýbání těchto pravidel, pamatujte na to - Dokud je váš nadřazený kontejner na roštu, může mít materiál uvnitř tohoto kontejneru určitou flexibilitu. Mám na mysli toto:

Vidíš to? Ve výše uvedeném příkladu jsou oba tyto konstrukční prvky technicky na mřížce. Samotný text není na vodorovné mřížce, ale jeho nadřazený kontejner je, což je v pořádku.

Základní mřížka

Kromě horizontálního rytmu, který vytváříte pomocí sloupců a okapů, existuje vertikální zarovnání a rytmus, který byste měli vytvořit pomocí základní mřížky.

Základní čára je předem změřená přírůstková výška, ke které by měly být zarovnány všechny objekty a typografie. Ve Filamentu používáme základní čáru 7px, protože pro nás je 28px pohodlná, čitelná výška řádku pro základní písmo 16pt. Jiní používají základní čáru 8px nebo 5px v závislosti na své preferenci nebo platformě, pro kterou navrhují. Podle našich zkušeností funguje základní linie 7px nebo 8px skvěle.

Zarovnání designových prvků, jako jsou obrázky nebo kontejnery, se základní hodnotou znamená, že jejich výšky budou násobkem základní hodnoty - v tomto případě 7px. Pro typografii to znamená, že výška řádku tohoto písma je násobkem základní hodnoty - takže výška řádku může být 7, 14, 21, 28, 35 atd. Je důležité si uvědomit, že velikost písma nemusí být násobkem základní linie, pouze výšky linie.

Jdi do toho a design

Mřížky nemusí vyvolávat paniku. Ve skutečnosti mohou být docela neuvěřitelné, jakmile porozumíte základům, jak je používat, a čím více budete pracovat s mřížkou, tím lépe ji budete ohýbat podle své vůle. Máte to. Těším se na vaše příběhy o úspěchu v mřížce v komentářích.

Sleduj mě na Twitteru
Považujete to za užitečné? Níže uvedený will pomůže ostatním také to najít.

Tento příspěvek se původně objevil na Filament Blogu