intype.info: Grid systém 1

Po 4 článkoch venovaným analýze požiadaviek pre jednotlivé sekcie sa konečne dostávam k niečomu zaujímavejšiemu: Grid systémy. Sú mocnou technikou na vytvorenie vyváženého dizajnu webu.

Grid systém je niečo ako vizuálny framework, základ, nad ktorým sa vystavia vzhľad webu. Je to niekoľko horizontálnych a vertikálnych čiar, ku ktorým zarovnávate stavebné bloky. V tejto časti ukážem ako rozdeliť stránku horizontálne do stĺpcov a ako vyťažiť z gridu maximum.

Existuje množstvo návodov, prístupov a kombinácii na vytvorenie grid systému. Ja som si vzal pár detailov a zostavil si vlastný systém. Hlavne preto, že mám rád veci komplexnejšie s rôznymi hračičkami a fintami.

Grid systém “960”

Na prototypovanie základného delenia používam univerzálnu mriežku, ktorá vychádza z 960.gs. Systém 960 je určený pre fixné rozlíšenie 1024×768, ktoré je dnes štandardom. 15% súčasných navštevníkov intype.info používajú 1024, ostatní používajú vyššie.

960.gs je v podstate dvojica šablon šírky (prekvapujúco) 960px. Šablony delia túto šírku na 12, alebo 16 zvislých pruhov. Každý pruh má navyše 10px priestoru na každej strane. Šablona so 16-timi pruhmi pre Fireworks vyzerá asi takto:

Pre tých čo Fireworks nepoznajú: Zelené čiary su guides, ružové pruhy sú iba obdĺžniky v zamknnutej vrstve na pozadí pre lepšiu orientáciu.

Pomery

V systéme 960/16 je šírka jedného pruhu 40px. Dve 10px pauzy po okrajoch, tvoria 20px priestor medzi jednotlivými pruhmi. Ja som si vytvoril systém, ktorý využíva tzv. zlatý pomer. Pomerov, ktoré sa dajú použiť je niekoľko. Tieto používam často ja:

• 1:3 a 1:4 – Klasické tretinové a štvrtinové pomery využívané pre konštrukcie všeobecne.
• 4:3 – Pomer využívaný v obrazovkách televíznych prijímačov, alebo monitorov#4:3_standard).
• 1:φ (≈ 1:1.618…) – Zlatý pomer využívaný ľuďmi v dielach od čias renesancie a prírodou od “prvopočiatku”. Pekne o zlatom reze písal Pixy.
• 1:√2 – Pomer využívaný v systéme rozmerov papierov ISO 216.

Môj systém 936/18

V mojom systéme používam 32px pruh a dve 10px pauzy. Dobrá otázka je “Fole proč, fole?”. Lebo ikony, fole! Pri pár predchádzajúcich dizajnoch som používal klasické 32×32 ikony v menu, zoznamoch súborov, tabuľkách, tlačítkach,… Využívaním desiatkových šírok stĺpcov (ako napr. 40px pri 960/16) som vždy narazil na problém so správnou vzdialenosťou medzi ikonou a textom. Za správnu vzdialenosť považujem 32 ÷ φ ≅ 20px. Zavedením systému 10/32/10 sa mi problém vyriešil.

Základná šablona tohto systému má 1000px šírku, pretože počíta s voľným 32px priestorom po oboch stranách. To preto, aby sa dali dizajnovať aj presahy na prípadne voľné pozadie po stranách pre rozlíšenia vyššie ako 1024×768. Efektívna šírka layoutu je teda 936px a je rozdelený na 18 pruhov šírky 52px (len o 10 viac ako magických 42!). Samozrejme nie je problém šablonu rozšíriť, alebo zúžiť.

Keďže som lenivý, napísal som si malý skript do Fireworks, ktorý mi takýto systém vygeneruje z guidelines:

// cohenoff_gs.jsf
var dom = fw.getDocumentDOM();

dom.removeAllGuides( "vertical" );
dom.setShowGuides( true );

// Padding po stranach
var p = 32;
// Definicia vzdialenosti
var g = [ 10, 32, 10 ];
// Pocet stlpcov
var columns = 18;

var x = p;
for( var c = 0; c < columns; c++ )
{
    for( var i = 0; i < g.length; i++ )
    {
        dom.addGuide( x, "vertical" );
        x += g[ i ];
    }
}
dom.addGuide( x, "vertical" );

// Nastavi sirku dokumentu
dom.width = x + p;
// Nastavi vysku dokumentu na fold
// dom.height = 600;

Ak si to chcete vyskúšať, musíte mať nainštalovaný Adobe Fireworks (alebo starší Macromedia Fireworks). Vytvorte si súbor napr. cohenoff_gs.jsf a vložte do neho tento kód. Otvorte Fireworks, vytvorte nový dokument o veľkosti 1000×600 a spustite JSF súbor (napr. dvojklikom). Tento skript vymaže všetky vertikálne línie v dokumente, vloži nové a prípadne zmení veľkosť dokumentu (viď posledné 2 riadky). Je možné ho spúštať niekoľko krát. Vždy pracuje nad aktuálnym dokumentom vo Fireworks.

