Skip to main content

Ọgbọn Ẹwa Eto Apẹrẹ

Ọgbọn Ẹwa Eto Apẹrẹ jẹ ọna itọsọna fun fífi ìdánimọ̀ ojú-wíwo ojúlé rẹ ṣe dáadáa. Ó ràn ọ́ lọ́wọ́ láti ṣe àwọn ìpinnu tó bá ara wọn mu nípa typography, àwọ̀, ààyè, àti àwọn àmi ìṣipopada tó ń ṣàlàyé eto apẹrẹ rẹ.

Kí ni Ẹwa Eto Apẹrẹ?​

Ẹwa Eto Apẹrẹ jẹ́ ọgbọn tí a ṣètò tó bo:

  • Typography: Àwọn idílé font, ìwọ̀n, ìwúwo, àti gíga ìlà
  • Àwọ̀: Àwọn palẹti àkọ́kọ́, àtìlẹ́yìn, ìfọkànsí, àti aláìléyà
  • Ààyè: Àwọn ìwọ̀n padding, margin, àti gap
  • Ààlà: Àwọn àmi radius àti ìbú
  • Òjìji: Àwọn àmi ìgbéga àti ìjìnlẹ̀
  • Ìṣipopada: Àwọn animation àti transition

Àwọn ìpinnu wọ̀nyí ni a gba sínú fáìlì theme.json theme rẹ, tí ó ń dá eto ojú-wíwo tó wà ní ìṣọ̀kan sílẹ̀.

Kí ló dé tí a fi ń Lo Ẹwa Eto Apẹrẹ?​

Ìṣọ̀kan​

Eto apẹrẹ ń rí dájú pé:

  • Gbogbo ọ̀rọ̀ ń lo ìwọ̀n typography kan náà
  • Àwọn àwọ̀ ni a ń lo ní ìṣọ̀kan jákèjádò ojúlé rẹ
  • Ààyè ń tẹ̀lé àpẹẹrẹ tí a lè fọkàn tán
  • Àwọn animation ní ìmọ̀lára ìṣọ̀kan

Ìmúlò Rọrùn​

Dípò kí o máa ṣe ìpinnu apẹrẹ lójú-ewé-kọọkan, o:

  • Ṣàlàyé àwọn àmi lẹ́ẹ̀kan
  • Lo wọn níbi gbogbo
  • Ṣe imudojuiwọn káàkiri nípa yíyí iye kan ṣoṣo padà

Ìrọ̀rùn ìyípadà​

O lè:

  • Ṣàtúnṣe gbogbo eto apẹrẹ rẹ ní kíákíá
  • Dán onírúurú ẹwa wò
  • Pa ìṣọ̀kan brand mọ́ nígbà tí ó ń dàgbà

Bí a ṣe ń Mú Ọgbọn Ẹwa Eto Apẹrẹ Ṣiṣẹ́​

Ìmúṣiṣẹ́ Pẹ̀lú Ọwọ́​

O lè bẹ̀rẹ̀ ọgbọn náà nígbàkigbà:

"Ràn mí lọ́wọ́ láti ṣe eto apẹrẹ mi dáadáa"

tàbí

"Ẹ jẹ́ ká mú ẹwa ojúlé mi sunwọ̀n sí i"

tàbí

"Ṣe ìtọ́sọ́nà fún mi nípa àwọn ìpinnu eto apẹrẹ"

Àwọn Ìmọ̀ràn Aládàáṣiṣẹ́​

Àwọn agent lè dábàá lílo ọgbọn náà nígbà tí o:

  • Béèrè fún àwọn ìyípadà apẹrẹ
  • Béèrè fún àtúnṣe apẹrẹ “igbalode” tàbí “amọdaju”
  • Fẹ́ mú ìṣọ̀kan ojú-wíwo sunwọ̀n sí i
  • Ń múra láti ṣe ifilọlẹ ojúlé rẹ

Ìlànà Ẹwa Eto Apẹrẹ​

Ìgbésẹ̀ 1: Typography​

Agent náà béèrè nípa àwọn yíyàn font rẹ:

Kí ni ara typography tí o fẹ́?
- Serif (ti ìbílẹ̀, alárinrin)
- Sans-serif (igbalode, mímọ́)
- Monospace (ìmọ̀-ẹ̀rọ, dojúkọ code)

Fún font àkọlé rẹ:
- Ṣé o fẹ́ font àkọlé tó yàtọ̀, tàbí kí o lo èyí kan náà bí ọ̀rọ̀ ara?
- Ìfẹ́: bold, alárinrin, alárìnkiri, díẹ̀?

