Skip to main content

Дизайн бағыты

Дизайн бағыты қадамы Theme Builder толық тақырыпты жасамас бұрын тақырыбыңыздың визуалды дизайнын қарап шығуға, нақтылауға және түпкілікті бекітуге мүмкіндік береді.

Шолу​

Discovery Interview аяқталғаннан кейін Theme Builder дизайн бағытыңызды desktop және mobile алдын ала қарау рендерингімен ұсынады. Бұл тақырыпқа бекімес бұрын дизайныңыз әртүрлі құрылғыларда қалай көрінетінін дәл көруге мүмкіндік береді.

Дизайн бағытының құрамдастары​

1. Түстер палитрасы​

Тақырыбыңыздың түстер схемасы, соның ішінде:

  • Негізгі түс — батырмалар, сілтемелер және акценттер үшін қолданылатын негізгі бренд түсі
  • Қосымша түс — әртүрлілік үшін үйлесімді түс
  • Акцент түсі — маңызды элементтерді ерекшелеуге арналған түс
  • Бейтарап түстер — фондар мен мәтінге арналған сұр реңктер және ақ түстер
  • Мәтін түсі — оқылымдылыққа арналған негізгі мәтін түсі

2. Типография​

Қаріп таңдаулары:

  • Тақырып қарпі — бет атаулары мен бөлім тақырыптары үшін қолданылады
  • Негізгі мәтін қарпі — абзац мәтіні мен мазмұн үшін қолданылады
  • Қаріп өлшемдері — әртүрлі экран өлшемдеріне арналған бейімделетін өлшемдер
  • Жол биіктігі — оқылымдылық үшін жолдар арасындағы аралық
  • Қаріп қалыңдықтары — қалың, қалыпты және жеңіл нұсқалар

3. Орналасу және аралықтар​

  • Контейнер ені — мазмұнға арналған ең үлкен ен
  • Ішкі және сыртқы шегіністер — элементтер айналасындағы аралық
  • Тор жүйесі — бейімделетін дизайнға арналған бағандық орналасу
  • Құрамдас аралығы — UI элементтері арасындағы қашықтық

4. Визуалды элементтер​

  • Батырма стильдері — негізгі, қосымша және үшінші деңгейлі батырма дизайндары
  • Карточка дизайндары — мазмұн блоктарына арналған орналасулар
  • Белгішелер — белгіше стилі мен өлшемі
  • Жиектер мен көлеңкелер — нәзік визуалды тереңдік
  • Hover әсерлері — интерактивті күй стилі

Алдын ала қарау рендерингі​

Desktop алдын ала қарауы​

Desktop алдын ала қарауы дизайныңызды толық енде көрсетеді (әдетте 1200px немесе кеңірек):

  • Толық навигация мәзірі
  • Барлық бағандары бар толық орналасу
  • Үлкен типография және аралықтар
  • Барлық визуалды элементтер толық өлшемде

Mobile алдын ала қарауы​

Mobile алдын ала қарауы дизайныңызды mobile енінде көрсетеді (әдетте 375px):

  • Бейімделетін навигация (гамбургер мәзір)
  • Бір бағанды орналасу
  • Реттелген типография және аралықтар
  • Түртуге ыңғайлы батырма өлшемдері

Бейімделу шектері​

Theme Builder мына шектерде алдын ала қарауларды рендерлейді:

ҚұрылғыЕніАлдын ала қарау
Mobile375pxТік бағыттағы телефон
Планшет768pxКөлденең бағыттағы планшет
Desktop1200pxТолық енді desktop
Үлкен Desktop1920pxӨте кең дисплей

Дизайныңызды нақтылау​

Өзгерістер енгізу​

Дизайн бағытыңызды мына жолдармен нақтылай аласыз:

  1. Түстерді реттеу — палитрадағы кез келген түсті өзгертіңіз
  2. Қаріптерді өзгерту — басқа қаріп түрлерін таңдаңыз
  3. Аралықтарды өзгерту — ішкі және сыртқы шегіністерді реттеңіз
  4. Орналасуды жаңарту — контейнер ендері мен тор бағандарын өзгертіңіз
  5. Элементтерді баптау — батырма стильдерін, карточка дизайндарын және т.б. өзгертіңіз

Алдын ала қарау жаңартулары​

Өзгерістер нақты уақытта көрсетіледі:

  • Desktop алдын ала қарауы бірден жаңартылады
  • Mobile алдын ала қарауы бірден жаңартылады
  • Барлық бейімделу шектері жаңартылады
  • Өзгерістерді тексеру үшін алдын ала қараулар арасында ауыса аласыз

Салыстыру көрінісі​

Дизайн бағытыңызды мыналармен салыстырыңыз:

  • Бастапқы дизайн — ненің өзгергенін көріңіз
  • Бәсекелес дизайндар — шабыт алған сайттармен салыстырыңыз
  • Алдыңғы нұсқалар — бұрынғы дизайн бағыттарына қайтыңыз

Дизайн бағытын бекіту​

Дизайныңызға қанағаттанғаннан кейін:

  1. Екі алдын ала қарауды да қарап шығыңыз — desktop және mobile көріністерінің жақсы екенін тексеріңіз
  2. Барлық түстерді тексеріңіз — контраст пен қолжетімділікті қамтамасыз етіңіз
  3. Типографияны сынаңыз — барлық өлшемдерде оқылымдылығын тексеріңіз
  4. Орналасуды растаңыз — аралықтар мен туралауды тексеріңіз
  5. Дизайнды бекітіңіз — тақырыпты жасауға өтіңіз

Келесі қадамдар​

Дизайн бағытыңызды бекіткеннен кейін:

  1. Theme Builder толық тақырыбыңызды жасайды
  2. Тақырып WordPress сайтыңызға орнатылады
  3. WordPress customizer арқылы әрі қарай баптай аласыз
  4. Hospitality Menus немесе басқа мүмкіндіктерге өтіңіз

Үздік тәжірибелер​

  • Нақты құрылғыларда сынаңыз — мүмкін болса, нақты телефондар мен планшеттерді пайдаланыңыз
  • Оқылымдылықты тексеріңіз — мәтіннің барлық өлшемдерде оқылатынына көз жеткізіңіз
  • Контрастты тексеріңіз — қолжетімділік үшін Validate Palette Contrast пайдаланыңыз
  • Өнімділікті ескеріңіз — жылдамдық үшін суреттер мен қаріптерді оңтайландырыңыз
  • Мазмұнды жоспарлаңыз — орналасудың нақты мазмұныңызбен жұмыс істейтініне көз жеткізіңіз

Ақауларды жою​

Алдын ала қарау жаңартылмайды​

  • Бетті жаңартыңыз
  • Браузер кэшін тазалаңыз
  • Басқа браузерді қолданып көріңіз
  • Интернет байланысын тексеріңіз

Түстер басқаша көрінеді​

  • Монитордың түс баптауларын тексеріңіз
  • Әртүрлі құрылғыларда қолданып көріңіз
  • Қолжетімділік құралдарымен түс контрастын тексеріңіз
  • Түс соқырлығы симуляторларын қарастырыңыз

Типография мәселелері​

  • Қаріп файлдарының жүктеліп жатқанын тексеріңіз
  • Әртүрлі бейімделу шектерінде қаріп өлшемін тексеріңіз
  • Нақты мазмұнмен сынаңыз
  • Оқылымдылық үшін жол ұзындығын ескеріңіз