Skip to main content

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

Дизайн багыты кадамы Theme Builder толук теманы түзгөнгө чейин темаңыздын визуалдык дизайнын карап чыгууга, тактоого жана акыркы бекитүүгө мүмкүндүк берет.

Жалпы сереп​

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

Дизайн багытынын компоненттери​

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

Темаңыздын түстүк схемасы, анын ичинде:

  • Негизги түс — баскычтар, шилтемелер жана акценттер үчүн колдонулган негизги бренд түсү
  • Экинчи түс — ар түрдүүлүк үчүн кошумча түс
  • Акцент түсү — маанилүү элементтер үчүн баса белгилөө түсү
  • Нейтралдуу түстөр — фондор жана текст үчүн боздор жана актар
  • Текст түсү — окумдуулук үчүн негизги текст түсү

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

Арип тандоолору:

  • Баш аталыш ариби — барак аталыштары жана бөлүм баштары үчүн колдонулат
  • Негизги текст ариби — абзац тексти жана мазмун үчүн колдонулат
  • Арип өлчөмдөрү — ар кандай экран өлчөмдөрү үчүн жооп берүүчү өлчөмдөө
  • Сап бийиктиги — окумдуулук үчүн саптардын ортосундагы аралык
  • Арип салмактары — калың, кадимки жана жеңил варианттар

3. Макет жана аралык​

  • Контейнер туурасы — мазмун үчүн эң чоң тууралык
  • Ички жана сырткы чегинүүлөр — элементтердин айланасындагы аралык
  • Тор системасы — жооп берүүчү дизайн үчүн тилке макети
  • Компоненттер аралыгы — UI элементтеринин ортосундагы аралык

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

  • Баскыч стилдери — негизги, экинчи жана үчүнчү баскыч дизайндары
  • Карточка дизайндары — мазмун блоктору үчүн макеттер
  • Иконкалар — иконка стили жана өлчөмү
  • Чектер жана көлөкөлөр — жумшак визуалдык тереңдик
  • Үстүнө алып баруу эффекттери — интерактивдүү абалдын стилдештирилиши

Алдын ала көрүү рендеринги​

Desktop алдын ала көрүү​

Desktop алдын ала көрүү дизайныңызды толук туурасында көрсөтөт (адатта 1200px же андан кеңирээк):

  • Толук навигация менюсу
  • Бардык тилкелери менен толук макет
  • Чоң типография жана аралык
  • Бардык визуалдык элементтер толук өлчөмдө

Mobile алдын ала көрүү​

Mobile алдын ала көрүү дизайныңызды мобилдик туурасында көрсөтөт (адатта 375px):

  • Жооп берүүчү навигация (hamburger меню)
  • Бир тилкелүү макет
  • Ыңгайлаштырылган типография жана аралык
  • Тийүүгө ыңгайлуу баскыч өлчөмдөрү

Жооп берүүчү чекиттер​

Theme Builder алдын ала көрүүлөрдү бул чекиттерде рендерлейт:

ТүзмөкТуурасыАлдын ала көрүү
Mobile375pxТик телефон
Tablet768pxТуурасынан планшет
Desktop1200pxТолук туурадагы desktop
Large Desktop1920pxАбдан кең дисплей

Дизайныңызды тактоо​

Өзгөртүүлөрдү киргизүү​

Дизайн багытыңызды төмөнкүлөр аркылуу тактай аласыз:

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

Алдын ала көрүүнүн жаңыртуулары​

Өзгөртүүлөр реалдуу убакытта чагылдырылат:

  • Desktop алдын ала көрүү дароо жаңыртылат
  • Mobile алдын ала көрүү дароо жаңыртылат
  • Бардык жооп берүүчү чекиттер жаңыртылат
  • Өзгөртүүлөрдү текшерүү үчүн алдын ала көрүүлөрдүн ортосунда которула аласыз

Салыштыруу көрүнүшү​

Дизайн багытыңызды төмөнкүлөр менен салыштырыңыз:

  • Баштапкы дизайн — эмне өзгөргөнүн көрүңүз
  • Атаандаштардын дизайндары — шыктануу сайттары менен салыштырыңыз
  • Мурунку версиялар — мурунку дизайн багыттарына кайтыңыз

Дизайн багытын бекитүү​

Дизайныңыз сизди канааттандыргандан кийин:

  1. Эки алдын ала көрүүнү тең карап чыгыңыз — desktop жана mobile көрүнүштөрү жакшы экенин текшериңиз
  2. Бардык түстөрдү текшериңиз — контраст жана жеткиликтүүлүк камсыздалганын текшериңиз
  3. Типографияны сынаңыз — бардык өлчөмдөрдө окумдуулугун текшериңиз
  4. Макетти ырастоо — аралыкты жана тегиздөөнү текшериңиз
  5. Дизайнды бекитүү — тема түзүүгө өтүңүз

Кийинки кадамдар​

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

  1. Theme Builder толук темаңызды түзөт
  2. Тема WordPress site'ыңызга орнотулат
  3. WordPress customizer аркылуу мындан ары да ыңгайлаштыра аласыз
  4. Hospitality Menus же башка функцияларга өтүңүз

Мыкты тажрыйбалар​

  • Чыныгы түзмөктөрдө сынаңыз — мүмкүн болсо, чыныгы телефондорду жана планшеттерди колдонуңуз
  • Окумдуулукту текшериңиз — текст бардык өлчөмдөрдө окула турганын камсыздаңыз
  • Контрастты текшериңиз — жеткиликтүүлүк үчүн Validate Palette Contrast колдонуңуз
  • Өндүрүмдүүлүктү эске алыңыз — ылдамдык үчүн сүрөттөрдү жана ариптерди оптималдаштырыңыз
  • Мазмунду пландаңыз — макет иш жүзүндөгү мазмунуңуз менен иштей турганын камсыздаңыз

Көйгөйлөрдү чечүү​

Алдын ала көрүү жаңырбай жатат​

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

Түстөр башкача көрүнөт​

  • Монитордун түс жөндөөлөрүн текшериңиз
  • Ар кандай түзмөктөрдө сынап көрүңүз
  • Жеткиликтүүлүк куралдары менен түс контрастын текшериңиз
  • Түс сокурлугунун симуляторлорун эске алыңыз

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

  • Арип файлдары жүктөлүп жатканын текшериңиз
  • Ар кандай чекиттерде арип өлчөмүн текшериңиз
  • Иш жүзүндөгү мазмун менен сынаңыз
  • Окумдуулук үчүн сап узундугун эске алыңыз