Superlist
ພື້ນທີ່ເຮັດວຽກໃນຕອນກາງຄືນທີ່ມີຖ່ານປະກາລັງ - ໜ້າດິນແອັບໝາກເຂືອທີ່ງຽບສະຫງົບບ່ອນທີ່ມີประกายໄຟສີສົ້ມອຸ່ນໆພຽງອັນດຽວເປັນສັນຍານບອກເຖິງທຸກໆການກະທຳ
Superlist ໃຊ້ພາສາທີ່ເນັ້ນຜົນຜະລິດໃນໂທນສີມ່ວງທ່ຽງຄືນ: ໝາກເຂືອເຂັ້ມ, ສີປະກາລັງອຸ່ນເປັນສີຫຼັກດຽວ, ແລະຫົວຂໍ້ຂ່າວ sans-serif ຂະໜາດໃຫຍ່ທີ່ສະແດງບັນຍາກາດທັງໝົດ. ອິນເຕີເຟດເຮັດໃຫ້ຮູ້ສຶກເຖິງການເຮັດວຽກທີ່ສຸມໃສ່ໃນຕອນກາງຄືນ - ງຽບສະຫງົບ, ເປັນຊັ້ນ, ແລະ ໝັ້ນໃຈ, ໂດຍໃຊ້ສີເປັນເຄື່ອງໝາຍວັກຕອນທີ່ໃຊ້ໄດ້ພຽງແຕ່ໃນການຮຽກຮ້ອງໃຫ້ມີການປະຕິບັດ, ສະຖານະທີ່ໃຊ້ງານ, ແລະຈຸດສຳຄັນ. ພື້ນຜິວຖືກວາງຊັ້ນໃນໂທນສີເຂັ້ມອ່ອນໆດ້ວຍສີມ່ວງອ່ອນໆ (#181824 → #26253b), ຫຼີກລ່ຽງສີດຳບໍລິສຸດເພື່ອຮັບປະກັນວ່າຄວາມເລິກຮູ້ສຶກອົບອຸ່ນແທນທີ່ຈະເປັນໝັນ. ອົງປະກອບຕ່າງໆມີຮູບຊົງກົມກວ້າງ (ບັດ 20px, ປຸ່ມເມັດ), ເງົາອ່ອນໆ, ແລະ "ຫາຍໃຈ" ຜ່ານຊ່ອງຫວ່າງ 10-16px ທີ່ສະດວກສະບາຍແທນທີ່ຈະເປັນຕາຂ່າຍທີ່ແໜ້ນໜາ. ສຽງຂອງຫົວຂໍ້ຂ່າວແມ່ນທຸກຢ່າງ: ນ້ຳໜັກ 600 ຈຸດທີ່ 70-88px ດ້ວຍໄລຍະຫ່າງຕົວອັກສອນທີ່ແໜ້ນໜາຂອງ -0.02em ປະຕິບັດຕໍ່ຂໍ້ຄວາມເປັນຕົວອັກສອນແທນທີ່ຈະເປັນ UI - ມັນໃກ້ຄຽງກັບສຳເນົາບັນນາທິການຫຼາຍກວ່າ SaaS.
ພາກສ່ວນສີເຂັ້ມກວມເອົາຄວາມກວ້າງທັງໝົດຂອງໜ້າ, ໂດຍມີບັນຈຸເນື້ອຫາທີ່ມີຄວາມກວ້າງສູງສຸດຢູ່ໃຈກາງ. ພາກສ່ວນຫຼັກແມ່ນຢູ່ໃຈກາງແນວຕັ້ງ ແລະ ປະກອບດ້ວຍຫົວຂໍ້, ຂໍ້ຄວາມຍ່ອຍ, ແລະ ການຮຽກຮ້ອງໃຫ້ມີການກະທຳ (CTA), ຕາມດ້ວຍພາບໜ້າຈໍຜະລິດຕະພັນຂະໜາດໃຫຍ່ທີ່ຊ້ອນກັນກັບພາກສ່ວນຕໍ່ໄປ. ພາກສ່ວນຕໍ່ມາສະຫຼັບກັນລະຫວ່າງບລັອກຂໍ້ຄວາມທີ່ຢູ່ໃຈກາງ ແລະ ຕາຂ່າຍບັດ. ພາກສ່ວນການທົບທວນໃຊ້ຕາຂ່າຍສາມຖັນທີ່ມີບັດການທົບທວນ ແລະ 16 gutters. ການນຳທາງແມ່ນແຖບດ້ານເທິງດຽວທີ່ມີໂລໂກ້ຢູ່ເບື້ອງຊ້າຍ, ລິ້ງຢູ່ໃຈກາງ, ແລະ ການກະທຳເຂົ້າສູ່ລະບົບຢູ່ເບື້ອງຂວາ - ບໍ່ມີແຖບຂ້າງຄົງທີ່ ຫຼື ເມນູຂະໜາດໃຫຍ່. gutters ລະຫວ່າງພາກສ່ວນຕ່າງໆແມ່ນກວ້າງ (16 gutters), ສ້າງຈັງຫວະການບັນນາທິການທີ່ກວ້າງຂວາງແທນທີ່ຈະເປັນຕາຂ່າຍຜະລິດຕະພັນທີ່ໜາແໜ້ນ.
ພື້ນທີ່ທາງສາຍຕາຖືກຄອບງຳໂດຍພາບໜ້າຈໍຜະລິດຕະພັນ - ກອບຂະໜາດໃຫຍ່ທີ່ມີມຸມມົນ, ສະແດງອິນເຕີເຟດແອັບຕົວຈິງ, ເຕີມເຕັມພາກສ່ວນຫຼັກ ແລະ ພາກສ່ວນທີສອງ. ຮູບພາບມີໜ້ອຍທີ່ສຸດ, ໃຊ້ເປັນພຽງຮູບແທນຕົວຜູ້ໃຊ້ ຫຼື ຕົວຢ່າງຂອງສື່ໃນແອັບເທົ່ານັ້ນ (ຕົວຢ່າງ, ຮູບພາບຄອນເສີດໃນແຜງດ້ານຂວາຂອງແບບຈຳລອງຜະລິດຕະພັນ). ໂລໂກ້ໃນແຖບຄວາມໄວ້ວາງໃຈແມ່ນສັນຍາລັກຂໍ້ຄວາມສີຂາວທີ່ຮາບພຽງ ແລະ ມືດມົວ. ບໍ່ມີຮູບແຕ້ມຕົກແຕ່ງ, ບໍ່ມີຮູບພາບທີ່ບໍ່ມີຕົວຕົນ, ບໍ່ມີການສະແດງຜົນ 3D. ຍຸດທະສາດທາງສາຍຕາແມ່ນເພື່ອສະແດງຜະລິດຕະພັນໃນຂະໜາດໃຫຍ່, ໃຫ້ຮູບແບບຕົວອັກສອນເຮັດວຽກທາງດ້ານອາລົມ, ແລະ ໃຊ້ສີປະກາລັງເປັນສີທີ່ໂດດເດັ່ນ.
ພາເລັດ
ຍີ່ຫໍ້
- Coral Ember
#ff4a36— ສີສົ້ມຖືກໃຊ້ເປັນສີເສີມສຳລັບລາຍລະອຽດການຕົກແຕ່ງ ແລະ ເພື່ອເນັ້ນໃຫ້ເຫັນເຖິງສິ່ງທີ່ບໍ່ຄ່ອຍພົບເລື້ອຍ. ມັນບໍ່ຄວນໃຊ້ເປັນສີຫຼັກສຳລັບການຮຽກຮ້ອງໃຫ້ມີການກະທຳ.
ເປັນກາງ
- Aubergine Canvas
#181824— ພື້ນຫຼັງໜ້າເວັບ, ເຊິ່ງເປັນແຜ່ນຜ້າຫຼັກ, ແມ່ນສີເຂັ້ມທີ່ອົບອຸ່ນ ເຊິ່ງທົດແທນສີດຳບໍລິສຸດ, ເຮັດໃຫ້ອິນເຕີເຟດຜູ້ໃຊ້ເບິ່ງຄືວ່າເປັນຊັ້ນໆ ແທນທີ່ຈະເປັນສີຮາບພຽງ. - Elevated Plum
#26253b— ໜ້າດິນບັດ, ຊ່ອງຂໍ້ມູນປ້ອນຂໍ້ມູນ, ຕູ້ຄອນເທນເນີການນຳທາງ—ງ່າຍກວ່າຜ້າໃບພຽງຂັ້ນຕອນດຽວໃນການສ້າງຄວາມເລິກໂດຍບໍ່ມີຂອບເຂດທີ່ເບິ່ງເຫັນໄດ້. - Pure White
#ffffff— ຫົວຂໍ້ຫຼັກ, ຂໍ້ຄວາມປຸ່ມ, ແລະ ໂຄງຮ່າງໄອຄອນ - ຄວາມຄົມຊັດສູງສຸດໃນຜ້າໃບສີເຂັ້ມ. - Fog Text
#696f81— ຂໍ້ຄວາມຫຼັກ, ຫົວຂໍ້ສຳຮອງ, ແລະ ຂອບທີ່ມືດມົວລ້ວນແຕ່ມີອັດຕາສ່ວນຄວາມຄົມຊັດ 7:1 ເພື່ອການອ່ານທີ່ສະດວກສະບາຍເມື່ອທຽບກັບພື້ນຫຼັງສີໝາກເຂືອ. - Ash Text
#8e8da0— ສີທີ່ເປັນກາງແມ່ນຮອງຮັບສຳລັບອົງປະກອບ UI ສຳຮອງ, ຕົວແບ່ງ ແລະ ປ້າຍຊື່ທີ່ປິດສຽງ. ມັນບໍ່ຄວນໃຊ້ເປັນສີຫຼັກສຳລັບການຮຽກຮ້ອງໃຫ້ມີການດຳເນີນການ. - Mist Highlight
#a3a3a7— ຂອບທີ່ລະອຽດອ່ອນ, ຕົວແບ່ງ ແລະ ອົງປະກອບການນຳທາງທີ່ບໍ່ມີການເຄື່ອນໄຫວສ້າງໂທນສີທີ່ເປັນກາງທີ່ລະອຽດອ່ອນ ເຊິ່ງຍັງຄົງໂດດເດັ່ນຕໍ່ກັບຜ້າໃບ.
ຮູບແບບຕົວອັກສອນ
ຈາກ 12 ຫາ 88px · 9 ຂັ້ນຕອນ
- sans-serif — ການທົດແທນ: Inter · ໂຄງຮ່າງ 400 · sans-serif - ພົບໃນຂໍ້ມູນທີ່ສະກັດອອກມາແຕ່ບໍ່ໄດ້ອະທິບາຍໂດຍ AI.
- Haffer XH SemiBold — ການທົດແທນ: Inter Tight · ໂຄງຮ່າງ 400, 600 · ຟອນຫຼັກສຳລັບການສະແດງ ແລະ ຫົວຂໍ້. ມັນຖືກໃຊ້ໃນຂະໜາດ 70–88px ສຳລັບຫົວຂໍ້ hero ທີ່ມີໄລຍະຫ່າງຕົວອັກສອນ -0.02em ແລະ ນ້ຳໜັກ 600. ໄລຍະຫ່າງຕົວອັກສອນແຄບ ແລະ ຄວາມສູງຂອງຕົວອັກສອນໃຫຍ່ເຮັດໃຫ້ຫົວຂໍ້ມີນ້ຳໜັກດ້ານບັນນາທິການ, ເຮັດໃຫ້ອິນເຕີເຟດສີເຂັ້ມເບິ່ງຄືກັບໜ້າປົກວາລະສານຫຼາຍກວ່າແຜງຄວບຄຸມ. ປ່ຽນດ້ວຍ Inter Tight ຫຼື General Sans ດ້ວຍນ້ຳໜັກຕົວໜາ.
- Jersey 10 — ການທົດແທນ: Anybody · ໂຄງຮ່າງ 400 · ຟອນຕ໌ຂະໜາດໃຫຍ່ທີ່ຕົກແຕ່ງສຳລັບຕົວເລກເນັ້ນ ແລະ ຈຸດເດັ່ນ. ໃຊ້ຢ່າງລະມັດລະວັງໃນຂະໜາດໃຫຍ່ຫຼາຍເພື່ອສ້າງການເນັ້ນຕົວອັກສອນ. ສາມາດປ່ຽນແທນດ້ວຍ Anybody ຫຼື Cabinet Grotesk ໄດ້.
ໄລຍະຫ່າງ ແລະ ຮູບແບບ
| ຈຸດປະສົງ | ຄວາມໝາຍ |
|---|---|
| ຄວາມໜາແໜ້ນ | ໂດຍສະເລ່ຍ |
| ຂັ້ນຕອນພື້ນຖານ | 10-16px |
| ລັດສະໝີປຸ່ມ | 100px |
| ລັດສະໝີບັດ | 20px |
| ເງົາ | ເງົາອ່ອນໆ |
| ລະຫວ່າງພາກສ່ວນຕ່າງໆ | 80px |
| ຄວາມກວ້າງຂອງໜ້າ | 1200px |
AI ຈະສ້າງເວັບໄຊທ໌ຂອງທ່ານໃນແບບຂອງ Superlist ແລະຕື່ມຂໍ້ມູນໃສ່ມັນ
- ຕື່ມຂໍ້ມູນໃສ່ຜະລິດຕະພັນ ແລະ ໂພສຕ່າງໆຜ່ານລິ້ງ - Instagram, TikTok, Facebook.
- ໂອນຍ້າຍເນື້ອຫາຈາກເວັບໄຊເກົ່າຂອງທ່ານ - ພຽງແຕ່ລະບຸທີ່ຢູ່.
- ການອອກແບບທີ່ທັນສະໄໝໃນເຄື່ອງຈັກທີ່ດີທີ່ສຸດ: React ( Next.js) ພ້ອມດ້ວຍການສະແດງຜົນເຊີບເວີ ແລະ ການເພີ່ມປະສິດທິພາບ SEO.
- ການເພີ່ມປະສິດທິພາບ SEO ແບບອັດຕະໂນມັດຢ່າງເຕັມທີ່ສຳລັບຜົນການຄົ້ນຫາ ແລະ ຄຳແນະນຳກ່ຽວກັບເຄືອຂ່າຍປະສາດ.
ແບບທີ່ຄ້າຍຄືກັນ
- DNA — ຫໍສັງເກດການທ່ຽງຄືນເມື່ອເບິ່ງຜ່ານເລນອະນຸພາກ
- Abetterlou — ປະກາຍໄຟເທິງໜັງອັດ - ຕົວອັກສອນສີຄຣີມອຸ່ນໆທີ່ສ່ອງແສງຕັດກັບພື້ນຫຼັງສີດຳເຂັ້ມຂອງກາເຟ, ພ້ອມດ້ວຍປຸ່ມສີທອງອຳພັນທີ່ໃຫ້ຄວາມຮູ້ສຶກຄືກັບໂລຫະຮ້ອນໆທີ່ຖືກກົດເຂົ້າໄປໃນໜ້າເຈ້ຍ.
- Galileo-ft — ໜ່ວຍບັນຊາການອະວະກາດເລິກທີ່ມີສັນຍານສີຟ້າໄຟຟ້າ
- Decide AI — ຫໍສັງເກດການໃນເວລາທ່ຽງຄືນ - ສັນຍານ mint
- Redis Agency — ກອງປະຊຸມບັນນາທິການ, ເປີດຫຼັງເວລາເຮັດວຽກ, ແມ່ນສະຖານທີ່ທີ່ມືດມົວບ່ອນທີ່ວຽກງານການສ້າງຍີ່ຫໍ້ທັງໝົດແມ່ນເຮັດດ້ວຍຕົວອັກສອນ serif ແລະຫົວຜັກກາດແດງໜ່ວຍດຽວ.
- Spellbook — ຫ້ອງສານທ່ຽງຄືນທີ່ມີແສງໄຟສ່ອງສະຫວ່າງດ້ວຍນໍ້າມຶກປະກາລັງ — ໜ້າປົກບັນນາທິການທີ່ມືດມົວບ່ອນທີ່ມີສຽງດຽວຄືປາກກາສີສົ້ມອຸ່ນໆ
- Linear — ເຄື່ອງມືຄວາມແມ່ນຍໍາທ່ຽງຄືນ
- Origin Financial — ຫ້ອງວາງສະແດງສິລະປະທີ່ງຽບສະຫງົບ ແລະ ຟຸ່ມເຟືອຍໃນຍາມທ່ຽງຄືນ. ຫ້ອງທີ່ງຽບສະຫງົບ ແລະ ເກືອບມືດ ບ່ອນທີ່ຕົວອັກສອນ serif ຂະໜາດໃຫຍ່ ແລະ ແຜງສີທີ່ມີໄຟສ່ອງສະຫວ່າງສອງສາມແຜ່ນ ສ້າງຄວາມຮູ້ສຶກວ່າການເງິນແມ່ນຜົນງານສິລະປະທີ່ຄັດສັນມາຢ່າງລະມັດລະວັງ.
- Hyperstudio — ຮູບແບບຖືກຂູດເຂົ້າໄປໃນຫີນອອບຊີເດຍນ. ຕົວໜັງສື ແລະ ເສັ້ນບາງໆເປັນກອບສີຂາວທີ່ເຕັມໄປດ້ວຍສີດຳບໍລິສຸດ, ບາງຄັ້ງຄາວກໍ່ມີເຄື່ອງໝາຍເຂັມທິດສີທອງຊີ້ບອກທາງ.
- Air — ຮູບປັ້ນ "ທ້ອງຟ້າທ່ຽງຄືນຜ່ານແກ້ວ"
- Raycast — ສູນບັນຊາການທ່ຽງຄືນ, Coral Neon
- dope.security — ສະຖານີທ່ຽງຄືນທີ່ມີໄຟສັນຍານສີມ່ວງ