Liigu peamise sisu juurde

Disainisuund

Samm Disainisuund võimaldab sul enne seda, kui Theme Builder loob täieliku teema, oma teema visuaalse kujunduse üle vaadata, seda viimistleda ja lõplikult kinnitada.

Ülevaade​

Pärast Discovery Interview lõpetamist esitab Theme Builder sinu disainisuuna koos desktop- ja mobiilieelvaate renderdusega. See võimaldab sul enne teemale pühendumist täpselt näha, kuidas sinu kujundus eri seadmetes välja näeb.

Disainisuuna komponendid​

1. Värvipalett​

Sinu teema värviskeem, sealhulgas:

  • Põhivärv — peamine brändivärv, mida kasutatakse nuppude, linkide ja aktsentide jaoks
  • Teisene värv — täiendav värv vahelduse loomiseks
  • Aktsentvärv — esiletõstevärv oluliste elementide jaoks
  • Neutraalsed värvid — hallid ja valged taustade ning teksti jaoks
  • Tekstivärv — peamine tekstivärv loetavuse tagamiseks

2. Tüpograafia​

Fondid järgmisteks otstarveteks:

  • Pealkirjafont — kasutatakse lehepealkirjade ja jaotiste pealkirjade jaoks
  • Põhiteksti font — kasutatakse lõiguteksti ja sisu jaoks
  • Fondisuurused — eri ekraanisuurustele kohanduv suurus
  • Reavahe — ridadevaheline vahe loetavuse tagamiseks
  • Fondikaalud — paksud, tavalised ja kerged variatsioonid

3. Paigutus ja vahed​

  • Konteineri laius — sisu maksimaalne laius
  • Sisemised ja välised veerised — elementide ümber olevad vahed
  • Ruudustikusüsteem — veerupõhine paigutus responsiivse disaini jaoks
  • Komponentide vahed — kaugus UI-elementide vahel

4. Visuaalsed elemendid​

  • Nupustiilid — esmased, teisesed ja kolmandased nupukujundused
  • Kaardikujundused — sisublokkide paigutused
  • Ikoonid — ikoonide stiil ja suurus
  • Äärised ja varjud — peen visuaalne sügavus
  • Hõljutusefektid — interaktiivse oleku stiilimine

Eelvaate renderdus​

Desktop-eelvaade​

Desktop-eelvaade näitab sinu kujundust täislaiuses (tavaliselt 1200px või laiem):

  • Täielik navigeerimismenüü
  • Täielik paigutus kõigi veergudega
  • Suur tüpograafia ja vahed
  • Kõik visuaalsed elemendid täissuuruses

Mobiilieelvaade​

Mobiilieelvaade näitab sinu kujundust mobiililaiuses (tavaliselt 375px):

  • Responsiivne navigeerimine (hamburger-menüü)
  • Ühe veeruga paigutus
  • Kohandatud tüpograafia ja vahed
  • Puutesõbralikud nupusuurused

Responsiivsed murdepunktid​

Theme Builder renderdab eelvaated nendel murdepunktidel:

SeadeLaiusEelvaade
Mobiil375pxPüstpaigutusega telefon
Tahvelarvuti768pxRõhtpaigutusega tahvelarvuti
Desktop1200pxTäislaiuses desktop
Suur desktop1920pxÜlilai ekraan

Disaini viimistlemine​

Muudatuste tegemine​

Saad oma disainisuunda viimistleda järgmiselt:

  1. Värvide kohandamine — muuda paletis mis tahes värvi
  2. Fontide muutmine — vali teistsugused kirjatüübid
  3. Vahede muutmine — kohanda sisemisi ja väliseid veeriseid
  4. Paigutuse uuendamine — muuda konteinerite laiusi ja ruudustiku veerge
  5. Elementide kohandamine — muuda nupustiile, kaardikujundusi jne.

Eelvaate uuendused​

Muudatused kajastuvad reaalajas:

  • Desktop-eelvaade uueneb kohe
  • Mobiilieelvaade uueneb kohe
  • Kõik responsiivsed murdepunktid uuendatakse
  • Saad eelvaadete vahel vahetada, et muudatusi kontrollida

Võrdlusvaade​

Võrdle oma disainisuunda järgmistega:

  • Algne kujundus — vaata, mis muutus
  • Konkurentide kujundused — võrdle inspiratsioonisaitidega
  • Eelmised versioonid — naase varasemate disainisuundade juurde

Disainisuuna kinnitamine​

Kui oled oma kujundusega rahul:

  1. Vaata üle mõlemad eelvaated — kontrolli, et desktop ja mobiil näeksid head välja
  2. Kontrolli kõiki värve — taga kontrast ja ligipääsetavus
  3. Testi tüpograafiat — kontrolli loetavust kõigis suurustes
  4. Kinnita paigutus — kontrolli vahesid ja joondust
  5. Kinnita disain — liigu edasi teema genereerimise juurde

Järgmised sammud​

Pärast disainisuuna kinnitamist:

  1. Theme Builder genereerib sinu täieliku teema
  2. Teema paigaldatakse sinu WordPress saidile
  3. Saad seda WordPressi kohandaja abil edasi kohandada
  4. Liigu edasi jaotisse Hospitality Menus või muude funktsioonide juurde

Parimad tavad​

  • Testi pärisseadmetes — kasuta võimaluse korral päris telefone ja tahvelarvuteid
  • Kontrolli loetavust — veendu, et tekst oleks loetav kõigis suurustes
  • Kontrolli kontrasti — kasuta ligipääsetavuse jaoks tööriista Validate Palette Contrast
  • Arvesta jõudlusega — optimeeri pildid ja fondid kiiruse jaoks
  • Planeeri sisu jaoks — veendu, et paigutus töötaks sinu tegeliku sisuga

Tõrkeotsing​

Eelvaade ei uuene​

  • Värskenda lehte
  • Tühjenda brauseri vahemälu
  • Proovi teist brauserit
  • Kontrolli internetiühendust

Värvid näevad erinevad välja​

  • Kontrolli monitori värviseadeid
  • Proovi eri seadmetes
  • Kontrolli värvikontrasti ligipääsetavuse tööriistadega
  • Kaalu värvipimeduse simulaatorite kasutamist

Tüpograafiaprobleemid​

  • Kontrolli, et fondifailid laaditakse
  • Kontrolli fondisuurust eri murdepunktides
  • Testi tegeliku sisuga
  • Arvesta loetavuse jaoks rea pikkusega