Skip to main content

Наківанне ў дызайн

Крок Наківанне ў дызайн дазваляе вам прагледзець, ўдасканаліць і фіналізаваць візуальны дызайн вашага тэмы, перш чым Theme Builder згенеруе ўсю тэму.

Агляд​

Пасля завяршэння Інтер뷰 па адкрыцці (Discovery Interview), Theme Builder прадастаўляе вам наківанне ў дызайн з папярэднім праглядам для настольных і мабільных прыладдзяў. Гэта дазваляе вам уяржуць, як выглядае ваш дызайн на розных прыладдзях, перш чым фінальна замацаваць тэму.

Камплектуючыя Наківанне ў дызайн​

1. Палітра колераў​

Колерная схема вашай тэмы, уключаючы:

  • Асноўны колер — галоўны колер брэнда, выкарыстоўваецца для кнопак, спасылкі і акцэнтаў
  • Друголепшы колер — колер, які падоўжвае асноўны для разнастайнасці
  • Акцэнтны колер — колер для падкрэслівання важнага кантэнту
  • Нейтральныя колеры — сіры і белы для фонаў і тэксту
  • Колер тэксту — асноўны колер тэксту для выяўлення

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

Выбар шрыфтаў для:

  • Шрыфт для загаловаўкаў — выкарыстоўваецца для заголаваў і падзагаловаўкаў секцый
  • Шрыфт для тэкста — выкарыстоўваецца для абзацаў і кантэнту
  • Памеры шрыфтаў — адаптыўны памер для розных памераў экрана
  • Высота паміжрыдзяў — паміжкрэсніе паміж падырыдзямі для выяўлення
  • Вага шрыфтаў — выпраўлены, звычайны і лёгкі варыянты

3. Макет і паміжкрэсніе​

  • Шырыня кантэйнера — максімальная шырыня кантэнту
  • Падрэўе і маргіны — паміжкрэсніе вакол элементаў
  • Сістэма сеткі — макет у каlauмнах для адаптыўнага дызайну
  • Паміжкрэсніе камплектуючых — адлежка паміж UI-элементамі

4. Візуальныя элементы​

  • Стылі кнопак — дызайн асноўных, друголепшых і тэрціярных кнопак
  • Дызайн картак — макеты для блокаў кантэнту
  • Іканы — стыль і памер іканак
  • Рамкі і цень — тонкая візуальная глыбіня
  • Эфекты на наведванні — стылізацыя ў рэжыме ўзаменнікаў

Рэндерынг папярэдняга прагляду​

Настольны прагляд​

Настольны прагляд паказвае ваш дызайн на поўнай шырыні (завычайна 1200px або больш):

  • Поўны навігацыйны меню
  • Поўны макет са ўсіма каlauмнамі
  • Вялікія тэксты і паміжкрэсніе
  • Усе візуальныя элементы ў поўным памерзе

Мабільны прагляд​

Мабільны прагляд паказвае ваш дызайн на мабільнай шырыні (завычайна 375px):

  • Адаптыўнае навігацыйнае меню (меню-гамбургер)
  • Макет у адным каlauмне
  • Выпраўленыя тэксты і паміжкрэсніе
  • Памеры кнопак, зручныя для тачкі

Адаптыўныя кропкі разрыву​

Theme Builder рэндэруе папярэднія прагляды на гэтых кропках разрыву:

ПрыладдзеШырыняПагляд
Мабільны375pxПоррэтатычны тэлефон
Плэтанка768pxПлэтанка ў паляжыні
Настольны1200pxНастольны экран поўнай шырыні
Большшы настольны1920pxУльтрашырокі дисплей

Удасканаленне вашага дызайну​

Выпраўленні​

Вы можаце ўдасканаліць наківанне ў дызайн, зрабіўшы:

  1. Выпраўленне колераў — змяніце любы колер у палітрай
  2. Змена шрыфтаў — выберыце іншыя шрыфты
  3. Мадыфікацыя паміжкрэслення — выпраўце падрэўе і маргіны
  4. Абнаўленне макета — змяніце шырыні кантэйнера і каlauмны сістэму
  5. Кастыляванне элементаў — змяніце стылі кнопак, дызайн картак і г.

Абнаўленні прагляду​

Змены адлюстроўваюцца ў рэальным часе:

  • Настольны прагляд абнаўляецца неадкладна
  • Мабільны прагляд абнаўляецца неадкладна
  • Усе адаптыўныя кропкі разрыву абнаўляюцца
  • Вы можаце пераключацца паміж праглядамі, каб праверыць змены

Параўнанне​

Параўнаце наківанне ў дызайн з:

  • Арыгінальным дызайном — паглядзіце, што змянілася
  • Дызайном канкурэнтаў — параўнаце з сайтамі-інспірацыямі
  • Папярэднія версіі — вяртайцеся да ранейшых наківаняў ў дызайн

Ахадванне наківанню ў дызайн​

Калі вы захапляліся сваім дызайном:

  1. Пагледзьце абодва прагляды — пераканайцеся, што настольны і мабільны выгляд добра
  2. Праверце ўсе колеры — гарантуйце кантраст і даступнасць
  3. Прагледзьце тэксты — пераканайцеся ў выяўленні на ўсіх памербах
  4. Пацверце макет — праверце паміжкрэсніе і вырівнанне
  5. Ахадуйце дызайн — прайдзіце да генерацыі тэмы

Наступныя крокі​

Пасля ахадвання наківанню ў дызайн:

  1. Theme Builder згенеруе вашу поўную тэму
  2. Тэма ўстаноўваецца на ваш сайт WordPress
  3. Вы можаце далей кастыляваць выкарыстоўваючы кастылізатар WordPress
  4. Прайдзіце да Hospitality Menus або іншых функцый

Найлепшыя практыкі​

  • Праверка на рэальных прыладдзях — выкарыстоўвайце сапраўдныя тэлефоны і плэтанка, калі гэта магчыма
  • Падтрымка выяўленне — гарантуйце, што тэкст выяўляецца на ўсіх памербах
  • Праверка кантрасту — выкарыстоўвайце Validate Palette Contrast для даступнасці
  • Увага на прадукцыйнасць — аптымізуйце імавыя файлы і шрыфты для хуткасці
  • Плаванне кантэнту — гарантуйце, што макет працуе з вашым сапраўдным кантэнтум

Выяўленне праблем​

Прагляд не абнаўляецца​

  • Навяліце старонку
  • Ачысціце кэш браўзера
  • Паспрабуйце іншы браўзер
  • Праверце інтэрнэт-злучэнне

Колеры выглядаюць па-розныму​

  • Праверце налады колераў на манітары
  • Паспрабуйце на розных прыладдзях
  • Праверце колерны кантраст з дапаможнамі інструментамі даступнасці
  • Падумайце пра сімулятары сляпоты на колеры

Праблемы з тэкстамі​

  • Праверце, што файлы шрыфтаў загружаюцца
  • Праверце памер шрыфту на розных кропках разрыву
  • Прагледзьце з сапраўдным кантэнтум
  • Падумайце пра доўжыню падырыдзя для выяўленне

Звязачная дакументацыя​