Skip to main content

Насока на дизајн

Чекорот Насока на дизајн ви овозможува да го прегледате, усовршите и финализирате визуелниот дизајн на вашата тема пред Theme Builder да ја генерира целосната тема.

Преглед​

По завршување на Discovery Interview, 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. Продолжете кон Hospitality Menus или други функции

Најдобри практики​

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

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

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

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

Боите изгледаат различно​

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

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

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