Skip to main content

Дизайн юнәлеше

Дизайн юнәлеше адымы Theme Builder тулы теманы ясаганчы, темагызның визуаль дизайнын карап чыгарга, камилләштерергә һәм тәмамларга мөмкинлек бирә.

Гомуми күзәтү​

Discovery Interview тәмамланганнан соң, Theme Builder сезнең дизайн юнәлешен desktop һәм mobile алдан карау рендерингы белән күрсәтә. Бу темага күчкәнче дизайныгызның төрле җайланмаларда ничек күренәчәген төгәл күрергә мөмкинлек бирә.

Дизайн юнәлеше компонентлары​

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

Темагызның төсләр схемасы, шул исәптән:

  • Төп төс — төймәләр, сылтамалар һәм акцентлар өчен кулланыла торган төп бренд төсе
  • Икенчел төс — төрлелек өчен өстәмә төс
  • Акцент төсе — мөһим элементлар өчен аерып күрсәтү төсе
  • Нейтраль төсләр — фоннар һәм текст өчен соры һәм ак төсләр
  • Текст төсе — укылучанлык өчен төп текст төсе

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

Шрифт сайлаулары:

  • Башлык шрифты — бит исемнәре һәм бүлек башлыклары өчен кулланыла
  • Төп текст шрифты — абзац тексты һәм эчтәлек өчен кулланыла
  • Шрифт үлчәмнәре — төрле экран үлчәмнәре өчен җайлашучан үлчәмнәр
  • Юл биеклеге — укылучанлык өчен юллар арасындагы ара
  • Шрифт калынлыклары — калын, гадәти һәм җиңел вариантлар

3. Макет һәм аралар​

  • Контейнер киңлеге — эчтәлек өчен максималь киңлек
  • Эчке һәм тышкы чигенешләр — элементлар тирәсендәге аралар
  • Челтәр системасы — җайлашучан дизайн өчен баганалы макет
  • Компонентлар арасы — UI элементлары арасындагы ераклык

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

  • Төймә стильләре — төп, икенчел һәм өченчел төймә дизайннары
  • Карточка дизайннары — эчтәлек блоклары өчен макетлар
  • Иконалар — икона стиле һәм үлчәме
  • Чикләр һәм күләгәләр — нечкә визуаль тирәнлек
  • Өстенә китерү эффектлары — интерактив халәт стилизациясе

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

Desktop алдан карау​

Desktop алдан карау дизайныгызны тулы киңлектә күрсәтә (гадәттә 1200px яки киңрәк):

  • Тулы навигация менюсы
  • Барлык баганалар белән тулы макет
  • Зур типографика һәм аралар
  • Барлык визуаль элементлар тулы үлчәмдә

Mobile алдан карау​

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

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

Җайлашучан өзелү нокталары​

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 сайтыгызга урнаштырыла
  3. WordPress customizer ярдәмендә алга таба көйли аласыз
  4. Hospitality Menus яки башка мөмкинлекләргә күчегез

Иң яхшы практикалар​

  • Чын җайланмаларда сынагыз — мөмкин булса, чын телефоннар һәм планшетлар кулланыгыз
  • Укылучанлыкны тикшерегез — текстның барлык үлчәмнәрдә укылуын тәэмин итегез
  • Контрастны раслагыз — мөмкинлеклелек өчен Палитра контрастын тикшерү кулланыгыз
  • Җитештерүчәнлекне исәпкә алыгыз — тизлек өчен рәсемнәрне һәм шрифтларны оптимальләштерегез
  • Эчтәлекне планлаштырыгыз — макетның сезнең чын эчтәлек белән эшләвен тәэмин итегез

Проблемаларны хәл итү​

Алдан карау яңармаганда​

  • Битне яңартыгыз
  • Браузер кэшын чистартыгыз
  • Башка браузер кулланып карагыз
  • Интернет тоташуын тикшерегез

Төсләр башкача күренсә​

  • Мониторның төс көйләүләрен тикшерегез
  • Төрле җайланмаларда сынап карагыз
  • Мөмкинлеклелек кораллары белән төс контрастын раслагыз
  • Төс сукырлыгы симуляторларын исәпкә алыгыз

Типографика проблемалары​

  • Шрифт файллары йөкләнүен раслагыз
  • Төрле өзелү нокталарында шрифт үлчәмен тикшерегез
  • Чын эчтәлек белән сынагыз
  • Укылучанлык өчен юл озынлыгын исәпкә алыгыз