Перейти до основного вмісту

Напрямок дизайну

Крок Напрямок дизайну дозволяє вам переглянути, вдосконалити та фіналізувати візуальний дизайн вашої теми до того, як Theme Builder згенерує повну тему.

Огляд​

Після завершення Інтерв'ю з виявлення потреб (Discovery Interview) Theme Builder представляє ваш напрямок дизайну з візуалізацією попереднього перегляду для десктопа та мобільного пристроїв. Це дає вам можливість побачити, як саме виглядатиме ваш дизайн на різних пристроях, перш ніж фіналізувати тему.

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

1. Кольорова палітра​

Кольорова схема вашої теми, яка включає:

  • Основний колір — головний корпоративний колір, який використовується для кнопок, посилань та акцентів
  • Додатковий колір — колір, що доповнює основний, для створення різноманітності
  • Акцентний колір — колір для виділення важливих елементів
  • Нейтральні кольори — сірі та білі кольори для фонів та тексту
  • Колір тексту — основний колір тексту для забезпечення читабельності

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

Вибір шрифтів для:

  • Заголовний шрифт — використовується для заголовків сторінок та секцій
  • Основний шрифт — використовується для параграфів та основного контенту
  • Розміри шрифтів — адаптивні розміри для різних розмірів екрана
  • Висота рядка — інтервал між рядками для кращої читабельності
  • Накреслення шрифтів — варіанти жирного, звичайного та світлого накреслення

3. Макет та відступи​

  • Ширина контейнера — максимальна ширина контенту
  • Відступи та поля — проміжок навколо елементів
  • Сіткова система — макет у стовпцях для адаптивного дизайну
  • Відступи компонентів — відстань між елементами інтерфейсу

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 для доступності
  • Враховуйте продуктивність — оптимізуйте зображення та шрифти для швидкості
  • Плануйте контент — переконайтеся, що макет працює з вашим фактичним контентом

Усунення несправностей​

Попередній перегляд не оновлюється​

  • Оновіть сторінку
  • Очистіть кеш браузера
  • Спробуйте інший браузер
  • Перевірте підключення до інтернету

Кольори виглядають інакше​

  • Перевірте налаштування кольорів монітора
  • Спробуйте на різних пристроях
  • Перевірте контрастність кольорів за допомогою інструментів доступності
  • Врахуйте симулятори дальтонізму

Проблеми з типографікою​

  • Перевірте, чи завантажуються файли шрифтів
  • Перевірте розмір шрифту на різних точках розриву
  • Тестуйте з фактичним контентом
  • Врахуйте довжину рядка для кращої читабельності

Пов'язана документація​