Vzhľad webu vzniká na dvoch miestach a najviac času sa stráca tým, že človek hľadá nastavenie tam, kde nie je. Preto začnime deliacou čiarou: téma robí rám, bloky robia obsah.
- Téma je všetko, čo je na každej stránke rovnaké — hlavička, menu, pätička, základná paleta farieb, písma, šírka obsahu, vzhľad výpisu článkov a kariet produktov.
- Bloky sú to, čo skladáte vnútri stránky — hero, sekcie s výhodami, cenník, referencie, otázky a odpovede, galéria, časová os.
Keď hľadáte, ako zmeniť farbu tlačidla v jednej sekcii, je to blok. Keď hľadáte, ako zmeniť farbu tlačidiel na celom webe, je to téma. Toto jediné pravidlo ušetrí väčšinu hľadania.
Téma robí rám · bloky robia obsah
Prečo to nie je len jedna vec
Mohlo by sa zdať jednoduchšie, keby všetko robila téma. V praxi to má opačný efekt: obsah postavený nástrojmi témy sa nedá presunúť. Pri výmene témy zmizne alebo sa rozsype.
Preto sú Branike bloky napísané tak, aby boli na téme nezávislé. Stránka postavená z nich vyzerá rovnako pod jednou aj druhou témou, pretože si nesie vlastné rozloženie, odsadenia aj farby. Vymeniť sa dá rám okolo nej — obsah ostane.
Dnes Blocksy, smerujeme k Branike téme
Weby, ktoré s nami dnes bežia, používajú tému Blocksy. Vzhľad sa v nej nastavuje v Vzhľad → Prispôsobiť: paleta, typografia, hlavička, pätička, šírky, vzhľad e-shopu.
Pripravujeme vlastnú Branike tému postavenú na novšom prístupe, kde sa celý web upravuje v jednom editore vrátane hlavičky a pätičky. Je to iná filozofia — nie iné tlačidlá na tom istom mieste. Až príde jej čas, dostane vlastného sprievodcu a prechod nebude znamenať prestavbu obsahu.
🔴 Praktický dôsledok pre vás: obsah stavajte z blokov, nie z nástrojov témy. Kto to dodrží, prejde na novú tému bez práce navyše.
Čo dostanete v blokoch
- 53 blokov — od základných (nadpis, text, tlačidlo, obrázok, oddeľovač) po zložité (hero, cenník, časová os, preklápacia karta, porovnanie pred a po, odpočet, chránený obsah).
- 87 hotových vzorov v 21 kategóriách — celé sekcie, ktoré vložíte a prepíšete v nich texty. Hero, výhody, cenník, FAQ, referencie, štatistiky, tím, kontakt, pätička, logá, galéria, časová os, video, výpis článkov, služby, záhlavie.
- 5 185 ikon — obrysová sada plus vlastné Branike ikony. Vyberajú sa z prehľadu, nie kopírovaním kódu.
- Fotky v balíku — vzory nie sú prázdne rámčeky, prídu s obrázkami v úspornom formáte, ktoré viete rovno vymeniť za svoje.
- Predvoľby — nastavenie bloku, ktoré vám sedí, si uložíte a použijete na ďalšej stránke jedným kliknutím.
- Knižnica priamo v editore — vzory si prezriete v náhľade, nemusíte ich vkladať naslepo.
Ako vzniká stránka v praxi
Najrýchlejšia cesta nie je stavať sekciu po sekcii z jednotlivých blokov. Je to:
- Vložte vzor, ktorý sa najviac blíži tomu, čo potrebujete.
- Prepíšte texty a vymeňte obrázky za svoje.
- Dolaďte farby a odsadenia, ak treba. Väčšinou netreba — vzory sú navrhnuté tak, aby fungovali hneď.
- Skontrolujte na mobile. Toto je krok, ktorý sa vynecháva najčastejšie a mstí sa najviac.
Rozdiel v čase je rádový. Stránka, ktorá by sa skladala hodinu, vznikne za desať minút — a pritom nie je „šablónovitá“, pretože obsah, fotky aj farby sú vaše.
Farby: paleta rozhoduje, nie jednotlivé bloky
Bloky si berú farby z palety témy. Vďaka tomu stačí zmeniť paletu a zmení sa celý web naraz — vrátane sekcií, ktoré ste postavili pred pol rokom.
Ručne zadaná farba v jednom bloku je výnimka, nie spôsob práce. Web, kde je päťdesiat ručne nastavených odtieňov, sa nedá prefarbiť inak než ručne. Preto: paletu nastavte na začiatku a potom ju používajte.
Súčasťou návrhu je aj tmavý režim. Nie je to doplnok na koniec — každý blok s ním ráta a kontrast textu voči pozadiu je podmienka, nie odporúčanie.
Vzhľad a rýchlosť sú tá istá téma
Pekná stránka, ktorá sa načítava štyri sekundy, je zlá stránka. Preto majú bloky vlastnosti, ktoré sa navrhujú spolu s dizajnom:
- Obrázky sa načítavajú až keď treba — okrem toho hlavného v hornej časti, ktorý sa načíta hneď, aby stránka nevyzerala prázdna.
- Obrázky majú rozmery, takže obsah pod nimi neposkakuje pri načítaní. Poskakujúce rozloženie je najotravnejšia chyba na mobile.
- Ikony sú vložené priamo v stránke, nesťahuje sa kvôli nim celé písmo s tisíckami symbolov.
- Pohyb sa spúšťa až keď je prvok na obrazovke, nie na pozadí počas celej návštevy.
- Prístupnosť — nadpisy majú poradie, odkazy sa dajú rozoznať aj bez farby, ovládať sa dá klávesnicou.
Kde do toho vstupujú ostatné pluginy
Dizajn nekončí na statickej stránke. Bloky sú aj miestom, kde sa zobrazuje to, čo spravujú ostatné časti ekosystému:
- Výpis článkov vloží prehľad z blogu alebo z vlastného typu obsahu — nemusíte ho stavať ručne.
- Chránený obsah ukáže časť stránky len prihlásenému, len členovi alebo len držiteľovi konkrétneho balíka. Členská zóna sa tak dá postaviť priamo v stránke.
- Video s ochranou nadväzuje na kurzy a členské zóny.
- Formulár zo stránky zapíše dopyt do CRM a môže spustiť sériu správ.
- Cenník a tlačidlá vedú do e-shopu, ktorý má vlastné pravidlá cien pre členov a veľkoodberateľov.
- Firemné údaje a otváracie hodiny sa doťahujú z jedného miesta, takže sa v pätičke a na kontakte neopravujú dvakrát.
Čo bloky nerobia
- Nenavrhnú za vás web. Dostanete kvalitné stavebné diely, nie hotovú identitu značky.
- Nenahradia fotografa. Priložené fotky sú na rozbeh, nie na finálnu prezentáciu vašej prevádzky.
- Nemenia hlavičku a pätičku — to je práca témy.
- Nespravia zlý text dobrým. Najkrajšia sekcia s prázdnou vetou je stále prázdna veta.
Na čo si dať pozor
- Nastavte paletu skôr, než postavíte dvadsať stránok. Prefarbovanie po fakte je práca navyše.
- Nemiešajte nástroje témy do obsahu stránky. Presne to sa pri výmene témy stratí.
- Nepoužívajte na obsah vlastné CSS, kým sa nedá inak. Vlastné pravidlá prežijú aktualizáciu, ale nikto po vás nebude vedieť, kde sú.
- Kontrolujte pri šírke mobilu. Dlhé nápisy na tlačidlách a široké tabuľky sú dve najčastejšie chyby.
- Nadpisy nepoužívajte na veľkosť písma. Poradie nadpisov čítajú vyhľadávače aj čítačky pre nevidiacich.
- Vzor upravte, nie prestavte. Ak z neho po úpravách ostane niečo úplne iné, pravdepodobne ste si vybrali nesprávny vzor.