Fún font ara rẹ:
- Rírọrùn láti kà jẹ́ kókó. Ṣé o fẹ́:
  - Ọ̀rọ̀ tó tóbi sí i, tó ní ààyè púpọ̀ sí i
  - Ọ̀rọ̀ tó ṣokùnfà, tó munadoko
  - Ìwọ̀n boṣewa

Lẹ́yìn náà agent náà ṣàlàyé:

  • Font àkọlé: Font àkọ́kọ́ fún àwọn akọle àti heading
  • Font ara: Font fún àwọn ìpínrọ̀ àti ọ̀rọ̀ ara
  • Font monospace: Font fún code àti àkóónú ìmọ̀-ẹ̀rọ
  • Ìwọ̀n ìpele: Àwọn ìwọ̀n tí a ti ṣàlàyé tẹ́lẹ̀ (kékeré, ìpilẹ̀, ńlá, XL, àti bẹ́ẹ̀ bẹ́ẹ̀ lọ)
  • Ìpele ìwúwo: Àwọn ìwúwo font (déédéé, àárín, bold, àti bẹ́ẹ̀ bẹ́ẹ̀ lọ)
  • Gíga ìlà: Ààyè láàárín àwọn ìlà fún rírọrùn láti kà

Ìgbésẹ̀ 2: Palẹti Àwọ̀​

Ẹ jẹ́ ká ṣàlàyé palẹti àwọ̀ rẹ.

Àwọ̀ àkọ́kọ́ (àwọ̀ brand rẹ):
- Lọ́wọ́lọ́wọ́: [fi àwọ̀ tó wà hàn]
- Yí padà sí: [ayan àwọ̀ tàbí hex code]

Àwọ̀ àtìlẹ́yìn:
- Lọ́wọ́lọ́wọ́: [fi àwọ̀ tó wà hàn]
- Yí padà sí: [ayan àwọ̀ tàbí hex code]

Àwọ̀ ìfọkànsí (àwọn ìfihàn àti CTAs):
- Lọ́wọ́lọ́wọ́: [fi àwọ̀ tó wà hàn]
- Yí padà sí: [ayan àwọ̀ tàbí hex code]

Palẹti aláìléyà (àwọn grẹy fún ọ̀rọ̀, ààlà, abẹ́lẹ̀):
- Fúyẹ́: [àwọ̀]
- Àárín: [àwọ̀]
- Dúdú: [àwọ̀]

Agent náà dá palẹti pípé sílẹ̀ tó ní:

  • Àwọn àwọ̀ àkọ́kọ́, àtìlẹ́yìn, àti ìfọkànsí
  • Àwọn grẹy aláìléyà (fúyẹ́, àárín, dúdú)
  • Àwọn àwọ̀ itumọ̀ (àṣeyọrí, ìkìlọ̀, aṣìṣe)
  • Àwọn ipo hover àti active

Ìgbésẹ̀ 3: Ààyè​

Ààyè ìmí mélòó ni o fẹ́?

Ìfẹ́ ìpele ààyè:
- Ṣokùnfà (àwọn àtòjọ tó sunmọ́ra, tó munadoko)
- Déédéé (ààyè tó wà ní ìwòntúnwònsì)
- Gbooro (whitespace lọ́pọ̀)

Èyí kan:
- Padding inú àwọn bọtìnì àti cards
- Àwọn margin láàárín àwọn apá
- Gap láàárín àwọn ohun grid

Agent náà ṣàlàyé àwọn àmi ààyè:

  • Ẹyọ ìpilẹ̀ (nígbà púpọ̀ 4px tàbí 8px)
  • Ìpele: xs, sm, md, lg, xl, 2xl
  • Àwọn iye pàtó fún padding, margin, gap

Ìgbésẹ̀ 4: Ààlà àti Òjìji​

Ìjìnlẹ̀ ojú-wíwo àti ìtumọ̀:

Ìfẹ́ radius ààlà:
- Mímú (kò sí yíyí ká)
- Fẹẹrẹ́ (radius kékeré)
- Yí ká (radius àárín)
- Yí ká gan-an (radius ńlá)

Ìjìnlẹ̀ òjìji:
- Pẹlẹbẹ (kò sí òjìji)
- Fẹẹrẹ́ (òjìji fúyẹ́)
- Kedere (òjìji tó lágbára)

Agent náà dáwọ̀n sílẹ̀:

  • Àwọn àmi radius ààlà (fún àwọn bọtìnì, cards, inputs)
  • Àwọn àmi òjìji fún àwọn ìpele ìgbéga
  • Àwọn àmi ìbú ààlà

