Vercel
ស្ថានីយបោះពុម្ពលើក្រដាសពណ៌ស
ប្រព័ន្ធរចនា Vercel គឺជាលំហាត់មួយដោយប្រើពណ៌តែមួយដែលមានវិន័យ៖ ផ្ទាំងក្រណាត់ស្ទើរតែពណ៌ស (#fafafa) ប្រភេទពណ៌ខ្មៅ ស៊ុមស្តើង និងអវត្តមានទាំងស្រុងនៃពណ៌តុបតែង។ ភាសាដែលមើលឃើញបង្កើតស្ថានីយរបស់អ្នកអភិវឌ្ឍន៍ដែលត្រូវបានបង្ហាញជាអក្សរបោះពុម្ព—Geist Sans ស្ទើរតែមិនអាចអានបាននៅមាត្រដ្ឋាន "វីរភាព" ដែលមានទម្ងន់ 400-450 និងចន្លោះអក្សរ -0.06em ខណៈពេលដែល Geist Mono អនុវត្តស្លាក ទិន្នន័យមេតា និងគំរូកូដក្នុងទំហំ 11-13px។ ប៊ូតុងមានកាំ 6px មុតស្រួច ឬចតុកោណកែងនៃពណ៌ខ្មៅសុទ្ធលើពណ៌ស ឬសលើពណ៌ខ្មៅ។ ប្រព័ន្ធនេះពឹងផ្អែកលើភាពផ្ទុយគ្នា និងឋានានុក្រមអក្សរសាស្ត្រជាជាងពណ៌ ដោយប្រើសញ្ញាត្រីកោណ (▲) និងសញ្ញាសម្គាល់ពាក្យពីរបន្ទាត់ជាធាតុសម្គាល់តែមួយគត់។ ផ្ទៃត្រូវបានដាក់ជង់លើគ្នាតាមលំដាប់ #fafafa → #ebebeb → #171717 ដោយបង្កើតជម្រៅតាមរយៈការផ្លាស់ប្តូរតម្លៃសម្លេងជាជាងស្រមោល ឬពណ៌។ ធាតុនីមួយៗត្រូវបានបង្កើតឡើងនៅលើក្រឡាចត្រង្គ 4px ដែលមានដង់ស៊ីតេបង្រួម ដែលបណ្តាលឱ្យមានចំណុចប្រទាក់ដែលរំលឹកដល់សៀវភៅកត់ត្រារបស់វិស្វករ - ច្បាស់លាស់ មានមុខងារ និងមិនខ្លាចចន្លោះទទេ។
កុងតឺន័រមានទទឹង 1280px ស្ថិតនៅចំកណ្តាល ជាមួយនឹងចន្លោះផ្ដេកធំទូលាយ (24-48px)។ ប្លុកមេប្រើសមាសភាពបីតំបន់មិនស៊ីមេទ្រី៖ ចំណងជើងធំមួយនៅខាងឆ្វេង និមិត្តសញ្ញាម៉ាកនៅចំកណ្តាល និងប្លុក "ចិញ្ចើម" នៅខាងស្តាំ។ នៅខាងក្រោមប្លុកមេ ខ្លឹមសារត្រូវបានរៀបចំជាឆ្នូតឆ្លាស់គ្នា៖ ឆ្នូតទទឹងពេញដែលមានឡូហ្គោរបស់អតិថិជន បន្ទាប់មកដោយផ្នែក "អ្នកបង្កើតភ្នាក់ងារ" ជួរឈរពីរដែលមានចំណងជើងនៅខាងឆ្វេង និងប្លង់ផលិតផលនៅខាងស្តាំ បន្ទាប់មកដោយក្រឡាចត្រង្គនៃកាតបីដែលមានលក្ខណៈពិសេស។ ផ្នែកនានាត្រូវបានបំបែកដោយបន្ទាត់បញ្ឈរទំហំ 96-128px ដោយគ្មានបន្ទាត់បែងចែក ឬផ្ទៃខាងក្រោយ។ ការរុករកគឺជាបន្ទះថេរតែមួយទំហំ 64px ដែលមានផ្ទៃខាងក្រោយព្រិលៗ។ ក្រឡាចត្រង្គកាតប្រើប្លង់ជួរឈរពីរ ឬបីជាប់លាប់ជាមួយនឹងបន្ទាត់ 16-24px។ ដង់ស៊ីតេសរុបគឺតូច - អត្ថបទងាយស្រួលអាន មានកន្លែងទំនេរច្រើន ប៉ុន្តែទំហំពុម្ពអក្សរ និងទំហំសមាសធាតុរារាំងទំព័រមិនឱ្យមានអារម្មណ៍ស្រាល។
រូបភាពមានកម្រិត ហើយតែងតែមានមុខងារ។ ធាតុដែលមើលឃើញសំខាន់គឺត្រីកោណខ្មៅ (▲)—សញ្ញាសម្គាល់ម៉ាកធរណីមាត្រដែលលេចឡើងជាស្រមោលអណ្តែតនៅលើមាត្រដ្ឋាន "អក្សរធំ"។ ឡូហ្គោអតិថិជននៅលើបន្ទះភស្តុតាងនៃគំនិតប្រើសញ្ញាសម្គាល់ពាក្យពិតរបស់ម៉ាកនីមួយៗក្នុងមាត្រដ្ឋានប្រផេះ។ គំរូផលិតផល (ចំណុចប្រទាក់ជជែករបស់ Notion លទ្ធផលស្ថានីយ CLI កាតលិខិតឆ្លងដែន) ត្រូវបានបង្កប់ជារូបថតអេក្រង់របៀបពន្លឺនៅក្នុងកាតដែលមានស៊ុម។ មិនមានរូបថត រូបភាព ឬធាតុ 3D ទេ—ប្រព័ន្ធនេះគឺជាអក្សរពុម្ព និងរាងធរណីមាត្រសុទ្ធនៅលើក្រដាសស។
ក្ដារលាយពណ៌
អព្យាក្រឹត
- Obsidian
#171717— ចំណងជើងសំខាន់ៗ ស៊ុមរុករក ការបំពេញប៊ូតុងពណ៌ខ្មៅ និងសញ្ញាសម្គាល់បញ្ជីទាំងអស់គឺស្ទើរតែជាពណ៌ខ្មៅ ដោយជៀសវាងភាពរដុប និងភាពឆ្អែតពណ៌ភ្លឺចែងចាំង។ - Paper White
#fafafa— ផ្ទាំងក្រណាត់ទំព័រ ផ្ទៃកាត ការបំពេញពន្លឺនៃប៊ូតុង—នេះគឺជាផ្ទៃខាងក្រោយស្តង់ដារដែលអ្វីៗផ្សេងទៀតស្ថិតនៅលើ។ - Pure White
#ffffff— ផ្ទៃកាតដែលបានលើកឡើង, ការបញ្ចូល, វាលបញ្ចូល។ - Hairline
#ebebeb— ស៊ុម 1px លើប៊ូតុង តំណភ្ជាប់ និងកាតអាចមើលឃើញនៅកម្រិតពង្រីកខ្ពស់ ប៉ុន្តែមើលមិនឃើញនៅកម្រិតពង្រីកទាប។ - Ash
#c9c9c9— អត្ថបទដែលបានបិទ ស្លាកដែលបានបិទសំឡេង និងរូបសញ្ញាសម្គាល់ម៉ាកនៅក្នុងឡូហ្គោរបស់អតិថិជន។ - Smoke
#a8a8a8— អត្ថបទបន្ទាប់បន្សំ អត្ថបទជំនួស ការបំពេញរូបតំណាងបន្តិចបន្តួច។
អក្សរសាស្ត្រ
ពី 11 ដល់ 64px · 6 ជំហាន
- Geist Sans — ការជំនួស៖ Inter · គ្រោង 400, 450, 500 · ពុម្ពអក្សរចម្បងសម្រាប់ចំណុចប្រទាក់ និងចំណងជើងគឺជាពុម្ពអក្សរ sans-serif ធរណីមាត្រដែលរចនាឡើងតាមតម្រូវការពី Vercel ជាមួយនឹងចន្លោះអក្សរតូចចង្អៀតនៅទំហំធំ (-0.06em នៅ 56-64px, -0.05em នៅ 30px)។ សម្រាប់ចំណងជើងនៅផ្នែកខាងលើនៃទំព័រ ទម្ងន់ 450 ត្រូវបានជ្រើសរើស៖ ក្រាស់ជាង Light ប៉ុន្តែស្រាលជាង Semi-Bold ដែលបង្កើតឱ្យមានសម្លេងដែលមានទំនុកចិត្ត ប៉ុន្តែមិនហួសហេតុពេក។
- Geist Mono — ការជំនួស៖ JetBrains Mono · គ្រោង 400, 500, 600 · ពុម្ពអក្សរបន្ទាប់បន្សំដែលមានចន្លោះតែមួយសម្រាប់ចំណងជើងរង ប្លុកកូដ បន្ទះទិន្នផល CLI ទិន្នន័យមេតា និងអក្សរធំ។ ការរួមបញ្ចូលគ្នា 8px/600px/អក្សរធំអនុញ្ញាតឱ្យមានការដាក់ពាក្យតូចៗបានយ៉ាងច្បាស់លាស់។ ចន្លោះអក្សរធំទូលាយ (0.071em) នៅក្នុងកំណែដែលមានចន្លោះតែមួយផ្តល់ទំហំគ្រប់គ្រាន់សម្រាប់អក្សរធំ។
ចន្លោះពេល និងទម្រង់
| គោលបំណង | អត្ថន័យ |
|---|---|
| ដង់ស៊ីតេ | ក្រាស់ |
| ជំហានមូលដ្ឋាន | 12px |
| កាំប៊ូតុង | 6px |
| កាំកាត | 6px |
| ស្រមោល | គ្មានព្រំដែនជំនួសឱ្យស្រមោល |
| រវាងផ្នែកនានា | 96-128px |
| ទទឹងទំព័រ | 1280px |
បញ្ញាសិប្បនិម្មិត (AI) នឹងបង្កើតគេហទំព័ររបស់អ្នកតាមរចនាបថ Vercel ហើយបំពេញវា
- បំពេញជាមួយផលិតផល និងការបង្ហោះតាមរយៈតំណភ្ជាប់ - Instagram, TikTok, Facebook ។
- ផ្ទេរខ្លឹមសារពីគេហទំព័រចាស់របស់អ្នក—គ្រាន់តែបញ្ជាក់អាសយដ្ឋាន។
- ការរចនាទំនើបលើម៉ាស៊ីនល្អបំផុត៖ React ( Next.js) ជាមួយនឹងការបង្ហាញម៉ាស៊ីនមេ និងការបង្កើនប្រសិទ្ធភាព SEO ភ្លាមៗ។
- ការបង្កើនប្រសិទ្ធភាព SEO ដោយស្វ័យប្រវត្តិយ៉ាងពេញលេញសម្រាប់លទ្ធផលស្វែងរក និងអនុសាសន៍បណ្តាញសរសៃប្រសាទ។
រចនាប័ទ្មស្រដៀងគ្នា
- Headspace — ជ្រុងសុខុមាលភាពដែលមានពន្លឺថ្ងៃនៅលើក្រដាសក្តៅ
- WHOOP — មន្ទីរពិសោធន៍សម្តែងនៅពាក់កណ្តាលអធ្រាត្រ - តុមន្ទីរពិសោធន៍គ្លីនិកពណ៌សនៅក្រោមចន្លោះប្រហោងល្ខោនពណ៌ខ្មៅ ជីពចរអគ្គិសនីពណ៌ស្វាយតែមួយ
- Together AI — កុងសូលស្រាវជ្រាវលើក្រដាសផ្ទាំងទឹកកក
- v0 by Vercel — គំនូរម៉ាស៊ីនក្រឡឹង។ ភាពជាក់លាក់ និងមុខងារគឺមានសារៈសំខាន់បំផុត ដោយធាតុនីមួយៗបម្រើគោលបំណងច្បាស់លាស់នៅលើផ្ទៃស្អាត និងល្អឥតខ្ចោះតាមបច្ចេកទេស។
- Dovetail — គំរូក្រោមព្រះច័ន្ទខ្មៅមួយ—បន្ទាត់ក្រាហ្វស្ទើរតែមើលមិនឃើញ ពុម្ពអក្សរពណ៌ស ពន្លឺពណ៌ស្វាយមួយភ្លឺចែងចាំង
- Glideapps — តុសរសេរអត្ថបទពណ៌តែមួយ ជាមួយនឹងពន្លឺពណ៌ខៀវខ្ចីអគ្គិសនីមួយ
- Timescale — គំនូរវិស្វកម្មលើក្រដាសក្រាហ្វក្តៅ
- UGLYCASH — សៀវភៅកត់ត្រាដែលគ្របដណ្ដប់ដោយស្ទីគ័រនៅលើក្រដាសពណ៌ក្រែម បង្ហាញពីបរិយាកាសនៃបច្ចេកវិទ្យាហិរញ្ញវត្ថុដ៏ក្លាហាន និងអតិបរមា ដែលបង្ហាញដោយមោទនភាពនូវភាពវឹកវររបស់ខ្លួន ។
- Sprout Social — ពន្លកពណ៌បៃតងនៅលើបន្ទះថ្មខ្មៅ។ ការសង្កត់សំឡេងភ្លឺមួយនៅលើផ្ទាំងក្រណាត់ពណ៌តែមួយ ដែលពណ៌របស់វាត្រូវបានប្រើសម្រាប់តែសកម្មភាព ជាមួយនឹងពុម្ពអក្សរធរណីមាត្រដែលមានទំនុកចិត្តបម្រើជាសញ្ញាសម្គាល់។
- Krea — វិចិត្រសាល Noir នៅពាក់កណ្តាលអធ្រាត្រ
- Evergreen — ផ្ទះកញ្ចក់ថាមពលព្រះអាទិត្យលើក្រដាស linen
- Factory — ស្ថានីយ "បន្ទប់សង្គ្រាម" នៅពាក់កណ្តាលអធ្រាត្រ។ "រោងចក្រ" គឺជាបន្ទះត្រួតពិនិត្យពណ៌ខ្មៅស្រអែមមួយ ដែលកាតពណ៌សតែមួយសន្លឹកធ្លាក់មកលើដូចជាសញ្ញាបញ្ជូនដែលមានភ្លើងពិល - វត្ថុតែមួយគត់នៅក្នុងបន្ទប់នោះគឺស្នាដៃខ្លួនឯង។