Minulý semester som si prešiel sezónou DES Colors od ukrajinskej agentúry OBYS a napísal som o nej článok. Skončil som ho tým, že ma čaká Grids. Tak som sa k tomu tento semester vrátil.

Design Education Series je séria kurzov od štúdia OBYS, teda od ľudí, ktorých práce sa pravidelne objavujú v Awwwards a FWA výberoch. Tretia sezóna má sedemnásť lekcií a približne štyri a pol hodiny videa, pričom takmer polovicu času tvorí dekonštrukcia vlastných projektov a práca na projekte naživo.

Do kurzu som išiel s konkrétnym cieľom: vedieť stavať zaujímavejšie a odvážnejšie layouty. Technickú stránku gridu mám zvládnutú, ale chcel som mať v ruke systém, ktorý dovolí ísť za dvanásť stĺpcov bez toho, aby sa dizajn rozpadol. Zaujímalo ma, ako OBYS dosahujú tú plasticitu, ktorú majú vo svojich weboch, a či za tým stojí metóda alebo len dobrý vkus.

Skepsu som mal v tom, či to bude vôbec prenositeľné. Grid je téma, kde sa ľahko skĺzne do teórie o švajčiarskej škole, ktorá sa pekne počúva a nedá sa použiť. Ukázalo sa, že najsilnejšie z celého kurzu sú práve dva veľmi konkrétne nástroje.

1. Power lines a metóda Shish Kebab: ako držať dlhý web pohromade

Najhodnotnejšia časť kurzu a zároveň jediná, ktorú som začal používať okamžite.

Čo sú power lines

Power lines sú neviditeľné osi zarovnania, na ktorých prvky „odpočívajú". Nie je to to isté ako grid. Grid je len organizovaná sieť týchto osí, ale nie každá čiara v gride je silová čiara. To je podstatný rozdiel: silové čiary sú tie, ktoré si vyberiem a ktoré nesú štruktúru, zvyšok gridu je len infraštruktúra.

Kurz ich delí na dve úrovne:

• Primárne čiary nesú hlavnú váhu naratívu a prechádzajú celou stránkou od headera po footer. Typicky ľavá hrana hlavného textu alebo os, na ktorej sedí každý nadpis.
• Sekundárne čiary podporujú detaily, metadáta, marginálie. Môžu sa meniť po sekciách.

Praktický dôsledok je jednoduchý: primárne čiary sa nesmú stratiť, sekundárne sa meniť môžu a majú. Práve tento rozdiel dáva priestor na experiment. Sekcia môže byť kompozične úplne iná ako tá predchádzajúca, a pokiaľ drží primárnu os, celok ostane súdržný. Kurz nazýva opačný stav logickými skokmi medzi stĺpcami a označuje ho za jednu z najčastejších chýb, ktoré vidia.

Podložené je to neurovedou. Vizuálny kortex obsahuje neuróny naladené na hrany a orientáciu línií, ktoré reagujú skôr, než mozog rozpozná objekt. Skôr než človek uvidí, čo na stránke je, vidí sieť smerov. Silové čiary teda nie sú estetická preferencia, ale to, čo mozog číta ako prvé.

Shish Kebab method

Metafora, ktorá to celé drží pokope a je najpoužiteľnejšou vecou z kurzu.

• Meat sú jednotlivé bloky stránky. Každý z nich navrhujem ako samostatný plagát, ktorý musí fungovať sám o sebe.
• Skewer je grid a primárne silové čiary. Os, ktorá prechádza všetkými blokmi a drží ich v jednom rytme.

Bez skeweru sa mäso rozsype, bez mäsa je skewer zbytočný.

Pre tvorbu zaujímavých layoutov je to praktické preto, že to legalizuje odvahu na úrovni jednotlivého bloku. Ak mám garantovanú os, ktorá prejde celou stránkou, môžem si dovoliť, aby každá sekcia mala vlastnú kompozičnú logiku. Nemusím zjednocovať bloky tým, že ich urobím podobné. Zjednotí ich skewer.

K tomu patrí druhý nástroj: vizuálny rým. Nie je to zarovnanie ani copy-paste, ale opakovanie s variáciou. Ten istý polomer zaoblenia v logu aj v tlačidlách. Rovnaký uhol v troch rôznych sekciách. Rovnaká intonácia prvkov. Keď sa tvary a línie v rôznych blokoch navzájom potvrdzujú, dizajn pôsobí ako jeden systém, aj keď je každý blok iný.

Ako to použijem

Konkrétne si zavádzam jednu vec do workflow: pred nastavením gridu si vo Figme vytiahnem dve až tri primárne silové čiary a nechám ich zapnuté cez celý dokument. Fungujú ako kontrolný mechanizmus. Ak sekcia nevie rešpektovať ani jednu z nich, nejde o problém gridu, ale o to, že sekcia ešte nie je dotiahnutá.

2. Composition first: mriežka nie je štartovací bod

Téza, ktorá sa v kurze opakuje od prvej lekcie a je zámerne provokatívna.

Bežný postup je otvoriť Figmu, nakresliť dvanásťstĺpcový grid a začať doň ukladať prvky. Kurz tvrdí, že je to obrátené. Grid nie je generátor nápadov, je to nástroj, ktorý už existujúcu kompozíciu stabilizuje a dáva jej matematický poriadok. Aplikovaný bez kompozičnej idey vedie k technicky správnemu a vizuálne neutrálnemu výsledku.

