Přeskočit na hlavní obsah

Směr designu

Krok Směr designu vám umožňuje zkontrolovat, vylepšit a dokončit vizuální design vašeho tématu, než Theme Builder vygeneruje celé téma.

Přehled​

Po dokončení rozhovoru s prozkoumáním (Discovery Interview) vám Theme Builder předloží směr designu s náhledem pro desktop a mobil. To vám umožní vidět přesně, jak váš design vypadá na různých zařízeních, než se zavážete k tématu.

Složky směru designu​

1. Barevná paleta​

Barevná schéma vašeho tématu, včetně:

  • Primární barva — hlavní značková barva používaná pro tlačítka, odkazy a akcenty
  • Sekundární barva — komplementární barva pro rozmanitost
  • Akcentní barva — barva pro zvýraznění důležitých prvků
  • Neutrální barvy — šedé a bílé barvy pro pozadí a text
  • Barva textu — primární barva textu pro čitelnost

2. Typografie​

Výběr fontů pro:

  • Nadpisový font — používán pro titulky stránek a nadpisy sekcí
  • Tělový font — používán pro odstavce a obsah
  • Velikosti fontů — adaptivní velikost pro různé velikosti obrazovky
  • Řádková výška — rozestup mezi řádky pro lepší čitelnost
  • Tuhost fontu — varianty tučné, normální a lehké

3. Rozložení a rozestupy​

  • Šířka kontejneru — maximální šířka obsahu
  • Vyplňování a okraje — rozestupy kolem prvků
  • Síťový systém — rozložení v sloupcích pro adaptivní design
  • Rozestupy komponent — vzdálenost mezi UI prvky

4. Vizuální prvky​

  • Styl tlač buttonů — design primárních, sekundárních a terciárních tlačítek
  • Design karet — rozložení pro bloky obsahu
  • Ikony — styl a velikost ikon
  • Okraje a stíny — jemná vizuální hloubka
  • Efekty při přejezdu — styl interaktivního stavu

Náhled renderingu​

Desktopový náhled​

Desktopový náhled zobrazuje váš design v plné šířce (obvykle 1200px nebo více):

  • Celé navigační menu
  • Kompletní rozložení se všemi sloupci
  • Velká typografie a rozestupy
  • Všechny vizuální prvky ve plné velikosti

Mobilní náhled​

Mobilní náhled zobrazuje váš design v mobilní šířce (obvykle 375px):

  • Adaptivní navigace (hamburger menu)
  • Rozložení v jednom sloupci
  • Upravená typografie a rozestupy
  • Velikosti tlačítek přívětivé pro dotyk

Adaptivní body zlomu​

Theme Builder vykresluje náhledy v těchto bodech zlomu:

ZařízeníŠířkaNáhled
Mobilní375pxPortrétní telefon
Tablet768pxPozorovací tablet
Desktop1200pxPlná šířka desktopu
Velký desktop1920pxUltraširoká obrazovka

Vylepšování vašeho designu​

Úpravy​

Můžete svůj směr designu vylepšit tím, že:

  1. Upravíte barvy — změňte jakoukoli barvu v paletě
  2. Změníte fonty — vyberte jiné typografie
  3. Modifikujete rozestupy — upravte vyplňování a okraje
  4. Aktualizujete rozložení — změňte šířky kontejnerů a sloupce sítě
  5. Personalizujete prvky — upravte styly tlačítek, design karet atd.

Aktualizace náhledů​

Změny jsou zobrazeny v reálném čase:

  • Desktopový náhled se aktualizuje okamžitě
  • Mobilní náhled se aktualizuje okamžitě
  • Všechny adaptivní body zlomu jsou aktualizovány
  • Můžete přepínat mezi náhledy, abyste ověřili změny

Porovnávací zobrazení​

Porovnejte svůj směr designu s:

  • Původním designem — zjistěte, co se změnilo
  • Designy konkurence — porovnejte s inspiračními stránkami
  • Úředními verzemi — vraťte se k předchozím směrovým pokusům

Schválení směru designu​

Jakmile jste s designem spokojeni:

  1. Zkontrolujte oba náhledy — ověřte, že desktop i mobil vypadají dobře
  2. Zkontrolujte všechny barvy — zajistěte kontrast a přístupnost
  3. Otestujte typografii — ověřte čitelnost ve všech velikostech
  4. Potvrďte rozložení — zkontrolujte rozestupy a uspořádání
  5. Schválte design — pokračujte v generování tématu

Další kroky​

Po schválení směru designu:

  1. Theme Builder vygeneruje vaše kompletní téma
  2. Téma je nainstalováno na vaším WordPressu
  3. Můžete dále upravovat pomocí customizeru WordPressu
  4. Pokračujte k Hospitality Menus nebo k jiným funkcím

Nejlepší praxe​

  • Testujte na skutečných zařízeních — pokud je to možné, použijte skutečné telefony a tablety
  • Zkontrolujte čitelnost — zajistěte, že je text čitelný ve všech velikostech
  • Ověřte kontrast — pro přístupnost použijte Validate Palette Contrast
  • Zvažte výkon — optimalizujte obrázky a fonty pro rychlost
  • Plánujte obsah — zajistěte, že rozložení funguje s vaším skutečným obsahem

Řešení problémů​

Náhled se neaktualizuje​

  • Obnovte stránku
  • Vymažte cache prohlížeče
  • Zkuste jiný prohlížeč
  • Zkontrolujte připojení k internetu

Barvy vypadají jinak​

  • Zkontrolujte nastavení barev monitoru
  • Zkuste na různých zařízeních
  • Ověřte barevný kontrast pomocí nástrojů pro přístupnost
  • Zvažte simulátory barové sleposti

Problémy s typografií​

  • Ověřte, že se fonty načítají
  • Zkontrolujte velikost fontu v různých bodech zlomu
  • Testujte se skutečným obsahem
  • Zvažte délku řádku pro čitelnost

Související dokumentace​