Airbnb
ผนังแกลเลอรี่สีขาวเงียบสงบ มีเพียงที่คั่นหนังสือสีแดงปะการังชิ้นเดียว
Airbnb ดำเนินงานในสไตล์ "ผืนผ้าใบสีขาว" ที่เน้นการถ่ายภาพเป็นหลัก: เกือบทุกหน้าจอเป็นกรอบสีขาวดำที่ดูเรียบง่าย ทำให้ภาพที่พักแบบเต็มหน้าจอสามารถสื่อถึงภาพรวมได้ โดยมีสีแดงปะการังเข้ม (Rausch) เพียงสีเดียวเป็นสีเน้นที่บ่งบอกถึงการกระทำ แบบอักษรที่ใช้เป็นแบบ sans-serif ทรงเรขาคณิต (Airbnb Cereal VF)—ส่วนใหญ่มีขนาดเล็กและดูมั่นใจ—สำหรับข้อความหลัก อินเทอร์เฟซ และหัวข้อส่วนต่างๆ (22-22)—โดยมีระยะห่างระหว่างบรรทัดที่แคบและระยะห่างระหว่างบรรทัดที่กว้าง ทำให้การ์ดที่มีข้อความหนาแน่นอ่านง่าย อินเทอร์เฟซแบนราบ ไม่มีกรอบ และโค้งมน: รัศมี 12-3 บนการ์ดและส่วนควบคุม ปุ่มทรงกลมคล้ายแคปซูล และเงาแบบนุ่มนวลซ้อนกันเฉพาะองค์ประกอบที่โดดเด่น เช่น แถบค้นหา ทุกอย่างอื่น—การ์ด รายการ และลิงก์—อาศัยพื้นที่ว่างและเส้นบางๆ แทนการใช้สีโครเมียม
เลย์เอาต์แบบเต็มความกว้างโดยไม่มีการจำกัดความกว้างสูงสุดตายตัว เนื้อหาจะขยายจากขอบถึงขอบภายในพื้นที่ที่มองเห็นได้ โดยมีระยะห่างแนวนอนประมาณ 40 พิกเซลในแต่ละด้านบนเดสก์ท็อป ส่วนหัว (Hero) เป็นแคปซูลค้นหาแบบลอยตัว อยู่ตรงกลางบนพื้นสีขาวที่เป็นกลางโดยไม่มีรูปภาพหรือชื่อเรื่องใดๆ แถบค้นหาคือส่วนหัวนั่นเอง ด้านล่างแถบค้นหา หน้าเว็บจะเปลี่ยนไปเป็นส่วนต่างๆ ที่เรียงซ้อนกันในแนวตั้งและเลื่อนได้ในแนวนอน (มองเห็นได้สี่แถว: บ้านแนะนำ โรงแรมยอดเยี่ยม เมืองอื่นๆ และว่างในเดือนถัดไป) แต่ละส่วนสูงประมาณ 320 พิกเซล คั่นด้วยช่องว่างแนวตั้ง 48 พิกเซล แต่ละส่วนใช้ตารางแบบ 7 ช่องพร้อมการแสดงผลเกินในแนวนอนและการนำทางด้วยลูกศร ส่วนท้าย (Footer) เป็นตารางลิงก์ 3 คอลัมน์บนพื้นหลังสี #f7f7f7 ตามด้วยแถบด้านล่างที่มีข้อมูลลิขสิทธิ์ ตัวเลือกภาษา/สกุลเงิน และไอคอนโซเชียลมีเดีย การนำทางเป็นแถบด้านบนแบบคงที่พร้อมการนำทางแท็บตรงกลางและปุ่มควบคุมที่จัดชิดขวา
ภาพถ่ายเป็นส่วนสำคัญของระบบการแสดงผล โดยใช้ภาพเต็มหน้าจอของรายการอสังหาริมทรัพย์เป็นเนื้อหาหลัก ภาพถ่ายทั้งหมดเป็นภาพภายในและภายนอกที่อบอุ่นและมีแสงสว่างเพียงพอของบ้านและโรงแรมจริง ๆ ปรับแต่งสีอย่างเป็นธรรมชาติ (โดยไม่ใช้ฟิลเตอร์หรือสีแบบดูโอโทนมากเกินไป) ภาพถูกครอปอย่างกระชับด้วยอัตราส่วน 1:1 สำหรับการ์ดรายการ โดยเติมเต็มขอบของการ์ดโดยไม่มีขอบล้น ไอคอนในอินเทอร์เฟซทั้งหมดมีเส้นขอบสีขาวดำ (ความหนาของเส้นประมาณ 16–16) ใช้เพียงเล็กน้อยสำหรับหมวดหมู่การนำทางและการควบคุม UI โลโก้เป็นองค์ประกอบกราฟิกหลายสีเพียงอย่างเดียว (Rausch) ไม่มีภาพประกอบ ไม่มีภาพเรนเดอร์ 3 มิติ ไม่มีกราฟิกนามธรรม ภาษาภาพคือภาพถ่ายล้วน ๆ และไอคอนสีขาวดำแบบมินิมอลบนพื้นสีขาวนวล
จานสี
ยี่ห้อ
- Rausch
#ff385c— สีแดงใช้เป็นสีเน้นตกแต่งสำหรับไอคอน ป้าย และรายละเอียดกราฟิกขนาดเล็ก ไม่ควรใช้เป็นสีหลักสำหรับข้อความกระตุ้นการกระทำ - Rausch 600
#e00b41— สี Rausch ชนิดเข้มข้นและอัดแน่น สำหรับใช้ตกแต่งพื้นผิวที่ใช้เป็นจุดเด่นของแบรนด์บนพื้นผิวที่เคลื่อนไหว/ใช้งานอยู่
เป็นกลาง
- Hof
#222222— เนื้อหาหลัก หัวข้อ เส้นขอบไอคอน และพื้นหลังแบบกลับสี ใช้สีกลางที่ใกล้เคียงกับสีดำ ซึ่งเป็นพื้นฐานสำหรับระบบสีไร้สีทั้งหมด - Foggy
#6a6a6a— ข้อความรอง, คำบรรยายภาพที่ปิดเสียง, ข้อความเสริม, การเติมสีไอคอนที่ปิดใช้งาน และข้อมูลเมตาที่ไม่เด่นชัดใต้ชื่อการ์ด - Grey 500
#c1c1c1— ข้อความที่ไม่สามารถแสดงได้ ข้อความตัวอย่างในช่องป้อนข้อมูล และเส้นขอบไอคอนที่ลดความเข้มลง ในกรณีที่ต้องการลดความสำคัญของสถานะ - Bebe
#ebebeb— เส้นขอบบางๆ ขีดเส้นใต้ในช่องป้อนข้อมูล เส้นคั่นระหว่างบรรทัดในรายการ และเส้นแบ่งที่ละเอียดอ่อน - Deco
#dddddd— ภาพพื้นหลังของการ์ดสำหรับคอนเทนเนอร์ที่ไม่ได้ใช้งาน ตัวยึดตำแหน่ง และสถานะการ์ดที่ถูกปิดใช้งาน - Faint
#f7f7f7— ภาพพื้นหลังของหน้าเว็บ พื้นผิวส่วนท้าย และสถานะเมื่อวางเมาส์เหนือองค์ประกอบแบบโต้ตอบนั้นใช้สีโทนอ่อนละมุนคล้ายสีครีม ซึ่งทำให้หน้าเว็บนี้แตกต่างจากบัตรสีขาวล้วน
การจัดพิมพ์
จาก 11 เป็น 28 พิกเซล · 5 ขั้นตอน
- 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 รูปทรงเรขาคณิตในขนาดหน้าจอที่ใหญ่ขึ้น เปิดใช้งานคุณสมบัติสัญลักษณ์ทางเลือก "เกลือ"
ช่วงเวลาและรูปแบบ
| วัตถุประสงค์ | ความหมาย |
|---|---|
| ความหนาแน่น | หนาแน่น |
| ขั้นตอนพื้นฐาน | 12px |
| รัศมีปุ่ม | 9999px |
| รัศมีการ์ด | 12px |
| เงา | เงาอ่อนๆ |
| ระหว่างส่วนต่างๆ | 48px |
| ความกว้างของหน้า | 1440px |
AI จะสร้างเว็บไซต์ของคุณในสไตล์ของ Airbnb และเติมข้อมูลลงไป
- ใส่สินค้าและโพสต์ผ่านลิงก์ - Instagram, TikTok, Facebook
- ย้ายเนื้อหาจากเว็บไซต์เก่าของคุณ—เพียงระบุที่อยู่เว็บไซต์
- ดีไซน์ทันสมัยบนเอนจิ้นที่ดีที่สุด: React ( Next.js) พร้อมการเรนเดอร์ฝั่งเซิร์ฟเวอร์และการเพิ่มประสิทธิภาพ SEO ในตัว
- การเพิ่มประสิทธิภาพ SEO แบบอัตโนมัติเต็มรูปแบบสำหรับผลการค้นหาและคำแนะนำจากโครงข่ายประสาทเทียม
สไตล์ที่คล้ายกัน
- Apple (España) — ตู้โชว์สีขาว
- Silencio — ห้องสีขาวที่มีสิ่งของจัดแสดงลอยอยู่ การจัดแสดงในแกลเลอรี่ที่ทำจากกระดาษสีโทนอบอุ่น โดยแต่ละองค์ประกอบวางอยู่บนพื้นหลังที่ว่างเปล่า และความเงียบสงบนั้นเป็นเจตนาในการออกแบบ
- Oakâme — โรงงานในแคว้นโปรวองซ์ที่อาบแสงแดด แกะสลักจากหินสีอบอุ่น
- Nike — แกลเลอรี่ภาพขาวดำที่รวบรวมความสำเร็จด้านกีฬา – ผนังสีขาว ผลิตภัณฑ์ราวกับงานศิลปะ โครเมียมกลมกลืนไปกับฉากหลัง
- Arc — แกลเลอรี่สีขาวสไตล์อุตสาหกรรมเหนือผืนน้ำยามเที่ยงคืน
- Rivian — เสาไฟฟ้าขนาดมหึมาบนผนังคอนกรีตของหอศิลป์ ริเวียนนำเสนอรถแต่ละคันราวกับประติมากรรมบนพื้นที่สีขาวกว้างใหญ่ ด้วยตัวอักษรขนาดใหญ่จนกลายเป็นองค์ประกอบทางสถาปัตยกรรม และสีเหลืองอบอุ่นเพียงสีเดียวที่ตัดกับบรรยากาศแบบโมโนโครม เหมือนแสงแดดที่ส่องกระทบพื้นผิวด้าน
- Analogue — ตู้โชว์สีดำ – สินค้าลอยอยู่ในความว่างเปล่า
- ddna — ตู้จัดแสดงในพิพิธภัณฑ์ที่อบอุ่น วางบนผ้าลินินที่ไม่ผ่านการบำบัด
- Zellerfeld — ห้องทำงานของประติมากรที่สร้างจากหินอ่อนสีขาว—พื้นผิวที่เป็นเนื้อเดียวกันของฐานรอง ประกายสีโคบอลต์เพียงเล็กน้อย ตัวอักษรพิมพ์เล็กที่กระซิบแผ่วเบาจากพื้นจรดเพดาน
- UY Studio — ห้องโถงหินของอารามเป็นพื้นที่เงียบสงบที่มีผนังคอนกรีต โดยมีขวดน้ำหอมวางอยู่บนแท่นสีขาว ส่องสว่างด้วยหลอดไฟขนาด 400 วัตต์หนึ่งดวงและหลอดไฟสีเทาอบอุ่นอีกสี่ดวง
- Basic.Space — หอศิลป์ภัณฑารักษ์บนพื้นหินอ่อนสีขาว
- COS — แกลเลอรี่ทันสมัยที่มีผนังสีขาว