Ìgbésẹ̀ 5: Ìṣipopada àti Animation​

Báwo ni ojúlé rẹ ṣe yẹ kí ó ní ìmọ̀lára nígbà tí a bá ń bá a ṣepọ̀?

Ìfẹ́ animation:
- Kéré jù (kò sí animation)
- Fẹẹrẹ́ (àwọn transition pẹ̀lẹ́)
- Alárìnkiri (àwọn animation tí a lè rí kedere)

Àwọn animation pàtó:
- Àwọn transition ojú-ewé: fade, slide, tàbí kò sí?
- Hover bọtìnì: scale, ìyípadà àwọ̀, tàbí méjèèjì?
- Àwọn ipo loading: spinner, skeleton, tàbí progress bar?

Agent náà ṣàlàyé:

  • Àwọn àkókò transition (yára, déédéé, lọ́ra)
  • Àwọn iṣẹ́ easing (ease-in, ease-out, ease-in-out)
  • Àwọn keyframe animation fún àwọn ìbáṣepọ̀ tí ó wọ́pọ̀

Fífi Ẹwa Eto Apẹrẹ Sí Lílò​

Ìmúlò Aládàáṣiṣẹ́​

Lẹ́yìn tí o bá parí ọgbọn náà, agent náà:

  1. Ṣe imudojuiwọn theme.json theme rẹ pẹ̀lú gbogbo àwọn àmi
  2. Fi eto apẹrẹ náà sí theme tí ó ń ṣiṣẹ́
  3. Tún àwọn ara block ṣe kí wọ́n bá eto tuntun mu
  4. Mú theme tí a ṣe imudojuiwọn ṣiṣẹ́

Ìmúlò Pẹ̀lú Ọwọ́​

O tún lè ṣàtúnṣe theme.json tààrà:

{
  "version": 3,
  "settings": {
    "color": {
      "palette": [
        {
          "color": "#0066CC",
          "name": "Primary",
          "slug": "primary"
        }
      ]
    },
    "typography": {
      "fontFamilies": [
        {
          "fontFamily": "Inter, sans-serif",
          "name": "Body",
          "slug": "body"
        }
      ]
    },
    "spacing": {
      "spacingSizes": [
        {
          "size": "0.5rem",
          "name": "Small",
          "slug": "sm"
        }
      ]
    }
  }
}

Wíwo Eto Apẹrẹ Rẹ​

Béèrè lọ́wọ́ Agent Náà​

"Fi eto apẹrẹ mi hàn mí"

tàbí

"Kí ni àwọn àmi apẹrẹ mi lọ́wọ́lọ́wọ́?"

Agent náà yóò ṣàfihàn typography, àwọn àwọ̀, ààyè, àti àwọn àmi míì rẹ.

Wo theme.json​

Ṣí /wp-content/themes/[theme-name]/theme.json nínú olootu ọrọ láti wo àwọn ìtumọ̀ token àìṣeéṣe.

Mímúdójúìwọ̀n Eto Onírú Rẹ​

Àwọn Ìmúdójúìwọ̀n Kíákíá​

Béèrè lọ́wọ́ aṣojú fún àwọn ìyípadà pàtó:

"Jẹ́ kí àwọ̀ àkọ́kọ́ ṣókùnkùn síi"

tàbí

"Pọ̀n ìwọn ààlà síi ní 20%"

tàbí

"Yí font àkọlé padà sí serif"

Àtúnṣe Onírú Kíkún​

Ṣiṣe ọgbọn Ẹwa Eto Onírú náà lẹ́ẹ̀kansi:

"Ẹ jẹ́ ká tún gbogbo eto onírú mi ṣe"

Èyí yóò tọ́ ọ sọ́nà nípasẹ̀ gbogbo ìpinnu lẹ́ẹ̀kansi, bẹ̀rẹ̀ pẹ̀lú àwọn iye rẹ lọwọlọwọ.

Àwọn Ìmúdójúìwọ̀n Apá Kan​

Mú àwọn abala pàtó dójúìwọ̀n:

"Kàn mú palẹti àwọ̀ dójúìwọ̀n, pa gbogbo ohun mìíràn mọ́"

Àwọn Ìlànà Dídára Jùlọ fún Eto Onírú​

Ìbámu​

  • Lo àwọn token kan náà níbi gbogbo
  • Má ṣe dá àwọn àwọ̀ tàbí ìwọn ẹlẹ́ẹ̀kan-ṣoṣo
  • Tọ́ka sí àwọn token dípò fífi iye sínú koodu taara

