Čo nás môžu naučiť noviny o webovom dizajne

Dnes máme domovskú stránku, kedysi to bola titulná stránka. Od Gutenbergovho princípu cez grid systémy až po princíp "above the fold", noviny nás môžu naučiť veľmi veľa o základoch webdizajnu.

Je ľahké sa chytiť do najnovších trendov webdizajnu. Webová technológia sa neustále zdokonaľuje a vývojári dnes majú k dispozícii impozantnú škálu funkcií. Vďaka tomu sa vytvára inovatívny priestor pre budúcnosť, ale tiež priestor, kde existuje riziko, že sa nové inovácie neuchytia. Každé umenie má svojich dávnych majstrov. V prípade webových stránok sú to noviny.

Keď sa ponoríte do základných princípov spravodajského dizajnu, súvislosť s webom je veľmi častá, no častokrát nerozoznateľná. Mnoho osvedčených postupov v oblasti webdizajnu je možné vysledovať priamo v novinách. Webové stránky sú určené pre používateľov, s ktorými môžu interagovať a dúfať, v ideálnom prípade sa na ne vrátiť. Noviny víťazne hrajú túto hru už po celé storočia.

Ktokoľvek, kto sa čo i len trochu zaujíma o moderný webdizajn, môže mať úžitok zo znalosti toho, ako a prečo spravodajský dizajn funguje. Tento článok preskúma niekoľko princípov dizajnu novín a ukáže ich prepojenie s osvedčenými postupmi online. Jadrom tohto spojenia je princíp detskej jednoduchosti, na ktorý by mali dobre pamätať či už dizajnéri denníkov alebo webov.

Domovská stránka

Noviny sú tu už od 17. storočia. Tvrdo pracovali na svojich pravidlách, a nakoľko sa ich obsah mení každý deň, musia existovať určité pravidlá, ktoré sú nemenné. Deväťdesiatpäť percent z toho, čo vidíme v novinách, tam už ďalší deň nebude. Avšak práve to, čo nie je na prvý pohľad zjavné, je nevyhnutné na vytvorenie správnej formy a usporiadania obsahu novín.

Práve na tento vzorec sa pozrieme; niektoré z neviditeľných pravidiel, ktoré držia noviny pohromade. Zaoberajú sa hlavne formou a tým, ako čitatelia spracúvajú informácie. Paralely s webovým dizajnom sa čoskoro stanú jasnými a dúfame, že vy si z toho vezmete užitočné ponaučenie. Začnime najzjavnejšou charakteristikou - above the fold.

Nad ohybom stránky

Ak ste pracovali na webe, pravdepodobne ste už počuli frázu „nad ohybom stránky“, alebo "nad foldom". Je to novinový výraz, ktorý je starý už niekoľko storočí. Noviny sú kvôli svojej veľkosti často zložené na polovicu, takže „above the fold“ doslova znamená obsah viditeľný nad miestom, kde sú zložené na polovicu. Je to prvé, čo potenciálni čitatelia vidia. Často je to jediná šanca zaujať, prinútiť ľudí kúpiť si kópiu, pretože chcú vedieť viac. Ak titulná stránka novín nestojí za to, aký je dôvod si myslieť, že sa ich vôbec oplatí kupovať?

Jeden z UX princípov "nad foldom" v novinách The New York Times.

Priestor nad záhybom je priestorom hlavného príbehu, najdôležitejšej informácie v celom príspevku. Musí to čitateľa prilákať. To sa zvyčajne dosahuje veľkým nadpisom, kľúčovými informáciami a údernými fotkami. To znamená, že neexistuje presný formát. Čokoľvek, čo upúta pozornosť ľudí bez toho, aby to skresľovalo pravdu, víťazí.

Nachádza sa tam prvá a najdôležitejšia správa v novinách. Udalosť, ktorú by ste večer s kamarátmi na pive vytiahli ako prvú a rozprávali nadšene o nej. Keby ste mali možnosť povedať svojim priateľom, že muži včera kráčali po Mesiaci, pravdepodobne by ste nezačali rozprávať o tom, že ste si kúpili nové topánky. Pribehnete a zakričíte: „Muži kráčali po Mesiaci!“ To je nad záhybom stránky. To je miesto, kde noviny kondenzujú najdôležitejší príbeh (alebo príbehy) dňa.

To isté platí pre webové stránky, a práve to je nepochybne dôvodom, prečo sa terminológia aj sem preniesla. Čo je najdôležitejšie, čo by ľudia mali vedieť?

