Kompletný sprievodca vzhľadom

Poznáte to. Otvoríte klasický website builder, začnete nastavovať farbu tlačidla, potom farbu nadpisu, potom inú farbu pre hover efekt na inom tlačidle... a o mesiac má váš web sedem odtieňov modrej, tri veľkosti nadpisov, ktoré si navzájom odporujú, a pocit, že to niekto poskladal z rôznych webov.

Webaster funguje inak. Namiesto štýlovania „po elementoch" pracujete s jednou centrálnou témou — súborom farieb, typografie, štýlov a animácií, ktorý sa premietne na celý web naraz. Zmeníte jednu hodnotu na jednom mieste a prepíše sa vám celý web. Konzistentne, všade, okamžite. Všetko nájdete na jednom mieste — v sekcii Vzhľad, rozdelenej do troch záložiek: Farby, Typografia a Štýly.

Technicky sa za tým skrýva jednoduchý princíp: všetko sa kompiluje do jedného súboru theme.css postaveného na dizajnových tokenoch — CSS premenných ako --color-primary, --radius-lg alebo --text-h1. Pre laika to znamená jedno: mení sa jedna hodnota, nie sto miest naraz.

V tomto článku si prejdeme päť vrstiev, z ktorých sa vzhľad vo Webasteri skladá: farby, dark mode, typografiu, štýlové presety a scroll animácie.

Kde to nájdete: Vzhľad → Farby

Nemusíte byť grafik ani poznať teóriu farieb. Stačí, keď zadáte jednu značkovú farbu (hex kód) a Webaster okolo nej dopočíta celú farebnú schému.

Ako presne? Pomocou harmonických metód, ktoré si možno pamätáte z hodín výtvarnej výchovy — len tentokrát ich za vás počíta algoritmus:

• Komplementárna — farba a jej presný protipól na farebnom kruhu. Silný kontrast, vhodné keď chcete, aby akcentová farba naozaj „vystrelila".
• Analogická — susedné farby na kruhu. Pôsobí pokojne a harmonicky, ideálne pre wellness či prírodné témy.
• Monochromatická — rôzne odtiene jednej farby. Elegantné, jednotné, bezpečná voľba pre profesionálne odvetvia.

Ďalej máte na výber triádickú (tri farby rovnomerne po kruhu), split-complementary, tetrádickú (rectangle) a square schému. A z ktorejkoľvek zvolenej metódy Webaster navyše ku každej farbe automaticky dopočíta 9 odtieňov (shades) — od najsvetlejšieho po najtmavší, na škále 100–900.

K tomu pridá neutrálne farby na pozadia a texty, plus sémantické farby pre úspech, upozornenie, chybu a informáciu.

Nič vám ale nebráni zasiahnuť ručne — ľubovoľný odtieň doladíte, alebo si pridáte úplne vlastnú pomenovanú farbu, napríklad „brand-gold" pre špeciálny akcent.

Súčasťou je aj kontrola kontrastu podľa WCAG — systém vás upozorní, ak je kombinácia farieb nečitateľná. Nejde len o estetiku, ale aj o prístupnosť, ktorá sa počíta aj do SEO hodnotenia.

Výsledné palety si môžete uložiť a znovu použiť naprieč projektmi, alebo si len vybrať z 8 pripravených schém a začať okamžite.

Kde to nájdete: Vzhľad → Štýly (režim dark mode) a Vzhľad → Farby (tmavá paleta)

Tmavý režim už dávno nie je bonus pre nadšencov — je to očakávanie. Webaster ho rieši elegantne: v režime Automaticky sa web prispôsobí systémovému nastaveniu návštevníka (prefers-color-scheme). Ak má niekto v telefóne alebo počítači zapnutý tmavý režim, uvidí tmavú verziu vášho webu. Bez toho, aby čokoľvek prepínal, bez tlačidla, bez rozhodovania.

Dôležitý detail: tmavá paleta nie je len automaticky stmavená svetlá verzia. Máte pre ňu samostatnú sadu farieb, takže presne kontrolujete, ako web v tme vyzerá — nič vám tam nesplynie, žiadny text nezmizne v pozadí.

Prečo sa to oplatí riešiť poriadne:

• Komfort čítania — najmä večer alebo v tmavšom prostredí.
• Moderný dojem — návštevník vidí, že web je aktuálny a premyslený.
• Rešpekt k preferencii používateľa — dávate mu presne to, čo si sám nastavil.

Kde to nájdete: Vzhľad → Typografia

Klasický problém: nastavíte nadpis na peknú veľkosť na desktope, a na mobile je buď obrovský, alebo naopak drobný. Riešenie zvyčajne vyzerá ako desiatky breakpointov a media queries pre každú veľkosť obrazovky.

Webaster to rieši pomocou CSS funkcie clamp() — písmo plynulo škáluje medzi minimálnou a maximálnou veľkosťou podľa šírky obrazovky. Žiadne skoky, žiadne „zlomené" veľkosti pri zmene okna, žiadne ručné nastavovanie pre každé zariadenie.

Čo si nastavíte:

