Airbnb
جدار معرض أبيض هادئ مع فاصل كتاب واحد بلون أحمر مرجاني
تعتمد منصة Airbnb على أسلوب "اللوحة البيضاء"، حيث تتصدر الصور المشهد: فكل شاشة تقريبًا عبارة عن إطار أحادي اللون هادئ، يسمح لصور العقارات بعرضها بملء الشاشة لنقل الانطباع العام، مع لمسة لونية واحدة غنية بلون المرجان الأحمر (Rausch) كإشارة لونية وحيدة تدل على الحركة. أما نوع الخط فهو خط هندسي بدون زوائد (Airbnb Cereal VF) - بأحجام صغيرة وواضحة في الغالب - لنص المحتوى، وواجهة المستخدم، وعناوين الأقسام (22-22) - مع تباعد ضيق بين الأسطر وتباعد واسع، مما يجعل البطاقات ذات النصوص الكثيفة سهلة القراءة. واجهة المستخدم مسطحة، بدون إطار، وذات حواف دائرية: نصف قطر 12-3 على البطاقات وعناصر التحكم، وأزرار دائرية بيضاوية الشكل، وظلال ناعمة ومتدرجة فقط للعناصر البارزة مثل شريط البحث. أما باقي العناصر - البطاقات، وعناصر القوائم، والروابط - فتعتمد على المساحات البيضاء والخطوط الدقيقة بدلاً من اللمسات الكرومية.
تصميم بعرض كامل بدون حد أقصى ثابت للعرض، حيث يمتد المحتوى من الحافة إلى الحافة ضمن المساحة المرئية، مع مساحة حشو أفقية تبلغ حوالي 40 بكسل من كل جانب على أجهزة سطح المكتب. العنصر الرئيسي هو مربع بحث عائم، متمركز على خلفية بيضاء محايدة بدون صورة أو عنوان - شريط البحث هو العنصر الرئيسي. أسفل مربع البحث، تنتقل الصفحة إلى أقسام مكدسة رأسيًا وقابلة للتمرير أفقيًا (أربعة صفوف مرئية: منازل مميزة، فنادق رائعة، مدينة أخرى، متاح الشهر القادم)، يبلغ ارتفاع كل منها حوالي 320 بكسل، مفصولة بمسافة رأسية 48 بكسل. يستخدم كل قسم شبكة من 7 بطاقات مع إمكانية التمرير الأفقي والتنقل باستخدام الأسهم. التذييل عبارة عن شبكة من 3 أعمدة من الروابط على خلفية #f7f7f7، يليها شريط سفلي يحتوي على معلومات حقوق النشر، وخيارات اللغة/العملة، وأيقونات وسائل التواصل الاجتماعي. شريط التنقل عبارة عن شريط علوي ثابت مع تنقل علامات تبويب متمركزة وعناصر تحكم محاذية لليمين.
تُهيمن الصور الفوتوغرافية على النظام البصري، حيث تُشكّل صور العقارات المعروضة بملء الشاشة المحتوى الرئيسي. جميع الصور دافئة، ذات إضاءة جيدة، تُظهر لقطات داخلية وخارجية لمنازل وفنادق حقيقية، مع معالجة ألوان طبيعية (بدون استخدام فلاتر ثقيلة أو تدرجات لونية ثنائية). تُقصّ الصور بدقة بنسبة عرض إلى ارتفاع 1:1 لبطاقات العرض، لتملأ حواف البطاقة دون أي هوامش زائدة. تتميز الأيقونات في جميع أنحاء واجهة المستخدم بخطوط أحادية اللون (بسماكة 16-16 تقريبًا)، وتُستخدم باعتدال لفئات التنقل وعناصر التحكم. الشعار هو العنصر الرسومي الوحيد متعدد الألوان (راوش). لا توجد رسومات توضيحية، ولا عروض ثلاثية الأبعاد، ولا رسومات تجريدية - اللغة البصرية هي التصوير الفوتوغرافي الخالص وأيقونات أحادية اللون بسيطة على خلفية بيضاء ناعمة.
لوحة الألوان
ماركة
- Rausch
#ff385c— يُستخدم اللون الأحمر كلون زخرفي للأيقونات واللافتات والتفاصيل الرسومية الصغيرة. ولا ينبغي استخدامه كلون أساسي في عبارات الحث على اتخاذ إجراء. - Rausch 600
#e00b41— نسخة مضغوطة وداكنة من طلاء راوش للأسطح المستخدمة كعناصر مميزة للعلامة التجارية على الأسطح المتحركة/النشطة.
حيادي
- Hof
#222222— النص الأساسي، والنص الرئيسي، والعناوين، ومخططات الأيقونات، والخلفية المعكوسة هي لون محايد قريب من الأسود، والذي يشكل أساس النظام اللوني بأكمله. - Foggy
#6a6a6a— نص ثانوي، وتعليقات صامتة، ونص مساعد، وتعبئة أيقونة معطلة، وبيانات وصفية منفصلة أسفل عناوين البطاقات. - Grey 500
#c1c1c1— نص معطل، نص بديل في حقول الإدخال، ومخططات أيقونات مكتومة حيثما يلزم التقليل من أهمية الحالة. - Bebe
#ebebeb— حدود رفيعة، وخطوط تحت حقول الإدخال، وفواصل بين أسطر القوائم، وخطوط فاصلة دقيقة. - Deco
#dddddd— صور خلفية للبطاقات للحاويات غير النشطة، والعناصر النائبة، وحالات البطاقات المعطلة. - Faint
#f7f7f7— تتميز صورة خلفية الصفحة، وسطح التذييل، وحالة التمرير للعناصر التفاعلية بلون كريمي ناعم يميز هذه الصفحة عن البطاقات البيضاء النقية.
الطباعة
من 11 إلى 28 بكسل · 5 خطوات
- Airbnb Cereal VF — الاستبدال: Circular · الخطوط العريضة 400, 500, 600, 700 · خط هندسي مخصص بدون زوائد، مصمم خصيصًا لمنصة Airbnb. يُوضع النص الأساسي عند 14 بكسل/400 بكسل، وعناوين واجهة المستخدم عند 16 بكسل/500 بكسل، وعناوين الأقسام عند 20 بكسل/600 بكسل، و22 بكسل/500 بكسل مع تباعد ضيق بين الأحرف بمقدار -0.02em، وعناوين الصفحات عند 28 بكسل/700 بكسل. يقل التباعد السالب بين الأحرف مع زيادة حجم الخط، وهي سمة مميزة للخطوط الهندسية بدون زوائد على الشاشات الكبيرة. يُفعّل هذا الخط ميزة "الملح" للرموز البديلة.
الفترات والشكل
| غاية | معنى |
|---|---|
| كثافة | كثيف |
| الخطوة الأساسية | 12px |
| نصف قطر الزر | 9999px |
| نصف قطر البطاقة | 12px |
| الظلال | ظلال ناعمة |
| بين الأقسام | 48px |
| عرض الصفحة | 1440px |
سيقوم الذكاء الاصطناعي ببناء موقعك الإلكتروني بأسلوب Airbnb وتعبئته.
- املأ حسابك بالمنتجات والمنشورات عبر الرابط - Instagram ، TikTok ، Facebook.
- انقل المحتوى من موقعك القديم - ما عليك سوى تحديد العنوان.
- تصميم عصري على أفضل محرك: React ( Next.js) مع عرض الخادم وتحسين محركات البحث بشكل جاهز للاستخدام.
- تحسين محركات البحث المؤتمت بالكامل لنتائج البحث وتوصيات الشبكة العصبية.
أنماط مشابهة
- Apple (España) — خزانة عرض بيضاء
- Silencio — غرفة بيضاء مع قطع أثرية عائمة. عرض فني مصنوع من ورق دافئ، حيث يشغل كل عنصر مكانه على خلفية من الفراغ، والصمت قرار تصميمي مقصود.
- Oakâme — ورشة عمل بروفنسالية مشمسة منحوتة من الحجر الدافئ
- Nike — معرض أحادي اللون للإنجازات الرياضية – جدران بيضاء، والمنتج كعمل فني، والكروم مذاب في الخلفية
- Arc — معرض أبيض صناعي فوق مياه منتصف الليل
- Rivian — كتلة كهربائية ضخمة على جدار خرساني في المعرض. يقدم ريفيان كل مركبة كعمل فني منحوت على خلفية بيضاء واسعة، مع كتابة كبيرة الحجم لدرجة أنها تصبح عنصرًا معماريًا، ولون أصفر دافئ واحد يكسر الجو الأحادي اللون، مثل ضوء الشمس على سطح غير لامع.
- Analogue — خزانة عرض سوداء – البضائع تطفو في الفراغ
- ddna — خزانة عرض متحفية دافئة على قماش كتان غير معالج
- Zellerfeld — ورشة نحات على رخام أبيض - الأسطح المتجانسة للقاعدة، شرارة واحدة من الكوبالت، وهمس من الأحرف الصغيرة من الأرض إلى السقف
- UY Studio — يُعد معرض الدير الحجري مساحة هادئة بجدران خرسانية، حيث تقف زجاجات العطور على قواعد بيضاء، مضاءة بمصباح واحد بقوة 400 واط وأربعة مصابيح رمادية دافئة.
- Basic.Space — معرض فني على الرخام الأبيض
- COS — معرض عصري ذو جدران بيضاء