Kompozícia je v tomto ponímaní vizuálna hypotéza, grid je jej dôkaz.

Prakticky to znamená začať skicovaním bez mriežky a pracovať s vizuálnou váhou:

• Princíp páky. Masívnu skupinu prvkov na jednej strane vyvážim drobným osamoteným prvkom na strane druhej. Čím ďalej je ten malý prvok od stredu, tým väčšiu váhu získava.
• Prázdny priestor má váhu. Nie je to zvyšok, ktorý ostal, ale plnohodnotný prvok kompozície.
• Asymetrická rovnováha. Nedosahuje sa zrkadlením, ale kompenzáciou. Je živšia a dynamickejšia než symetria.

Pre cieľ, s ktorým som do kurzu išiel, je toto podstatné. Zaujímavý layout takmer nikdy nevznikne z gridu smerom von. Vzniká z kompozičného nápadu, ktorý grid následne udrží pri živote.

Kurz zároveň ukazuje aj opačný prístup, čo mu treba uznať. Van de Graaffov kánon je geometrická konštrukcia stránky z diagonál formátu a ide presne naopak, od mriežky ku kompozícii. Autori netvrdia, že je zlý. Tvrdia, že web sa dnes takmer vždy pohybuje od obsahu k mriežke, a preto je composition first prirodzenejší.

3. Ranking system: kde investovať kreativitu

Najpraktickejšia vec z kurzu z pohľadu klientskej práce. Jednoduchý systém, ktorý rieši otázku, koľko energie dať ktorej podstránke.

Samotné rozdelenie nie je objav. Zaujímavá je druhá časť pravidla.

Bloky na jednej stránke by mali kolísať v rozsahu dvoch až troch úrovní. Ani homepage na Leveli 5 nemá mať všetky sekcie na Leveli 5. Hero môže byť päťka, ale produktová špecifikácia pod ňou má spadnúť na trojku. Toto kolísanie dáva používateľovi priestor dýchať a zároveň je to to, čo umožní päťkovej sekcii skutočne vyniknúť. Kurz tomu hovorí prevencia efektu zábavného parku: keď každý blok kričí o pozornosť, nevynikne žiadny.

Systém pripúšťa aj frakčné hodnoty, napríklad Level 4,5. Nejde o metriku, ale o nástroj na rozhovor. Práve v tom vidím jeho hlavnú hodnotu: dáva slovník, ktorým sa dá klientovi aj sebe zdôvodniť, prečo experiment patrí na hero a nie na stránku s obchodnými podmienkami.

4. Visual tension: napätie ako nástroj sústredenia

Téma, ktorá priamo nadväzuje na to, čo som písal pri DES Colors o vedomom prekračovaní pravidiel. Ten istý princíp, iná disciplína.

Základná téza: napätie sa rovná sústredenie. Keď je kompozícia v dokonalej statickej rovnováhe, oko sa nemá o čo oprieť a preskočí ďalej. Napätie je stav miernej vizuálnej nestability, ktorý mozog núti zastaviť sa.

Konkrétne techniky z kurzu:

• Edge tension. Prvok tlačený nebezpečne blízko k okraju formátu. Vzniká pocit tlaku a prvok získava váhu, ktorú by v strede nemal.
• Scale conflict. Extrémny kontrast medzi gigantickou typografiou a miniatúrnym subtextom. Nie o dva stupne väčšie, ale desaťnásobne.
• Slicing a flipped text. Prerezané alebo prevrátené písmo, ktoré zámerne narúša čitateľnosť a núti mozog zakopnúť.
• Posun ťažiska. Off-center kompozícia namiesto vycentrovanej.

Kurz sa opiera hlavne o AJ Franzoneho a jeho filozofiu Minimum/Maximum: maximálny výraz pri minimálnom počte prvkov.

Zároveň k tomu pridáva varovanie, ktoré je dôležitejšie než samotné techniky. Overtension je stav, keď dizajn kričí v každom bode a používateľ stráca schopnosť prioritizovať. To je presne tá hranica, kde sa odvážny layout mení na neprehľadný. Kurz to formuluje priamo: napätie nie je nástroj pre začiatočníkov, najprv treba ovládnuť pravidlá, aby sa dali efektívne porušovať. To isté som si odniesol z Colors, len tam išlo o farby.

Chyby, ktoré kurz zdôrazňuje, sú väčšinou očakávateľné a nebudem ich rozpisovať. Za zmienku stojí zarovnávanie prvkov do gutters namiesto dovnútra modulov, čo je zdanlivá drobnosť, ktorá spoľahlivo rozbije celý systém, a takzvaný Behance grid syndrome, teda grid dolepený na hotový dizajn až pri exporte do portfólia.

Reflexia

Hlavný prínos. Kurz mi dal systém, ktorý dovolí robiť odvážnejšie layouty bez rizika, že sa stránka rozsype. Shish Kebab spolu s rozdelením na primárne a sekundárne silové čiary je jednoduchý myšlienkový model, ktorý sa dá vybaviť pri každom projekte, čo sa o väčšine dizajnovej teórie povedať nedá.

Slabšie miesta kurzu. Lekcie o trendoch a o zdrojoch sú dokopy pod jedenásť minút a sú to prakticky zoznamy mien bez analýzy. Chýba tiež responzivita. Kurz pracuje takmer výhradne s desktopom a otázka, čo sa s takto postavenými silovými čiarami stane na mobile, ostáva otvorená. Pri dnešnej praxi je to pomerne veľká diera.