Otvorené dnes do 22:00 Kuchyňa do 21:00

+421 948 469 044

Otvorené dnes do 22:00 Kuchyňa do 21:00

+421 948 469 044

Otvorené, dnes do 22:00

Reštaurácia: +421 948 469 044

Budča 715, 962 33 Budča

Zavolať Navigovať

Dizajn manuál: komponenty

Druhá časť manuálu: tlačidlá, karty, čipy, formuláre, ikony a fotografie a pravidlá pohybu, prístupnosti a textov. Základy sú v prvej časti.

Tlačidlá

Tlačidlo je odkaz alebo tlačidlo formulára v jednej zo siedmich farebností. Zaoblenie má 10 px a jeho slová sú vždy na jednom riadku. Veľkosť mu dáva miesto, kde stojí.

Hlavné tlačidlo návrhu

Výška
52 px
Vodorovne
20 px
Písmo
label-lg, 16 px tučné
Zaoblenie
10 px
Ikona
20 px, 8 px od slov

Farebnosti

Tokeny podkladu a slov

Hlavné
--color-primary-button--color-on-primary
Obrysové
--color-surface-container-lowest--color-on-surface
Tónové
--color-surface-container-high--color-on-surface
Jemné
--color-surface-container--color-on-surface
Medové
--color-tertiary--color-on-tertiary
Hlavné na tmavom
--color-primary-button--color-inverse-on-surface
Na tmavom
--color-dark-surface-container-high--color-inverse-on-surface

Pravidlá

  • Na telefóne má každé tlačidlo dosah aspoň 44 px, aj keď je nakreslené menšie.
  • Zameranie z klávesnice: obrys 2 px vo farbe textu, 3 px od tlačidla.
  • Tlačidlo nie je nikdy nedostupné sivé. Formulár ukáže chybu slovami.
  • Odkaz na inú stránku je vždy <a href>, dá sa otvoriť aj na novej karte.

Karty

Karty sú biele listy na lišajníku so zaoblením 16 px. Jedálny lístok sa číta ako dobre vysádzaný tlačený lístok, jedlá nie sú v kartách po jednom.

Karta formulára

Biela, na telefóne 20 px dnu s mäkkým tieňom, na počítači 40 px dnu, najviac 640 px široká.

Karta jedálneho lístka

Na počítači biela, 24 px dnu, s tieňom sm. Na telefóne bez karty: nadpis, poznámka a riadky jedál oddelené čiarou.

Karta udalosti

Svetlý med, fotografia hore, nadpis, dátumy a medové tlačidlo. Len počas sezóny.

Pečené kačacie stehno s lokšou a dusenou kapustou

Sezónna ponuka

Tradičné jesenné špeciality

Kačacie hody

Pečené kačacie stehno s lokšou a dusenou kapustou, kačací vývar s pečeňovými haluškami. Od 21. septembra každý deň.

Pozrieť kačacie menu

Čipy a štítky

Krátke stavy a voľby, vždy na jednom riadku a plne zaoblené.

Stav dňa

Bodka a slová: zelená otvorené, med zatvárame alebo skrátene, červená zatvorené. Kuchyňa pribudne, keď zatvára skôr ako koliba.

Otvorené, dnes do 22:00 Kuchyňa do 21:00

Zatvárame o 22:00

Dnes zatvorené – sanitačný deň

Čipy kategórií

Na telefóne rad čipov pod hlavičkou, ktorý sa posúva do strany a drží sa hore: plne zaoblený podklad kontajnera, nakreslený 28,8 px vysoký, s dosahom pre palec 44,8 px a 14 px vodorovne. Čip kategórie, ktorá sa práve číta, je bridlicový.

Štítky

Štítok špeciality na karte jedálneho lístka a štítok „Práve prebiehajú“ kačacích hodov: malý, zaoblený 6 px alebo plne.

Formuláre

Popis nad poľom, pole 52 px, povinné pole označené slovom a chyba slovami pod poľom.

Pole

Popis
label-md 14 px, povinné pole „(povinné)“
Pole
52 px, zaoblenie 6 px, nižší kontajner, na telefóne jemná čiara
Text v poli
16 px, aby iPhone pri písaní nezväčšoval stránku
Nápoveda
16 px na telefóne, 13 px na počítači
Chyba
16 px v červenej chyby, pole označené pre čítačku

Chybu, potvrdenie odoslania a okná nad stránkou ukazuje stránka Upozornenia a okná.

Ikony

Ikony sú znaky písma Material Symbols Outlined, orezaného na ikony, ktoré web používa. Ikona sama nič nehovorí: význam nesie text alebo popis ovládacieho prvku.

Rez
výplň 0, hrúbka 400, stupeň 0, optická veľkosť 24
Ikon
64
Veľkosti
12, 14, 15, 16, 18, 20, 22, 24, 26, 28, 30 px
  • access_time
  • alt_route
  • arrow_downward
  • arrow_forward
  • bakery_dining
  • cabin
  • calendar_today
  • call
  • celebration
  • chat_bubble_outline
  • check
  • check_circle
  • chevron_left
  • chevron_right
  • close
  • contact_mail
  • content_copy
  • cookie
  • dark_mode
  • devices
  • done
  • event
  • event_busy
  • event_repeat
  • expand_more
  • explore
  • format_list_bulleted
  • gavel
  • groups
  • help_center
  • hiking
  • info
  • landscape
  • light_mode
  • local_bar
  • local_parking
  • location_on
  • lock
  • mail
  • map
  • menu
  • navigation
  • near_me
  • open_in_new
  • outdoor_grill
  • phone
  • photo_camera
  • pie_chart
  • pin_drop
  • public
  • rate_review
  • restaurant
  • restaurant_menu
  • reviews
  • schedule
  • send
  • settings_brightness
  • share
  • signpost
  • spa
  • thumb_up
  • toc
  • tune
  • wine_bar
  • Novú ikonu pridá jej meno v šablóne, <x-icon name="…" />, a nové orezanie písma, ktoré icon-font.mjs overí proti celému písmu Google.