Trikrát hádajte, čo chce spoločnosť Apple, aby ste práve teraz vedeli.

Podľa minuloročnej štúdie uskutočnenej na 25 miliónoch prehliadačov, je obsah „nad záhybom stránky“ s prehľadom najsledovanejšou časťou webovej stránky. Od novín cez elektronický obchod (eshop) až po sociálne médiá, stále platí rovnaká zásada: choďte priamo k veci.

Gutenbergov princíp

Niekoho ste zaujali. Gratulujeme. Budete potrebovať vedieť o Gutenbergovom princípe - alebo o Z-vzore. Gutenbergov princíp, ktorý presadzuje „otec novinového dizajnu“ Edmund C. Arnold (viac o ňom neskôr), je dobrým pravidlom, ktorým sa treba riadiť, keď uvažujete o tom, ako ľudia interagujú s obsahom na stránke, či už papierovej alebo pixelovej.

Gutenbergov princíp uvádza, že keď stojíme pred homogénnym obsahom, začíname v ľavom hornom rohu a končíme v pravom dolnom rohu. Náš zrak prebehne zľava doprava. Vyplýva to z princípu zvaného gravitácia čítania. My v západnom svete trávime svoje životy čítaním zľava doprava. Dizajn novín to berie do úvahy.

Gutenbergov diagram od Stevena Bradleyho.

Vezmime si napríklad prednú stránku New York Times z obrázku predtým. Vaše oči prebehnú každou líniou. Kam sa mihnú vaše oči po prečítaní „PLANT FLAG“? Takmer určite na „Voice from moon.“ Prelomenie tohto toku býva pre čitateľov nepríjemné, pretože je v rozpore s čitateľskými návykmi. Ako často vidíte, že hlavný príbeh sa nachádza skôr na pravej časti stránky než na ľavej? Nie často.

Rovnaký postup platí aj pre tvorbu webstránok a ich webdizajn. Toto je princíp, ktorý sa uplatňuje už desaťročia. Začalo to dávno predtým, ako vznikol web. Akýkoľvek uvedený finalista z uvedeného zoznamu bude pre vás skvelou inšpiráciou. Tu je niekoľko nedávnych víťazov, od ktorých sa môžete priučiť.

Aby bolo jasné, gravitačné čítanie nie je také záväzné ako povedzme gravitácia. Navyše to nie je založené na nejakej vrodenej ľudskej prirodzenosti - riadi sa to jazykom. V jazykoch, ktoré čítajú sprava doľava (napríklad arabčina), platí rovnaký princíp, ale je obrátene.

Rozloženie arabských novín založené na jazykových pravidlách čítania sprava doľava.

Na tomto záležalo menej v zlatých dňoch tlače. Nakoľko boli konkrétne noviny všeobecne obmedzené na daný geografický región, odrážali iba daný primárny jazyk publika tohto regiónu. V online oblasti však môže váš web navštevovať ktokoľvek a odkiaľkoľvek. Preto je dôležité nielen porozumieť Gutenbergovmu princípu, ale tiež navrhovať weby, ktoré menia podobu v závislosti od jazyka, v ktorom sa čítajú.

Al Jazeera prevracia svoj obsah na základe jazyka, v ktorom je zobrazený.

Gutenbergov princíp nie je jediným spôsobom, ako ľudia interagujú s obsahom. Štúdie sledovania očí ukázali, že aj v online svete sú bežné vzory v tvare písmena F.

Všetky tieto vzory je užitočné poznať. Nejde o pravidlá, iba o trendy. Dizajn novín slepo nedodržiava Z-vzor, avšak používa ho ako základ. To isté platí pre webdizajn. Ak máte pochybnosti, nezabudnite na to, ale neškatuľkujte sa. Ľudské oko má zakorenené „gravitačné čítanie“, ale ak je dizajn skvelo spracovaný, dokážete ovplyvniť aj ľudské oko tak, aby nasledovalo.

Adaptabilita webu otvára nové úžasné možnosti prezentácie obsahu. Lekcie Gutenbergovho princípu sú východiskovými bodmi, s ktorými sa je dobré pohrať. Najlepší porušovatelia pravidiel zvyčajne presne poznajú pravidlá, ktoré porušujú.

Typové štítky

Každé noviny majú svoj štítok. Je to len jediná vec, ktorá sa zaručene z vydania na vydanie nemení. Je to kúsok hornej časti novín (alebo veľmi príležitostne po boku), ktorý pozostáva z názvu a loga vydavateľstva.

