Перейти к основному содержимому

Направление дизайна

Шаг Направление дизайна позволяет вам просмотреть, доработать и окончательно утвердить визуальный дизайн вашей темы до того, как 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 для проверки доступности
  • Учитывайте производительность — оптимизируйте изображения и шрифты для скорости
  • Планируйте контент — убедитесь, что макет подходит для вашего реального контента

Устранение неполадок​

Предпросмотр не обновляется​

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

Цвета выглядят по-разному​

  • Проверьте настройки цвета монитора
  • Попробуйте на разных устройствах
  • Проверьте контрастность цвета с помощью инструментов доступности
  • Учтите симуляторы дальтонизма

Проблемы с типографикой​

  • Убедитесь, что файлы шрифтов загружаются
  • Проверьте размер шрифта на разных точках останова
  • Протестируйте с реальным контентом
  • Учитывайте длину строки для лучшей читаемости

Связанная документация​