• minimálnu veľkosť (pre mobil),
• maximálnu veľkosť (pre veľké obrazovky),
• mieru škálovania (ako rýchlo písmo rastie so šírkou obrazovky).

K tomu pridáva Webaster modulárnu škálu — zadáte základnú veľkosť textu a pomer (na výber máte 8 pomerov, od jemnej Minor Second po výraznú Golden Ratio) a systém z toho automaticky dopočíta harmonickú hierarchiu nadpisov H1 až H6. Jedným posuvníkom tak ovplyvníte, o koľko je každý nadpis väčší od toho nižšieho — a hierarchia zostane vždy vizuálne logická.

Samozrejmosťou je výber fontov pre nadpisy, bežný text a monospace text — z knižnice Google Fonts alebo z pripravenej knižnice webových fontov — s náhľadom naživo priamo v editore.

Kde to nájdete: Vzhľad → Štýly (aj Typografia)

Preset je uložená kombinácia typografie a vizuálnych štýlov — zaoblenia rohov, tiene, tlačidlá a ďalšie detaily — ktorú aplikujete na celý web jedným kliknutím.

Webaster ponúka 8 pripravených štýlov, každý šitý na konkrétny typ podnikania:

Každý preset riadi celý rad detailov naraz: typografiu (fonty, veľkosti, hierarchiu nadpisov), polomer zaoblenia rohov (od ostrých hrán po výrazne zaoblené), tiene (posun, rozmazanie, intenzitu) a štýl tlačidiel (zaoblenie, hrúbku okraja, správanie pri hoveri). Ďalšie detaily — ako rýchlosť prechodov, vzhľad rozbaľovacích prvkov (accordion) či tlačidla „späť hore" — si potom kedykoľvek doladíte v nastaveniach Štýlov.

Preset však nie je klietka — je to štartovací bod. Vyberiete si ten, ktorý sedí vášmu odvetviu, a potom si ho doladíte presne podľa seba. Svoju vlastnú kombináciu si môžete uložiť ako preset a kedykoľvek sa medzi verziami prepínať.

Kde to nájdete: Vzhľad → Štýly (globálne povolenie) a v editore pri konkrétnej sekcii/nadpise

Statický web pôsobí plocho. Webaster preto ponúka scroll-triggerované animácie — sekcie sa „prebudia" v momente, keď na ne návštevník pri scrollovaní narazí (technicky vďaka IntersectionObserver, ktorý sleduje, čo je práve vo viewporte).

Funkčné typy animácií pre sekcie: fade-in (postupné zjavenie), slide-up, slide-left, slide-right (nasunutie zo strán), zoom-in, zoom-out (priblíženie/oddialenie) a výraznejšie efekty flip, bounce a rotate.

K tomu dve špeciálne réžimy:

• Stagger — jednotlivé riadky alebo prvky v sekcii sa neobjavia naraz, ale postupne za sebou, čím vznikne príjemný „vlnový" efekt.
• Reveal-words — vlajková animácia pre nadpisy: text sa vypisuje postupne po slovách. Nastaviť si viete trvanie, oneskorenie a rozostup medzi slovami.

Ovládanie je dvojúrovňové — najprv globálne povolíte, ktoré typy animácií sa na webe smú používať (v nastaveniach Štýlov), a potom konkrétny typ priradíte konkrétnej sekcii alebo nadpisu priamo v editore.

A dôležitá poznámka na záver tejto časti: animácie plne rešpektujú systémové nastavenie prefers-reduced-motion. Ak má návštevník v systéme vypnuté animácie, jednoducho ich nedostane. Pohyb teda nikdy nejde proti prístupnosti ani pohodliu používateľa.

Predstavte si kaviareň, ktorá si zakladá web. Majiteľ zadá v záložke Farby jednu teplú hnedú ako značkovú farbu — Webaster okolo nej dopočíta celú paletu vrátane odtieňov, neutrálov a sémantických farieb. V záložke Štýly klikne na preset Warm Hospitality, ktorý naraz nastaví príjemnú serifovú typografiu, jemne zaoblené rohy a mäkké tiene. Zapne automatický dark mode, aby web dobre vyzeral aj večer. V Typografii posunie modulárnu škálu o kúsok vyššie, aby nadpisy viac vynikli. A nakoniec pri úvodnej sekcii v editore zapne animáciu fade-in a na hlavný nadpis reveal-words.

Výsledok? Za pár minút konzistentný, moderný web — bez grafika, bez kódu, a hlavne bez toho siedmeho odtieňa modrej, ktorý sa nikam nehodí. A keď o pol roka zmení značkovú farbu, stačí ju prepísať na jednom mieste a celý web sa prefarbí sám.

Farby, dark mode, typografia, presety a animácie nie sú vo Webasteri päť samostatných nastavení — sú to vrstvy jedného konzistentného systému. Zmeníte niečo raz, na jednom mieste, a drží sa to všade: na každej stránke, v každej sekcii, pri každom rozlíšení obrazovky.

Žiadny kód. Plná kontrola.
Chcete si to vyskúšať na vlastnom webe? Založte si web vo Webasteri a nastavte si vzhľad presne podľa seba za pár minút.