Späť k analýze

Na vytvorenie mocného grid systému je treba zistiť čo všetko bude musieť zvládať. Mrknime na všetkých 6 wireframes z predchádzajúcich častí:

Ako vidno, všetky WF používajú maximálne 3 stĺpce: jeden zo sidebarov a obsah, ktorý je niekedy rozdelený na dva. Teraz je potrebné si ešte raz premyslieť či nebude existovať nejaká ďalšia alternatívna konfigurácia, ktorá by vyžadovala stĺpce 4 (alebo 2). Ak sa tento fakt ukáže neskôr, toto je miesto kam sa vrátite znova a všetky výpočty budete musieť zahodiť.

Viem teda, že potrebujem jeden stĺpec ako sidebar a dva rovnako veľké, ktoré spoločne budú tvoriť obsahovú časť. Ja si rád tieto typy stĺpcov označujem písmenami, čiže potrebujem layout typu ABB. Ako však čo najlepšie rozdeliť plochu ktorú mám na tieto tri kusy?

Prvé čo človeka napadne je buď to šupnúť od oka, alebo si dopočítať zlatý rez 18 ÷ φ ≅ 11. Ja som ale zvolil ešte jednoduchšíe riešenie: rozdelil som po 6-tich pruhoch každému (čiže na tri rovnaké diely). Používaním rôzne širokých stĺpcov sa stráca istá krása univerzálnosti, ktorú mám rád. Moje riešenie má však jeden drobný háčik: všimnite si ako je vyriešený sidebar:

Obsahová časť sidebaru je nalepená cez ohraničenie samotného bloku. Text píšeme zľava doprava. To znamená, že na ľavej strane bude blok textu tvoriť súvislú líniu, a teda je potrebné aby vľavo od textu bolo viac voľného priestoru kvôli oddeleniu sidebaru od hlavného obsahu (v tomto prípade ide o 30px). Naopak, pravá strana súvislého textu je nesúmerná (teda ak nepoužívate odporný justify). A preto sa tento priestor opticky zmenší prisunutím pravého sidebaru.

Z predchádzajúcej analýzy tiež vieme, že ľavý sidebar bude zobrazovať štrukturované menu. Tesným zarovnaním jeho ľavej strany tak získame možnosť menu podfarbovať v plnej šírke už od kraja samotného layoutu. Pravý sidebar bude väčšinou obsahovať niečo čo by sa dalo prirovnať k bannerom a tie presahy na pravú stranu rozhodne nepotrebujú.

Grid systém a dizajn obsahu

Teraz si určite hovoríte, že kvôli rozdeleniu stránky na tri rovnaké bloky sa neoplatí patlať sa s grid systémom. Áno, určite, ale ešte sme neskončili. (Typo)grafický návrh obsahu veľa ľudí fláka, aj keď práve z neho sa dá vyťažiť najviac. Vďaka grid systému sa môžete veselo hrať s definovaním pozícií blokov. K čomu nech vám Snap to Guides pomáha.

Na nasledujúcom obrázku som skúšal univerzálnosť systému umiestňovaním blokov pre (ilustračné) obrázky. Pre obrázok som, z pochopiteľných dôvodov, zvolil šírku 292px a pre praktickosť výšku 219px, čiže sú v pomere 4:3, čo je pre klasické screenshoty ideálne. Ku každému obrázku som pridal ešte prípadný priestor pre popisok. Dá sa samozrejme použíť aj iný pomer, napríklad 1:φ: 292 ÷ φ ≅ 180.

Už z tohto pohľadu vidno ako krásne do seba veci zapadajú. Všimnite si ikonu pod nadpisom, ktorá môže byť buď odkazom na daný atóm, alebo ikonou, či číslom komentára. Obsah je skrátený o dva pruhy, pretože som chcel obrázky vysunúť z textu von. Vďaka ich rozmeru 292px (šírka jedného stĺpca) je možné ich pohodlne umiestniť vedľa seba.

Ľavá línia obsahu delí obrázok v približnom zlatom pomere. Približnom preto, že počty sa robia už vo vyššej granularite – v granularite grid systému, nie v pixloch. Ak definujeme rozmery v jednotkách grid systému – teda v pruhoch a pauzách – uvidíme ako systém a pomery v ňom fungujú:

• Layout – 18 pruhov
• Obsahový stĺpec – 12 pruhov (≈ 1:φ k layoutu)
• Text – 10 pruhov (≈ 1:φ k layoutu)
• Stĺpec (sidebar) – 6 pruhov (≈ 1:φ k textu)
• Obrázok – 6 pruhov (≈ 1:φ k textu)
• Ikona – 1 pruh
• Obrázok je od textu vzdialený 2 pauzy (= 1:φ k pruhu)
• Ikona je vzdialená 2 pauzy od textu (= 1:φ k šírke ikony)
• Text delí obrázok ≈ 1:φ

Nabudúce

K dizajnu obsahu sa určite ešte vrátim. V ďalšej časti seriálu ukážem ako vytvoriť vertikálne rozdelenie dizajnu, teda ako vyriešiť umiestnenie hlavičky, ribbonu a obsahu.