Airbnb
एउटा कोरल रातो बुकमार्क भएको शान्त सेतो ग्यालरी भित्ता
Airbnb "सेतो क्यानभास" शैलीमा सञ्चालन हुन्छ, जहाँ फोटोग्राफी सर्वोच्च हुन्छ: लगभग हरेक स्क्रिन एक शान्त मोनोक्रोम फ्रेम हो, जसले गुणहरूको पूर्ण-स्क्रिन छविहरूलाई समग्र प्रभाव व्यक्त गर्न अनुमति दिन्छ, एकल, समृद्ध कोरल-रातो उच्चारण (Rausch) ले कार्यलाई जनाउने एकमात्र रंग संकेतको रूपमा। टाइपफेस ज्यामितीय sans-serif (Airbnb Cereal VF) हो—प्रायः सानो, आत्मविश्वासी आकारहरू—बडी टेक्स्ट, इन्टरफेस, र सेक्सन हेडिङहरू (२२-२२) को लागि—टाइट नेगेटिभ लाइन स्पेसिङ र उदार लाइन स्पेसिङको साथ, जसले बाक्लो टेक्स्ट भएका कार्डहरूलाई पढ्न योग्य बनाउँछ। इन्टरफेस समतल, फ्रेमलेस र गोलाकार छ: कार्डहरू र नियन्त्रणहरूमा १२-३ त्रिज्या, गोलाकार गोली आकारका बटनहरू, र खोज पट्टी जस्ता प्रमुख तत्वहरूको लागि मात्र नरम, तहयुक्त छायाँहरू। अरू सबै कुरा—कार्डहरू, सूची वस्तुहरू, लिङ्कहरू—क्रोम एक्सेन्टहरूको सट्टा सेतो ठाउँ र फाइन लाइनहरूमा निर्भर गर्दछ।
कुनै निश्चित अधिकतम-चौडाइ सीमा बिनाको पूर्ण-चौडाइ लेआउट—सामग्री हेर्न सकिने क्षेत्र भित्र किनारा-देखि-किनारासम्म फैलिएको हुन्छ, डेस्कटपमा प्रत्येक छेउमा लगभग ४० पिक्सेल तेर्सो प्याडिङ हुन्छ। हिरो एउटा तैरिरहेको खोज क्याप्सुल हो, जुन कुनै छवि वा शीर्षक बिनाको तटस्थ सेतो क्यानभासमा केन्द्रित हुन्छ—खोज पट्टी नै हिरो हो। खोजको तल, पृष्ठ ठाडो रूपमा स्ट्याक गरिएको, तेर्सो रूपमा स्क्रोल गर्ने खण्डहरूमा परिवर्तन हुन्छ (चार पङ्क्तिहरू देखिने छन्: विशेष घरहरू, उत्कृष्ट होटलहरू, अन्य शहर, अर्को महिना उपलब्ध), प्रत्येक लगभग ३२० पिक्सेल अग्लो, ४८ पिक्सेल ठाडो गटरहरूद्वारा विभाजित। प्रत्येक खण्डले तेर्सो ओभरफ्लो र तीर नेभिगेसनको साथ ७-कार्ड ग्रिड प्रयोग गर्दछ। फुटर #f7f7f7 पृष्ठभूमिमा लिङ्कहरूको ३-स्तम्भ ग्रिड हो, त्यसपछि प्रतिलिपि अधिकार जानकारी, भाषा/मुद्रा विकल्पहरू, र सामाजिक मिडिया आइकनहरू सहितको तल्लो पट्टी हुन्छ। नेभिगेसन केन्द्रित ट्याब नेभिगेसन र दायाँ-पङ्क्तिबद्ध नियन्त्रणहरू सहितको निश्चित शीर्ष पट्टी हो।
दृश्य प्रणालीमा फोटोग्राफीले प्रभुत्व जमाउँछ, घर जग्गा सूचीहरूको पूर्ण-स्क्रिन छविहरू प्राथमिक सामग्री प्रकारको रूपमा सेवा गर्छन्। सबै तस्बिरहरू वास्तविक घरहरू र होटलहरूको न्यानो, राम्रोसँग उज्यालो भित्री र बाहिरी शटहरू हुन्, प्राकृतिक रंग सुधार (भारी फिल्टर वा डुओटोन बिना) संग प्रशोधन गरिएका छन्। कार्डहरू सूचीबद्ध गर्नको लागि छविहरू १:१ पक्ष अनुपातको साथ कडा रूपमा क्रप गरिएका छन्, ब्लीड बिना कार्डको किनारा भर्दै। इन्टरफेसभरि आइकनहरूमा मोनोक्रोम रूपरेखा (रेखा वजन ~१६–१६) हुन्छ, नेभिगेसन कोटीहरू र UI नियन्त्रणहरूको लागि कम प्रयोग गरिन्छ। लोगो एक मात्र बहुरंगी ग्राफिक तत्व हो (राउश)। कुनै चित्रण छैन, कुनै ३D रेन्डर छैन, कुनै अमूर्त ग्राफिक्स छैन - दृश्य भाषा शुद्ध फोटोग्राफी र नरम सेतो क्यानभासमा न्यूनतम मोनोक्रोम आइकनोग्राफी हो।
प्यालेट
ब्रान्ड
- Rausch
#ff385c— रातो रंगलाई आइकन, चिन्ह र साना ग्राफिक विवरणहरूको लागि सजावटी उच्चारणको रूपमा प्रयोग गरिन्छ। यसलाई कल टु एक्शनको लागि प्राथमिक रंगको रूपमा प्रयोग गर्नु हुँदैन। - Rausch 600
#e00b41— होभर/सक्रिय सतहहरूमा ब्रान्ड एक्सेन्टको रूपमा प्रयोग गरिने सतहहरूको लागि राउश पेन्टको थिचिएको र गाढा संस्करण।
तटस्थ
- Hof
#222222— मुख्य भागको प्रतिलिपि, मुख्य पाठ, शीर्षक, आइकन रूपरेखा, र उल्टो पृष्ठभूमि कालोको नजिकको तटस्थ रंग हो, जसले सम्पूर्ण अक्रोमेटिक प्रणालीको लागि आधारको रूपमा काम गर्दछ। - Foggy
#6a6a6a— माध्यमिक पाठ, म्यूट गरिएका क्याप्सनहरू, सहायक पाठ, असक्षम पारिएको आइकन भरण, र कार्ड शीर्षकहरू मुनिको विवेकी मेटाडेटा। - Grey 500
#c1c1c1— असक्षम पारिएको पाठ, इनपुट फिल्डहरूमा प्लेसहोल्डर पाठ, र मौन आइकन रूपरेखाहरू जहाँ स्थितिमा जोड कम गर्न आवश्यक छ। - Bebe
#ebebeb— पातलो किनाराहरू, रेखांकित इनपुट फिल्डहरू, सूची रेखाहरू बीच विभाजकहरू, र सूक्ष्म विभाजन रेखाहरू। - Deco
#dddddd— निष्क्रिय कन्टेनरहरू, प्लेसहोल्डरहरू, र असक्षम कार्ड अवस्थाहरूको लागि कार्ड पृष्ठभूमि छविहरू। - Faint
#f7f7f7— पृष्ठ क्यानभास पृष्ठभूमि छवि, फुटर सतह, र अन्तरक्रियात्मक तत्वहरूको लागि होभर अवस्था एक नरम, क्रिमी शेड हो जसले यो पृष्ठलाई शुद्ध सेतो कार्डहरूबाट अलग गर्दछ।
टाइपोग्राफी
११ देखि २८ पिक्सेल सम्म · ५ चरणहरू
- Airbnb Cereal VF — प्रतिस्थापन: Circular · रूपरेखाहरू 400, 500, 600, 700 · Airbnb को लागि डिजाइन गरिएको एउटा अनुकूलित ज्यामितीय sans-serif फन्ट। मुख्य पाठ १४px/४०० मा, UI लेबल १६px/५०० मा, खण्ड शीर्षक २०px/६०० मा, २२px/५०० मा -०.०२em को कडा अक्षर स्पेसिङको साथ, र पृष्ठ शीर्षक २८px/७०० मा राखिएको छ। बढ्दो आकारसँगै नकारात्मक अक्षर स्पेसिङ घट्छ, जुन ठूला स्क्रिन आकारहरूमा ज्यामितीय sans-serif फन्टहरूको विशेषता हो। "साल्ट" वैकल्पिक ग्लिफ सुविधा सक्षम गर्दछ।
अन्तराल र रूप
| उद्देश्य | अर्थ |
|---|---|
| घनत्व | बाक्लो |
| आधारभूत चरण | 12px |
| बटनको त्रिज्या | 9999px |
| कार्डको अर्धव्यास | 12px |
| छायाँहरू | नरम छायाँ |
| खण्डहरू बीच | 48px |
| पृष्ठ चौडाइ | 1440px |
एआईले तपाईंको वेबसाइट Airbnb शैलीमा बनाउनेछ र यसलाई भर्नेछ
- लिङ्क मार्फत उत्पादनहरू र पोस्टहरू भर्नुहोस् - Instagram, TikTok, Facebook ।
- आफ्नो पुरानो साइटबाट सामग्री स्थानान्तरण गर्नुहोस्—केवल ठेगाना निर्दिष्ट गर्नुहोस्।
- उत्कृष्ट इन्जिनमा आधुनिक डिजाइन: सर्भर रेन्डरिङ र SEO अप्टिमाइजेसनको साथ React ( Next.js)।
- खोज परिणाम र तंत्रिका नेटवर्क सिफारिसहरूको लागि पूर्ण स्वचालित SEO अप्टिमाइजेसन।
उस्तै शैलीहरू
- Apple (España) — सेतो ग्यालरी डिस्प्ले केस
- Silencio — तैरिरहेका कलाकृतिहरू भएको सेतो कोठा। न्यानो कागजबाट बनेको ग्यालरी प्रदर्शन, जहाँ प्रत्येक तत्वले नकारात्मक भोल्युम पृष्ठभूमिमा आफ्नो स्थान लिन्छ, र मौनता एक जानाजानी डिजाइन निर्णय हो।
- Oakâme — न्यानो ढुङ्गाबाट कुँदिएको घामले भिजेको प्रोभेन्सल कार्यशाला
- Nike — खेलकुद उपलब्धिहरूको एक मोनोक्रोम ग्यालरी - सेतो भित्ताहरू, कलाकृतिको रूपमा उत्पादन, पृष्ठभूमिमा घुलिएको क्रोम
- Arc — मध्यरातको पानीमाथि औद्योगिक सेतो ग्यालरी
- Rivian — ग्यालरीको कंक्रीट भित्तामा विद्युतीय मोनोलिथ। रिभियनले प्रत्येक सवारी साधनलाई विशाल सेतो ठाउँको बिरूद्ध मूर्तिकलाको रूपमा प्रस्तुत गर्दछ, टाइपोग्राफी यति ठूलो छ कि यो वास्तुकलाको तत्व बन्छ, र एकल न्यानो पहेंलो जसले मोनोक्रोमेटिक वातावरणलाई तोड्छ, जस्तै म्याट सतहमा सूर्यको प्रकाश।
- Analogue — कालो ग्यालरी डिस्प्ले केस - सामानहरू खाली ठाउँमा घुम्छन्
- ddna — उपचार नगरिएका लिनेनमा न्यानो संग्रहालय प्रदर्शन केस
- Zellerfeld — सेतो संगमरमरमा मूर्तिकारको कार्यशाला—पेडेस्टलको एकल सतहहरू, कोबाल्टको एकल झिल्को, भुइँदेखि छतसम्म साना अक्षरहरूको फुसफुसा।
- UY Studio — गुम्बाको ढुङ्गाको ग्यालरी कंक्रिटको पर्खाल भएको शान्त ठाउँ हो, जहाँ सेतो प्लिन्थमा अत्तरका बोतलहरू राखिएका हुन्छन्, जुन एउटा ४०० वाटको बत्ती र चारवटा न्यानो खैरो बल्बले उज्यालो हुन्छन्।
- Basic.Space — सेतो संगमरमरमा क्युरेटोरियल ग्यालरी
- COS — सेतो भित्ताहरू भएको फेसनदार ग्यालरी