Absolvoval jsem kurz o mřížkách od Bang Bang Education a sdílím své poznámky. Hned musím říct, že poznámky jsou poměrně krátké a obsahují pouze informace, které mi byly užitečné. Doporučuji vám, abyste si celý kurz absolvovali sami.
Síť — je nástroj pro organizaci prostoru založený na charakteristikách lidského vizuálního vnímání.
Síť – to je výsledek lidské snahy o harmonický řád.
Neexistují jednotná pravidla pro konstrukci mřížek.
Vnímání čar a mřížek je podvědomé. To znamená, že ať chceme nebo ne, uvidíme rovné čáry tam, kde by nemusely existovat.
Mřížka je neviditelná architektura stránky, která odráží strukturu materiálu. Nemůže efektivně fungovat z materiálu a je jím určena.
Mřížka je systém horizontálních, vertikálních a diagonálních linií, které tvoří rámec typografické kompozice.
Proč potřebujeme mřížky?:
- Snadnost použití.
- Jednotnost materiálu jako v knihovně, kde jsou knihy uspořádány podle systému.
- Rozmanitost a variabilita.
- Flexibilita a přizpůsobivost řešení pro různé formáty.
Z čeho se skládá mřížka?:
- Prázdný řádek
- Modul
- Mikromodul
- Sloupec
- Střední, mezisloupcový
- Pás
Historie mřížky
Jak dochází k vývoji něčeho nového:
- Objevují se nové technologie.
- Experimenty začínají s novými nástroji, které technologie poskytuje.
- Hledání nových principů pro aplikaci experimentálních výsledků.
- Aplikace na podmínky nového světa.
- Vývoj a komplikace.
Mřížka čerpá svou historii z rukopisů a ručně psaných knih.
Osobnosti:
- Vilém Maurice
- El Lissitzky
- Jan Tschichold
- Max Bill
- Joseph Müller-Brockmann
- Richard Lohse
- Le Corbusier
- Weinbert
Typy mřížek
Neexistuje žádná klasifikace podle typů sítí. Lze je však rozdělit podle:
- Povaha vnitřního rozdělení:
- Koláž:
- Bez reproduktorů.
- Šlehání se provádí pomocí mikromodulů nebo kolon.
- Rozložení s nulovým středem, rozložení v antifázi.
- Rozložení podle zlatého řezu nebo posloupností
- S jednou nebo více svislými dělicími příčkami – středy.
- Velikost středního dílu má velký význam. Ovlivňuje vzdušnost, napětí a dynamiku.
- K dispozici je vertikální a horizontální dělič.
- Jednotný:
- Symetrické struktury, ze kterých se skládá celé uspořádání.
- Jsou to kolážové, modulární a sloupcové.
- Obsahují vnitřní asymetrii a rytmus.
- Bez modulární mřížky se obejdete.
- Velmi kontroverzní druh.
- Je založen na algoritmu s různými proměnnými.
- Návrhář nenabízí vizuální řešení, ale algoritmus, podle kterého systém vyřeší grafický problém.
- Umožňuje provádět více úkolů současně.
Toto není striktní klasifikace. Přístupy lze kombinovat a kombinovat. Neexistují žádná omezení.
Toto je kombinovaná mřížka Rudolfa Bossharda.
Jak vytvořit progresivní mřížku
- Kombinace
- Překryvná vrstva
- Proporce (založené na geometrických a matematických proporcích)
- Kompozice (pro hlavní čáry mřížky se používají ilustrační čáry)
Progresivní mřížka od Karla Gerstnera. Varianta 2-, 3-, 4-, 5-, 6sloupcového rozvržení.
Detailování sítí
Sítě lze rozdělit do 3 skupin podle úrovně detailů:
- nízká úroveň detailů
- střední úroveň detailů
- vysoký
Čím větší je modul, tím menší má designér volnost při umisťování textu a ilustrací.
Sítě s nízkými detaily — od 2 do 6 sloupců.
Propagační weby, vstupní stránky, weby pro vizitky. Tablet nebo chytrý telefon. Lineární a předvídatelné.Střední detail — od 6 do 12 sloupců.
Umožňuje vytvářet dynamické moduly. Sloupec je soběstačný a pojme celou sémantickou jednotku.Vysoce detailní sítě — ze 13 sloupců.
Sloupce ztrácejí svou soběstačnost. Čím více sloupců, tím menší je potřeba mezisloupců.Není tak důležité, kolik místa modul zabere vertikálně nebo horizontálně, důležitá je logika, která umožňuje vytvořit efektivní kompozici.
Jak můžete detailně okreslit síť:
- Vynásobte sloupce číslem 2, 3, 4 atd.
- Superpozice mřížky (překrytí 2 nebo více mřížek).
- Přepočet.
Nejčastěji to není mřížka, která určuje kompozici, ale kompozice, která řeší potřeby projektu, která diktuje, která mřížka může tuto kompozici popsat.
Jak nastavit adaptivní sítě při jejich detailování:
- Snížení počtu sloupců vpravo. Šířka sloupce a mezery mezi nimi by měla zůstat pevná.
- Škálování sloupců – roztažení sloupců o šířku. Počet sloupců se nemění.
- Modulární úprava – typový proužek v rozvržení je rozdělen na funkční a logicky uzavřené metamoduly a nejprve se upraví podle prvního nebo druhého typu a při přepnutí do formátu tabletu nebo smartphonu se pozice změní.
Faktory, které ovlivňují úroveň detailů:
- Obsah a jeho povaha.
- Všechny druhy okrajových materiálů (bannery, menu, loga atd.).
- Přizpůsobivost.
Mřížka, estetika a typografie
Síťovina nebo její absence výrazně ovlivňuje estetiku.
Mřížka nejen mění složitost, ale také ovlivňuje vizuální obraz a typografickou rozmanitost.
Mikromodul a jeho aplikace
Koncept mikromodulu v principu neexistuje.
Osoba: Arnaud Mercier. Grafický a webový designér, vývojář, zakladatel area 17 a elixirstudio, ideolog práce s mikromodulem.
Odkud pochází mikromodul?.
Téměř všechna rozlišení obrazovky monitorů, tabletů a chytrých telefonů jsou násobky 8 a 4 pixelů na šířku. Téměř všechna běžně používaná rozlišení obrazovky monitorů jsou násobky 10 a 5 pixelů na šířku. Výjimkou je rozlišení obrazovky monitoru 1366 pixelů.Mikromodul je základní měrná jednotka v rozvržení pro výpočet mřížky, proporcí obrazu, systémů odsazení atd.
Pouze základní čára písma se nastavuje podle mikromodulu. Velikost a výška písma by se neměly rovnat mikromodulu.
Co řeší mikromodul?:
- výchozí bod;
- předpisy;
- úspora času;
- přizpůsobivost;
- systémový přístup;
- zvýšení rytmu;
- rozumná omezení.
- Designové techniky oblasti 17 – guides.area17.com/design-techniques
- Design materiálů Google – material.io/design
Co ovlivňuje mřížku?
Co ovlivňuje návrh sítě:
- úkol
- prezentace – landing, portfolio
- dojem je důležitý
- mřížka může být velmi složitá
- Mřížka je potřebná k tomu, aby uživatel mohl produkt pohodlně používat.
- Mřížka by měla usnadnit pohodlnou konzumaci informací
- může být velmi složité, ale pohodlné
- v závislosti na typu obsahu je třeba vytvořit mřížku
- Například média používají bannery. Bannerové moduly vždy ovlivňují obsah, protože bannery mají vždy pevnou velikost.
- Je vhodné navrhnout mřížku s adaptací pro 3 typy zařízení.
Mřížka a responzivní design
Při navrhování responzivního designu je vhodné zvážit:
- Funkčnost
- Uživatel by neměl trpět při používání různých zařízení.
- Není dobrý nápad obětovat funkčnost.
- všestrannost
- To je o designérovi, který se snaží optimalizovat své řešení.
- Například když je šířka sloupců stejná, ale na různých obrazovkách je přidán nebo odebrán požadovaný počet sloupců a obsah je upraven.
- Integrita
- Bez ohledu na zařízení vypadá web harmonicky a kompletně.
- Guma
- Měřítko
- Transformace je změna polohy bloků.
Vytvořit webovou stránku s použitím jednoho z principů adaptace není možné.
Další zdroje o mřížkách:
Telegramový kanál pro upozornění na nové články.
Tento blog je ručně vyráběný, bez reklamy, sledování a závodění o algoritmy. Čistá kreativita, překlepy jsou možné.
Práva a autorská práva
RSS
- prezentace – landing, portfolio
- Koláž:
