Airbnb
ជញ្ជាំងវិចិត្រសាលពណ៌សស្ងប់ស្ងាត់មួយដែលមានចំណាំពណ៌ក្រហមផ្កាថ្មតែមួយ
Airbnb ដំណើរការក្នុងរចនាប័ទ្ម "ផ្ទាំងក្រណាត់ពណ៌ស" ដែលការថតរូបលេចធ្លោជាងគេ៖ ស្ទើរតែគ្រប់អេក្រង់ទាំងអស់សុទ្ធតែជាស៊ុមពណ៌តែមួយដែលស្ងាត់ជ្រងំ ដែលអនុញ្ញាតឱ្យរូបភាពពេញអេក្រង់នៃអចលនទ្រព្យបង្ហាញពីចំណាប់អារម្មណ៍ទូទៅ ជាមួយនឹងការសង្កត់សំឡេងពណ៌ក្រហមផ្កាថ្មដ៏សម្បូរបែប (Rausch) ជាសញ្ញាសម្គាល់ពណ៌តែមួយគត់ដែលបង្ហាញពីសកម្មភាព។ ពុម្ពអក្សរគឺជាធរណីមាត្រ sans-serif (Airbnb Cereal VF)—ភាគច្រើនមានទំហំតូច និងជឿជាក់—សម្រាប់អត្ថបទតួ ចំណុចប្រទាក់ និងចំណងជើងផ្នែក (22-22)—ជាមួយនឹងគម្លាតបន្ទាត់អវិជ្ជមានតឹង និងគម្លាតបន្ទាត់ធំទូលាយ ដែលធ្វើឱ្យកាតដែលមានអក្សរក្រាស់អាចអានបាន។ ចំណុចប្រទាក់គឺរាបស្មើ គ្មានស៊ុម និងមូល៖ កាំ 12-3 នៅលើកាត និងការគ្រប់គ្រង ប៊ូតុងរាងមូលដូចគ្រាប់ថ្នាំ និងស្រមោលទន់ៗជាស្រទាប់សម្រាប់តែធាតុលេចធ្លោដូចជារបារស្វែងរក។ អ្វីៗផ្សេងទៀត—កាត ធាតុបញ្ជី តំណភ្ជាប់—ពឹងផ្អែកលើចន្លោះពណ៌ស និងបន្ទាត់ល្អិតៗជាជាងការសង្កត់សំឡេងពណ៌ក្រូម។
ប្លង់ទទឹងពេញដែលគ្មានដែនកំណត់ទទឹងអតិបរមាថេរ—ខ្លឹមសារលាតសន្ធឹងពីគែមមួយទៅគែមមួយនៅក្នុងតំបន់ដែលអាចមើលឃើញ ជាមួយនឹងចន្លោះផ្ដេកប្រហែល 40px នៅសងខាងនៅលើកុំព្យូទ័រលើតុ។ វីរបុរសគឺជាកន្សោមស្វែងរកអណ្តែត ដែលស្ថិតនៅចំកណ្តាលផ្ទាំងក្រណាត់ពណ៌សអព្យាក្រឹតដោយគ្មានរូបភាព ឬចំណងជើង—របារស្វែងរកគឺជាវីរបុរស។ នៅខាងក្រោមការស្វែងរក ទំព័រផ្លាស់ប្តូរទៅជាផ្នែកដែលដាក់ជាជង់បញ្ឈរ និងរមូរផ្ដេក (ជួរដេកចំនួនបួនអាចមើលឃើញ៖ ផ្ទះដែលមានលក្ខណៈពិសេស សណ្ឋាគារដ៏អស្ចារ្យ ទីក្រុងផ្សេងទៀត មាននៅខែក្រោយ) ដែលជួរនីមួយៗមានកម្ពស់ប្រហែល 320px ដែលបំបែកដោយបន្ទាត់បញ្ឈរ 48px។ ផ្នែកនីមួយៗប្រើក្រឡាចត្រង្គ 7 សន្លឹកដែលមានការហៀរផ្ដេក និងការរុករកព្រួញ។ បាតកថាគឺជាក្រឡាចត្រង្គ 3 ជួរឈរនៃតំណភ្ជាប់នៅលើផ្ទៃខាងក្រោយ #f7f7f7 បន្ទាប់មកដោយរបារខាងក្រោមដែលមានព័ត៌មានរក្សាសិទ្ធិ ជម្រើសភាសា/រូបិយប័ណ្ណ និងរូបតំណាងប្រព័ន្ធផ្សព្វផ្សាយសង្គម។ ការរុករកគឺជារបារកំពូលថេរជាមួយនឹងការរុករកផ្ទាំងនៅចំកណ្តាល និងការគ្រប់គ្រងតម្រឹមស្តាំ។
ការថតរូបគ្របដណ្ដប់លើប្រព័ន្ធដែលមើលឃើញ ដោយរូបភាពពេញអេក្រង់នៃបញ្ជីអចលនទ្រព្យបម្រើជាប្រភេទខ្លឹមសារចម្បង។ រូបថតទាំងអស់គឺជារូបថតខាងក្នុង និងខាងក្រៅដែលមានពន្លឺល្អ និងក្តៅឧណ្ហៗនៃផ្ទះ និងសណ្ឋាគារពិតៗ ដែលបានដំណើរការដោយការកែពណ៌ធម្មជាតិ (ដោយគ្មានតម្រងធ្ងន់ៗ ឬពណ៌ពីរ)។ រូបភាពត្រូវបានច្រឹបយ៉ាងតឹងរ៉ឹងជាមួយនឹងសមាមាត្រទិដ្ឋភាព 1:1 សម្រាប់កាតបញ្ជី ដោយបំពេញគែមនៃកាតដោយមិនហូរឈាម។ រូបតំណាងនៅទូទាំងចំណុចប្រទាក់មានគ្រោងពណ៌តែមួយ (ទម្ងន់បន្ទាត់ ~16–16) ដែលត្រូវបានប្រើតិចតួចសម្រាប់ប្រភេទរុករក និងការគ្រប់គ្រង UI។ ឡូហ្គោគឺជាធាតុក្រាហ្វិកពហុពណ៌តែមួយគត់ (Rausch)។ គ្មានរូបភាព គ្មានការបង្ហាញ 3D គ្មានក្រាហ្វិកអរូបី - ភាសាដែលមើលឃើញគឺការថតរូបសុទ្ធ និងរូបតំណាងពណ៌តែមួយតិចតួចបំផុតនៅលើផ្ទាំងក្រណាត់ពណ៌សទន់។
ក្ដារលាយពណ៌
ម៉ាក
- Rausch
#ff385c— ពណ៌ក្រហមត្រូវបានប្រើជាការតុបតែងលម្អសម្រាប់រូបតំណាង ផ្លាកសញ្ញា និងព័ត៌មានលម្អិតក្រាហ្វិកតូចៗ។ វាមិនគួរត្រូវបានប្រើជាពណ៌ចម្បងសម្រាប់ការអំពាវនាវឱ្យធ្វើសកម្មភាពទេ។ - Rausch 600
#e00b41— ថ្នាំលាប Rausch កំណែដែលបានសង្កត់ និងមានពណ៌ខ្មៅសម្រាប់ផ្ទៃដែលប្រើជាការសង្កត់លើម៉ាកលើផ្ទៃអណ្តែត/សកម្ម។
អព្យាក្រឹត
- Hof
#222222— ច្បាប់ចម្លងតួអត្ថបទ អត្ថបទសំខាន់ ចំណងជើង គ្រោងរូបតំណាង និងផ្ទៃខាងក្រោយបញ្ច្រាស គឺជាពណ៌អព្យាក្រឹតជិតខ្មៅ ដែលបម្រើជាមូលដ្ឋានសម្រាប់ប្រព័ន្ធគ្មានពណ៌ទាំងមូល។ - Foggy
#6a6a6a— អត្ថបទបន្ទាប់បន្សំ ចំណងជើងរងដែលបានបិទសំឡេង អត្ថបទជំនួយ ការបំពេញរូបតំណាងដែលបានបិទ និងទិន្នន័យមេតាសម្ងាត់នៅខាងក្រោមចំណងជើងកាត។ - Grey 500
#c1c1c1— អត្ថបទដែលបានបិទ អត្ថបទជំនួសនៅក្នុងវាលបញ្ចូល និងគ្រោងរូបតំណាងដែលបានបិទសំឡេង ដែលត្រូវការការបន្ថយការសង្កត់ធ្ងន់លើស្ថានភាព។ - Bebe
#ebebeb— ស៊ុមស្តើង វាលបញ្ចូលដែលគូសបន្ទាត់ពីក្រោម សញ្ញាបំបែករវាងបន្ទាត់បញ្ជី និងបន្ទាត់បែងចែកស្រទន់។ - Deco
#dddddd— រូបភាពផ្ទៃខាងក្រោយកាតសម្រាប់កុងតឺន័រអសកម្ម កន្លែងដាក់ និងស្ថានភាពកាតដែលបានបិទ។ - Faint
#f7f7f7— រូបភាពផ្ទៃខាងក្រោយផ្ទាំងក្រណាត់ទំព័រ ផ្ទៃបាតកថា និងស្ថានភាពដាក់លើសម្រាប់ធាតុអន្តរកម្ម គឺជាពណ៌ទន់ៗ និងក្រែម ដែលធ្វើឱ្យទំព័រនេះខុសប្លែកពីកាតពណ៌សសុទ្ធ។
អក្សរសាស្ត្រ
ពី ១១ ដល់ ២៨ ភីកសែល · ៥ ជំហាន
- Airbnb Cereal VF — ការជំនួស៖ Circular · គ្រោង 400, 500, 600, 700 · ពុម្ពអក្សរ sans-serif ធរណីមាត្រផ្ទាល់ខ្លួន ដែលត្រូវបានរចនាឡើងសម្រាប់ Airbnb។ អត្ថបទដើមត្រូវបានដាក់នៅ 14px/400 ស្លាក UI នៅ 16px/500 ចំណងជើងផ្នែកនៅ 20px/600 22px/500 ជាមួយនឹងចន្លោះអក្សរតូចចង្អៀត -0.02em និងចំណងជើងទំព័រនៅ 28px/700។ ចន្លោះអក្សរអវិជ្ជមានថយចុះជាមួយនឹងទំហំកើនឡើង ដែលជាលក្ខណៈនៃពុម្ពអក្សរ sans-serif ធរណីមាត្រនៅទំហំអេក្រង់ធំជាង។ បើកមុខងារ glyph ជំនួស "salt"។
ចន្លោះពេល និងទម្រង់
| គោលបំណង | អត្ថន័យ |
|---|---|
| ដង់ស៊ីតេ | ក្រាស់ |
| ជំហានមូលដ្ឋាន | 12px |
| កាំប៊ូតុង | 9999px |
| កាំកាត | 12px |
| ស្រមោល | ស្រមោលទន់ៗ |
| រវាងផ្នែកនានា | 48px |
| ទទឹងទំព័រ | 1440px |
បញ្ញាសិប្បនិម្មិត (AI) នឹងបង្កើតគេហទំព័ររបស់អ្នកតាមរចនាបថ Airbnb ហើយបំពេញវា
- បំពេញជាមួយផលិតផល និងការបង្ហោះតាមរយៈតំណភ្ជាប់ - Instagram, TikTok, Facebook ។
- ផ្ទេរខ្លឹមសារពីគេហទំព័រចាស់របស់អ្នក—គ្រាន់តែបញ្ជាក់អាសយដ្ឋាន។
- ការរចនាទំនើបលើម៉ាស៊ីនល្អបំផុត៖ React ( Next.js) ជាមួយនឹងការបង្ហាញម៉ាស៊ីនមេ និងការបង្កើនប្រសិទ្ធភាព SEO ភ្លាមៗ។
- ការបង្កើនប្រសិទ្ធភាព SEO ដោយស្វ័យប្រវត្តិយ៉ាងពេញលេញសម្រាប់លទ្ធផលស្វែងរក និងអនុសាសន៍បណ្តាញសរសៃប្រសាទ។
រចនាប័ទ្មស្រដៀងគ្នា
- Apple (España) — ប្រអប់តាំងបង្ហាញវិចិត្រសាលពណ៌ស
- Silencio — បន្ទប់ពណ៌សមួយដែលមានវត្ថុបុរាណអណ្តែតទឹក។ ការតាំងពិព័រណ៍វិចិត្រសាលធ្វើពីក្រដាសក្តៅ ដែលធាតុនីមួយៗកាន់កាប់កន្លែងរបស់វាទល់នឹងផ្ទៃខាងក្រោយនៃបរិមាណអវិជ្ជមាន ហើយភាពស្ងៀមស្ងាត់គឺជាការសម្រេចចិត្តរចនាដោយចេតនា។
- Oakâme — សិក្ខាសាលា Provençal ដែលត្រូវបានឆ្លាក់ចេញពីថ្មក្តៅឧណ្ហៗ ដែលមានពន្លឺថ្ងៃ
- Nike — វិចិត្រសាលពណ៌ខ្មៅនៃសមិទ្ធផលកីឡា – ជញ្ជាំងពណ៌ស ផលិតផលជាស្នាដៃសិល្បៈ ក្រូមរលាយទៅក្នុងផ្ទៃខាងក្រោយ
- Arc — វិចិត្រសាលពណ៌សឧស្សាហកម្មជាងពាក់កណ្តាលអធ្រាត្រ
- Rivian — រូបចម្លាក់អគ្គិសនីមួយដុំនៅលើជញ្ជាំងបេតុងនៃវិចិត្រសាល។ Rivian បង្ហាញយានជំនិះនីមួយៗជារូបចម្លាក់ប្រឆាំងនឹងលំហពណ៌សដ៏ធំទូលាយមួយ ជាមួយនឹងអក្សរធំដែលក្លាយជាធាតុស្ថាបត្យកម្ម និងពណ៌លឿងក្តៅតែមួយដែលបំបែកបរិយាកាសពណ៌តែមួយ ដូចជាពន្លឺព្រះអាទិត្យនៅលើផ្ទៃម៉ាត់។
- Analogue — ប្រអប់តាំងបង្ហាញវិចិត្រសាលពណ៌ខ្មៅ - ទំនិញអណ្តែតក្នុងភាពទទេ
- ddna — ប្រអប់តាំងបង្ហាញសារមន្ទីរក្តៅៗលើក្រណាត់ទេសឯកដែលមិនទាន់កែច្នៃ
- Zellerfeld — សិក្ខាសាលាជាងចម្លាក់លើថ្មម៉ាបពណ៌ស—ផ្ទៃថ្មម៉ាបតែមួយនៃជើងទម្រ ផ្កាភ្លើងកូបូលតែមួយ សំឡេងខ្សឹបខ្សៀវនៃអក្សរតូចពីជាន់ដល់ពិដាន
- UY Studio — វិចិត្រសាលថ្មរបស់វត្តអារាមគឺជាកន្លែងស្ងប់ស្ងាត់មួយដែលមានជញ្ជាំងបេតុង ជាកន្លែងដែលដបទឹកអប់ឈរនៅលើជើងទម្រពណ៌ស បំភ្លឺដោយចង្កៀង ៤០០ វ៉ាត់មួយ និងអំពូលពណ៌ប្រផេះក្តៅចំនួនបួន។
- Basic.Space — វិចិត្រសាលអ្នកថែរក្សានៅលើថ្មម៉ាបពណ៌ស
- COS — វិចិត្រសាលទាន់សម័យដែលមានជញ្ជាំងពណ៌ស