Redesign velkého zpravodajského webu

Stejně jako u ledovce, není u redesignu velkého obsahového webu to nejdůležitější na první pohled vidět.

1. Důvody k redesignu

První na co jsme se ptali bylo: Jakou máte motivaci ke změně? Bylo nám řečeno, že design je již zastaralý. Zjistili jsme si, že i konkurenční weby v poslední době prošly redesignem, jejich návštěvnost se ale poté snížila. Přikládali jsme to špatně zvolenému designu, který weby spíše znepřehlednil. Bylo pro nás tedy klíčové navrhnout design, který web vyčistí a zlepší čitelnost. Důležité bylo nejlepší formou odprezentovat kvalitní články čtenářům.

2. Stanovení principů

Dále bylo zapotřebí vymyslet koncept. Nezačínat od detailů, ale od celku, který detaily podpoří. Principy byly od počátku jasné. Nejdůležitější pro nás byl obsah. Jak ale navrhnout grafiku, která bude obsah podporovat, ale neodpoutá od něj pozornost? Nechtěli jsme dělat prvoplánovou grafiku, která by byla líbivá, ale nesplňovala by funkci webu a to předání informací.  Chtěli jsme web zpřehlednit, vyčistit, zlepšit čitelnost článků…

Princip 1 – obsah

Podstata webu je v informacích. Ty jsou předávány určitou formou. Někteří čtenáři jsou schopni, kvůli kvalitním informacím jejich formu přehlížet. Více je ale těch, kteří cítí, že se jim díky grafické úpravě textu, článek čte hůře či lépe. Neví většinou proč, ale špatně upravené články nedočtou. Je jedno jak kvalitní informace v nich jsou. Úkolem je tedy obsah podpořit. To souvisí s minimem grafických efektů a elementů. Cílem tedy bylo vyzdvihnout obsah.

Princip 2 – čitelnost

Bod dvě úzce souvisí s bodem jedna. Typografie byla na penězích.cz dlouho řešeným tématem. Chtěli jsme vytvořit nejlépe čitelné články. Které budou konkurovat velkým zpravodajským serverům. A když už se čtenář jednou začte nic mu jeho čtení nepřeruší. To souvisí i s celkovým tokem informací (flow), které jsme se snažily graficky jasně vyjádřit.

Princip 3 – čistá grafika

I když by se mohlo zdát, že trendem je vyzývavá grafika se spousty efektů, je to spíše přežitek. Navíc to web dělá laciným. Podle našeho názoru by nemělo být prvoplánové zaujmout grafikou, ale sdělením. Grafika by měla podporovat obsah. Proto jsme zvolili kontrastní barvy. Bílé pozadí, jasně barevně oddělili (použitelnost). Boxy ohraničili tak, aby bylo jasně vidět o jaký box jde.  Fotografie a titulky nechali vyniknout…
Všechny tři principy spolu úzce souvisí. Koncept by nemohl vzniknout bez jediného z nich. Když jsme si jasně stanovili cestu, forma se nabízela sama. Dále jsme se bavili o velikosti a robustnosti hlavní navigace, velikosti hledání, tlačítkách, řešení diskuze…
Je pro nás důležité postupovat od celků k detailu. Vymyslet principy, na jejich základě navrhnout několik konceptů, ty potom konzultovat se zadavatelem. Čím více schůzek ohledně konceptu mezi námi a zadavatelem proběhne, tím méně času je potřeba na dodělávky.

Tak tomu také bylo u peněz.cz. Z pěti námi navržených grafickým konceptů se vybral jediný. Ten byl dále upravován tak, aby každá maličkost byla funkční. Po schválení tohoto konceptu se rozpracovaly další stránky. Začínáme vždy návrhem detailu a jdeme postupně k homepagi. Mohlo by se zdát, že toto řešení je nelogické, ale opak je pravdou. Homepage je jenom jedna, detailních stran je podstatně více( mají také více obsahu), proto se na ně dostane více lidí. Navíc homepage se většinou ladí ze všech stran nejdéle. Hlavně díky layotu a snahou o zobrazení co nejvíce informací.
Na tomto projektu jsme se setkali s otázkou dvou či tří sloupcového layoutu. Nakonec jsme zůstali u třísloupcového, mimo článku a to zejména díky mnoha elementům, které bylo zapotřebí na stránku umístit.

3. Obecné trendy obsahových webů

Čím dál častěji se můžeme setkat s responsivním webem. Jde o design který počítá se zobrazením na více přístrojích. Je tedy navrhován jak na rozlišení obrazovek tak na tablety či mobilní přístroje. Responsivní webdesign je náročným procesem, který potřebuje svůj čas. Na penězích.cz jsme chtěli najít kompromis mezi univerzálností a celistvostí. Přišli jsme tedy s designem, který je dobře čitelný na různě velkých displejích. Ušetřili jsme tím hlavně čas, ale neztratili na funkčnosti.

4. Typografie

Dlouho řešeným tématem byla typografie. Záměrně jsme použili webový font Ariel, na který jsou již čtenáři zvyklí a nemají problémy s jeho čitelností. Velikost nadpisů, řádkové proklady, odstavcové mezery, odrážky… každou z těchto jednotlivostí jsme ladili tak, aby se článek četl co nejlépe.

5. Úskalí na která jsme narazili

Ohledně typografie jsme narazili na problém, který nás zaskočil. V hlavní navigaci se nám slívalo písmo, dělo se tak ale pouze na  počítačích s operačním systémem Mac. U počítačů se systémem Windows vypadal font pěkně. Oslovili jsme pro to některé webdesignery s dotazem co s tímto problémem dělat. Výsledek byl takový, že většina těchto designerů by tento problém neřešila. Přemýšleli jsme tedy dál, co dělat s jiným vyhlazováním písma na různých přístrojích. Jediná možnost, která se nabízela, byla zkusit najít takové písmo, které bude užší a nemělo by se tedy slívat. Takové písmo se našlo, proběhlo jeho vyzkoušení a ukázalo se, že písmo pěkně sedí a neslívá se.
Při práci občas narazíme na nějaký problém, je ale pro nás výzvou ho vyřešit. Posouvá nás to v dalších projektech. Vše chceme mít stoprocentní a perfektní.

6. Závěr

Redesign webu peníze.cz se díky kvalitně odvedené práci a také spolupráci povedl. Návštěvnost se zvýšila, lidem se v něm dobře orientuje a čte. I přes první negativní reakce, se design usadil. Těší nás když nám lidé říkají, že se jim design i po tolika měsících stále líbí a neokoukal se jim.

Naďa Ryšánková

This entry was posted in Blog. Bookmark the permalink.

Comments are closed.