Jak rozvíjet roli mřížky?
Anastasia Svezhentseva Produktová designérka (UX/UI), webdesignérka a návrhářka značek. Zkušenosti s projekty v mezinárodních agenturách (HighTime.agency), produktových společnostech (iSpring) a se startupy po celém světě (Agently.com). Své zkušenosti s designem sdílím na offline a online platformách od roku 2017: Institute of Software Systems, godesign.school, online platforma breezzly.ru a psaní mikropřednášek o designu na Yandex.Q (226 odpovědí). 3. dubna · 10 min čtení
Dnes se podělím o praktické tipy a triky, které jsou užitečné při vytváření mřížek v grafickém designu a webdesignu. Začněme tedy s analýzou.
- Co je to pletivo, jaké to je a proč je potřeba?
- Nejlepší postupy pro práci se sítěmi
- Zásada 1: Žádný obsah, žádná mřížka
- Princip 2. Mřížka a odraz charakteru značky
- Princip 3: Vertikální rytmus vede k tomu, jak dosáhnout soudržného a příjemného designu.
- Princip 4. Modulární mřížka je nástroj pro řízení proporcí.
- Princip 5: Mřížka je cestou k zajímavým kompozicím
- Princip 6. Mřížka je rámcem pro pravidla hierarchie a systém kontroly pozornosti
- Princip 7. Grid nastavuje standardy pro vývoj vnitřních stránek webu a urychluje design
- Princip 8. Mřížka je standardem pro vývoj designu pro všechny obrazovky a zařízení
- Princip 9. Mřížka je rychlý způsob, jak vytvořit systém mezer mezi prvky
- Zásada 10: Různé hustoty informací vyžadují různé sítě
- Princip 11. Síť je standardem pro přenos návrhu do vývoje: o hotových softwarových gridech
Co je to pletivo, jaké to je a proč je potřeba?
Mřížky jsou jedním z klíčových nástrojů designéra. Mřížka pomáhá dosáhnout konzistence mezi prvky, navazovat spojení mezi nimi a poskytuje vizuální systém a pomáhá uživatelům s navigací. Mřížka také přináší harmonii designu. O spojení mezi mřížkami a gestaltem zde →
Zajímají vás nejnovější články o produktovém designu (UX/UI)?
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.
Kluci ze Setky shromáždili nejběžnější a již „klasické“ vzorky, jejichž znalost vám pomůže lépe porozumět modulárnímu designu. Doporučuji prostudovat zajímavý článek o typech mřížek →
Nejlepší postupy pro práci se sítěmi
Rozebral jsem 11 pravidel pro práci s mřížkami. Výsledky studie byly shrnuty do praktických tipů pro vytvoření promyšleného designu. Držet
Zásada 1: Žádný obsah, žádná mřížka
Mřížka je navržena tak, aby organizovala objekty v prostoru, a to je její povaha. Pokud není žádný obsah, žádné předměty, pak není co organizovat. Začněte tedy obsahem a náčrtem.
„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 podporuje důvěryhodnost informací a přitahuje k nim čtenáře.“
– Josef Müller-Brockmann, grafický designér
Princip 2. Koncepce designu pomáhá rozhodnout o mřížce: mřížce a odrazu charakteru značky
Gridy jsou základem moderního webdesignu. Mřížky pomáhají čtenáři vnímat textové a vizuální informace a umožňují webu vyčnívat z davu konkurentů.
Mřížka je součástí konceptu designu. Úpravou vzdálenosti mezi sloupci a výšky modulu můžete dosáhnout takových vlastností, jako je spolehlivost, lehkost, otevřenost a účinnost. Pomocí mřížky můžete použít a odrážet další atributy značky, čímž zvýrazníte její identitu.
Podívejme se na příklady sítí stránek Stripe – Platební infrastruktura pro internet a Focus Lab – globální b2b brandingová agentura.
Pojďme rychle postavit mřížku krok za krokem.
Krok 1. Určete optimální počet sloupců
12 sloupců je jedna z nejpohodlnějších mřížek pro web, pomáhá umístit sudý i lichý počet prvků v řadě, například 3 i 4 produkty v řadě.
Krok 2. Upravte vzdálenost mezi sloupci (žlaby) a odsazení od okraje obrazovky (okraje)
Stanovili jsme tedy optimální počet sloupců. Nyní určíme mezisloupové rozestupy (žlaby) a okraje od okraje obrazovky (okraje).
Mezisloupcové rozestupy (žlaby)
Ve webdesignu je běžné pracovat s 10px mřížkami. Rozteč mezi sloupci považujeme za úměrnou modulu, například rozteč mezi sloupci může být 20 nebo 30, 40, tedy zkráceně 10.
Okraje od okraje obrazovky
Odsazení od okraje obrazovky provádíme na základě šířky obsahové části layoutu, tedy oblasti, kde se budou nacházet obrázky a texty, například 1200px.
Princip 3: Vertikální rytmus vede k tomu, jak dosáhnout soudržného a příjemného designu.
Vertikální rytmus je sekvence opakujících se podmíněných vertikálních čar umístěných ve stejné vzdálenosti od sebe. Tyto řádky pomáhají nastavit systém odsazení mezi textem a obrázky, nadpisy a odstavce, vstupní pole uvnitř formuláře a jejich popisky atd.
Vertikální rytmus se řídí jedním z konstrukčních principů – opakováním. Opakování umožňuje vytvořit pocit, že věci spolu souvisí. Že jsou součástí stejného plánu.
Všimněte si, jak používáme vertikální rytmus k vytvoření systému mezer pro seskupení obsahu karty sbírky a rozlišení pozornosti mezi dvěma kartami.
Princip 4. Mřížka je standardem pro vývoj designu pro všechny obrazovky a zařízení
Adaptivní design znamená, že váš oblíbený web lze pohodlně používat doma z počítače, v autě z mobilního telefonu a v metru z tabletu.
Důvody adaptability a relevance
V dnešní době existuje obrovské množství zařízení: telefony, tablety, notebooky atd. Doporučuji proto začít svůj návrh vytvořením seznamu zařízení a rozlišení, která budou klienti používat.
Nuance scénářů pro práci s jedním webem v různých kontextech na různých velikostech obrazovky
Uživatelé mobilních zařízení a uživatelé počítačů obvykle váš produkt vnímají jinak. Pokud máte restauraci, uživatelé stolních počítačů chtějí na webu vidět její fotografie, kompletní nabídku a možná i historii jejího vývoje. Uživatelé mobilních zařízení chtějí jednoduše získat adresu a otevírací dobu.
Mobilní první designový přístup
V roce 2009 Luke Wroblewski svou knihou Mobile First!» Luke s odvoláním na nárůst návštěvnosti mobilního webu a nové technické možnosti telefonů navrhl nejprve vytvořit mobilní verze stránek.
Příklad mřížky v akci při vytváření responzivního návrhu
Například 12sloupcovou mřížku pro pracovní plochu lze upravit na 8sloupcovou mřížku na tabletu a 4sloupcovou mřížku pro telefon – snižujeme počet sloupců v závislosti na zařízení.
Mřížka v tomto příkladu pomáhá urychlit výpočet proporcí sloupce fotografie a popisu pro každou velikost obrazovky.
Knihy na dané téma
- Mobily na prvním místě! →
- Responzivní web design →
Princip 5. Modulární mřížka je cestou k zajímavým kompozicím
Modulární mřížka pomáhá organizovat prostor, podřizuje prvky určitému vzoru a dělá vzhled stránky esteticky příjemnějším.
Modulární mřížka se skládá z obdélníků s danou šířkou a výškou. Je postaven na průsečíku sloupů a linií vertikálního rytmu.
Účelem modulu je učinit prostor trojrozměrným a dát designérovi kontrolu nad hloubkou umístění objektů na scéně. S modulární mřížkou může designér odvážněji umisťovat objekty, upravovat jejich velikosti, vzdálenosti a dosáhnout harmonie i v těch nejodvážnějších kompozicích, a ne je pouze zarovnávat podél levého a pravého vodítka.
Modul pomáhá vytvářet vyvážený, harmonický vícevrstvý design se zajímavým rytmem.
Princip 6. Modulární mřížka je nástroj pro řízení proporcí.
Modul je minimální množství prostoru, díky tomu můžeme určit, jakou plochu plátna může určitý objekt zabírat. Tak se jeví systém proporcí. Takový systém se snáze ovládá, protože všechny předměty podléhají vzorům a oko miluje vzory pozorovat. Nebudou žádné náhodné velikosti.
Princip 7. Grid nastavuje standardy pro vývoj vnitřních stránek webu a urychluje design
Mřížka nasměruje čtenářovu pozornost a vtáhne je do hloubky obsahu. Právě díky jednotě mřížky mezi stránkami uživatel vnímá všechny tyto stránky jako součást jednoho zdroje.
Síť je cesta k efektivitě. Aktivně se používá od dob novinového byznysu. Tento přístup snížil náklady na počet grafiků na plný úvazek, protože typ normostran určovalo vydavatelství.
K webovým gridům přišli za stejným účelem – zvýšit efektivitu týmu designérů a vývojářů, což je obzvláště důležité v ještě dynamičtějším a konkrétnějším digitálním světě.
Zásada 8: Mřížka se někdy stává explicitním designovým prvkem.
Někdy je vhodné mřížku obnažit, tedy udělat z ní designový prvek, aby se zřetelněji zapracovalo na pocitu systematičnosti a preciznosti.
Zásada 9: Různé hustoty informací vyžadují různé sítě
Mřížka 10 bodů je vzdušná a vhodná pro web design a digitální vyprávění příběhů, zatímco mřížka 8 bodů je hustá a vhodná pro rozhraní.
Proč jsou mřížky 8 pt tak rozšířené, když 10 pt mřížky nejsou horší?
Trend designu rozhraní roste, rozšířila se mobilní zařízení, ovlivňuje značka Google a její masivní designový systém Google Material Design se standardem 8px.
Tedy v éře, kdy je potřeba vyvíjet produkty pro gigantickou škálu rozlišení obrazovek (různé značky hodinek, telefonů, notebooků a stolních počítačů).
Nejoblíbenější mřížky jsou:
- 8px mřížka – pro rozhraní
- 10px – pro webové stránky
Výchozí nastavení Figma je nastaveno na 10px. Stejnému parametru je přizpůsobena funkce zrychlení pohybu objektů na plátně přidržením Shift. Pomocí tohoto přístupu lze objekty rychle přesunout a spadnout do buňky.
Pro vaše informace:
Existuje pixel (px) a je zde bod (pt)
CO JSOU BODY?
Bod (pt) je míra prostoru, která je závislá na rozlišení obrazovky. Nejjednodušším vysvětlením je, že při rozlišení „1x“ (nebo @1x) 1pt = 1px.
Při rozlišení „2x“ (@2x), 1pt = 4px, protože rozlišení se zdvojnásobuje na ose X i Y, takže je 2px široké a 2px vysoké.
Při rozlišení „3x“ (@3x), 1pt = 9px (3px x 3px) a tak dále.
Princip 10: Mřížka pomáhá řídit holistické vnímání
Mřížka automaticky používá několik Gestalt principů najednou: podobnost, blízkost, izolace. Díky tomu je design konzistentní a příjemný na pohled.
Mřížka definuje sadu pravidel, která vytvářejí hierarchii návrhu a organizují prvky.
- Gestalt pro designéry a vývojáře →
- Gestalt principy v designu webových stránek a rozhraní →
- 5 principů vizuálního designu pro designéry z NNGroup →
Princip 11. Síť je standardem pro přenos návrhu do vývoje: o hotových softwarových gridech
Pomocí mřížkového rozložení vývojář rychle pochopí systém proporcí a odsazení v rozložení a nakonfiguruje chování obsahu stránky pro různé velikosti obrazovky a sestaví adaptivní verzi stránky.
Principy mřížky od Kimberly Elam a dalších současníků a klasiků
Grafický design. Princip mřížky, Kimberly Elam
Nádherná kniha od Kimberly Elam s vizuální analýzou práce na kompozici a modulárních mřížkách. Velmi jednoduše a srozumitelně vysvětluje principy harmonického uspořádání prvků na dispozici. Hlavní přednosti knihy: přítomnost prakticky prezentovaných pravidel a principů, vysvětlení, proč je ta či ona možnost uspořádání lepší nebo ne tak dobrá; slušný počet příkladů.
„Modulární systémy v grafickém designu. Příručka pro grafiky, typografy a výstavní designéry, Joseph Müller-Brockmann
Kniha od průkopníka gridů v grafickém designu a designérské práci. Josef mluví s jiskrou a na příkladech o využití modulární mřížky v designu knih, periodik, firemního tisku, výstavních prostor, prostřednictvím příkladů architektury, typografie a designu a přesvědčivě dokazuje všestrannost a efektivitu modulární metody navrhování. Nejzásadnější práce na mřížkách. Kniha je stále aktuální. Musíte mít.
Knihovna oblíbených gridových systémů pro iOS, Android a Bootstrap (.xd, .psd, .ai, .sketch, .fig)
Obrovská bezplatná knihovna gridových systémů pro iOS, Android a Bootstrap. Zde si můžete stáhnout 26 mřížek se 6 a 12 sloupci pro 15 různých zařízení v souborech kompatibilních s oblíbenými grafickými nástroji: Adobe XD, Photoshop, Illustrator, Sketch a Figma. Cílem knihovny je urychlit spuštění vašich designových projektů. Stáhnout zdarma →
Co si ještě přečíst na téma mřížky v grafickém a webdesignu
Kniha o vkusu a kultuře práce s prostorem. Podrobná praktická prohlídka využití stavebnicového systému v grafickém designu a designérských pracích. Formát připomíná mistrovské kurzy.
Závěr a doporučení
Mnoho pravidel pochází z rozsáhlého výzkumu. Jejich hlavním cílem však není omezovat vás, ale urychlit dosažení normy a otevřít nové příležitosti pro kreativní zkoumání a neomezené uspokojování potřeb zákazníků. Pravidla a rady v článku jsou spíše obecným doporučením než přísným návodem k jednání.
Také vám připomínám, že můžete získat více praxe s mřížkami na webových stránkách, v mobilních, webových aplikacích a aplikacích pro chytré hodinky na Breezzly.
