UI alebo User Interface – teda používateľské rozhranie, je pojem, ktorý zahŕňa vizuálny obsah webstránky a jej prvky – ako jednotlivé podstránky, screeny, ale aj tlačidlá či použité farby. Práve všetky tieto prvky a ich súčinnosť na webe nám nemajú používanie sťažovať, ale naopak uľahčovať. Preto si v tomto článku ukážeme ako ich aplikovať na webové stránky, aby jednotlivé elementy, ale aj web ako celok, zjednodušili užívateľovi využívanie a aby bol daný web prehľadný a ľahko navigovateľný.
 
Ako prvé zo základných vecí, ktorých sa musíme pri tvorbe webu držať, je jeho vizuálny dizajn. Vizuálny dizajn musí ladiť s korporátnou identitou klienta, pre ktorého web navrhujeme. To v praxi znamená, že ak logo nášho klienta pozostáva z 2 farieb (napr. modrá a zelená), tak do takých farieb, prípadne podobných farieb budeme ladiť celý web. Vizuálny dizajn sa týka takisto farieb, fontov, štýlu komunikácie, layoutu stránky…

FARBA

Farby sú prvky, ktoré si všimneme už pri prvom pohľade na web, práve preto je dôležité klásť dôraz na ich správny výber. Niektoré farby sú napríklad charakteristické pre určité obdobie. Príklad: ak vytvárame web na nejaký produkt, ktorý je spätý s Vianocami, tak by sme mali vyberať farby také, ktoré sú charakteristické pre Vianoce (modrá, biela, prípadne zelená a červená farba). Klient by asi nebol spokojný, ak by na webe na ktorom predáva vianočné oblečenie, boli použité žlté a oranžové farby :-). Farby tiež môžu ovplyvňovať rozhodnutie zákazníka, či si náš produkt na webe kúpi alebo nie. Najčastejšia a najodporúčanejšia farba na Call-to-Action tlačidlo je zelená. Naopak červená farba predstavuje pre človeka hrozbu a preto sa väčšinou pri Call-to-Action prvkoch nevyužíva – skôr naopak – využíva sa napríklad pri tlačidlách na zrušenie akcie alebo odhlásenia.

V tomto zozname sa dajú nájsť zaujímavé stránky, kde si môžeme hľadať a kombinovať farby podľa vlastného vkusu:

• Hailpixel
• ColorHunt
• Coolors

FONT

Je veľmi dôležité akú typografiu na webe použijeme. Najlepšie čitateľné fonty pre weby sú samozrejme bezpätkové (Sans-Serif), pretože neobsahujú žiadne špeciálne ozdobné prvky a zaoblenia na konci písmen. Kedysi sa typografia vždy odvíjala od typu loga. Ak daný web mal logo, ktoré malo ostré hrany, tak sa podľa toho takisto vyberal font, ktorý mal tiež ostré hrany, čiže bezpätkový. Dnes už nie je problém kombinovať font, ktorý je pätkový alebo kaligrafický (Handwritten) s bezpätkovým.

Nižšie je zoznam stránok. kde môžeme nájsť naozaj pekné fonty:

• Behance
• 1001 Fonts
• Google Fonts
• Font Squirrel
• Creative Market
• Dafont
• Font Space

HLAVIČKA

Každá hlavička (header) by mala byť prehľadná – z dizajnového hľadiska nie je dobré dávať do hlavičiek príliš veľa údajov. Jednoduchá hlavička by mala obsahovať logo, ktoré bude mať okolo seba dostatočne veľký priestor na to, aby vynikalo. Vo väčšine prípadov logo umiestňujeme v ľavej časti hlavičky, ale na mnoho weboch môžeme vidieť logo zarovnané aj na stred. Takisto sa môžeme stretnúť aj s logom zarovnaným vpravo, ale to je skôr výnimočný prípad. Pre ľudské oko je prirodzenejšie keď vidí logo/názov stránky v ľavej časti. V protiľahlej časti sa umiestňujeme menu. Ak klient chce mať v hlavičke aj iné informačné údaje, napr. tel. číslo, e-mail atď., tak sa musíme posnažiť ho umiestniť tak, aby nám príliš nerozbíjalo kompozíciu. Tiež by malo byť menej výrazné ako logo a menu.

TELO

Telo (body) je hlavnou a najdôležitejšou časťou stránky. Malo by teda byť najkreatívnejšie, to znamená, že by sme jej mali venovať najväčšiu pozornosť pri tvorbe. Mali by sme v prvom rade myslieť na ľudí, ktorí budú stránku používať a držať sa základných pravidiel. Napr. text by mal byť v každom prípade dobre čitateľný, to znamená nedávať text takou farbou aby bola znemožnená jeho čitateľnosť na danom pozadí. Tiež je dobré na stránke striedať rôzne podklady pozadia v 2 rôznych častiach po sebe idúcich. Ak máme napr. časť „naše služby“ na bielom pozadí a pod tým nasleduje claim s CTA tlačidlom tak je fajn už túto druhú časť výraznejšie odlíšiť od tej prvej ako napr. farbou pozadia. Týchto možností ako odlíšiť dané časti webu je neúrekom a záleží len na našej kreativite.

PÄTIČKA

Pätka sa nachádza na spodku stránky a väčšinou býva graficky oddelená. Umiestňujeme do nej podstránky, ktoré sú menej dôležité, ale aj také ako napr. obchodné podmienky, GDPR, prihlásenie sa na odber newslettru, prípadne aj mapku. Pätičku by sme mali navrhovať vo veľmi jednoduchom a prehľadnom layoute aby to nepôsobilo chaoticky a človek tam našiel to čo potrebuje.

TLAČIDLÁ

Tlačidlá alebo buttony nám slúžia na presmerovanie na inú časť webu alebo iné webové stránky. Preto by tieto prvky mali byť výrazné. Ich výraznosť môžeme dosiahnuť rôznymi spôsobmi, ako veľkosť, farba, typ písma v tlačidle, prípadne jeho efekt pri prechádzaní myšou. Takisto tlačidlá by mali mať svoju vizuálnu identitu, to znamená dodržiavať ich vizuálny štýl po celom webe.

Takže v tomto článku sme si zrhnuli základné body, ktorých sa držať pri tvorbe pekného a user-friendly dizajnu webstránok. Veríme, že vám tento článok pomohol, ale ak si neviete rady, obráťte sa na nás v ptagroup 🙂