Fotografie

Atmosféru nesú skutočné fotografie koliby, veľké a bez rámov. Jedlá sú ilustračné, všetky v jednom štýle.

Čertova skala nad kolibou
  • Budova, terasa, interiér, okolie a Čertova skala sú len skutočné fotografie koliby, nikdy vygenerované ani z fotobanky.
  • Jedlo zo 45°, na glazovanej hnedej keramike na medovom drevenom stole, v mäkkom dennom svetle zľava, ostré pred rozmazanou stenou z guľatiny. Bez textu, rúk a ľudí.
  • Pri jedlách stojí veta „Fotografie jedál sú ilustračné.“
  • Zaoblenie 16 px. Fotografia cez celú šírku telefónu je bez zaoblenia.
  • Formát WebP, najviac 2400 px a varianty 480, 900 a 1500 px. Každá fotografia má popis v oboch jazykoch a drží si miesto, kým sa načíta.

Vzor a hrebeň

Jediné ozdoby okrem červeného háčka.

Vzor

Ľudová rozeta podľa rezbárstva Čičmian a Podpoľania v mede. Leží za obsahom každej stránky a karty, listy, lišty aj päta ju zakrývajú. Stojí v okne, kým sa stránka posúva, a kde je pohyb vítaný, stúpa pätinou rýchlosti.

Dlaždica
320 px
Sila
7 % medu, v tmavom režime svetlého medu

Hrebeň

Horný okraj bridlicových pásov, päty a spodnej lišty telefónu, zrezaný do štítov pod 45°.

Štít na počítači
24 × 12 px
Štít na telefóne
19,2 × 9,6 px

Pohyb

Pohyb je tichý a nikdy nie je podmienkou: stránka je celá vykreslená aj bez neho.

Rýchlosť
200 ms
Krivka
cubic-bezier(0.2, 0.7, 0.3, 1)
  • Prepnutie režimu mení len farby, za 200 ms.
  • Odkaz na miesto na stránke ju posunie plynulo, len cez CSS, a pristane pod hlavičkou.
  • Koliesko myši na počítači zjemňuje Lenis. Telefón ho nesťahuje a dotyk ostáva jeho.
  • Kto si v systéme vypne pohyb, nevidí žiadny.
  • Žiadna knižnica animácií.

Prístupnosť

Web spĺňa WCAG 2.2 AA. Testy to overujú na siedmich zariadeniach v Chromiu aj vo WebKite, vo svetlom aj v tmavom režime.

  • Kontrast textu aspoň 4,5 : 1, veľkého textu, ikon, okrajov a zamerania aspoň 3 : 1.
  • Zameranie z klávesnice je vždy viditeľné, obrys 2 px vo farbe textu, a nikdy ho nezakryje lepiaca lišta.
  • Ovládací prvok pre palec má dosah aspoň 44 × 44 px.
  • Prvý odkaz stránky preskočí na obsah. Stránka má hlavičku, navigáciu, obsah a pätu a práve jeden nadpis h1.
  • Každá fotografia má popis v oboch jazykoch, ozdoba prázdny.
  • Chyba formulára je slovami pri poli. Farba nikdy nie je jediným nosičom stavu.
  • Okno drží klávesnicu v sebe a po zatvorení ju vráti tam, odkiaľ sa otvorilo.
  • Na šírke 320 px sa nič neposúva do strany.

Texty

Jednoduchá slovenčina s úctivým Vy. Anglické stránky hovoria to isté prirodzenou angličtinou.

Po slovensky

  • Úvodzovky „…“.
  • Desatinná čiarka: 0,33 l, 7,50 €.
  • Rozsah s pomlčkou medzi medzerami: 8:00 – 22:00.
  • Medzera pred jednotkou: 150 g, 10 km.
  • Čas 24-hodinový, dátum 21. 9.
  • Vás a Vaše s veľkým V.

Po anglicky

  • Úvodzovky “…”.
  • Desatinná bodka a mena pred sumou: €7.50.
  • Čas tiež 24-hodinový, dátum 21 September.

V oboch jazykoch

  • Veľké písmeno len na začiatku vety.
  • Odkaz pomenúva svoj cieľ, nikdy len „viac“ alebo „kliknite sem“.
  • Žiadne emoji a žiadne šípky pripojené k odkazom.

Oznamy, upozornenia a okná

Stavy, ktoré web ukazuje, na vlastných stránkach v skutočnej veľkosti.

Oznamy a prevádzkové stavy Lišty nad hlavičkou, stav dňa, sviatočné hodiny a deň zatvorenia. Upozornenia a okná Chyba vo formulári, odoslaná správa, zdieľanie a okná nad stránkou.