Skip to main content

Smer dizajnu

Krok Smer dizajnu vám umožňuje skontrolovať, doladiť a finalizovať vizuálny dizajn vašej témy predtým, ako Theme Builder vygeneruje kompletnú tému.

Prehľad​

Po dokončení Discovery Interview vám Theme Builder zobrazí smer dizajnu s vykreslením náhľadu pre desktop a mobil. To vám umožní presne vidieť, ako bude váš dizajn vyzerať na rôznych zariadeniach ešte predtým, než sa zaviažete k téme.

Komponenty smeru dizajnu​

1. Farebná paleta​

Farebná schéma vašej témy vrátane:

  • Primárna farba — hlavná farba značky používaná pre tlačidlá, odkazy a akcenty
  • Sekundárna farba — doplnková farba pre rozmanitosť
  • Akcentová farba — zvýrazňujúca farba pre dôležité prvky
  • Neutrálne farby — sivé a biele farby pre pozadia a text
  • Farba textu — primárna farba textu pre čitateľnosť

2. Typografia​

Výbery písiem pre:

  • Písmo nadpisov — používané pre názvy stránok a nadpisy sekcií
  • Písmo tela textu — používané pre text odsekov a obsah
  • Veľkosti písma — responzívne veľkosti pre rôzne veľkosti obrazoviek
  • Výška riadku — rozostup medzi riadkami pre čitateľnosť
  • Hrúbky písma — tučné, bežné a ľahké varianty

3. Rozloženie a rozostupy​

  • Šírka kontajnera — maximálna šírka pre obsah
  • Vnútorné odsadenie a okraje — rozostupy okolo prvkov
  • Mriežkový systém — stĺpcové rozloženie pre responzívny dizajn
  • Rozostupy komponentov — vzdialenosť medzi prvkami UI

4. Vizuálne prvky​

  • Štýly tlačidiel — primárne, sekundárne a terciárne návrhy tlačidiel
  • Dizajny kariet — rozloženia pre bloky obsahu
  • Ikony — štýl ikon a veľkosť
  • Orámovania a tiene — jemná vizuálna hĺbka
  • Efekty pri prejdení myšou — štýlovanie interaktívneho stavu

Vykreslenie náhľadu​

Náhľad pre desktop​

Náhľad pre desktop zobrazuje váš dizajn v plnej šírke (zvyčajne 1200px alebo viac):

  • Úplné navigačné menu
  • Kompletné rozloženie so všetkými stĺpcami
  • Veľká typografia a rozostupy
  • Všetky vizuálne prvky v plnej veľkosti

Náhľad pre mobil​

Náhľad pre mobil zobrazuje váš dizajn v mobilnej šírke (zvyčajne 375px):

  • Responzívna navigácia (hamburger menu)
  • Jednostĺpcové rozloženie
  • Upravená typografia a rozostupy
  • Veľkosti tlačidiel vhodné pre dotyk

Responzívne body zlomu​

Theme Builder vykresľuje náhľady pri týchto bodoch zlomu:

ZariadenieŠírkaNáhľad
Mobil375pxTelefón na výšku
Tablet768pxTablet na šírku
Desktop1200pxDesktop v plnej šírke
Veľký desktop1920pxUltraširoký displej

Dolaďovanie dizajnu​

Vykonávanie úprav​

Svoj smer dizajnu môžete doladiť takto:

  1. Úpravou farieb — zmeňte ľubovoľnú farbu v palete
  2. Zmenou písiem — vyberte iné typy písma
  3. Úpravou rozostupov — upravte vnútorné odsadenie a okraje
  4. Aktualizáciou rozloženia — zmeňte šírky kontajnerov a stĺpce mriežky
  5. Prispôsobením prvkov — upravte štýly tlačidiel, dizajny kariet atď.

Aktualizácie náhľadu​

Zmeny sa prejavia v reálnom čase:

  • Náhľad pre desktop sa aktualizuje okamžite
  • Náhľad pre mobil sa aktualizuje okamžite
  • Aktualizujú sa všetky responzívne body zlomu
  • Môžete prepínať medzi náhľadmi a overiť zmeny

Zobrazenie porovnania​

Porovnajte svoj smer dizajnu s:

  • Pôvodný dizajn — pozrite si, čo sa zmenilo
  • Dizajny konkurencie — porovnajte s inšpiračnými webmi
  • Predchádzajúce verzie — vráťte sa k skorším smerom dizajnu

Schválenie smeru dizajnu​

Keď ste so svojím dizajnom spokojní:

  1. Skontrolujte oba náhľady — overte, že desktop aj mobil vyzerajú dobre
  2. Skontrolujte všetky farby — zabezpečte kontrast a prístupnosť
  3. Otestujte typografiu — overte čitateľnosť vo všetkých veľkostiach
  4. Potvrďte rozloženie — skontrolujte rozostupy a zarovnanie
  5. Schváľte dizajn — pokračujte ku generovaniu témy

Ďalšie kroky​

Po schválení smeru dizajnu:

  1. Theme Builder vygeneruje vašu kompletnú tému
  2. Téma sa nainštaluje na váš WordPress web
  3. Môžete ju ďalej prispôsobiť pomocou WordPress customizer
  4. Pokračujte na Hospitality Menus alebo iné funkcie

Osvedčené postupy​

  • Testujte na skutočných zariadeniach — ak je to možné, použite skutočné telefóny a tablety
  • Skontrolujte čitateľnosť — zabezpečte, aby bol text čitateľný vo všetkých veľkostiach
  • Overte kontrast — použite Validate Palette Contrast pre prístupnosť
  • Zvážte výkon — optimalizujte obrázky a písma pre rýchlosť
  • Plánujte podľa obsahu — zabezpečte, aby rozloženie fungovalo s vaším skutočným obsahom

Riešenie problémov​

Náhľad sa neaktualizuje​

  • Obnovte stránku
  • Vymažte vyrovnávaciu pamäť prehliadača
  • Skúste iný prehliadač
  • Skontrolujte internetové pripojenie

Farby vyzerajú inak​

  • Skontrolujte nastavenia farieb monitora
  • Vyskúšajte na rôznych zariadeniach
  • Overte kontrast farieb pomocou nástrojov prístupnosti
  • Zvážte simulátory farbosleposti

Problémy s typografiou​

  • Overte, či sa načítavajú súbory písiem
  • Skontrolujte veľkosť písma pri rôznych bodoch zlomu
  • Testujte so skutočným obsahom
  • Zvážte dĺžku riadka pre čitateľnosť