Mnohé z nich sú samy o sebe ikonické. Štítky publikácií ako The Washington Post a The Sun sa dostávajú do povedomia verejnosti. Typové štítky sú značkou, ktorá hovorí: „Nie sme iné noviny. Sme tieto noviny." Majú vysielať to, kto ste a o čom je váš obsah.

Slúži tiež ako určitý druh obsahu. Noviny majú často na svojich štítkoch upútavky, ktoré odkazujú čitateľov na príbehy, ktoré si síce celkom nezaručujú miesto na titulnej stránke, ale stále stojí za to o nich vedieť. Je to kľúčový hráč v hre nad záhybom stránky. Buďte v strehu. Čítajte ďalej. Je tu niečo pre vás. Pamätajúc na Gutenbergov princíp, typový štítok je pravdepodobne úplne prvá vec, ktorú čitatelia uvidia.

Noviny aj webové stránky chápu, akú hodnotu majú štítky pre značku aj navigáciu. 

Prakticky každá webová stránka má štítok, avšak na webových stránkach ju nazývame hlavička. Smashing Magazine má jednu, Amazon má jednu, Facebook má jednu. Je čudné, aby web nemal žiadnu hlavičku a aby sa nezobrazovala na každej stránke. Na webe musí každá stránka obsahovať kúsok hlavnej stránky. 

To je jeden z dôvodov, prečo sú štítky v online svete ešte viac využívané, ako tie  v novinách. No v spravodajstve a webdizajne je základný účel štítku rovnaký: dostať značku do popredia a viesť používateľov k niečomu, čo ich zaujíma.

Mriežkové systémy a obsahové bloky

Noviny sú čistý obsah. Od hlavy až po pätu sú nabité informáciami. Informáciami, ktoré je potrebné dobre usporiadať a dobre prezentovať. Mriežkový systém je základom pre dizajn novín. Tak, ako sa voda formuje do misy, tak sa aj obsah správ formuje do mriežkových systémov.

Stĺpce sú najdôležitejším prvkom. V závislosti od formátu novín (bulvárne noviny, noviny atď.) môže mať štyri až štrnásť stĺpcov. Je zriedkavé, že by sa obsah novín určitým spôsobom neformoval do týchto stĺpcov. Text tečie nadol po stĺpci a potom sa obnoví v ďalšom. Obrázky sa môžu prerozdeliť do viacerých stĺpcov, najmä ak priťahujú pozornosť.

Prvé publikácie, ako napríklad toto vydanie nórskych novín Dagbladet z roku 1905, sa často veľmi tesne držali svojich mriežkových systémov.

Všeobecne sa uznáva, že obsah novín by mal byť organizovaný do blokov, pričom každý príbeh má vlastný blok. Toto sa nazýva modulárne usporiadanie a existuje niekoľko dôvodov, prečo sa to stalo štandardom.

Po prvé, je to jednoduchšie pre organizáciu. Ak sa každý príbeh napasuje do čistého priestoru, je možné ho relatívne ľahko usporiadať. Ak sa snažíte natlačiť desiatky (alebo stovky) príbehov do obmedzeného priestoru, takáto forma usporiadania je darom z nebies.

Po druhé, je to jasnejšie. Dobré informácie nemajú hodnotu iba vtedy, ak sú zle podané. Bloky vytvárajú obsah na stránkach, kde sú jednotlivé informácie zreteľne zobrazené a ľahko sledovateľné.

Modulárne rozloženie v akcii (The Guardian).

Tieto štandardy vždy hrali úlohu aj pre dizajn webových stránok. Sú obzvlášť užitočné pre pochopenie toho, ako by ste dnes mali pracovať s CSS grid mriežkou. Nielenže novinové mriežkové systémy poskytujú návod na prehľadné usporiadanie obsahu, ukazujú aj to, ako bloky obsahu môžu vzájomne integrovať a vsunúť medzi to napr. tiež reklamu. Nesprávne zarovnanie môže skutočne vyzerať veľmi hlúpo, zatiaľ čo správne usporiadanie je radosť čítať.

Ako vždy existujú výnimky. Napríklad na webe sú zriedkakedy skoky (keď skončíte v čítaní v dolnej časti stĺpca a pokračuje opäť do hornej časti v čítaní nasledujúceho), pretože webové stránky môžete scrollovať do nekonečna. Tento druh rozloženia na stĺpce nemá obvykle na webe zmysel, pretože vedie k tomu, že čitatelia sa skáču nahor a nadol, aby prešli si prezreli určitý obsah. To je dosť neintuitívne. Skákanie medzi stĺpcami je výsledkom fyzickej obmedzeností tlače. Hlavnou hodnotou skokov vo webovom dizajne môže byť skôr zoskupenie blokov obsahu, než organizácia textu.

