Преминете към основното съдържание

Дирекция на дизайна

Стъпката „Дирекция на дизайна“ ви позволява да прегледате, доработите и финализирате визуалния дизайн на вашата тема, преди Theme Builder да генерира цялостната тема.

Преглед​

След завършване на Интервюто за откриване (Discovery Interview), Theme Builder представя вашата дизайн посока с предварително визуализиране за десктоп и мобилно устройство. Това ви позволява да видите точно как ще изглежда дизайна ви на различни устройства, преди да се ангажирате с темата.

Компоненти на Дирекция на дизайна​

1. Цветова палитра​

Цветовата схема на вашата тема включва:

  • Основен цвят (Primary color) — основният фирмен цвят, използван за бутони, връзки и акценти
  • Вторичен цвят (Secondary color) — допълващ цвят за разнообразие
  • Акцентен цвят (Accent color) — цвят за подчертаване на важни елементи
  • Неутрални цветове (Neutral colors) — сиви и бели за фонове и текст
  • Цвят на текста (Text color) — основен цвят на текста за лесно четене

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

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

  • Заглавен шрифт (Heading font) — използван за заглавия на страници и секции
  • Основен шрифт (Body font) — използван за параграфски текст и съдържание
  • Размери на шрифта (Font sizes) — адаптивни размери за различни екрани
  • Линейно прекътяване (Line height) — интервал между редовете за лесно четене
  • Тегло на шрифта (Font weights) — варианти като бял, нормален и полудебел

3. Макет и отстъпи​

  • Ширина на контейнера (Container width) — максимална ширина за съдържанието
  • Отстъпи и маржове (Padding and margins) — интервал около елементите
  • Грид система (Grid system) — колонен макет за адаптивен дизайн
  • Интервал между компоненти (Component spacing) — разстояние между елементите на потребителския интерфейс

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

  • Стили на бутони (Button styles) — дизайни за основни, вторични и третинни бутони
  • Дизайни на карти (Card designs) — макети за блокове съдържание
  • Икони (Icons) — стил и размер на иконите
  • Рамки и сенки (Borders and shadows) — фини визуални дълбочини
  • Ефекти при преминаване (Hover effects) — стилизиране на интерактивни състояния

Предварително визуализиране (Preview Rendering)​

Десктоп преглед​

Десктопният преглед показва дизайна ви на пълна ширина (обикновено 1200px или повече):

  • Пълно навигационно меню
  • Изпълнен макет с всички колони
  • Голям типографски дизайн и отстъпи
  • Всички визуални елементи в пълния си размер

Мобилен преглед​

Мобилният преглед показва дизайна ви на мобилна ширина (обикновено 375px):

  • Адаптивно навигационно меню (хамбургер меню)
  • Макет с една колона
  • Преработен типографски дизайн и отстъпи
  • Размери на бутони, удобни за докосване

Адаптивни точки на прекъсване (Responsive Breakpoints)​

Theme Builder генерира предварителни прегледи в тези точки на прекъсване:

УстройствоШиринаПреглед
Мобилно375pxПортретен телефон
Таблет768pxПейзажен таблет
Десктоп1200pxПълна ширина десктоп
Голям десктоп1920pxУлтраширок дисплей

Доработване на дизайна ви​

Направяне на корекции​

Можете да доработите дирекция на дизайна си чрез:

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

Актуализации на прегледите​

Промените се отразяват в реално време:

  • Десктопният преглед се актуализира незабавно
  • Мобилният преглед се актуализира незабавно
  • Всички адаптивни точки на прекъсване се актуализират
  • Можете да превключвате между прегледите, за да проверите промените

Сравнителен преглед​

Сравнете дирекция на дизайна си с:

  • Оригинален дизайн — виждате какво се е променило
  • Дизайни на конкуренти — сравнявате с сайтове за вдъхновение
  • По-предишни версии — се връщате към по-раншни дизайн посоки

Одобрение на Дирекция на дизайна​

Когато сте удовлетворени от дизайна си:

  1. Прегледайте двата прегледа — потвърдете, че десктопът и мобилният изглеждат добре
  2. Проверете всички цветове — уверете се, че контрастността и достъпността са осигурени
  3. Тествайте типографията — потвърдете четимостта при всички размери
  4. Потвърдете макета — проверете отстъпите и подравняването
  5. Одобрете дизайна — продължете към генериране на темата

Следващи стъпки​

След като одобрите дирекция на дизайна си:

  1. Theme Builder генерира вашата пълна тема
  2. Темата се инсталира в сайта ви, работещ с WordPress
  3. Можете да персонализирате допълнително с помощта на WordPress customizer
  4. Продължете към Hospitality Menus или други функции

Най-добри практики​

  • Тествайте на реални устройства — ако е възможно, използвайте реални телефони и таблети
  • Проверете четимостта — уверете се, че текстът е лесно четим при всички размери
  • Проверете контраста — използвайте Validate Palette Contrast за достъпност
  • Мислете за производителността — оптимизирайте изображенията и шрифтовете за скорост
  • Планирайте съдържанието — уверете се, че макетът работи с вашето реално съдържание

Отстраняване на проблеми​

Прегледът не се актуализира​

  • Обновете страницата
  • Изчистете кеша на браузъра
  • Опитайте различен браузър
  • Проверете интернет връзката

Цветовете изглеждат различно​

  • Проверете настройките на цвета на монитора
  • Опитайте на различни устройства
  • Проверете контраста на цветовете с инструменти за достъпност
  • Помислете за симулатори на цветово слепота

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

  • Проверете дали файловете на шрифтовете се зареждат
  • Проверете размера на шрифта при различни точки на прекъсване
  • Тествайте със собствено съдържание
  • Помислете за дължината на редовете за лесно четене