Manuál na tvorbu webových stránok a aplikácií

Manuál na tvorbu webových stránok a aplikácií, je dokument určený na zjednotenie dizajnu používateľských rozhraní a štandardizáciu komunikácie so používateľom pri poskytovaní digitálnych služieb.

Štandardy

Základné štýly vizuálnej identity určené na zabezpečenie jednotného a funkčne efektívneho dizajnu elektronických služieb a webových rozhraní.
 Menu / Breakpoints / padding
Menu / Breakpoints / padding

Zalamovanie menu / paddingy

Zobraziť
 Pozície – Snackbary, Cookies lišta, Alerty, Chat-buble
Pozície – Snackbary, Cookies lišta, Alerty, Chat-buble

Pravidlá pre zobrazovanie Snackbary, Cookies lišta, Alerty, Chat-buble

Zobraziť
 Modaly a spodné sheets
Modaly a spodné sheets

Popis správania modalov a spodných sheets

Zobraziť
 Scrollovanie klávesnicou
Scrollovanie klávesnicou

Zásady scrollovania pri práci s klávesnicou

Zobraziť
 Farby a tiene
Farby a tiene

Základné farby určujú vizuálny charakter webu a podporujú konzistentnosť, rozpoznateľnosť a estetickú harmóniu digitálneho prostredia.

Zobraziť
 Typografia
Typografia

Pravidlá pre použitie textových prvkov, typov a veľkostí písma.

Zobraziť
 Ikony – Produkty
Ikony – Produkty

Ikony pre rôzne typy poistenia

Zobraziť

Komponenty

Základné prvky používateľského rozhrania predstavujú opakovane využiteľné komponenty, ktorých cieľom je zabezpečiť jednotný vizuálny štýl a konzistentnú funkčnosť webových stránok a aplikácií.
 Stránkovanie
Stránkovanie

Stránkovanie (pagination) je technika rozdelenia veľkého množstva obsahu do viacerých častí alebo stránok, ktoré sa načítavajú postupne. Umožňuje efektívnejšie zobrazovanie dát a zlepšuje používateľskú skúsenosť na webe.

Zobraziť
 Spätná väzba
Spätná väzba

Koponenty spätnej väzby

Zobraziť
 Stepper – circle
Stepper – circle

Stepper komponent sa používa na zobrazenie aktuálnej pozície v procese vypĺňania formulára. Umožňuje používateľovi vidieť, v ktorom kroku sa nachádza a koľko krokov mu ešte zostáva na kompletné vyplnenie.

Zobraziť
 Stepper – vertical
Stepper – vertical

Stepper komponent sa používa na zobrazenie aktuálnej pozície v procese vypĺňania formulára. Umožňuje používateľovi vidieť, v ktorom kroku sa nachádza a koľko krokov mu ešte zostáva na kompletné vyplnenie.

Zobraziť
 Loaders
Loaders
Zobraziť
 Accordion
Accordion

Accordion sa používa na organizovanie a zobrazovanie väčšieho množstva obsahu spôsobom, ktorý je pre používateľa prehľadný a interaktívny.

Zobraziť
 Tabuľky
Tabuľky
Zobraziť
 Karty poistenia
Karty poistenia

Možnosti zobrazenia karty poistenia

Zobraziť
 Datepicker
Datepicker

Datepicker (výber dátumu) je používateľské rozhranie alebo ovládací prvok, ktorý umožňuje používateľovi jednoducho a presne zvoliť dátum z kalendára namiesto manuálneho zadávania. Používa sa najmä vo formulároch, aplikáciách a webových stránkach, kde je potrebné zadať dátum (napr. dátum narodenia, rezervácie, termíny stretnutí a pod.).

Zobraziť
 Avatar
Avatar

Avatar (profilová fotka) je vizuálne zobrazenie používateľa na webe, často vo forme fotografie alebo ikony. Slúži na identifikáciu a personalizáciu používateľského profilu v online prostredí.

Zobraziť
 Input – Text
Input – Text

Vytvára jednoriadkové textové pole pre zadávanie textu od používateľa. Používa sa napríklad na zadanie mena, e-mailu alebo iného textového údaju.

Zobraziť
 Input – Password
Input – Password

Vytvára jednoriadkové textové pole pre zadávanie textu od používateľa. Používa sa napríklad na zadanie mena, e-mailu alebo iného textového údaju.

Zobraziť
 Stepper – Heslo
Stepper – Heslo

Vizuálne a textovo zobrazuje silu zvoleného hesla.

Zobraziť
 Input – SMS kód
Input – SMS kód

Pole na vloženie SMS kódu

Zobraziť
 Input – Search field
Input – Search field

Vytvára jednoriadkové textové pole pre zadávanie textu od používateľa. Používa sa napríklad na zadanie mena, e-mailu alebo iného textového údaju.

Zobraziť
 Input – Search – Menu
Input – Search – Menu

Komponent pre fulltextové vyhľadávanie na stránke

Zobraziť
 Select – multiselect