Vo všeobecnosti, upustenie od prerozdelenia obsahu do blokov či už v online alebo tlači, sa vám môže vypomstiť. Niekedy, ak pravidlá poznáte, ich však môžete porušiť. Rovnako ako Dada vybočila z estetických noriem na začiatku 20. storočia, tak aj niektoré neštandardné weby porušujú tento blokový systém a ponúkajú niečo viac … niečo nekonvenčné.

Dada tlač od holandského umelca Thea van Doesburga.

Škola umenia Yale.

Ako už bolo uvedené, na to, aby ste pravidlá porušili, musíte ich v prvom rade poznať. Pre toto ale i všetko ostatné je The Newspaper Designer’s Handbook od Tima Harrowera skvelou príručkou a vynikajúcim miestom, kde začať. 

A ako veľmi na tom všetkom záleží, pokiaľ sa bavíme o webe? Stále viac a viac. Vlastnosti CSS ako grid, shapes a flexbox uľahčujú dodržiavanie ale tiež porušovanie pravidiel mriežkového systému tak, ako nikdy predtým. 

Andy Clarke sa vo svojej knihe Art Direction for the Web (Umelecký smer pre web) ponára najskôr do lekcií tlačených médií (a ďalších), ktoré ukazujú, ako vďaka pokroku v CSS môžeme pridať do mriežkového systému úplne nové dimenzie. Ako sám Clarke hovorí:

"Už roky si hovoríme, že web nie je tlač. Povedali sme si, že veci, ktoré obdivujeme v iných dizajnérskych médiách, sa nedajú - a niekedy by sa nemali - použiť online. Už si to nemusíme myslieť."

Pozerajte vopred ... Najprv sa však pozrite vzad

Vyššie uvedené konvencie boli zabudnuté desaťročiami - v niektorých prípadoch storočiami. Ide o obrovské množstvo skúseností. V podstate všetci pomaly dospievame k porozumeniu obsahu a k tomu, ako ľudia s týmto obsahom pravdepodobne interagujú.

Najlepšie noviny sa riadia nesmierne jednoduchým princípom: podávajú informácie čo najjasnejším, najpríťažlivejším a najprístupnejším spôsobom. To by mal byť tiež cieľ pre každý web. Tieto myšlienky tiež presadzoval Edmund C. Arnold, otec moderného dizajnu novín. Arnold počas svojej kariéry navrhol alebo prepracoval stovky novín vrátane The Chicago Tribune, The Boston Globe, The National Observer a Newsday.

Edmund C. Arnold, „otec moderného dizajnu novín.“ 

Chcel, aby mali dizajnéri väčší vplyv a aby noviny mali vkus aj obsah. Bol tiež novinárom a akademikom a napísal množstvo kníh o dizajne novín a typografii. Vedel o tom svoje. Nie je náhodou, že Spoločnosť pre spravodajský dizajn, ktorej bol zakladajúcim členom v roku 1992, je dnes každoročne držiteľom dvoch ocenení - jednej za spravodajský dizajn, druhej za digitálny.

Dizajnéri novín sú študentmi webu - rovnako by mali byť aj webdizajnéri študentmi novín. Nakoľko vylepšenia webovej technológie otvárajú nové hranice, oplatí sa vedieť, či sa história znova neopakuje. Všetci predsa hľadáme to isté. Je to v podstate rovnaký jazyk.

Môžete to vidieť v reálnom čase, keď sa noviny prispôsobili webu. Zlatým štandardom spravodajského dizajnu online je v súčasnosti pravdepodobne The New York Times, ktorý bol tento rok finalistom v oblasti tlače a digitálnych cien. Zaujímavosťou online časopisu Times je spojenie klasicizmu a inovácie. Domovská stránka stále v podstate vyzerá ako titulná strana tlačeného vydania, zatiaľ čo jednotlivé príbehy, ako napríklad „Plot to Subvert Democracy“, sa ponárajú do nových možností webu.

New York Times spája najlepšiu prax v oblasti spravodajstva a webdizajnu tak, aby vytvoril niečo úplne nové.

