Webdizajn teoreticky
Ak to myslíme s tvorbou dizajnov internetových stránok vážne, nesmie nás minúť trochu potrebnej
teórie. Preto som si na tejto kapitole dal obzvlášť záležať - snažím sa tu nielen obsiahnúť svoje
doteraz nazbierané skúsenosti, ale tiež vytvoriť ucelený prehľad všetkých dôležitých informácií a
poznatkov, ktoré sa s tvorbou dizajnu webu nevyhnutne tykajú. Takže sa teraz pohodlne usaďte,
nenechajte sa ničím rušiť a zapnite svoje sústredenie, pretože kvalitný dizajn je hlavne o
premyslených detailoch.
Ako návštevník vníma stránku
O internetovej stránke si človek dokáže vytvoril silný podvedomý úsudok už za pár desatín sekundy.
Logicky vás napadne, že za takú krátku dobu nemožno prečítať ani titulok. Hlavným aspektom, ktorý
vytvára podvedomý postoj k internetovej stránke ako celku, je práve jej vzhľad - ak sa kvalita dizajnu
návštevníkovi zapáči, podvedome si toto svoje hodnotenie prenesie i na jej obsah vo forme určitého
stupňa dôvery. Ide o prvý základný dojem, na ktorom návštevník ďalej stavia, podobný tomu, keď
človeka hodnotia podľa jeho vzhľadu alebo predajňu podľa jej zovňajšku. Tento dojem sprevádza
návštevníka ako tieň po celom webe, ovplyvňuje jeho dôveru k obsahu, ponúkaným výrobkom a
službám. Podieľa sa na jeho rozhodnutí či nakúpi, využije ponúkané služby, prečíta si článok či
vykoná inú, nami cielenú činnosť.
Iba pútavý dizajn logicky sám o sebe bez obsahu vám výrobok či službu nepredá. Zato pútavý obsah
nemusí grafiku obsahovať, ale stále je na tom horšie ako v prípade spojenia kvalitnej grafiky a
kvalitného obsahu v jeden premyslený celok - taktu sa dosahuje najlepších výsledkov.
Rýchlo, rýchlo
Užívatelia majú radi prehľadné stránky a tiež ich radi rýchlo prechádzajú, aby v čo najkratšom čase
dosiahli svoj cieľ. Poznáte to sami pri hľadaní: zadávate otázku do prehliadača, kliknete myšou,
začne sa čosi načítať: 1% ... 2% .... vraciate sa späť, klopnete na ďalší odkaz, prechádzate stránku a
prečítate sem tam nadpis, zvýraznené slovo či prvú zarážku, a ak sa na nej nenachádza nič, čo by
vás zaujalo, vraciate sa späť. Alebo snáď starostlivo čakáte a následne prečítate autorom pripravený
úvodný text a každý odsek, na ktorý narazíte? Nečítajte, pretože viete že nemusíte čítať všetko stránky si len prezeráte a hľadáte to, pre čo ste ich navštívili.
Množstvo grafiky, ale aj textu na stránke by teda malo byť obmedzené s ohľadom na čo najmenší
dátový objem a prehľadnosť. Na webu si grafik nemôže dovoliť to, čo by si dovolil v časopisoch a
katalógoch, kde sú rozsiahle ilustrácie a fotografie, vytvárajúce celú stránku. Avšak aj tu sú určité
výnimky pre on-line portfólia grafických umelcov, animátorov a flasharov, alebo pre multimediálne
prezentácie automobilov, výrobkov a pod. Ale aj tu by sa návštevníkovi mala naskytnúť príležitosť
prejsť na rýchlu alternatívu stránok.
Veľkosť stránky vrátene grafiky, obsahu a ďalších súčasti by najlepšie nemala presahovať 40 kB,
avšak v dnešnej dobe, kedy konečne aj u nás vytáčané spojenie a ADSL zomiera u nastupuje optika
je všeobecne odporúčaná horná hranica 250 kB. Je si tiež dobré pripomenúť, že nezohľadňujeme len
návštevníkov (ľudí), ale aj dôležité indexovacie roboty vyhľadávačov
Zvyk je železná košeľa
Rovnako tak. ako ste zvyknutí, že hlavné reportáže novín sú s veľkým nadpisom na titulnej stránke,
alebo že zhluk číslic vedľa mena v telefónnom zozname bude pravdepodobne oným číslom, sú
užívatelia internetu všeobecné zvyknutí na určité rozmiestnenie základných prvkov stránky, ovládanie
a jednotný štýl fungovania vecí z webov, ktoré často navštevujú, a preto od ostatných webov
očakávajú to isté.
Návyky používateľov internetu sú pre nás veľmi dôležité, pretože na nich stojí základné vnímanie
stránky. Sú pre nás tiež veľmi užitočné, pretože ich môžeme jednoducho využiť. Ak ale mienite od
zabehnutých zvyklostí upustiť, musíte si to veľmi dobre premyslieť.
Na čo sú používatelia zvyknutí:
o
o
o
o
o
o
o
o
Logo viditeľne a dominantne umiestnené v ľavom hornom rohu stránky.
Navigačné menu umiestnené v hornej časti stránky horizontálne pod logom alebo vertikálne
po ľavej strane.
Vyhľadávanie je v hornej pravej časti stránky s tlačidlom označeným „Hľadať „
Tlačidlá, ktoré sa ako tlačidlá naozaj tvária.
Odkazy, ktoré sú podčiarknuté a farebne odlíšené od okolitého textu.
Zafarbenie navštíveného odkazu.
Označenie aktuálnej stránky, na ktorej sa užívateľ nachádza, v navigácii.
Kontaktné informácie alebo odkazy vedúce na tieto informácie na spodnej časti stránky.
Odstrašujúci príklad webu nedodržiavajúceho zvyklosti, patriaceho štátnej správe.
Elementy svojho webu odporujúce zvyklostiam odhalíte jednoducho, keď k počítaču posadíte svojich
rodičov či kamarátov a sledujete, ako sa na vašom webe chovajú.
Psychika používateľa
Psychika, reakcie a predpoklady muža a ženy nie sú identické, rovnako ako u stredoškoláka či
dôchodcu a tieto fakty je pri tvorbu kvalitného webu potrebné zohľadniť. Je teda žiaduce popremýšľať
nad cieľovou skupinou, teda ľuďmi, ktorých chceme na svoj web pritiahnuť a ktorí budú web používať
- a týmto ľuďom sa snažiť pri tvorbe webu čo najviac vyjsť v ústrety. Ak chceme z dizajnu vyťažiť
maximum, netvorme web pre priemerného návštevníka, ale pre
priemerného užívateľa cieľovej skupiny.
Skúste pri tvorbe webu premýšľať ako ľudia, ktorí budú váš web používať. Snažte sa na neho
pozerať z iného uhla pohľadu a celkovo sa vžiť do pozície používateľa - z tohto pohľadu je občas
oveľa jednoduchšie učiniť určité rozhodnutia.
Rozdiel medzi mužom a ženou
Muž je všeobecne zameraný na cieľ, .rád analyzuje, porovnáva a činnosti vykonáva systematicky a
logicky. Dobre sa vizuálne orientuje, koncentruje a nezaoberá sa detailami. Zato očakáva
naservírované informácie a takty. Zaujímajú ho tabuľky, grafy, koláče a rovnaké ako ženu aj fotky
a ilustrácie.
Žena je zameraná na vzťahy, má schopnosť vcítiť sa a rada sa riadi intuíciou a sádza na skúsenosti
detaily sú pre ňu dôležité. Očakáva priateľské a milé rozhrania s bohatou a peknou grafikou,
uprednostňuje jednoduchú cestu k informáciám.
Pokúste sa z cieľovej skupiny pre svoj web vytiahnuť zástupcu určitých záujmových oblastí a potom
prispôsobte členenie a obsah stránok tak, aby každému z nich ponúkali veci, ktoré môže hľadať
(napr. podnikateľ bude hľadal v on-line spravodajstve iné informácie než dôchodkyňa).
Účel a úlohy grafického dizajnu webu
Graficky dizajn nehrá na webe hlavnú úlohu, to ale neznamená, že jeho úloha je, na rozdiel od
hlavnej role obsahu, nedôležitá! Návštevník sa na webe najskôr rozhoduje podvedomo a až potom
racionálne - pri racionálnom uvažovaní hrájú hlavnú úlohu informácie, avšak návštevníka
podvedomie spočiatku ovplyvňujeme bez slov.
Účel grafiky na webe
o
o
o
o
o
o
o
o
Dizajn je doplnkom webu, nepreberá úlohu obsahu a taktiež sa medzi neho a
návštevníka nestavia
Dizajn vyjadruje účel a poslanie webu. Dizajn by teda návštevníkovi mal rýchlo odpovedať na
to, kde je, čo mu stránka ponúkne a čo je jej účelom.
Dizajn logicky člení informácie atraktívnou a prehľadnou formou - čiže snaží sa podávať
návštevníkovi informácie v čo najatraktívnejšej a najprehľadnejšej forme.
Dizajn podfarbuje návštevníkov podvedomý názor na web a zvyšuje jeho dôveru k obsahu
webu. Snaží sa, aby sa web čo najširšiemu spektru návštevníkov páčil, aby sa pri jeho
prechádzaní cítili dobre, boli pozitívne naladení a mali dôvod napr. pre nákup či ďalší návrat.
Dizajn uľahčuje orientáciu a pohyb používateľa po webe. Návštevník si je istý, čo predstavuje
navigácia, obsah či iné súčasti stránky, ktoré sú pre jeho pohyb po webe dôležité.
Dizajn sa vzhľadovo snaží vychádzať z vizuálnej identity firmy, ako je napríklad farebná
schéma a štýl firemného loga
Dizajn zvyšuje prístupnosť a použiteľnosť internetovej stránky nestavia návštevníkovi do cesty
akejkoľvek prekážky a celkovo mu uľahčuje pohyb po prezentácii.
Dizajn urobí web zapamätateľným, unikátnym, originálnym a kvalitným aby sa užívateľ späť
na web rád a bez problémov vracal.
Grafika na webe v praxi
Hlavný faktor, ktorý donúti návštevníka venovať sa stránke o niečo dlhšie je jej grafické
spracovanie. Pokiaľ sa návštevníkovi páčia pekne naservírované "informácie, začne
prechádzať očami po najvýraznejších elementoch stránky, ako je logo, navigácia, upútavky,
nadpisy, zvýraznené slová, zoznamy a pod. Ak ho zaujme to čo videl, začne po stránke rolovať a
pôjde na stránke viac do hĺbky. A pokiaľ je tu zohraný dobrý dizajn s kvalitným obsahom, začne
sa stránke so záujmom venovať. A práve to chceme.
Na rozdiel od tohto príkladu môže byť rola grafiky na webe významne nadradená obsahu. Skôr
než sa stačí načítať kvantum objemnej grafiky, často zaplavujúcej celé okno prehliadača, hektický
návštevník stránku opúšťa a hľadá inde. A ak predsa len stránku nezanevrie, pátranie po
hľadanom obsahu v záplave zle usporiadanej grafiky za krátky okamih vzdá. Navyše v tomto mori
zle nakomponovaných prvkov vzniká vizuálny chaos bez poriadku, logiky, použiteľnosti,
čitateľnosti a zreteľnej hierarchie dôležitosti.
Prístupnosť o uplatniteľnosť
Prístupné stránky celkovej rešpektujú používateľa – jeho technické vybavenie, fyzické
a psychické dispozície, vedomosti a vzdelanie. Stavba a obsah prístupných stránok ide teda čo
najviac v ústrety používateľom zastaraných prehliadačov, nevidiacich, farboslepých, dyslektikov
rovnako tak ako zdravému užívateľovi s moderným zázemím.
Použiteľné internetové stránky sú prehľadné, zrozumiteľné a hlavne ľahko ovládateľné.
Používateľ tieto stránky rýchlo pochopí, ľahko sa v nich orientuje a bez problémov ich používa.
Rozmery stránky
Pevné rozmery
Šírka webovej stránky je závislá na veľkosti okna v ktorom sa zobrazuje, a na rozlíšení
výstupného zariadenia, teda často monitora. Pätnásťpalcový monitor, ktorý zvládne maximálne
rozlišenie 800 na 600 (800 stĺpcov tvorených 600 pixelmi). momentálne nájdete u málokoho,
napriek tomu sa počet používateľov internetu s týmto rozlíšením pohybuje stále okolo 11%, kým
používateľov s príjemnejším rozlíšením 1024x768 je už okolo 60%. Zvyšných cca 29% už patrí
používateľom s vyšším rozlíšením. Aktuálne štatistiky nájdete v prehľadných tabuľkách na adrese
http://toplist.cz/global.html
Je mylné sa domnievať, že používatelia s rozlíšením napr. 1600x1200 sú ochudobnení o
nevyužitú plochu, ktorú tvorí stránka pre vyššie menované rozlíšenie optimalizovaná. Títo
užívatelia sú totiž na tento fakt už zvyknutí a majú často otvorené postranné lišty napríklad so
záložkami, čím okno nezabije celú plochu monitora.
Prečo je optimalizácia pre rozlíšenie 800x600 stále aktuálna:
o
o
o
Doposiaľ existuje 11% používateľov s týmto rozlíšením
Mnoho užívateľov surfuje s otvoreným postranným alebo
horizontálnym panelom, pretože sú zvyknutí na úzke 760
pixelové weby.
Úzke. dvojstĺpcové 760 pixelové weby sú príjemné na
oko a dobre sa v nich orientuje na rozdiel od tých širších
trojstĺpcových.
Pri tvorbe dizajnu webu je rozhodovanie o rozmeroch závislé od jeho typu účelu a obsahu. Tak či
onak, môžeme si vybrať, či chceme optimalizovať pre rozlíšenie 800x600. alebo pre rozlíšenia
1024x768. Avšak tieto rozmery predpokladajú, že okno prehliadača je maximalizované, čiže
roztiahnuté cez celú plochu obrazovky. Navyše musíme započítať aj okraje prehliadača a
pripočítať určitú rezervu:
o
o
Rozlíšenie 800 x 600: 770 x 400 pixelov zobraziteľnej plochy bez posuvníkov.
Rozlíšenie 1024 x 768: 1000 x 568 pixelov zobraziteľnej plochy bez posuvníkov.
Pokiaľ bude dizajn širší ako šírka zobraziteľnej plochy prehliadača, zobrazí sa neprípustný
horizontálny posuvník. Používatelia hľadajúci informácie tak musia naviac rolovať aj horizontálne
a po určitom čase mu dôjde trpezlivosť a odchádza. Avšak vertikálny posun nerobí nikomu vôbec
žiadne problémy, ľudia sú na neho, na rozdiel od horizontálneho, zvyknutí pár intuitívnych
otočenie kolieskom "myši im nerobí žiadne problémy, ak je však zrejme, že stránka nižšie ďalej
pokračuje.
Stránky sa mimo prezerania musia zmestiť na
list papiera, nehľadiac na to, že je neprípustné
tlačiť všetky prvky stránky spolu s ich farbami
pozadia, textu atď. Pre tlač sa určí len textová
variant záhlavia, obsahová časť a pätička –
všetko čierne na bielom. Tieto aspekty by sa
mali ošetriť v HTML aj v CSS.
Používanie príliš širokého vebu s fixným layoutom, ktorý
nie je optimalizovaný pre nižšie rozlíšenie, je vďaka
vzniknutému horizontálnemu posuvníku o mnoho
neprehľadnejšie, rovnako ako schopnosť návštevníka
zorientovať sa
Relatívne rozmery
Ďalšou možnosťou je tzv. gumený dizajn, čo je layotu
(rozloženie stránky) ktorého veľkosť určujú relatívnej jednotky,
a preto sa prispôsobuje veľkosti okna prehliadača. Toto
riešenie 'umožňuje webu rozprestrieť sa po celom okne
prehliadača pri akejkoľvek veľkosti tohto okna, teda pri
akomkoľvek rozlíšení.
Gumový layout má ale aj svoju veľkú nevýhodu, pre ktorú je
neobľúbený v radoch mnohých grafikov vrátane mňa. Určite
vás už napadlo, že v takomto layoute nemôže byť celá plocha
hlavičky a podobne široké prvky tvorené graficky, pretože by
sa nemohli rozťahovať a zmršťovať súčasnej so stránkou. Použitie layoutu s relatívnymi
rozmermi teda záleží na konkrétnom
prípade.
Bezpečná oblasť nad ohybom stránky
Bezpečná oblasť nad ohybom stránky je zobraziteľná oblasť bez rolovania, vymedzená oknom
prehliadača. Jedná sa o to prvé čo návštevník uvidí, a už len tento fakt vám určite objasnil, že
spomínanej oblasti musíme venoval najviac pozornosti. V hornej časti obrazovky by sa teda mala
nachádzať väčšina grafiky, položky a prvky s najvyššou prioritou a najvyššou hustotou odkazov,
ktorá sa pod ohybom (teda na ďalšej obrazovke) postupne znižuje, spolu s dôležitými položkami,
prvkami a grafikou.
Dôležité prvky stránky
Hlavička stránky
Záhlavie (hlavička) stránky je spolu s navigáciou najdôležitejším prvkom na stránke, ktorý by sa
mal snažiť o vysokú viditeľnosť ako prvok, ktorý stránku v podstate identifikuje a už z letmého
pohľadu návštevníkovi dáva jasne najavo, čoho sa server týka a čo na ňom nájdeme. Záhlavie
rovnako ako päta zjednocuje všetky stránky webu, podobne ako hlavičky a päty v dokumente.
Hlavička musí v prvom rade obsahovať názov webu či identitu prezentovanej firmy (alebo iný
prvok podobného významu v prípade, že nejde o firemný web) spolu s prípadnou sprievodnou
grafikou. Logo by malo byť umiestnené v ľavej hornej časti stránky, kde ho aj prevažná väčšina
užívateľov očakáva. Zároveň by tiež malo byť odkazom na titulnú stránku celého servera.
Vhodným doplnkom hlavičky je tiež pár slov charakterizujúcich obsah webu, napríklad kvalitný a
predovšetkým krátky slogan.
Navigácia
Rovnaké tak ako bežný človek nemôže používať počítač bez myši, nemôže
byt web s viac ako jednou stránkou bez navigácie. Navigácia hrá spolu s
hlavičkou úlohu najdôležitejšieho prvku na stránke - veď na čo by bol ten
najlepší obsah, keď sa k nemu prehryzie len vyvolený či šťastlivec ktorý
navigáciu našiel, pochopil a zvládol použiť. Obsah webu teda sprístupňuje
kvalitná navigácia - čím kvalitnejšia, tým rýchlejšie sa návštevník dostane k
tomu čo hľadá.
Teraz si povieme pár základných zásad, ktoré by navigácia mala bez výnimky
spĺňať:
o Navigácia sa nikdy nesmie pohnúť z miesta kde sa návštevníkovi prvýkrát zjavila - musí
byť vždy rovnaká a na rovnakom mieste.
o Navigácia vyzerá naozaj ako navigácia - odkazy má logicky štruktúrované, zvýraznené,
jednotne zafarbené a viditeľné.
o Navigácia je exhibicionista - rada sa ukazuje, je veľmi dobre rozoznateľná na prvý
pohľad a nikdy sa neschováva.
o Navigácia sa nachádza v hornej časti stránky - mala by byť viditeľná bez rolovania,
najlepšie teda umiestnená horizontálne pod hlavičkou alebo vertikálne po ľavej strane.
o Navigácia vždy obsahuje odkaz na úvodnú stránku aby návštevník, ktorý vo svojom
vyhľadávaní neuspeje, mohol začať znova.
o Navigácia používa zavedené alebo zjednodušené termíny, na ktoré sú používatelia
zvyknutí, vyhýbame sa teda odborným výrazom a nezvyklým slovným spojeniam.
o Navigácia logicky radí svoje položky - položky navigácie by mali byť radené podľa určitého
systému a logiky, ktorú potom najširšia skupina užívateľov bez problémov intuitívne
pochopí.
Ďalšou dôležitou poznámkou je objasnenie pojmu globálna navigácia čo je prehľadná navigácia
pozostávajúca z maximálne osem položiek (aj to už je veľa), ktorá je nadradenou navigáciou
celého webu. Obsahuje odkazy na základné sekcie webu (úvod. výrobky, informácie, cenník,
kontakty, ktoré sa následne v subnavigácii ďalej členia.
Subnavigácia (v rámci sekcie) môže byť skrytou súčasťou globálnej navigácie, ktorá sa potom
zobrazí, ale aj samostatne oddelená inde na stránke. Platia pre ňu ale stále rovnaké pravidlá ako
v bodoch vyššie.
Vyvarujte sa zrušenia odkazu na aktuálne zobrazenú stránku v akejkoľvek navigácii. Je síce
logické, že užívateľ nebude klepať na stránku, kde sa práve nachádza, ale je lepšie, keď klepne a
uvidí, že je to to isté, ako keď nebude môcť kliknúť a bude totálne zmätený.
Umiestnenie napravo
Navigácia umiestnená napravo je obľúbená a tak trochu aj obvyklá hlavne u weblogov majúcich
úzky layout, šírkou optimalizovaný pre 800x600. Ten umožňuje vložil navigáciu aj na pravú časť
stránky, kde nehrozí, že by sa schovala za okrajom zobraziteľnej plochy prehliadača a návštevník
za ňou musel rolovať (ak by sa o nej vôbec dozvedel). Umiestnenie navigácie napravo je teda
vhodné jediné u layoutov optimalizovaných pre rozlišenie 800x600.
Výhodou navigácia napravo je predovšetkým fakt. že Európan číta zľava doprava a pri
preskakovaní riadka v plynulom čítaní obsahu graficky odlíšená navigácia (pre svoju nutne
vysokú viditeľnosti) na ľavej strane ruší a sťažuje mu čítanie. Na rozdiel od toho menu
umiestnené napravo zvyšuje čitateľnosť obsahu a užívateľmi sa ľahko prechádza na ďalšie
riadky, pretože je zreteľný prechod z pozadia na obsahovú časť stránky. Tiež je tu navigácia
užívateľovi viac po ruke.
Len deti majú rady bludiská
Aktuálna pozícia na webe, kde sa užívateľ práve nachádza, by vždy mala byť jasne vyznačená, a
to v titulku, nadpise a najlepšie graficky alebo textovo priamo v navigácii tak, aby toto zvýraznenie
bolo jasné, logické a nezavádzajúce. Spomeňte si na elegantné riešenie šípky s textom „Tu sa
nachádzate" na kadejakej mapke parku či areálu - podobným výborným a často podceňovaným
pomocníkom zblúdilého návštevníka je tzv. „omrvinková navigácia“ (breadcrumb navigation)
(názov odvodený z rozprávky Janíčko a Marienka, kde si deti chodník domov označili
omrvinkami, aby spoľahlivo trafili), ktorá je veľmi dôležitou súčasťou a vlastne aj nutnosťou
rozsiahlejších serverov. Umiestňuje sa výlučne vertikálne nad obsah a je tvorená iba textovou
formou, a to najlepšie menším, ale zato kontrastným písmom (optimálne čierna na bielom).
Poslaním omrvinkovej navigácia, ako vás už dozaista napadlo, je zobrazenie kompletnej cesty od
úvodnej až k aktuálnej stránke, kde sa užívateľ práve nachádza, nasledujúcim spôsobom:
Nachádzate sa tu: Úvod > Výrobky > Drevené stoličky > Do kancelárie > Detail produktu
Takýto spôsob navigácie je známy aj z Windows Vista a Windows 7.
Všimnite si nasledujúceho:
o Na začiatku je hrubo čarovné slovné spojenie "nachádzate sa tu:", po ktorom nasleduje
cesta až k aktuálnej stránke.
o Jednotlivé názvy sekcií, zhodujúce sa s hlavným titulkom, sú oddelené znamienkom „>“.
o Každý názov sekcie, teda kúsok cesty, musí byť odkazom na súvisiacu stránku, inak
omrvinková navigácia stráca význam. Podľa vyššie uvedeného príkladu sa po kliknutí na
odkaz „Drevené stoličky“ dostávam na hlavnú / úvodnú stránku sekcie „Drevené stoličky“.
o Posledná položka je názov práve zobrazenej stránky a ako taký je zvýraznený hrubým
písmom - nie veľkým písmom či iným textovým alebo grafickým efektom z jednoduchého
dôvodu - nesmie suplovať pozíciu titulku stránky. Názov aktuálnej stránky taktiež už nie je
odkazom.
Ďalšími možnosťami, ako uľahčiť orientáciu na webe je napríklad použitie záložkového menu (čo je
pre návštevníka veľmi efektívna a inštinktívna záležitosť, farebného odlíšenia každej základnej
sekcie (kde je pre zvyšné prvky stránky s výnimkou hlavičky a päty použitá iná farebná paleta) či
umiestnenie jednoduchej kópie navigácie v rýdzo textovej forme na koniec stránky do päty, kde
používateľovi uľahčí navigáciu potom, čo dočíta obsah. Možností je tu viac a je nanajvýš rozumné
riadil sa heslom „Nič sa nemá preháňať „ ktoré na webe platí dvojnásobne.
Vyhľadávanie
Pole pre vyhľadávanie je ďalšou neoceniteľnou súčasťou každej väčšej stránky, pretože ponúka
návštevníkovi možnosť dostať sa čo najrýchlejšie k hľadaným informáciám. Z toho dôvodu musia byť
vyhľadávacie polia jasne viditeľné a návštevník ho nesmie dlho hľadať. Podľa zvyklostí by sa pole pre
vyhľadávanie malo nachádzať v hornej časti stránky, najlepšie zakomponované do hlavičky.
Pre jednoduché fulltextové vyhľadávanie je najvhodnejšie zadávacie pole a tlačidlo s nápisom Hľadať
v rovine vedľa neho, vďaka ktorému sa ani nemusí na vyhľadávacie pole poukazovať slovami
„Vyhľadávanie“, pretože túto funkciu zastane ono tlačidlo "Hľadať".
Písanie OK, alebo nahradenie tlačidla za šípku či iné znaky je mätúce. Návštevník musí potom
premýšľať, aký je vzťah tlačidla OK ku vstupnému poľu, či je šípka tlačidlom, alebo nie.
Obsahová časť
Obsah úvodnej stránky je ďalším miestom, kde zvádzame boj o
zaujatie návštevníka. Podobne ako obálky časopisov či výkladné
skrine. Textový obsah a grafické doplnky sú tu preto logicky a
atraktívne usporiadané a podávajú prehľad toho najlepšieho, čo daný
server ponúka. Mimochodom zaujímavý obsah je často dôvodom
vysokej návštevnosti stránok.
Text v obsahovej časti sa všeobecne snažíme udržať čitateľný
vysokým kontrastom farby textu s neagresívnou farbou
podkladu. Štruktúra textu by mala byť čo najjednoduchšia a o
prehľadnosť sa postaráme používaním tučného písma, kurzívy, farieb,
zoznamov, ikoniek a pod.
Vyvarujte sa nevkusného zarovnávanie odstavcov textu na stred alebo roztiahnutia textu zarovnaním
do bloku, ktoré medzi slovami a znakmi tvorí rôzne široké medzery.
Päta stránky
Zápätie stránky, alebo tiež pätička, je grafické ukončenie stránky na jej samotnom konci. Jej úlohou
je nielen stránku ukončiť, ale aj niesť určité informácie a odkazy, ktoré v nej návštevník často hľadá:
o
Copyright a právne dojednania,
o
Vek stránky,
o
Kontaktné informácie (alebo odkaz, na ne) na autora a správcu stránok,
o
Odkaz na vyhlásenie o prístupnosti,
o
Odkaz na RSS kanál,
o
Odkaz na tlač stránky,
o
Odkaz na mapu webu,
o
Odkaz na presunutie na hlavnú navigáciu (hore),
ak dĺžka stránky presahuje viac ako dve obrazovky.
Na zložitejších stránkach je vhodné do pätičky umiestniť aj textovú kópiu globálnej navigácie, jej
umiestnenie a vzhľad si však musíte dobre premyslieť, aby bol zmysel na prvý pohľad jasný. .
Vzhľad a kompozícia stránky
Rozmiestnenie prvkov stránky, alebo tiež vizuálna logika, je ten najdôležitejší aspekt, ktorý tvorí
dobrý dizajn. Aj nezručne vytvorená grafika, ktorá je skvele zakomponovaná plní svoj účel dobre.
Rozmiestnenie grafiky a textu na webovej stránke je dôležité pre zaujatie čitateľa a nasmerovanie
jeho pozornosti. Správna hierarchia prvkov i obsahu je tiež dôležitá, pretože je to určitá neviditeľná
ruka, ktorá vedie oči návštevníka stránkou.
Kvalitná kompozícia prvkov teda dokáže určiť prioritu informácií a rozlíšiť jednotlivé prvky
stránky, a tým v konečnom súčte dosiahnuť všeobecne vysokej kvality a použiteľnosti webu. Stránky
sú potom vizuálne zaujímavé a lahodia oku návštevníka, ktorý v nich bez problémov nachádza a
následné spracováva informácie. Dokážeme si potom jednoznačne odpovedať na otázky:
o
Kam sa nový návštevník pozrie najskôr ?
o
Sú prvky priťahujúce najväčšiu pozornosť naozaj pre návštevníka dôležité ?
o
Ponúka dizajn návštevníkovi všetko v správnom poradí ?
V jednoduchosti je sila
Profesionálna tvorba webu sa poslednú dobu uberá smerom k jednoduchému a minimalistickému
ponímaniu. Takýto web absentuje výplňové a nedôležité súčasti, súvisiace prvky či informácie zlučuje
a celkovo všetko čo najviac zjednodušuje. Stručne povedané - minimalisticky web vznikne orezaním
všetkého nepotrebného, nadbytočného a obťažujúceho- Avšak toto orezávanie nesmie nikdy ísť
na úkor úžitkovej hodnoty.
Minimalizmus, resp. čistý funkcionalizmus prináša pri tvorbe webu rad výhod:
o Lepšie zacielenie obsahu – je ho menej a návštevník venuje prvkom väčšiu pozornosť,
uvedomuje si obsah stránky a taktiež sa lepšie orientuje.
o Zrozumiteľný a osobnejší web - návštevníci si ho obľúbia a radi sa na neho vracajú, pretože
sa ľahko používa a vynakladajú malé úsilie, aby našli informácie
o Rýchlejšie načítanie stránok,
o Ľahšia a rýchlejšia tvorba webu. rovnako tak ako jeho následná údržba a úprava.
o Väčší priestor pre kreativitu dizajnéra.
Web tiež nesmie nútiť užívateľa premýšľať, ten musí konať intuitívne a inštinktívne a premýšľať len
nad obsahom. Preto všetko musí byt zrejmé a jasné doslova ako facka, pretože ľudia vďaka svojej
lenivosti inštinktívne vyhľadávajú jednoduchosť a pohodlnosť.
Nepísané pravidlá vizuálnej logiky
Kontrast - kontrast elementov umožňuje používateľom prísť na to, ktoré časti stránky patria do
určitého celku (napr. obsahu) a ktoré sú rozdielne (obsah vs. oblasť navigácie). Oddeľuje teda hlavné
prvky a oblasti stránky a celkovo graficky organizuje obsah. Jednotlivé prvky teda nesplývajú v jedno
veľké more nesúvisiacich vecí a vzťahov, ktoré neexistujú.
Opakovanie - opakovanie vizuálneho štýlu pre určité druhy elementov (odkazy, obrázky, odstavce,
tabuľky) dáva konzistentný vnem a užívateľovi dopomáha k orientácii v obsahu. Podáva tiež
informácie o prepojení a zdieľanom význame či funkcii.
Zarovnanie - jednotlivé časti obsahu stránky musia byť vizuálne pripojené k nejakému prvku. Všetky
súvisiace prvky by mali udržiavať jednotnú precíznu veľkosť odsadenie od okrajov a medzi
sebou. Avšak v niektorých prípadoch je dôležité dodržiavať aj určitú blízkosť - elementy, ktoré sú si v
základe podobné, by mali byť zoskupené pri sebe. Pokiaľ je napríklad navigácia tvorená veľkým
nápisom a pridruženým popisom, popis by mal byť k nadpisu tesne nalepený. Rovnako tak dátum
nie je odtrhnutý veľkou medzerou od titulku, ale blízko pod ním.
Kompozícia
Kompozícia - usporiadanie textu, grafiky, fotografií či architektúry vo vymedzenej ploche alebo
priestore. Určuje proporčné vzťahy jednotlivých prvkov tak, aby spolu vzájomne harmonizovali.
Optický stred je základné a storočiami praxe overený kompozičný poznatok. Ide o miesto, kde
najskôr spočinie oko pozorovateľa. Text alebo prvok v tejto oblasti pôsobí výrazne a vyrovnane,
pretože tvar položený do optického stredu sa opticky javí ako vzdušný a nepriťahovaný okrajmi
stránky, na rozdiel od geometrického stredu. Ľudia s ním často pracujú, bez toho aby si to
uvedomovali, pretože sa pri komponovaní riadia citom. A tí, kto sa ním neriadia, neznalo komponujú
do geometrického stredu.
Ako optický stred funguje a ako sa konštruuje, nám ukazuje obrázok. Na ňom sa nachádzajú tri
stĺpce: V prvom sú využité poznatky o optickom strede, v druhom nie a v treťom je zobrazená
konštrukcia optického stredu. V hornom rade sa nachádza obdĺžnik o pomere strán 1:414 (papier
A4), v spodnej obdĺžnik o pomere strán 4:3 (obrazovka). Modrý bod na obdĺžniku o rozmeroch
obrazovky nám zároveň ukazuje miesto, kde spočinie používateľov zrak na prvý pohľad, na rozdiel
od červeno vyznačeného geometrického stredu.
Umiestnenie textu v ploche
Všeobecne platí základné stručné pravidlo, ktorým dosiahneme príjemného vizuálneho účinku:
Vzdialenosť textu od okrajov rámčeka, farebnej plochy a pod. by mala bol vždy väčšia ako medzera
medzi slovami alebo riadkami (riadkový preklad).
Prázdne miesto
Prázdne miesto alebo "white space" by som s miernou opatrnosťou mohol označiť za grafický prvok,
pretože je nevyhnutnou súčasťou akéhokoľvek grafického návrhu. Zohráva tiež spolu s kontrastom a
voľbou farieb jednu z najdôležitejších úloh pre sprehľadnenie internetovej stránky. Na mysli mám
nielen kompozíciu textu, ako ukazuje predchádzajúci obrázok, ale aj odsadenie prvkov, nadpisov a
podobných elementov od seba a od okrajov prvkov, v ktorých sú obsiahnuté. Prázdne miesta totiž
sprehľadňujú stránku a nerobia z nej jedno veľké splývajúce more textu a grafiky.
Ešte než začneme tvoriť dizajn
Stanovenie cieľov stránok
Na samotnom začiatku všetkého si musíme do detailu stanoviť základné ciele stránok, teda ich účel,
čo od nich očakávame a čo majú ponúkať návštevníkovi. Rovnako tak ako veľké korporácie, ktoré
každý svoj krok dopredu premýšľajú, aby nestúpil vedľa, či architekti, ktorí sa najskôr zoznámia s
účelom každej stavby a následne venujú čas príprave vizualizácie modelov, musíme aj my venovať
pred začiatkom tvorby dostatok času plánovaniu dôležitého základu, na ktorom budeme ďalej stavať.
Obsah a jeho štruktúra
V druhom kroku je na rade popremýšľať nad budúcim obsahom celého webu a jeho štruktúrou. Je
teda potrebné určiť, čo stránka bude obsahovať a ako tento obsah bude rozdelený do sekcií a
podsekcií. Toto delenie je najlepšie následne graficky rozkresliť formou schematického diagramu vznikne nám teda určitý prehľad vo forme pavučiny, ktorá obsahuje všetky stránky webu v určitej
hierarchii, určujúci nadradenosť a podradenosť každej z nich. Tento krok je dôležitý pre tvorbu
navigácie a určitý predbežný prehľad toho ako veľmi budú stránky rozsiahle, pretože tento fakt je pre
konečnú tvorbu dizajnu tiež dôležitý.
Ďalším najvhodnejším krokom je určitá predbežná príprava všetkých prvkov ešte pred samotným
dizajnom. Aj keď je to pre nás možno nezvyčajné, predídeme tomu, aby nakoniec bolo textu na
vytvorený dizajn veľa alebo málo.
Náčrt rozvrhnutia prvkov webu
Tretím krokom bude základný náčrt rozmiestnenie všetkých
prvkov a súčastí stránky - ceruzkou na papier, či v
grafickom editore od ruky rozmiestňujeme jednotlivé
štvorčeky s popisom, predstavujúce špecifické prvky
(hlavička, navigácia, vyhľadávanie, stĺpce, reklamné
bannery a pod.) Dôkladne premýšľame a hľadáme
najvhodnejšie a najlogickejšie rozmiestnenie všetkých
prvkov stránky podľa účelu webu, podľa našich potrieb a
potrieb cieľovej skupiny - neberieme tu teda zatiaľ ohľady
na detaily dizajnu.
Tvorbu náčrtku pre rozloženie prvkov webu, ako aj pre
samotný dizajn nám značné uľahčia informácie o potrebách
webovej stránky a znalosť jej štruktúry a obsahu, získané z
minulých krokov.
Samotná tvorba
Teraz sa dostávame do tej najdôležitejšej časti - k samotnej tvorbe dizajnu webu. Z predchádzajúcich
krokov sme dokonale informovaní o poslaní budúcich stránok, o ich predpokladanom či ešte lepšie
presnom obsahu a štruktúre, a tiež sme vybavení náčrtom rozvrhnutia jednotlivých prvkov, ktorí sme
rozoberali aspoň s jedným človekom. Sme teda pripravení začať pracovať na finálnom dizajne máme tri možnosti, ako ďalej postupovať:
o možnosť A: náčrt dizajnu vopred,
o možnosť B: priamo vo Photoshope,
o možnosť C: fotografiu na mieru.
U všetkých postupov nesmieme zabúdať na dôležitú úlohu loga. Pokiaľ logo pre web už máme.
musíme mu web prispôsobiť na mieru – dobre ho do webu zakomponovať a zvoliť stránke farby,
ktoré s ním budú ladiť.
Možnosť A: náčrt dizajnu vopred
Na samotnom začiatku začíname v kľudnej miestnosti s obyčajnou ceruzkou, dostatkom čistých
papierov A4 alebo ešte lepšie A3 a hlavne zapnutou fantáziou. Podľa vopred vytvoreného náčrtku
rozloženia jednotlivých prvkov už na papier detailne poziciujeme jednotlivé prvky stránky, vhodne
vypĺňame položky navigácie podľa schémy štruktúry stránky a podľa našej mienky tvoríme
a komponujeme nadpisy, slogany, logá, vyhľadávanie a potom i detaily grafického
dizajnu. Začíname načŕtať dizajn tak, ako by sme ho potom radi videli v skutočnosti. Môžeme tiež
vytvoriť niekoľko rôznych verzií a vziať z nich do tej finálnej to najlepšie. Výhodou tohto postupu je to,
že si všetko môžeme v pokoji rozkresliť a pripraviť a vďaka lomu premýšľať nad mnohými možnými
riešeniami určitej veci a vybrať z nich tú najvhodnejšiu.
Z predbežného náčrtu dizajnu môžeme posudzovať jeho funkčnosť a logiku. Tiež ho môžeme
jednoducho posúdiť s ďalšími ľuďmi, či je pre nich zrozumiteľný a ponúka im to, čo by na ňom hľadali.
Potom je zapracovanie úprav ceruzkou rýchlejšie ako prerábanie už zhotoveného dizajnu.
Možnosť B: priamo vo Photoshope
Tento typ procesu už nevyžaduje kresliarske schopnosti, s náčrtom rozvrhnutia prvku dizajnu
sadáme priamo k Photoshopu. Do určitej obmedzenej plochy, ktorá závisí od typu webu a rozlíšení
pre optimalizáciu, začneme precízne zasadzovať jednotlivé prvky stránky, tak ako ich máme na
papieri. Potom doplníme logo, nadpisy, ďalšie popisky a začneme jednotlivé boxíky štylizovať,
upravovať a pracovať s nimi, kým nemáme výsledný dizajn. Tento prístup je najvhodnejší, ak
tvoríme čistý dizajn podľa precíznej mriežky, pretože sa cely proces odohráva priamo vo
Photoshope.
Komfmzici prvkov priamo vo Photoshope občas uľahčuje sádzanie do pripravenej mriežky s
prípadnými individuálnymi rozmermi bunky napríklad v kúzelnom pomere 1:1,414 (proporcie papiera
A4) alebo známom 1:0,618 (zlatý rez), ktorý zaručí prekvapivo kvalitnú kompozíciu.
Možnosť C: fotografia na mieru
Tento druh postupu je už menej obvyklý. Vhodný je vtedy, keď máme pre dizajn webu po ruke
profesionálne a naozaj vysoko kvalitné fotografie, ktoré hovoria samé za seba. - Dizajn potom
vytvárame na mieru fotografie, ktorá napr. tvorí základ prezentácie - použité farby volíme lak, aby
ladili s fotografiou, rovnako tak ako zvolená kompozícia či štýl.
Výber a psychológia farieb
Je všeobecné známe, že farby majú určité psychologické účinky - čím viac je človek citovo založený,
tým je účinok silnejší. Faktom je, že extravertní ľudia dávajú prednosť teplým farbám, ako sú žltá a
červená, zatiaľ čo introvertom lepšie sedia studené farby - ako je zelená a modrá. Pri tvorbe webu je
preto dôležité si uvedomiť, že voľba farebnosti má zásadný vplyv na vnímanie stránky.
farba
biela
žltá
viditeľnosť
/ pútavosť
vysoká / nízka
vysoká / vysoká
obľúbenosť
muž / žena
nízka / nízka
nízka / nízka
ružová
oranžová
červená
nízka / nízka
vysoká / vysoká
vysoká / vysoká
nízka / vysoká
nízka / nízka
vysoká /
vysoká
svetlozelená
vysoká / vysoká
vysoká /
vysoká
tmavozelená
nízka / nízka
nízka / nízka
svetlomodrá
vysoká / vysoká
vysoká /
vysoká
tmavomodrá
nízka / nízka
vysoká / nízka
asociácia
čistota, nevinnosť
povzbudzovanie, upozornenie,
vnáša šťastie a veselosť
ženskosť, zraniteľnosť, kľud, neha
zdravie, slávnostnosť, radosť
vzrušenie, energia, varovanie,
prudkosť, predstava krvi,
nebezpečenstvo, láska, agresia,
milosť, neha
prirodzenosť, príroda, čerstvosť,
novota, plodnosť, vlhko, ticho,
rastlina
kľud, ochrana, obmedzenie,
chlad, bezpečie, nádej
prívetivosť, vzdušnosť, obloha,
vzduch, ticho, túžba, myšlienky,
inteligencia
kľud, vyváženosť, vodca, diaľky,
hnedá
nízka / nízka
vysoká /
vysoká
šedá
nízka / nízka
vysoká / nízka
čierna
nízka / nízka
vysoká / nízka
hĺbka, rozjímanie, smútok, biznis
solídnosť, vážnosť, triezvosť,
istota, poriadok, domov, morálne
hodnoty, zem
smútok, nečistota, chudoba,
netýkavosť
bohatstvo, citlivosť, smrť, zlo,
tajomstvo, vzdor, ničota
Našim cieľom teda je, aby sme určitou zvolenou farebnou schémou dosiahli požadovaný dojem, ladili
dizajn s obsahom a zameraním stránok a podfarbili pocity, či zvýraznili emócie návštevníka. Teplé
farby sa všeobecne používajú pre zdôraznenie a studené farby ku zmenšeniu dôrazu. Svetlejšie
farby v kontraste s tmavšími zaujmú náš zrak ako prvné.
Výber farieb by sa nemal preháňať – maximálne 5 farieb + ich ľahké odtiene.
Keďže 15% ľudí má určitú vadu zraku, je potrebné pri voľbe farieb brať ohľady aj na túto nie
zanedbateľnú časť populácie, ktorá vníma určité farby inak ako ľudia s normálnym videním. Overiť si,
ako vami vybrané farby uvidia ľudia s určitou očnou chorobou, môžete na generátore farebných
schém na adrese http://wellstyled.com/tools/colorscheme2/ (rozbaľovacie menu vpravo dole).
Všeobecne by sme sa mali vyhýbať nasledujúcim farebným spojeniam:
o
o
o
o
o
oranžová / žltá,
červená / oranžová,
zelená / žltá,
fialová / modrá,
zelená alebo žltozelená / fialová.
Niekoľko rád záverom
o
o
o
o
o
o
Ponúkajte vytvorené dizajny skúsenejším kolegom, aby ste získali spätnú väzbu. Mnohých ľudí
dokáže ich kritika a rady dohnať k podstatne lepšej práci.
Prakticky testujte použiteľnosť svojich stránok. Testovanie použiteľnosti zvyčajne prebieha tak, že
jeden alebo viac ľudí podobných cieľovej skupine, pre ktorú bude web určený, je posadených pred
počítač s otvorenom webom a majú za úlohu vykonať na vašich stránkach určitú činnosť (objednať
dovolenku, zistiť informácie). Na vás je potom skúmať, ako si pri plnení úlohy počínajú. Niekedy
zistíte, že veci, ktoré vám boli zrejmé, pre iných zrejmé nie sú. Po oprave hlavných nedostatkov je
vhodné ďalšie testovanie, aby ste potvrdili, že ste ich opravili správne.
Nenechajte sa znechutiť. Neexistuje dokonalý výrobok, ktorý by sa páčil všetkým. Rovnako tak
neexistuje dokonalá stránka, ktorá by sa páčila a vyhovovala každému - to je v po riadku, ale
občas sa nájdu vyložene extrémisti, ktorí vašu prácu vehementne odsudzujú, aj keď zvyšný dav
má opačný názor. Nenechajte sa teda subjektívnym názorom jedného jedinca ovplyvňovať.
Dizajn sa ľahko (a často) kopíruje. Všeobecne platí pravidlo, že čím je dizajn kvalitnejší, tým viac
sa kopíruje. Mnohokrát sa stalo, že niektorí ľudia sa nepozastavovali nad tým, že skopírujú cely
web vrátane grafiky a kódu.
Reklamu používajte s mierou. Určite poznáte niektoré weby od hlavy až po päty prepletené
reklamou vo forme rôzne veľkých bannerov, tlačítok, odkazov, pruhov a pod. Reklama používateľa
na webe nesmiernej obťažuje a neprináša mu nič nového. Výsledkom bude úbytok návštevníkov a
tým pádom aj pokles dopytu po reklame na vašom serveri.
Sledujte trendy. Aj webdizajnu sa týkajú módne trendy, kedy sa s obľubou tvoria stránky určitým
podobným štýlom. Predtým to boli rámčeky, čiary, pruhy a pohyblivé gify. Dnes sú to efekty,
prechody, tiene, veľké tlačidlá, veľké plochy miesta, minimalizmus a flash. Z týchto trendov môžete
všeličo pochytiť a aplikovať to na vlastnú experimentálnu tvorbu.
Download

Webdizajn teoreticky, pdf