
Duolingo
ມາສຄອດຂອງຫ້ອງຮຽນທີ່ຫຼິ້ນໆຢູ່ເທິງເຈ້ຍສີຂາວ
ອິນເຕີເຟດຂອງ Duolingo ຖືກອອກແບບຄືກັບປຶ້ມຮູບພາບເດັກນ້ອຍ: ຜ້າໃບເຈ້ຍສີຂາວ, ຕົວອັກສອນມົນ, ແລະສີຂຽວເຂັ້ມດຽວທີ່ເຮັດໃຫ້ນຶກເຖິງ "ຄຳຕອບທີ່ຖືກຕ້ອງ" ທັນທີ. ຕົວໜັງສືຫຼັກແມ່ນໂທນສີເທົາກາງທີ່ຜ່ອນຄາຍ, ຊ່ວຍໃຫ້ສີຂຽວ ແລະ ສີຟ້າທີ່ເນັ້ນໃສ່ສາມາດເຮັດວຽກທາງດ້ານອາລົມໄດ້ທັງໝົດ - ສີຂຽວສຳລັບຄວາມຄືບໜ້າ ແລະ ຫົວຂໍ້, ສີຟ້າສຳລັບລິ້ງທີ່ສາມາດຄລິກໄດ້ ແລະ ການກະທຳເພີ່ມເຕີມ. ອົງປະກອບຕ່າງໆມີຮູບຮ່າງຄ້າຍຄືເມັດ ຫຼື ມຸມມົນໜາໆທີ່ມີຂອບສີດຳ ຫຼື ສີ, ເຮັດໃຫ້ແຕ່ລະປຸ່ມຮູ້ສຶກຄືກັບສະຕິກເກີທີ່ຕິດຢູ່ກັບໜ້າເວັບຫຼາຍກວ່າຕົວຄວບຄຸມ UI ທີ່ຮາບພຽງ.
ພາກສ່ວນຕ່າງໆກວມເອົາຄວາມກວ້າງທັງໝົດຂອງໜ້າ ແລະ ຖືກຈັດລຽງຕາມແນວຕັ້ງໃນຖັນດຽວ, ແຕ່ລະຖັນມີຄວາມສູງປະມານ 800 ພິກເຊວ. ຄວາມກວ້າງສູງສຸດຂອງເນື້ອຫາແມ່ນປະມານ 1 ພິກເຊວຢູ່ໃຈກາງ. ຂໍ້ຄວາມຢູ່ເບື້ອງຊ້າຍ ແລະ ຮູບແຕ້ມຢູ່ເບື້ອງຂວາສະຫຼັບກັນ, ເຊິ່ງໃຫ້ພື້ນທີ່ຕັ້ງທີ່ກວ້າງຂວາງ (80 ພິກເຊວລະຫວ່າງພາກສ່ວນຕ່າງໆ). ບໍ່ມີບັດຕາຂ່າຍໄຟຟ້າ ຫຼື ຮູບແບບຫຼາຍຖັນ - ແຕ່ລະພາກສ່ວນແມ່ນບລັອກຂໍ້ຄວາມດຽວທີ່ຈັບຄູ່ກັບຮູບແຕ້ມດຽວ. ການນຳທາງແມ່ນແຖບດ້ານເທິງແບບ minimalist ທີ່ມີໂລໂກ້ ແລະ ຕົວເລືອກພາສາ, ເຊິ່ງປະກົດເປັນແຖບຄົງທີ່ລະຫວ່າງພາກສ່ວນຕ່າງໆ. ສ່ວນລຸ່ມສຸດແມ່ນແຖບສີຂຽວທີ່ກວມເອົາຄວາມກວ້າງທັງໝົດຂອງໜ້າ. ຈັງຫວະແມ່ນບັນນາທິການ: ຫົວຂໍ້, ວັກ, ການຮຽກຮ້ອງໃຫ້ປະຕິບັດ, ຮູບແຕ້ມ, ການຊ້ຳ.
ພາສາປະກອບຂອງປຶ້ມມີຕົວລະຄອນມາສຄອດສອງມິຕິທີ່ຮາບພຽງ (ຄູ່ນົກຮູກ ແລະ ຮູບຮ່າງມະນຸດຕ່າງໆ) ທີ່ມີຮູບຊົງເລຂາຄະນິດມົນ, ເສັ້ນສີດຳເຂັ້ມ, ແລະ ແຜ່ນສີທີ່ສົມບູນຂອງສີບົວ, ສີມ່ວງ, ສີເຫຼືອງ, ສີສົ້ມ, ແລະ ສີຟ້າທີ່ບໍ່ເຄີຍປາກົດຢູ່ໃນອິນເຕີເຟດ. ຮູບແຕ້ມຕ່າງໆຖືກວາງໄວ້ຂ້າງຂໍ້ຄວາມຢູ່ເບື້ອງຂວາຂອງແຕ່ລະພາກສ່ວນ, ຕິດກັບພື້ນຫຼັງສີຂາວບໍລິສຸດ, ໂດຍບໍ່ມີພາຊະນະ ຫຼື ພື້ນຫຼັງ. ບໍ່ມີຮູບຖ່າຍ - ຕົວລະຄອນເປັນເນື້ອໃນທີ່ເບິ່ງເຫັນໄດ້. ຮູບສັນຍາລັກໃຊ້ເສັ້ນໜາ, ສອດຄ່ອງກັບຮູບແບບຂອງມາສຄອດ. ຄວາມໜາແໜ້ນຂອງຮູບພາບແມ່ນປານກາງ: ແຕ່ລະພາກສ່ວນມີຮູບແຕ້ມຂະໜາດໃຫຍ່ໜຶ່ງຮູບຂອງຕົວລະຄອນ, ໂດຍສ່ວນທີ່ເຫຼືອຂອງໜ້າແມ່ນອຸທິດໃຫ້ກັບຮູບແບບຕົວອັກສອນ ແລະ ພື້ນທີ່ສີຂາວ.
ພາເລັດ
ຍີ່ຫໍ້
- Eager Green
#58cc02— ສີຂຽວໃຊ້ເພື່ອເນັ້ນໃສ່ລິ້ງ, ແທັກ ແລະ ປະໂຫຍກສັ້ນໆ. ມັນບໍ່ຄວນໃຊ້ເປັນສີຫຼັກສຳລັບການຮຽກຮ້ອງໃຫ້ມີການດຳເນີນການ. - Storybook Green
#d7ffb8— ໄຮໄລ້ອ່ອນໆເທິງພື້ນຜິວສີອ່ອນ, ໂທນສີພື້ນຫຼັງອ່ອນໆຢູ່ຫຼັງປ້າຍກຳກັບນຳທາງໃນສ່ວນລຸ່ມສຸດ.
ເປັນກາງ
- Spark Blue
#1cb0f6— ສີຟ້າໃຊ້ເພື່ອເນັ້ນລິ້ງ, ແທັກ ແລະ ປະໂຫຍກສັ້ນໆ. ມັນບໍ່ຄວນໃຊ້ເປັນສີຫຼັກສຳລັບການຮຽກຮ້ອງໃຫ້ມີການດຳເນີນການ. - Fresh Leaf
#a5ed6e— ສີຂຽວໃຊ້ເພື່ອເນັ້ນໃສ່ລິ້ງ, ແທັກ ແລະ ປະໂຫຍກສັ້ນໆ. ມັນບໍ່ຄວນໃຊ້ເປັນສີຫຼັກສຳລັບການຮຽກຮ້ອງໃຫ້ມີການດຳເນີນການ. - Night Ink
#000437— ລິ້ງ, ແທັກ ແລະ ປະໂຫຍກສັ້ນໆທີ່ເນັ້ນໃສ່ຈະຖືກເນັ້ນເປັນສີມ່ວງ. - Paper White
#ffffff— ຜ້າໃບໜ້າ, ໜ້າເຈ້ຍແຂງ, ປຸ່ມຂໍ້ຄວາມຢູ່ພື້ນຫຼັງສີຂຽວ/ເຂັ້ມ. - Charcoal
#4b4b4b— ຫົວຂໍ້ ແລະ ຂໍ້ຄວາມຕົວລະຄອນຫຼັກ - ຂໍ້ຄວາມສີເຂັ້ມທົ່ວໄປທີ່ຊ່ວຍໃຫ້ຫົວຂໍ້ທີ່ມີສີໂດດເດັ່ນ. - Pencil Gray
#777777— ວັກຫຼັກຂອງຂໍ້ຄວາມຖືກເນັ້ນດ້ວຍຕົວອັກສອນທີ່ບໍ່ເດັ່ນຊັດ, ແລະຂໍ້ຄວາມອະທິບາຍສຳຮອງຈະຫາຍໄປໃນພື້ນຫຼັງ, ເພື່ອໃຫ້ອົງປະກອບທີ່ມີສີເດັ່ນຂຶ້ນ.
ຮູບແບບຕົວອັກສອນ
ຈາກ 13 ຫາ 64px · 7 ຂັ້ນຕອນ
- feather — ການທົດແທນ: Inter · ໂຄງຮ່າງ 700 · ຫົວຂໍ້ຂອງພາກສ່ວນຕ່າງໆ ເຊັ່ນ "ຟຣີ. ມ່ວນ. ມີປະສິດທິພາບ" ແລະ "ການທົດສອບພາສາອັງກິດ Duolingo" ຈະຖືກສະແດງໂດຍໃຊ້ຕົວອັກສອນມົນທີ່ກຳນົດເອງ, ເຮັດໃຫ້ຍີ່ຫໍ້ມີຮູບແບບທີ່ມ່ວນຊື່ນ, ເປັນມິດ, ແລະຄ້າຍຄືມາສຄອດ. ປ່ຽນດ້ວຍ "Feather Bold" ຫຼື "Nunito Black" ໃນນ້ຳໜັກທີ່ເໝາະສົມ. ໄລຍະຫ່າງລະຫວ່າງຕົວອັກສອນ: -0.0200em
- duolingo-sans — ການທົດແທນ: Inter · ໂຄງຮ່າງ 500 · ວັກຫຼັກ ແລະ ລິ້ງນຳທາງທີ່ 17px/500—ຟອນຕ໌ sans-serif ຮູບຊົງເລຂາຄະນິດທີ່ອ່ານງ່າຍ, ຊ່ວຍໃຫ້ນ້ຳໜັກແຖວ 700 ສາມາດເນັ້ນຈຸດສຳຄັນໄດ້. ປ່ຽນດ້ວຍ 'DIN Next', 'Inter', ຫຼື 'Nunito Sans'.
- duolingo-sans — ການທົດແທນ: Inter · ໂຄງຮ່າງ 700 · ຄ່າ weight-700 ທັງໝົດຖືກນໍາໃຊ້: ຕົວອັກສອນໃຫຍ່ໃນປ້າຍຊື່ນໍາທາງແມ່ນ 15px (ls 0.0530em), ຫົວຂໍ້ຍ່ອຍແມ່ນ 19px ແລະ 32px, ແລະ ການເນັ້ນລິ້ງແມ່ນ 13px. ຕົວອັກສອນດຽວກັນກັບຂໍ້ຄວາມຫຼັກ - ຄວາມແຕກຕ່າງທີ່ເບິ່ງເຫັນແມ່ນຢູ່ໃນນ້ໍາຫນັກ, ບໍ່ແມ່ນການປ່ຽນແປງຕົວອັກສອນ. ໄລຍະຫ່າງຕົວອັກສອນ: 0.0530em ສໍາລັບຕົວອັກສອນໃຫຍ່ໃນປ້າຍຊື່ນໍາທາງ.
ໄລຍະຫ່າງ ແລະ ຮູບແບບ
| ຈຸດປະສົງ | ຄວາມໝາຍ |
|---|---|
| ຄວາມໜາແໜ້ນ | ໜາແໜ້ນ |
| ຂັ້ນຕອນພື້ນຖານ | 12px |
| ລັດສະໝີປຸ່ມ | 12px |
| ລັດສະໝີບັດ | 12px |
| ເງົາ | ບໍ່ມີ - ຂອບແທນທີ່ຈະເປັນເງົາ |
| ລະຫວ່າງພາກສ່ວນຕ່າງໆ | 80-120px |
| ຄວາມກວ້າງຂອງໜ້າ | 1200px |
AI ຈະສ້າງເວັບໄຊທ໌ຂອງທ່ານໃນແບບຂອງ Duolingo ແລະຕື່ມຂໍ້ມູນໃສ່ມັນ
- ຕື່ມຂໍ້ມູນໃສ່ຜະລິດຕະພັນ ແລະ ໂພສຕ່າງໆຜ່ານລິ້ງ - Instagram, TikTok, Facebook.
- ໂອນຍ້າຍເນື້ອຫາຈາກເວັບໄຊເກົ່າຂອງທ່ານ - ພຽງແຕ່ລະບຸທີ່ຢູ່.
- ການອອກແບບທີ່ທັນສະໄໝໃນເຄື່ອງຈັກທີ່ດີທີ່ສຸດ: React ( Next.js) ພ້ອມດ້ວຍການສະແດງຜົນເຊີບເວີ ແລະ ການເພີ່ມປະສິດທິພາບ SEO.
- ການເພີ່ມປະສິດທິພາບ SEO ແບບອັດຕະໂນມັດຢ່າງເຕັມທີ່ສຳລັບຜົນການຄົ້ນຫາ ແລະ ຄຳແນະນຳກ່ຽວກັບເຄືອຂ່າຍປະສາດ.
ແບບທີ່ຄ້າຍຄືກັນ
- Family — ແຜ່ກະຈາຍຈາກນິທານເທບນິຍາຍໃສ່ເຈ້ຍ parchment ສີຄີມ
- Say Briefly — ປຶ້ມແຕ້ມຮູບອົງການສ້າງສັນໃສ່ເຈ້ຍສີຄີມ
- Flying Papers — ຄຳສາລະພາບໃນກາຕູນເຊົ້າວັນເສົາ
- Portrait — ກຳແພງແຫ່ງຄວາມຊົງຈຳ, ບັນທຶກໄວ້ໃນຮູບໂພລາຣອຍເທິງເຈ້ຍສີຄຣີມ. ປຶ້ມຮູບສີຄຣີມສົດໃສທີ່ມີໝຶກສີຟ້າເຂັ້ມເປັນຕົວໜັງສືດຽວ, ເສັ້ນໂຄງສ້າງດຽວ, ແລະສີກອບດຽວ - ດ້ວຍຮຸ້ງແຕ້ມດ້ວຍມືດຽວທີ່ປາກົດພຽງຄັ້ງດຽວ, ຢູ່ເທິງປຸ່ມ "ລົງທະບຽນ" ແລະຢູ່ເທິງຄຳສັບທີ່ຂຽນດ້ວຍຕົວອຽງ "ຕະຫຼອດໄປ," ແລະຈະບໍ່ເກີດຂຶ້ນອີກ.
- Karl — ຮູບແບບ 3D ແບບປຶ້ມປັອບອັບໃນມື້ທີ່ມີແດດອອກ
- Navigate — ສະຕິກເກີຊຸດໃຫຍ່ຕິດຢູ່ກັບກະດານ: ຕົວອັກສອນໃຫຍ່ທີ່ໜ້າຢ້ານ, ທັງໝົດຢູ່ໃນຮູບແບບຂອງແທັບເລັດ ແລະ ຮູບສັນຍາລັກຫຼາຍສີຫ້າອັນ, ຊ້ຳກັນຄືກັບໂລໂກ້
- Monte — ຕອນເຊົ້າຢູ່ແຄມຝັ່ງທະເລທີ່ມີສີຂີ້ໝ້ຽງ
- MotherDuck — ລະຫັດເຄື່ອງໝາຍການຄ້າດ້ວຍດິນສໍສີໃສ່ເຈ້ຍສີຄີມ
- Wise Design — ຮ້ານຂາຍເຄື່ອງໄຟຟ້ານີອອນຢູ່ຕາມຖະໜົນທົ່ວໂລກ - ປ້າຍສີຂຽວສົດໃສທີ່ດັງກ້ອງໄປທົ່ວຕະຫຼາດທີ່ແອອັດ, ໃນຂະນະທີ່ຢູ່ທາງຫຼັງມັນ, ອິນເຕີເຟດຜູ້ໃຊ້ຜະລິດຕະພັນທີ່ລຽບງ່າຍປະກົດຂຶ້ນຢ່າງລັບໆ.
- Hatch — ຮູບແບບການແຕ້ມດ້ວຍມືແບບ samizdat ປະສົມກັບຖ້ວຍເຂົ້າໜົມສີ pastel. ຜ້າໃບເຈ້ຍສີຄຣີມມີປະດັບປະດາດ້ວຍສີ mint, ຈຸດ confetti, ແລະ ການຮຽກຮ້ອງໃຫ້ມີການປະຕິບັດຮູບຊົງເມັດຢາ, ບ່ອນທີ່ຕົວອັກສອນ serif ຂະໜາດໃຫຍ່ທີ່ເຂັ້ມບອກເຖິງຄວາມມ່ວນຊື່ນ, ແລະ mascot ສີຟ້າກະພິບຕາຢູ່ແຈ.
- Superr — ປື້ມບັນທຶກໂຮງຮຽນທີ່ອົບອຸ່ນໃນແສງແດດອ່ອນໆຕອນບ່າຍ. ໜ້າເຈ້ຍສີຄຣີມ, ປາກກາສີສົ້ມທີ່ບໍ່ມີຝາປິດ, ແລະ ສະຕິກເກີຊື່ທີ່ວາງຊ້ອນກັນລໍຖ້າໃຫ້ລອກອອກ.
- Mews — ສູນຄວບຄຸມການຕ້ອນຮັບໃນຕອນເຊົ້າມືດ, ປຽກຊຸ່ມດ້ວຍສີບົວ. ພື້ນທີ່ເຮັດວຽກທີ່ມີຝາສີຂາວ, ມີແສງແດດສ່ອງເຖິງ, ບ່ອນທີ່ຕົວອັກສອນສີດຳເຂັ້ມ, ບັດສີຄຣີມອຸ່ນໆ, ແລະປຸ່ມການກະທຳສີບົວຮ້ອນດຽວກຳນົດແຕ່ລະໜ້າຈໍ - ຄວາມໝັ້ນໃຈທີ່ມ່ວນຊື່ນແທນທີ່ຈະເປັນການຈຳກັດຂອງບໍລິສັດ.