Select – multiselect

Komponent Select vo formulári slúži na výber jednej alebo viacerých možností zo zoznamu preddefinovaných hodnôt. Umožňuje efektívne zobraziť veľký počet volieb bez zahltenia formulára.

Zobraziť
 Select
Select

Komponent Select vo formulári slúži na výber jednej alebo viacerých možností zo zoznamu preddefinovaných hodnôt. Umožňuje efektívne zobraziť veľký počet volieb bez zahltenia formulára.

Zobraziť
 Radio button
Radio button

Radio button je ovládací prvok formulára, ktorý umožňuje používateľovi vybrať len jednu možnosť zo skupiny preddefinovaných volieb. Po výbere jednej možnosti sa predchádzajúci výber automaticky zruší.

Zobraziť
 Checkbox
Checkbox

Checkbox je formulárový prvok, ktorý umožňuje používateľovi vybrať jednu alebo viacero možností. Zaškrtávacie políčko môže byť zapnuté (zaškrtnuté) alebo vypnuté.

Zobraziť
 Switch
Switch

UI komponent switch sa na stránkach používa na prepínanie medzi dvoma stavmi, najčastejšie „zapnuté“ a „vypnuté“. Slúži ako vizuálne intuitívny ovládací prvok pre nastavenia alebo funkcie, ktoré používateľ môže jednoducho aktivovať alebo deaktivovať.

Zobraziť
 Tab – category
Tab – category

Komponent Category Tab na webových stránkach slúži na organizáciu obsahu / kategórií do prehľadných sekcií, medzi ktorými môže používateľ prepínať. Umožňuje zobraziť viacero súvisiacich informácií na jednom mieste bez potreby načítavania novej stránky. Zvyšuje používateľský komfort a šetrí priestor na obrazovke.

Zobraziť
 Tab – group
Tab – group

Komponent Tab na webových stránkach slúži na organizáciu obsahu do prehľadných sekcií, medzi ktorými môže používateľ prepínať. Umožňuje zobraziť viacero súvisiacich informácií na jednom mieste bez potreby načítavania novej stránky. Zvyšuje používateľský komfort a šetrí priestor na obrazovke.

Zobraziť
 Tab – single
Tab – single

Komponent Tab na webových stránkach slúži na organizáciu obsahu do prehľadných sekcií, medzi ktorými môže používateľ prepínať. Umožňuje zobraziť viacero súvisiacich informácií na jednom mieste bez potreby načítavania novej stránky. Zvyšuje používateľský komfort a šetrí priestor na obrazovke.

Zobraziť
 Tlačidlo Button-primary
Tlačidlo Button-primary

Button predstavuje hlavné akčné prvky, ktoré vykonajú používateľskú interakciu.

Zobraziť
 Tlačidlo Button-secondary
Tlačidlo Button-secondary

Button predstavuje hlavné akčné prvky, ktoré vykonajú používateľskú interakciu.

Zobraziť
 Tlačidlo Button-black
Tlačidlo Button-black

Button predstavuje hlavné akčné prvky, ktoré vykonajú používateľskú interakciu.

Zobraziť
 Tlačidlo Button-black-border
Tlačidlo Button-black-border

Button predstavuje hlavné akčné prvky, ktoré vykonajú používateľskú interakciu.

Zobraziť
 Tlačidlo Icon – Button
Tlačidlo Icon – Button

Button predstavuje hlavné akčné prvky, ktoré vykonajú používateľskú interakciu.

Zobraziť
 Tlačidlo Button-gray-border
Tlačidlo Button-gray-border

Button predstavuje hlavné akčné prvky, ktoré vykonajú používateľskú interakciu.

Zobraziť
 Tlačidlo Button-arrow
Tlačidlo Button-arrow

Button predstavuje hlavné akčné prvky, ktoré vykonajú používateľskú interakciu.

Zobraziť
 Tlačidlo Button-white
Tlačidlo Button-white

Button predstavuje hlavné akčné prvky, ktoré vykonajú používateľskú interakciu.

Zobraziť
 Karta – Article box
Karta – Article box

Náhľad článku s fotografiou a nadpisom, po kliknutí smeruje na detail článku

Zobraziť
 Link
Link

Používa na vytváranie hypertextových odkazov, ktoré umožňujú používateľom prekliknúť sa na inú stránku alebo časť obsahu.

Zobraziť
 Tooltip / Bubliny
Tooltip / Bubliny

Tooltip sa na stránkach používa na zobrazenie doplňujúcich informácií, keď používateľ podrží kurzor nad prvkom. Pomáha objasniť funkciu alebo význam bez toho, aby zaberal miesto na stránke.

Zobraziť
 Messages
Messages

Messages ako warnings, success a attention sa používajú na informovanie používateľa o výsledku jeho akcie alebo dôležitom stave systému. Pomáhajú zvýšiť prehľadnosť a zlepšujú používateľský zážitok tým, že poskytujú okamžitú spätnú väzbu.

Zobraziť