Alebo si vezmite dizajnéra novín, ako je Mario García - súčasť generácie po Edmundovi - ktorého najnovšia kniha The Story bola navrhnutá pre čítanie na mobilných telefónoch. Najlepší návrhári správ si pochutnávajú na zmene.

Toto je v mnohých ohľadoch hlavný pokrok v oblasti spravodajského dizajnu. Jeho najlepší odborníci nie sú dogmatici - sú to veční študenti. Keď sa ho na konci jeho kariéry pýtali, aké sú jeho rady pre budúcu generáciu dizajnérov, odpoveďou Edmunca C. Arnolda nebola séria pravidiel. Bolo to oveľa jednoduchšie: "Vedzte, odkiaľ ste prišli. Moja správa pre mladých dizajnérov je táto: pozrite sa, deti, môžete to robiť lepšie, ale jediný spôsob, ako využiť svoj potenciál, je vrátiť sa k základom a porozumieť im. To znie nudne, ale je to realita."

Noviny nedržia všetky kľúče k skvelému webdizajnu, ale pochopenie princípov, ktoré im dominujú, môže byť pre webových dizajnérov iba prospešné. V týchto dvoch svetoch existuje veľa spoločného. 

Guru webdizajnu Jeffrey Zeldman trafil klinec po hlavičke, keď to pred viac ako desiatimi rokmi tweetoval:

"Obsah predchádza dizajnu. Dizajn pri absencii obsahu nie je dizajn, je to dekorácia."

— zeldman (@zeldman) Máj 5, 2008

Vitaly Friedman sa klaňal rovnakej idei, keď povedal: „Dobrý dizajn je o efektívnej komunikácii, nie o dekorácii na úkor čitateľnosti.“ On aj Zeldman by si vo svete dizajnových inovácií našli množstvo spojencov. Máloktoré, ak vôbec nejaké, médiá majú bohatšiu dizajnovú históriu ako noviny. Boj, ktorým si prešli je všetko, čo majú.

Doteraz nepredstaviteľné

Tu treba zopakovať, že medzi spravodajským a webovým dizajnom existujú jasné a nepopierateľné rozdiely. V novinách sú rozmery priestoru vždy rovnaké, zatiaľ čo webové stránky sa musia prispôsobiť radikálne odlišným veľkostiam obrazovky a zariadeniam. V novinách vidíte všetok obsah, zatiaľ čo webové stránky môžu skryť najrôznejšie užitočné funkcie, ktoré nie sú viditeľné až do momentu, kedy si ich používateľ neodkryje, prípadne, kým ich neaktivuje nejaká iná výzva (napríklad exit pop-up pri opúšťaní stránky). Tiež množstvo špecifík UX dizajnu. Cieľom tohto článku nie je presvedčiť vás, že novinky a webdizajn sú úplne totožné. Často sú si však veľmi podobné. Ak chcete byť pánom jedného, ​​neznamená to, že ste pánom druhého. Môže vám to však pomôcť.

Možno aj preto Friedman zhromaždil výber ocenených novinových návrhov až v roku 2008. Vtedy sa zničil predsudok, že tlačové techniky nie sú použiteľné online. V tom čase nebol CSS dosť prepracovaný. Teraz už je tomu inak a to je skutočne vzrušujúce.

Proces nikdy nekončí. Nemôže sa to skončiť. Žiadne noviny alebo webové stránky nebudú niekedy úplne „hotové“. Vždy sa vyvíjajú. Pozrite sa na prvé noviny a vôbec prvé webové stránky a môžeme s istotou povedať, že sa odvtedy v oboch svetoch toho zmenilo veľa:

1609, vydanie Relation aller Fürnemmen und gedenckwürdigen Historien, vo všeobecnosti považované za prvé noviny.

Vôbec prvý web.

Od týchto skromných začiatkov sa oba formáty masívne zlepšili a zostáva ešte veľa priestoru na vylepšovanie. Ako C. Y. Gopinath krásne vysledoval v roku 2016, parametre sa neustále menia; webová technológia, veľkosti obrazovky, zariadenia, rýchlosť internetu, čo si len spomeniete. V mobilnom veku možno štítok patrí dole. Kto vie? Všetko leží pred nami.

V mnohých ohľadoch prešla pochodeň od spravodajského dizajnu k webdizajnu. Ak budú vývojári napredovať so znalosťami svojich predchodcov, dosiahnu veci, ktoré si predchádzajúce generácie nedokázali ani len predstaviť. Aká neuveriteľná príležitosť. Už sa nevieme dočkať, čo vymyslia.