Пређи на главни садржај

Смер дизајна

Корак Смер дизајна омогућава вам да прегледате, дотерате и финализујете визуелни дизајн своје теме пре него што Theme Builder генерише комплетну тему.

Преглед​

Након завршетка интервјуа за откривање, Theme Builder приказује ваш смер дизајна са рендеровањем прегледа за десктоп и мобилне уређаје. То вам омогућава да тачно видите како ће ваш дизајн изгледати на различитим уређајима пре него што се обавежете на тему.

Компоненте смера дизајна​

1. Палета боја​

Шема боја ваше теме, укључујући:

  • Примарна боја — главна боја бренда која се користи за дугмад, линкове и акценте
  • Секундарна боја — комплементарна боја за разноврсност
  • Акцентна боја — боја истицања за важне елементе
  • Неутралне боје — сиве и беле за позадине и текст
  • Боја текста — примарна боја текста ради читљивости

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

Избори фонтова за:

  • Фонт наслова — користи се за наслове страница и заглавља одељака
  • Фонт тела текста — користи се за текст пасуса и садржај
  • Величине фонта — респонзивно димензионисање за различите величине екрана
  • Висина реда — размак између редова ради читљивости
  • Тежине фонта — подебљане, регуларне и лагане варијације

3. Распоред и размаци​

  • Ширина контејнера — максимална ширина за садржај
  • Унутрашњи и спољни размаци — размаци око елемената
  • Систем мреже — распоред колона за респонзивни дизајн
  • Размак између компоненти — удаљеност између UI елемената

4. Визуелни елементи​

  • Стилови дугмади — примарни, секундарни и терцијарни дизајни дугмади
  • Дизајни картица — распореди за блокове садржаја
  • Иконе — стил и величина икона
  • Ивице и сенке — суптилна визуелна дубина
  • Ефекти при преласку мишем — стилизовање интерактивног стања

Рендеровање прегледа​

Преглед за десктоп​

Преглед за десктоп приказује ваш дизајн у пуној ширини (обично 1200px или шире):

  • Комплетан мени за навигацију
  • Потпун распоред са свим колонама
  • Велика типографија и размаци
  • Сви визуелни елементи у пуној величини

Преглед за мобилне уређаје​

Преглед за мобилне уређаје приказује ваш дизајн у мобилној ширини (обично 375px):

  • Респонзивна навигација (хамбургер мени)
  • Распоред у једној колони
  • Прилагођена типографија и размаци
  • Величине дугмади погодне за додир

Респонзивне преломне тачке​

Theme Builder рендерује прегледе на овим преломним тачкама:

УређајШиринаПреглед
Мобилни375pxТелефон у портретној оријентацији
Таблет768pxТаблет у пејзажној оријентацији
Десктоп1200pxДесктоп у пуној ширини
Велики десктоп1920pxУлтрашироки екран

Дотеривање дизајна​

Уношење прилагођавања​

Можете дотерати свој смер дизајна тако што ћете:

  1. Прилагодити боје — промените било коју боју у палети
  2. Променити фонтове — изаберите другачија писма
  3. Изменити размака — прилагодите унутрашње и спољне размаке
  4. Ажурирати распоред — промените ширине контејнера и колоне мреже
  5. Прилагодити елементе — измените стилове дугмади, дизајне картица итд.

Ажурирања прегледа​

Промене се одражавају у реалном времену:

  • Преглед за десктоп се одмах ажурира
  • Преглед за мобилне уређаје се одмах ажурира
  • Све респонзивне преломне тачке се ажурирају
  • Можете се пребацивати између прегледа да бисте проверили промене

Приказ поређења​

Упоредите свој смер дизајна са:

  • Оригинални дизајн — видите шта се променило
  • Дизајни конкурената — упоредите са сајтовима за инспирацију
  • Претходне верзије — вратите се на раније смерове дизајна

Одобрење смера дизајна​

Када будете задовољни својим дизајном:

  1. Прегледајте оба прегледа — проверите да десктоп и мобилни изгледају добро
  2. Проверите све боје — обезбедите контраст и приступачност
  3. Тестирајте типографију — проверите читљивост у свим величинама
  4. Потврдите распоред — проверите размаке и поравнање
  5. Одобрите дизајн — наставите ка генерисању теме

Следећи кораци​

Након одобрења смера дизајна:

  1. Theme Builder генерише вашу комплетну тему
  2. Тема се инсталира на ваш WordPress сајт
  3. Можете додатно прилагодити користећи WordPress прилагођавач
  4. Наставите на Менији за угоститељство или друге функције

Најбоље праксе​

  • Тестирајте на стварним уређајима — користите стварне телефоне и таблете ако је могуће
  • Проверите читљивост — обезбедите да је текст читљив у свим величинама
  • Проверите контраст — користите Провера контраста палете ради приступачности
  • Размотрите перформансе — оптимизујте слике и фонтове за брзину
  • Планирајте садржај — обезбедите да распоред функционише са вашим стварним садржајем

Решавање проблема​

Преглед се не ажурира​

  • Освежите страницу
  • Обришите кеш прегледача
  • Покушајте са другим прегледачем
  • Проверите интернет везу

Боје изгледају другачије​

  • Проверите подешавања боја монитора
  • Покушајте на различитим уређајима
  • Проверите контраст боја помоћу алата за приступачност
  • Размотрите симулаторе далтонизма

Проблеми са типографијом​

  • Проверите да ли се датотеке фонтова учитавају
  • Проверите величину фонта на различитим преломним тачкама
  • Тестирајте са стварним садржајем
  • Размотрите дужину реда ради читљивости