Shopify
ផ្ទះកញ្ចក់ពាក់កណ្តាលអធ្រាត្រ - ពាណិជ្ជសញ្ញារីកដុះដាលលើផ្ទៃខាងក្រោយពណ៌ខៀវស្រងាត់ បំភ្លឺដោយផ្កាភ្លើងជីអង្កាមតែមួយ
ប្រព័ន្ធរចនារបស់ Shopify គឺជាសិក្ខាសាលាពាក់កណ្តាលអធ្រាត្រសម្រាប់ពាណិជ្ជកម្ម៖ ផ្ទាំងក្រណាត់ពណ៌ខ្មៅស្ទើរតែខ្មៅ ដែលមានពណ៌បៃតងខៀវស្រងាត់ជ្រៅ ពុម្ពអក្សរ sans-serif ធំទូលាយ និងមានទំនុកចិត្ត និងការសង្កត់សំឡេងពណ៌បៃតងខ្ចីតែមួយដែលធ្វើឱ្យសកម្មនូវពេលវេលាអន្តរកម្ម។ ចំណុចប្រទាក់នេះស្រដៀងនឹងបន្ទប់ងងឹត ដែលផលិតផល និងម៉ាកយីហោជាប្រភពនៃពន្លឺ - រូបថត និងមុខហាងភ្លឺប្រឆាំងនឹងផ្ទៃខ្មៅស្ទើរតែខ្មៅ ខណៈពេលដែលធាតុ chrome ថយចុះ។ សមាសធាតុមានរាងធរណីមាត្រ ប៉ុន្តែទន់៖ កាតកាំ 12px ដែលមានស៊ុមស្តើង ប៊ូតុងរាងគ្រាប់ថ្នាំ និងពុម្ពអក្សរទម្ងន់ 330 ដែលខ្សឹបប្រាប់មាត្រដ្ឋានជាជាងស្រែក។ សញ្ញាវណ្ណយុត្តិពណ៌តែមួយ (#36f4a4) ត្រូវបានប្រើតិចតួចលើតំណភ្ជាប់ ស្លាក និងស្ថានភាពផ្តោតអារម្មណ៍ ដោយរក្សាពណ៌សម្រាប់ពេលវេលាមុខងារ ដើម្បីធានាថារឿងរ៉ាវរបស់អាជីវករនៅតែជាចំណុចកណ្តាលដែលមើលឃើញ។
ទទឹងអតិបរមាគឺ ~1280px នៅចំកណ្តាល ជាមួយនឹងប្លុក splash ទទឹងពេញលាតសន្ធឹងហួសពីធុងរូបថត។ ចង្វាក់ទំព័រឆ្លាស់គ្នា៖ (1) ទំព័រ splash ងងឹតទទឹងពេញជាមួយនឹងចំណងជើង និងប៊ូតុង call-to-action ដែលដាក់ពីលើ (2) ផ្នែកងងឹតដែលមានផាសុកភាពជាមួយនឹងប្លុកអត្ថបទ និងរូបភាពទទឹងអតិបរមាក្នុងជួរឈរចំនួន 2 ឬក្រឡាចត្រង្គរូបភាពក្នុងជួរឈរចំនួន 3 (3) បន្ទះបង្ហាញអន្តរកម្ម (កាតផលិតផល ម៉ាស៊ីនគិតលេខដឹកជញ្ជូន ផែនទីពិភពលោក) ដែលបង្ហាញជាកាតលើកឡើងនៅលើផ្ទាំងក្រណាត់ជ្រៅជាង។ ការរុករកគឺជារបារកំពូលថេរដែលមានឡូហ្គោ + ធាតុរុករកចំនួន 3 + តំណភ្ជាប់បន្ទាប់បន្សំ + ប៊ូតុង call-to-action ចម្បង ដែលតម្រឹមទាំងអស់ទៅខាងស្តាំ។ ចង្វាក់បញ្ឈរប្រើចន្លោះ 80px រវាងផ្នែកដែលមានការផ្លាស់ប្តូររលូន - គ្មានបន្ទាត់បែងចែករវាងផ្នែកងងឹតទេ មានតែការផ្លាស់ប្តូរពណ៌ផ្ទៃប៉ុណ្ណោះ។
ការរចនាដែលមើលឃើញផ្តោតជាចម្បងទៅលើអ្នកលក់រាយ៖ រូបថតផលិតផលទំហំពេញ និងរូបថតពីព្រឹត្តិការណ៍ម៉ាកយីហោ ភាគច្រើននៃទម្ងន់ដែលមើលឃើញ ជារឿយៗស្ថិតក្នុងទម្រង់ជាផ្ទៃខាងក្រោយធំៗ ដែលមានអក្សរពណ៌សគ្របពីលើ។ រូបភាពត្រូវបានកាត់យ៉ាងតឹងរ៉ឹង មានភាពផ្ទុយគ្នាខ្ពស់ និងមានលក្ខណៈរីករាយ (សំឡេងរោទ៍នៃកណ្តឹង Nasdaq ការស្វាគមន៍ជាក្រុម ការថតរូបផលិតផលជិតៗនៅក្នុងដៃ)។ ផ្ទៃខាងក្រោយងងឹតបង្កើតចំណាប់អារម្មណ៍ថារូបថតទាំងនេះត្រូវបានបំភ្លឺដោយភ្លើងស្តុប។ រូបភាពមានលក្ខណៈតិចតួចបំផុត - ការងារពន្យល់ចម្បងត្រូវបានអនុវត្តដោយរូបភាពផលិតផលដែលបានបង្កប់ និងរូបថតអេក្រង់នៃហាង។ រូបតំណាងមានពណ៌សតែមួយ ដែលមានទទឹងបន្ទាត់ 1.5–2px ជាធម្មតាពណ៌ស ឬ #36f4a4 សម្រាប់ស្ថានភាពសកម្ម។
ក្ដារលាយពណ៌
ម៉ាក
- Shopify Mint
#36f4a4— សូចនាកររុករកសកម្ម កងរង្វង់ផ្តោត ចំណុចលេចធ្លោនៃស្លាក និងចំណុចលេចធ្លោនៃសំកាំងលើតំណភ្ជាប់ គឺជាពន្លឺចែងចាំងពណ៌តែមួយគត់ដែលបង្កើតអារម្មណ៍នៃអន្តរកម្មដែលបានបើកប្រឆាំងនឹងផ្ទៃខាងក្រោយងងឹត។
អព្យាក្រឹត
- Midnight Forest
#02090a— ផ្ទាំងក្រណាត់ទំព័រ, រូបភាពផ្ទៃខាងក្រោយបឋមកថា, រូបភាពផ្ទៃខាងក្រោយផ្នែក - Deep Lichen
#061a1c— ផ្ទៃកាតមេ បន្ទះដែលលើកឡើង ប្លុកមាតិកា។ - Shaded Fern
#072720— បន្ទះរុករក កាតបន្ថែម ការលើកឡើងនៃបន្ទះស្ទើរតែមិនអាចកត់សម្គាល់បាន។ - Spruce Border
#1e2c31— ស៊ុមស្តើងសម្រាប់កាត បន្ទាត់បែងចែក គ្រោងវាលបញ្ចូល។ - Abyss Indigo
#000a1e— ផ្ទៃបន្ថែមសម្រាប់បង្កប់ផលិតផល/ការបង្ហាញ បន្ទះដែលមានការពិពណ៌នាអំពីមុខងារ។ - Pure White
#ffffff— អត្ថបទសំខាន់, ការបំពេញប៊ូតុង, ចំណងជើង, ឡូហ្គោ។
អក្សរសាស្ត្រ
ពី 12 ដល់ 70px · 8 ជំហាន
- Neue Haas Grotesk — ការជំនួស៖ Inter · គ្រោង 330, 400, 500, 550, 600 · ប្រព័ន្ធអក្សរស្នូលគឺចំណងជើងដែលមានទម្ងន់ពុម្ពអក្សរ 70–96px (330–400) ដែលមានលក្ខណៈស្រទន់ជាជាងខ្លាំង។ ច្បាប់ចម្លងតួអត្ថបទដែលមានទម្ងន់ពុម្ពអក្សរ 16–18px (400–500)។ និងការរុករក និងចំណុចប្រទាក់អ្នកប្រើដែលមានទម្ងន់ពុម្ពអក្សរ 14–16px (500–550)។ ទម្ងន់ពុម្ពអក្សរស្រាលបំផុត 330 នៅទំហំអេក្រង់ធំគឺជាលក្ខណៈពិសេសមួយ៖ វាបង្ហាញពីទំនុកចិត្តតាមរយៈការអត់ធ្មត់ជាជាងភាពធំ។
- Inter Variable — ការជំនួស៖ Inter · គ្រោង 400, 420, 450, 550 · ប្រភេទពុម្ពអក្សរបន្ទាប់បន្សំដែលប្រើក្នុងធាតុចំណុចប្រទាក់រុករក កំណត់ចំណាំតូចៗ ការគ្រប់គ្រងផ្ទាំង និងអត្ថបទខ្នាតតូចនៅក្នុងបាតកថា។ អក្សរតូចធំជាងបន្តិចរបស់វា និងគម្លាតអក្សរស្តង់ដារច្រើនជាងមុនធ្វើឱ្យវាអាចអានបានកាន់តែងាយស្រួលក្នុងទំហំតូច។ វាក៏សមរម្យសម្រាប់ស្ថានភាពដែលពុម្ពអក្សរទម្ងន់ 420 បំពេញចន្លោះរវាងពុម្ពអក្សរធម្មតា និងទំហំមធ្យម។
ចន្លោះពេល និងទម្រង់
| គោលបំណង | អត្ថន័យ |
|---|---|
| ដង់ស៊ីតេ | មធ្យម |
| ជំហានមូលដ្ឋាន | 12px |
| កាំប៊ូតុង | 9999px |
| កាំកាត | 12px |
| ស្រមោល | គ្មានព្រំដែនជំនួសឱ្យស្រមោល |
| រវាងផ្នែកនានា | 80px |
| ទទឹងទំព័រ | 1280px |
បញ្ញាសិប្បនិម្មិត (AI) នឹងបង្កើតគេហទំព័ររបស់អ្នកតាមរចនាបថ Shopify ហើយបំពេញវា
- បំពេញជាមួយផលិតផល និងការបង្ហោះតាមរយៈតំណភ្ជាប់ - Instagram, TikTok, Facebook ។
- ផ្ទេរខ្លឹមសារពីគេហទំព័រចាស់របស់អ្នក—គ្រាន់តែបញ្ជាក់អាសយដ្ឋាន។
- ការរចនាទំនើបលើម៉ាស៊ីនល្អបំផុត៖ React ( Next.js) ជាមួយនឹងការបង្ហាញម៉ាស៊ីនមេ និងការបង្កើនប្រសិទ្ធភាព SEO ភ្លាមៗ។
- ការបង្កើនប្រសិទ្ធភាព SEO ដោយស្វ័យប្រវត្តិយ៉ាងពេញលេញសម្រាប់លទ្ធផលស្វែងរក និងអនុសាសន៍បណ្តាញសរសៃប្រសាទ។
រចនាប័ទ្មស្រដៀងគ្នា
- Retool — សិក្ខាសាលាថ្មអប់ស៊ីឌានដ៏កក់ក្តៅមួយ - ផ្ទៃសម្រាប់ឧបករណ៍ដែលមានភាពជាក់លាក់ខ្ពស់ បំភ្លឺដោយធ្យូងដែលកំពុងឆេះ ជាកន្លែងដែលអ្វីៗត្រូវបានបង្កើតឡើង
- Elektron — ផ្ទាំងបញ្ជាឧបករណ៍នៅពាក់កណ្តាលអធ្រាត្រ គឺជាផ្ទាំងក្រណាត់ពណ៌ខ្មៅស្ទើរតែទាំងស្រុង ដែលរូបថតផលិតផលភ្លឺចែងចាំង ខណៈពេលដែលចំណុចប្រទាក់នៅតែមើលមិនឃើញ។
- REKKI — បន្ទះត្រួតពិនិត្យការហោះហើរនៅក្នុងមន្ទីរពិសោធន៍រូបថត
- OFFFICE : — វិចិត្រសាល Noir មួយដែលហ៊ុំព័ទ្ធដោយពុម្ពអក្សរ monolithic
- Clyde — បន្ទប់តាំងបង្ហាញ ដែលមានភ្លើងបំភ្លឺតែមួយ គឺជាវិចិត្រសាលស្ទើរតែងងឹត ដែលពណ៌តែមួយគត់នៅក្នុងបន្ទប់គឺបាល់ពណ៌ជម្រាលក្តៅ។
- Channel Studio — មន្ទីរពិសោធន៍ថតរូបស្ទូឌីយោមួយដែលមានអំពូលភ្លើងពណ៌ផ្កាថ្មមួយ
- Electronic Materials Office — ធ្យូងដែលកំពុងឆេះនៅក្នុងវិចិត្រសាលដែលតុបតែងដោយធ្យូង
- ORYZO AI — អត្ថបទរូបថតអំពីបន្ទប់ងងឹតមួយ។ វត្ថុឯកោមួយដែលអណ្តែតក្នុងភាពងងឹតក្តៅឧណ្ហៗ ពណ៌សក្រែមគឺជាគ្រឿងតុបតែងតែមួយគត់។
- Factory — ស្ថានីយ "បន្ទប់សង្គ្រាម" នៅពាក់កណ្តាលអធ្រាត្រ។ "រោងចក្រ" គឺជាបន្ទះត្រួតពិនិត្យពណ៌ខ្មៅស្រអែមមួយ ដែលកាតពណ៌សតែមួយសន្លឹកធ្លាក់មកលើដូចជាសញ្ញាបញ្ជូនដែលមានភ្លើងពិល - វត្ថុតែមួយគត់នៅក្នុងបន្ទប់នោះគឺស្នាដៃខ្លួនឯង។
- Hungry Tiger — គំនូរលើជញ្ជាំងផ្ទះបាយដែលមានពណ៌ដូចរមៀតភ្លឺចែងចាំង។ ក្ដារលាយពណ៌មាស និងពណ៌ត្នោតច្រែះរួមបញ្ចូលគ្នា ជាមួយនឹងពុម្ពអក្សរធំរហូតដល់មើលទៅដូចជាផ្លាកសញ្ញាផ្សារគ្រឿងទេសជាជាងគេហទំព័រ។
- Bibliothèque — វិចិត្រសាលរាងគូបពណ៌ខ្មៅនៅក្រោមភ្លើងស្តុប - ចានភ្លឺឯកោមួយនៅក្នុងសាលធំងងឹតមួយ
- Apple (España) — រោងមហោស្រពខ្មៅដែលមានគ្រឿងបំភ្លឺ