Fífún ní Orúkọ​

Lo àwọn orúkọ tó ṣe kedere, tó ní ìtumọ̀:

  • ✓ primary, secondary, accent

  • ✗ blue, color-1, main

  • ✓ heading-lg, body-sm

  • ✗ font-size-24, text-large

Ìfaradà sí Ìdàgbàsókè​

Ṣe eto rẹ kí ó lè gbooro:

  • Lo àwọn ẹyọ ìwọn ìbátan (rem, em) dípò pixels
  • Dá àwọn ìwọn àtòjọ (xs, sm, md, lg, xl) dípò àwọn iye aláìlànà
  • Gbero fún àwọn àfikún ọjọ́ iwájú

Ìkọsílẹ̀​

Ṣe ìkọsílẹ̀ eto onírú rẹ:

  • Ìdí tí o fi yan àwọn àwọ̀ pàtó
  • Ìgbà tí a gbọdọ̀ lo token kọ̀ọ̀kan
  • Àwọn àyọkúrò àti àwọn ọ̀rọ̀ pàtàkì

Àwọn Àpẹẹrẹ Eto Onírú Tí Ó Wọ́pọ̀​

Ìrísí Tuntun Tí Ó Rọrùn​

  • Typography sans-serif (Inter, Helvetica)
  • Palẹti àwọ̀ tó lopin (àwọ̀ 2-3)
  • Ààlà tó pọ̀
  • Àwọn ojiji fífẹ́
  • Àwọn animation tó dan, tó yára

Gbígbóná àti Ọ̀rẹ́​

  • Àdàpọ̀ serif àti sans-serif
  • Palẹti àwọ̀ gbígbóná (ọsan, grẹ́ẹ̀yì gbígbóná)
  • Àwọn igun yíyí
  • Àwọn ojiji rírọ̀
  • Àwọn animation alárinrin

Ilé-iṣẹ́ Amọ̀ṣẹ́dunjú​

  • Sans-serif mímọ́ (Roboto, Open Sans)
  • Palẹti àìmọ̀kan pẹ̀lú àwọ̀ ìtẹnumọ́
  • Ààlà tó ní ètò
  • Àwọn ojiji díẹ̀
  • Àwọn ìyípadà fífẹ́

Ṣíṣẹ̀dá àti Líle​

  • Typography tó yàtọ̀
  • Palẹti àwọ̀ tó lágbára
  • Ààlà onírúurú
  • Àwọn ojiji tó lágbára
  • Àwọn animation tó hàn gbangba

Ìṣàtúnṣe Ìṣòro​

Àwọn ìyípadà eto onírú mi kò hàn

  • Pa cache aṣàwákiri rẹ rẹ́
  • Tún aaye rẹ kọ́ bí o bá ń lo static generator
  • Ṣàyẹ̀wò pé theme.json jẹ́ JSON tó tọ́
  • Jẹ́rìí pé theme náà wà ní ìṣiṣẹ́

Àwọn àwọ̀ náà dàbí ẹni pé ó yàtọ̀ lórí àwọn ojúewé yàtọ̀

  • Ṣàyẹ̀wò CSS tó ń tako ara rẹ nínú àwọn àfikún
  • Jẹ́rìí pé gbogbo ojúewé lo theme kan náà
  • Pa àwọn àfikún caching èyíkéyìí rẹ́

Mo fẹ́ padà sí eto onírú ṣáájú

  • Béèrè lọ́wọ́ aṣojú: "Fi itan eto onírú mi hàn mí"
  • Ṣàtúnṣe theme.json pẹ̀lú ọwọ́ sí àwọn iye ṣáájú
  • Ṣiṣe ọgbọn náà lẹ́ẹ̀kansi pẹ̀lú àwọn yíyàn yàtọ̀

Àwọn Ìgbésẹ̀ Tó Kàn​

Lẹ́yìn tí o bá ti ṣàlàyé eto onírú rẹ:

  1. Ṣàyẹ̀wò aaye rẹ: Ṣàbẹ̀wò sí aaye rẹ láti wo onírú tuntun náà
  2. Tún un ṣe síi: Ṣe àwọn àtúnṣe ní lílo ọgbọn náà lẹ́ẹ̀kansi
  3. Dá àwọn awoṣe: Kọ́ àwọn awoṣe bulọọki àdáni ní lílo àwọn token onírú rẹ
  4. Ṣe ìkọsílẹ̀: Pín eto onírú rẹ pẹ̀lú àwọn ọmọ ẹgbẹ́ ẹgbẹ́ iṣẹ́ rẹ