Základy tvorby webových stránek jsou intuitivnější, než si možná myslíte. Ještě než si začnete tykat s programovacími jazyky nebo pronikat do tajů SEO, měli byste znát následující…
Mřížka nás provází již po tisíciletí a webovky nejsou výjimkou
Vypněte na chvilku počítač a otevřete třeba časopis nebo noviny.
Možná že vám různé tiskoviny nabídnou trochu jiné uspořádání, ale můžeme vám garantovat, že všechny se řídí mřížkovou strukturou. Nahoře na titulní straně najdete název novin, pod tím hlavní článek (nejčastěji s doprovodnou fotkou), po stranách sloupky s kratšími zprávami. Vše je jasně a přehledně rozděleno do řádků a sloupků pro lepší orientaci.
A naprosto stejným principem, byť s různými variacemi, se řídí i většina webových stránek. Věřte, že webdesignérů rozhodnutých vzepřít se „tyranii“ mřížky a přijít se zcela neotřelým designem byly tisíce. A v drtivé většině případů jejich pokusy nedopadly nijak hvězdně.
Proto vám jako začínajícím tvůrcům radíme dobře – držte se mřížkového layoutu a váš web bude srozumitelným pro vás i pro každého, kdo na něj zavítá.
Různými již připravenými šablonami a variacemi mřížky, do níž můžete rovnou dosazovat obsah, se internet jen hemží. Většina z nich je zdarma a plně kompatibilní s hlavními kódovacími jazyky, případně je stáhnutelná například jako doplněk k WordPressu či obdobným systémům pro tvorbu webovek.
Ta, která se bude k vašemu obsahu dokonale hodit, je jistě mezi nimi. Hned do začátku tak máte ušetřenou práci.
Nezapomínejte na vizuální hierarchii
Ve většině světových kultur se text čte zleva doprava. Ve skutečnosti ale člověk obvykle čte tak, a na internetu to platí dvojnásob, že text očima „skenuje“.
Největší pozornost přitom věnuje začátkům řádků, respektive levé straně stránky, dále prvnímu řádku či odstavci a poté ještě obsahu zhruba uprostřed či mírně nad středem stránky.
Ve výsledku tak místa, na něž se čtenáři soustředí nejvíce, tvoří na ploše stránky vzor připomínající velké písmeno F.
A právě do tohoto písmene F byste měli soustředit ty nejdůležitější prvky a informace jako je například logo či CTA.
Vizuální hierarchie je samozřejmě tématem mnohem bohatším, které na tomto prostoru bohužel nemůžeme rozebírat. Zkuste si ale zjistit na vlastní pěst více o velikosti a typu písma, rozčleňování nadpisů a odstavců či volbě barevného zvýraznění.
Jak je tomu s obrázky a paletou barev?
U webdesignu platí v podstatě totéž, co v jakémkoliv jiném oboru lidské činnosti, totiž: všeho s mírou.
Barvy jsou ideálním prostředkem ke zvýraznění důležitých informací na stránce, jejich výběr pak může být dokonce součástí vaší brandové identity. Neměli byste to s nimi ale přehánět. Příliš mnoho barev může naopak mást a odvádět pozornost.
Pamatujte zároveň, že některé kombinace barev mohou představovat problém pro barvoslepé, kteří tvoří zhruba dvacetinu světové populace. V severní Evropě je údajně barvoslepých až 9% mužů (zato jen minimum žen). Raději se vyhýbejte takovým barevným kombinacím, které by mohly být takovým lidem na překážku.
Co se týče obrázků, v první řadě si dobře rozmyslete využití pohyblivých či blikajících obrázků, případně souborů .gif. Většina návštěvníků dává přednost takovým webovkám, které jim netančí před očima a neruší je. To neznamená, že toto pravidlo nemůžete čas od času porušit.
Volte pouze takové obrázky, které váš text nějakým způsobem ilustrují, obohacují či přispívají k jeho pochopení. Na stránky nevkládejte obrázky jen proto, abyste tak zaplnili hluchá místa.
Pokud nejsou obrázky vaše, hlídejte si jejich autorská práva. Většina obrázků na internetu podléhá copyrightu, naštěstí ale najdete také fotobanky, které jsou zcela zadarmo a obrázky z nich můžete bez problémů využívat. Více se dočtete například zde.
A závěrem také nezapomeňte velikost vašeho obrazového souboru co možná nejvíce redukovat (aniž byste ohrozili jeho kvalitu). Téměř dvě třetiny času, po který se vaše stránka návštěvníkům načítá, jdou na vrub její obrazové složky. Dlouhým načítáním pak zbytečně riskujete, že lidé vaši stránku zavřou a to, co chtěli, půjdou hledat jinam.
Mějte tyto tipy neustále na paměti i poté, co budete do tajů webdesignu pronikat čím dál hlouběji! Vašim budoucím stránkám mohou jedině prospět!