Allbirds
ວັດສະດຸທຳມະຊາດໃສ່ຜ້າປູສີຂາວ
Allbirds ເຮັດວຽກດ້ວຍຄວາມໝັ້ນໃຈທີ່ສະຫງົບ ແລະ ເປັນທຳມະຊາດ - ເກືອບທັງໝົດແມ່ນຜ້າໃບທີ່ບໍ່ມີສີ, ເສີມດ້ວຍດິນຊາຍອຸ່ນ (#e0dacf) ແລະ ສີດິນທີ່ອ່ອນນຸ້ມທີ່ແຕ້ມໂດຍກົງຈາກການຖ່າຍຮູບຜະລິດຕະພັນ. ອິນເຕີເຟດຜູ້ໃຊ້ບໍ່ໄດ້ແຊກແຊງປະສົບການຂອງຜະລິດຕະພັນ: ພື້ນຜິວສີຂາວ, ຂອບບາງໆ, ການນຳທາງດ້ວຍຕົວພິມໃຫຍ່ທັງໝົດ, ແລະ ການຄວບຄຸມຮູບຊົງເມັດຢາທີ່ຮູ້ສຶກຄືກັບປຸ່ມທາງກາຍະພາບຫຼາຍກວ່າອົງປະກອບເວັບ. Self Modern (ຟອນຕ໌ serif ທີ່ກຳນົດເອງ) ຖືກໃຊ້ສຳລັບຊ່ວງເວລາທີ່ສຳຄັນສອງສາມຢ່າງທີ່ຕ້ອງການຄວາມສົນໃຈຈາກບັນນາທິການ - ຫົວຂໍ້ຂ່າວ ແລະ ຊື່ຄໍເລັກຊັນ - ໃນຂະນະທີ່ Geograph ຖືກໃຊ້ສຳລັບແຕ່ລະຕົວອັກສອນ, ເນື້ອໃນ, ແລະ ປຸ່ມໃນສາມນ້ຳໜັກທີ່ສົມດຸນ. ບັດໝວດໝູ່ກາຍເປັນລະບົບສີ: ແຕ່ລະອັນໃຊ້ສີພື້ນຫຼັງຂອງມັນຈາກຜະລິດຕະພັນທີ່ໂດດເດັ່ນ, ປ່ຽນການນຳທາງໄປສູ່ແຜ່ນສີ Pantone ທີ່ມີຊີວິດຊີວາ.
ຄວາມກວ້າງສູງສຸດແມ່ນ ~1200px, ຢູ່ໃຈກາງດ້ວຍຊ່ອງຫວ່າງດ້ານຂ້າງທີ່ກວ້າງຂວາງ. ອົງປະກອບຫຼັກແມ່ນແຖບບັນນາທິການທີ່ມີຄວາມກວ້າງເຕັມທີ່ຢູ່ເທິງພື້ນຫຼັງດິນຊາຍອຸ່ນໆ ພ້ອມດ້ວຍຮູບຊົງໝຸນຜະລິດຕະພັນຂະໜາດໃຫຍ່ທີ່ແຜ່ອອກມາຈາກໃຈກາງ. ການນຳທາງໝວດໝູ່ແມ່ນຕາຂ່າຍໄຟຟ້າຂອງບັດສີທີ່ຄືກັນສີ່ໃບໃນສີ່ຖັນ, ແຕ່ລະອັນມີຮຸ່ນເກີບທີ່ຢູ່ໃຈກາງດຽວ. ຢູ່ດ້ານລຸ່ມຂອງຮອຍພັບ, ຮູບແບບຈະສະຫຼັບກັນລະຫວ່າງແຜງແບ່ງຄວາມກວ້າງເຕັມ (ຮູບພາບຊີວິດຢູ່ເບື້ອງຊ້າຍ + ຕົວຢ່າງຜະລິດຕະພັນຢູ່ເບື້ອງຂວາ) ແລະຮູບຊົງໝຸນຜະລິດຕະພັນຢູ່ໃຈກາງພາຍໃຕ້ຫົວຂໍ້ພາກສ່ວນຂະໜາດນ້ອຍທີ່ຂີດເສັ້ນໃຕ້. ຈັງຫວະໂດຍລວມແມ່ນ: ແຜງບັນນາທິການທີ່ມີຄວາມກວ້າງເຕັມ → ຕາຂ່າຍໄຟຟ້າສີ່ຖັນ → ຮູບຊົງໝຸນຜະລິດຕະພັນຢູ່ໃຈກາງ → ການແບ່ງສອງຖັນ → ຮູບຊົງໝຸນຜະລິດຕະພັນຢູ່ໃຈກາງ. ໄລຍະຫ່າງລະຫວ່າງພາກສ່ວນຕ່າງໆແມ່ນ 40-56px, ສ້າງການຫັນປ່ຽນທີ່ໂປ່ງໃສແຕ່ບໍ່ຫຼາຍເກີນໄປ. ການນຳທາງແມ່ນແຖບດ້ານເທິງທີ່ຄົງທີ່ແບບ minimalist ພ້ອມດ້ວຍລິ້ງຫຼັກຢູ່ໃຈກາງ.
ການຖ່າຍຮູບແມ່ນລະບົບພາບທັງໝົດ. ຮູບຖ່າຍຜະລິດຕະພັນທັງໝົດແມ່ນຖ່າຍໃກ້ໆ, ຈາກມຸມເລັກນ້ອຍ, ທຽບກັບພື້ນຫຼັງທີ່ແຂງແກ່ນທີ່ກົງກັບ ຫຼື ເສີມສີທີ່ໂດດເດັ່ນຂອງເກີບ, ເຮັດໃຫ້ແຕ່ລະຮູບກາຍເປັນການສຶກສາສີຢ່າງມີປະສິດທິພາບ. ຮູບພາບວິຖີຊີວິດແມ່ນຖ່າຍໃນໂທນສີທີ່ອົບອຸ່ນ, ມີແດດອອກ, ໃນສະພາບແວດລ້ອມທຳມະຊາດ (ທົ່ງນາ agave, ລະບຽງໄມ້, ພື້ນທີ່ຂຸຂະ), ມີການຫຼຸດສີເລັກນ້ອຍເພື່ອໃຫ້ກົງກັບແຜ່ນສີທີ່ຫຼຸດສີ. ບໍ່ມີຮູບແຕ້ມ, ບໍ່ມີການສະແດງຜົນ 3D, ບໍ່ມີຮູບພາບທີ່ບໍ່ມີຕົວຕົນ. ໂດຍຮ່ວມມືກັບ Pantone, ແຜ່ນສີຕົວຈິງຖືກນໍາໃຊ້ເປັນອົງປະກອບຮູບພາບ. ຮູບສັນຍາລັກແມ່ນ minimalist ແລະ monochrome (ຮູບສັນຍາລັກໂຄງຮ່າງໃນການນໍາທາງ ແລະ ຕໍາແຫນ່ງຊ່ວຍ).
ພາເລັດ
ເປັນກາງ
- Canvas White
#ffffff— ຮູບພາບພື້ນຫຼັງໜ້າເວັບ, ໜ້າດິນບັດ, ຮູບພາບພື້ນຫຼັງບັດຜະລິດຕະພັນ. - Charcoal
#212121— ສີທີ່ເປັນກາງແມ່ນຮອງຮັບສຳລັບອົງປະກອບ UI ສຳຮອງ, ຕົວແບ່ງ ແລະ ປ້າຍຊື່ທີ່ປິດສຽງ. ມັນບໍ່ຄວນໃຊ້ເປັນສີຫຼັກສຳລັບການຮຽກຮ້ອງໃຫ້ມີການດຳເນີນການ. - True Black
#000000— ຫົວຂໍ້, ຮູບສັນຍາລັກ, ກອບທີ່ມີຄວາມຄົມຊັດສູງ, ຂໍ້ຄວາມນຳທາງ. - Warm Sand
#e0dacf— ພື້ນຫຼັງພາກສ່ວນຫຼັກ, ຮົ່ມພື້ນຜິວເພີ່ມເຕີມ, ແຜງບັນນາທິການຂະໜາດໃຫຍ່. - Olive Char
#222519— ສີທີ່ເປັນກາງແມ່ນຮອງຮັບສຳລັບອົງປະກອບ UI ສຳຮອງ, ຕົວແບ່ງ ແລະ ປ້າຍຊື່ທີ່ປິດສຽງ. ມັນບໍ່ຄວນໃຊ້ເປັນສີຫຼັກສຳລັບການຮຽກຮ້ອງໃຫ້ມີການດຳເນີນການ. - Iron Gray
#525252— ຂໍ້ຄວາມສຳຮອງ, ຂໍ້ຄວາມຊ່ວຍ, ກອບທີ່ບໍ່ເດັ່ນຊັດ.
ຮູບແບບຕົວອັກສອນ
ຈາກ 12 ຫາ 40px · 6 ຂັ້ນຕອນ
- Self Modern — ການທົດແທນ: Playfair Display · ໂຄງຮ່າງ 400 · ຫົວຂໍ້ຂ່າວ ແລະ ບົດບັນນາທິການຖືກໃຊ້ຢ່າງລະມັດລະວັງ, ໂດຍເນັ້ນໃສ່ປະໂຫຍກສຳຄັນ ແລະ ຫົວຂໍ້ຂອງຄໍເລັກຊັນ. ຕົວອັກສອນ Serif ແລະ ຕົວອຽງຊ່ວຍແຍກຄວາມໜ້າເບື່ອຂອງຕົວອັກສອນ sans-serif ແລະ ຖ່າຍທອດຂໍ້ຄວາມວ່າ: "ນີ້ແມ່ນສາລະສຳຄັນຂອງເລື່ອງ."
- Geograph — ການທົດແທນ: Inter · ໂຄງຮ່າງ 400, 500, 700 · ຟອນຕ໌ຫຼັກສຳລັບອິນເຕີເຟດຜູ້ໃຊ້ປະກອບມີຂໍ້ຄວາມໃນໜ້າເວັບ, ປ້າຍນຳທາງ, ປຸ່ມ, ຫົວຂໍ້ຜະລິດຕະພັນ, ສ່ວນທ້າຍ, ຊ່ອງປ້ອນຂໍ້ມູນ ແລະ ໄອຄອນ. 500 ສຳລັບຫົວຂໍ້ທີ່ເນັ້ນໃຫ້ເຫັນ, 700 ສຳລັບຊື່ຜະລິດຕະພັນ. ໄລຍະຫ່າງລະຫວ່າງຕົວອັກສອນທີ່ກວ້າງ (0.025em–0.10em) ໃນຕົວອັກສອນໃຫຍ່ໃນປ້າຍນຳທາງ ແລະ ໝວດໝູ່ ສ້າງແບບຂອງແບຣນທີ່ສອດຄ່ອງກັນ.
- HurmeGeometricSans3 — ການທົດແທນ: Inter · ໂຄງຮ່າງ 400 · ບໍ່ຄ່ອຍໄດ້ໃຊ້ເປັນປ້າຍສຳຮອງ ຫຼື ປ້າຍສະເພາະສຳລັບປຸ່ມ. Geograph ໃຊ້ລະບົບນີ້ທຸກໆມື້.
ໄລຍະຫ່າງ ແລະ ຮູບແບບ
| ຈຸດປະສົງ | ຄວາມໝາຍ |
|---|---|
| ຄວາມໜາແໜ້ນ | ໜາແໜ້ນ |
| ຂັ້ນຕອນພື້ນຖານ | 8-16px |
| ລັດສະໝີປຸ່ມ | 9999px (pill) |
| ລັດສະໝີບັດ | 16px |
| ເງົາ | ບໍ່ມີ - ຂອບແທນທີ່ຈະເປັນເງົາ |
| ລະຫວ່າງພາກສ່ວນຕ່າງໆ | 40-56px |
| ຄວາມກວ້າງຂອງໜ້າ | 1200px |
AI ຈະສ້າງເວັບໄຊທ໌ຂອງທ່ານໃນແບບຂອງ Allbirds ແລະຕື່ມຂໍ້ມູນໃສ່ມັນ
- ຕື່ມຂໍ້ມູນໃສ່ຜະລິດຕະພັນ ແລະ ໂພສຕ່າງໆຜ່ານລິ້ງ - Instagram, TikTok, Facebook.
- ໂອນຍ້າຍເນື້ອຫາຈາກເວັບໄຊເກົ່າຂອງທ່ານ - ພຽງແຕ່ລະບຸທີ່ຢູ່.
- ການອອກແບບທີ່ທັນສະໄໝໃນເຄື່ອງຈັກທີ່ດີທີ່ສຸດ: React ( Next.js) ພ້ອມດ້ວຍການສະແດງຜົນເຊີບເວີ ແລະ ການເພີ່ມປະສິດທິພາບ SEO.
- ການເພີ່ມປະສິດທິພາບ SEO ແບບອັດຕະໂນມັດຢ່າງເຕັມທີ່ສຳລັບຜົນການຄົ້ນຫາ ແລະ ຄຳແນະນຳກ່ຽວກັບເຄືອຂ່າຍປະສາດ.
ແບບທີ່ຄ້າຍຄືກັນ
- Lightship — ຮູບຖ່າຍສາມມິຕິແບບໂຮງໜັງຂອງເສັ້ນທາງເປີດ. ຝາຫ້ອງວາງສະແດງສີຄີມອຸ່ນໆ ປະດັບປະດາດ້ວຍຮູບຖ່າຍພູມສັນຖານຂະໜາດໃຫຍ່ທີ່ຕິດຕັ້ງໃນໄລຍະໃກ້ໆ, ຕົວພິມສີດຳບາງໆເບິ່ງບໍ່ເຫັນໃນກອບ, ແລະ ມີສີສົ້ມສົດໃສພຽງອັນດຽວທີ່ທຳລາຍຮູບພາບສີດຽວຄືກັບກອງໄຟໃນທົ່ງຫຍ້າ.
- Faire ES — ແຄັດຕາລັອກຂາຍສົ່ງຂອງຄຣີມອຸ່ນ
- Adanola — ປຶ້ມແຕ່ງຕົວບັນນາທິການເທິງເຈ້ຍຂາວ. ການຖ່າຍຮູບແຟຊັ່ນທີ່ຮູບແບບຕົວອັກສອນ ແລະ ການຖ່າຍຮູບມີລົມຫາຍໃຈຢູ່ເທິງພື້ນຜິວສີຂາວສະອາດ, ດ້ວຍໝຶກສີດຳສຳລັບຕົວອັກສອນ ແລະ ຕົວອັກສອນ sans-serif ທີ່ເປັນເອກະລັກສະເພາະ (Favorit), ສະທ້ອນໃຫ້ເຫັນເຖິງແບບໂດຍລວມຂອງຍີ່ຫໍ້.
- Oura Ring — ກອງປະຊຸມເຮັດເຂົ້າໂອດທີ່ອົບອຸ່ນ, ອາບແດດອ່ອນໆ
- Stykka — ກອງປະຊຸມແບບ Scandinavian ໃນແສງສີຂາວ - ຫ້ອງວາງສະແດງທີ່ງຽບສະຫງົບ ແລະ ເຮັດດ້ວຍມື ບ່ອນທີ່ມີພຽງສຽງດຽວເທົ່ານັ້ນຄືການຖ່າຍຮູບ
- DJI — ຜ້າໃບສີດຳສຳລັບການບິນອະວະກາດພ້ອມດ້ວຍຈຸດເດັ່ນສີຟ້າໄຟຟ້າອັນດຽວ
- Altitude Beverages — ການແຜ່ກະຈາຍຂອງວາລະສານໂມໂນຄຣອມ. ລອງນຶກພາບເຖິງການແຜ່ກະຈາຍຂອງວາລະສານແຟຊັ່ນທີ່ບໍ່ມີສີຫຍັງເລີຍຍົກເວັ້ນຮູບພາບນິ້ງ - ຕົວໜັງສື ແລະ ພື້ນທີ່ສີຂາວບອກເລື່ອງລາວທັງໝົດ.
- AATHER — ຝາມືເປີດ, ແປວໄຟດຽວ - ຄວາມຫລູຫລາທີ່ງຽບສະຫງົບທີ່ບັນຈຸຢູ່ໃນຄວາມງຽບສະຫງົບ
- Cowboy — ຫ້ອງວາງສະແດງລົດຖີບຂອງຊາວເບວຢຽມໃນສະພາບແວດລ້ອມທີ່ເປັນເຄື່ອງປັ້ນດິນເຜົາສີຂາວຄືຫິມະ. ຫ້ອງວາງສະແດງທີ່ມີພື້ນຜິວດ້ານ, ຕົວອັກສອນຂະໜາດໃຫຍ່ທີ່ໃຊ້ໃນເອກະສານບັນນາທິການ, ແລະ ການບໍ່ມີການຕົກແຕ່ງແບບເສມືນດຶງດູດສາຍຕາໄປທີ່ລົດຖີບ ແລະ ສິ່ງຂອງພາຍໃນ.
- Refero — ຮູບແບບບັນນາທິການໃສ່ຫິນອ່ອນສີຂາວ - ໜ້າຜະລິດຕະພັນທີ່ສ້າງຂຶ້ນໂດຍນັກພິມ, ບ່ອນທີ່ຫົວຂໍ້ serif ແມ່ນນາມບັດຂອງຍີ່ຫໍ້, ແລະທຸກຢ່າງອື່ນໆແມ່ນບໍ່ມີຄວາມໂດດເດັ່ນ.
- Face Formula — ຮູບຄົນບັນນາທິການແບບສະແກນດິເນເວຍ. ຮູບທີ່ສະຫງົບ, ແບບວາລະສານ, ບ່ອນທີ່ສາຍຕາຂອງນາງແບບ ແລະ ຫົວຂໍ້ຂ່າວ, ຂຽນດ້ວຍຕົວອັກສອນ serif ທີ່ຫຍໍ້, ເວົ້າດ້ວຍຕົວເອງທຽບກັບພື້ນຫຼັງທີ່ເຢັນສະບາຍ ແລະ ມີໝອກ.
- Shupatto — ຕູ້ວາງສະແດງພິພິທະພັນເທິງຫິນອ່ອນສີຂາວ