Skip to main content

Dizaina virziens

Design Direction solis ļauj jums pārskatīt, precizēt un pabeigt jūsu tēmas vizuālo dizainu, pirms Theme Builder ģenerē pilnu tēmu.

Pārskats​

Pēc Discovery Interview pabeigšanas Theme Builder parāda jūsu dizaina virzienu ar darbvirsmas un mobilā priekšskatījuma renderēšanu. Tas ļauj jums precīzi redzēt, kā jūsu dizains izskatīsies dažādās ierīcēs, pirms apstiprināt tēmu.

Dizaina virziena komponenti​

1. Krāsu palete​

Jūsu tēmas krāsu shēma, tostarp:

  • Primārā krāsa — galvenā zīmola krāsa, ko izmanto pogām, saitēm un akcentiem
  • Sekundārā krāsa — papildinoša krāsa dažādībai
  • Akcenta krāsa — izcelšanas krāsa svarīgiem elementiem
  • Neitrālās krāsas — pelēkie un baltie toņi foniem un tekstam
  • Teksta krāsa — primārā teksta krāsa salasāmībai

2. Tipogrāfija​

Fontu izvēles:

  • Virsrakstu fonts — izmanto lapu nosaukumiem un sadaļu virsrakstiem
  • Pamatteksta fonts — izmanto rindkopu tekstam un saturam
  • Fontu izmēri — responsīvi izmēri dažādiem ekrāna izmēriem
  • Rindas augstums — atstarpes starp rindām salasāmībai
  • Fontu biezumi — treknas, parastas un vieglas variācijas

3. Izkārtojums un atstarpes​

  • Konteinera platums — maksimālais platums saturam
  • Iekšējās un ārējās atkāpes — atstarpes ap elementiem
  • Režģa sistēma — kolonnu izkārtojums responsīvam dizainam
  • Komponentu atstarpes — attālums starp UI elementiem

4. Vizuālie elementi​

  • Pogu stili — primārie, sekundārie un terciārie pogu dizaini
  • Kartīšu dizaini — izkārtojumi satura blokiem
  • Ikonas — ikonu stils un izmēri
  • Apmales un ēnas — smalks vizuālais dziļums
  • Norādīšanas efekti — interaktīvo stāvokļu stilizēšana

Priekšskatījuma renderēšana​

Darbvirsmas priekšskatījums​

Darbvirsmas priekšskatījums rāda jūsu dizainu pilnā platumā (parasti 1200px vai platāk):

  • Pilna navigācijas izvēlne
  • Pilns izkārtojums ar visām kolonnām
  • Liela tipogrāfija un atstarpes
  • Visi vizuālie elementi pilnā izmērā

Mobilais priekšskatījums​

Mobilais priekšskatījums rāda jūsu dizainu mobilajā platumā (parasti 375px):

  • Responsīva navigācija (hamburgera izvēlne)
  • Vienas kolonnas izkārtojums
  • Pielāgota tipogrāfija un atstarpes
  • Pieskārieniem draudzīgi pogu izmēri

Responsīvie lūzumpunkti​

Theme Builder renderē priekšskatījumus šajos lūzumpunktos:

IerīcePlatumsPriekšskatījums
Mobilā ierīce375pxTālrunis portreta orientācijā
Planšetdators768pxPlanšetdators ainavas orientācijā
Darbvirsma1200pxPilna platuma darbvirsma
Liela darbvirsma1920pxĪpaši plats displejs

Dizaina precizēšana​

Korekciju veikšana​

Jūs varat precizēt savu dizaina virzienu, veicot šādas darbības:

  1. Krāsu pielāgošana — mainiet jebkuru krāsu paletē
  2. Fontu maiņa — izvēlieties citus burtveidolus
  3. Atstarpju modificēšana — pielāgojiet iekšējās un ārējās atkāpes
  4. Izkārtojuma atjaunināšana — mainiet konteinera platumus un režģa kolonnas
  5. Elementu pielāgošana — modificējiet pogu stilus, kartīšu dizainus utt.

Priekšskatījuma atjauninājumi​

Izmaiņas tiek atspoguļotas reāllaikā:

  • Darbvirsmas priekšskatījums atjauninās nekavējoties
  • Mobilais priekšskatījums atjauninās nekavējoties
  • Visi responsīvie lūzumpunkti tiek atjaunināti
  • Jūs varat pārslēgties starp priekšskatījumiem, lai pārbaudītu izmaiņas

Salīdzinājuma skats​

Salīdziniet savu dizaina virzienu ar:

  • Sākotnējo dizainu — skatiet, kas ir mainījies
  • Konkurentu dizainiem — salīdziniet ar iedvesmas vietnēm
  • Iepriekšējām versijām — atgriezieties pie agrākiem dizaina virzieniem

Dizaina virziena apstiprināšana​

Kad esat apmierināts ar savu dizainu:

  1. Pārskatiet abus priekšskatījumus — pārliecinieties, ka darbvirsmas un mobilais skats izskatās labi
  2. Pārbaudiet visas krāsas — nodrošiniet kontrastu un pieejamību
  3. Pārbaudiet tipogrāfiju — pārliecinieties par salasāmību visos izmēros
  4. Apstipriniet izkārtojumu — pārbaudiet atstarpes un līdzinājumu
  5. Apstipriniet dizainu — turpiniet ar tēmas ģenerēšanu

Nākamās darbības​

Pēc dizaina virziena apstiprināšanas:

  1. Theme Builder ģenerē jūsu pilno tēmu
  2. Tēma tiek instalēta jūsu WordPress vietnē
  3. Varat turpināt pielāgošanu, izmantojot WordPress pielāgotāju
  4. Turpiniet uz Viesmīlības izvēlnes vai citām funkcijām

Labākā prakse​

  • Testējiet īstās ierīcēs — ja iespējams, izmantojiet faktiskus tālruņus un planšetdatorus
  • Pārbaudiet salasāmību — pārliecinieties, ka teksts ir salasāms visos izmēros
  • Pārbaudiet kontrastu — izmantojiet Paletes kontrasta validēšana pieejamībai
  • Apsveriet veiktspēju — optimizējiet attēlus un fontus ātrumam
  • Plānojiet saturu — pārliecinieties, ka izkārtojums darbojas ar jūsu faktisko saturu

Problēmu novēršana​

Priekšskatījums neatjauninās​

  • Atsvaidziniet lapu
  • Notīriet pārlūkprogrammas kešatmiņu
  • Izmēģiniet citu pārlūkprogrammu
  • Pārbaudiet interneta savienojumu

Krāsas izskatās atšķirīgi​

  • Pārbaudiet monitora krāsu iestatījumus
  • Izmēģiniet dažādās ierīcēs
  • Pārbaudiet krāsu kontrastu ar pieejamības rīkiem
  • Apsveriet krāsu akluma simulatorus

Tipogrāfijas problēmas​

  • Pārliecinieties, ka fontu faili tiek ielādēti
  • Pārbaudiet fonta izmēru dažādos lūzumpunktos
  • Testējiet ar faktisko saturu
  • Apsveriet rindas garumu salasāmībai