Airbnb
یک دیوار گالری سفید و آرام با یک بوکمارک قرمز مرجانی
Airbnb به سبک «بوم سفید» عمل میکند، جایی که عکاسی حرف اول را میزند: تقریباً هر صفحه نمایش یک قاب تک رنگ آرام است که به تصاویر تمام صفحه از املاک اجازه میدهد تا برداشت کلی را منتقل کنند، با یک لهجه قرمز مرجانی غنی (Rausch) به عنوان تنها نشانه رنگی که نشان دهنده عمل است. فونت مورد استفاده یک فونت هندسی sans-serif (Airbnb Cereal VF) است - که عمدتاً اندازههای کوچک و مطمئنی دارد - برای متن بدنه، رابط کاربری و عناوین بخشها (22-22) - با فاصله خطوط منفی کم و فاصله خطوط زیاد، کارتهایی با متن متراکم را قابل خواندن میکند. رابط کاربری مسطح، بدون قاب و گرد است: شعاعهای 12-3 روی کارتها و کنترلها، دکمههای قرصی شکل گرد و سایههای نرم و لایه لایه فقط برای عناصر برجسته مانند نوار جستجو. هر چیز دیگری - کارتها، موارد لیست، لینکها - به جای لهجههای کرومی، به فضای سفید و خطوط ریز متکی هستند.
یک طرحبندی تمامعرض بدون محدودیت ثابت حداکثر عرض - محتوا در ناحیه قابل مشاهده از لبه تا لبه امتداد مییابد و تقریباً 40 پیکسل فاصله افقی در هر طرف روی دسکتاپ دارد. قهرمان یک کپسول جستجوی شناور است که روی یک بوم سفید خنثی و بدون تصویر یا عنوان قرار دارد - نوار جستجو قهرمان است. در زیر جستجو، صفحه به بخشهای عمودی انباشته شده و پیمایش افقی (چهار ردیف قابل مشاهده است: خانههای ویژه، هتلهای عالی، شهر دیگر، ماه آینده موجود است) منتقل میشود که هر کدام تقریباً 320 پیکسل ارتفاع دارند و با ناودانهای عمودی 48 پیکسل از هم جدا شدهاند. هر بخش از یک شبکه 7 کارتی با سرریز افقی و ناوبری فلش استفاده میکند. پاورقی یک شبکه 3 ستونی از پیوندها با پسزمینه #f7f7f7 است و پس از آن یک نوار پایین با اطلاعات حق چاپ، گزینههای زبان/ارز و نمادهای رسانههای اجتماعی قرار دارد. ناوبری یک نوار بالای ثابت با ناوبری تب در مرکز و کنترلهای راستچین است.
عکاسی بر سیستم بصری غالب است و تصاویر تمام صفحه از فهرست املاک به عنوان نوع محتوای اصلی عمل میکنند. همه عکسها، نماهای گرم و روشن داخلی و خارجی از خانهها و هتلهای واقعی هستند که با تصحیح رنگ طبیعی (بدون فیلترهای سنگین یا دو رنگ) پردازش شدهاند. تصاویر با نسبت ابعاد ۱:۱ برای کارتهای فهرست، به شدت برش داده شدهاند و لبه کارت را بدون حاشیه پر میکنند. آیکونها در سراسر رابط کاربری دارای یک طرح کلی تک رنگ (وزن خط ~۱۶–۱۶) هستند که به طور محدود برای دستههای ناوبری و کنترلهای رابط کاربری استفاده میشوند. لوگو تنها عنصر گرافیکی چند رنگ است (Rausch). بدون تصویرسازی، بدون رندرهای سهبعدی، بدون گرافیک انتزاعی - زبان بصری، عکاسی خالص و شمایلنگاری تک رنگ مینیمالیستی بر روی یک بوم سفید نرم است.
پالت
برند
- Rausch
#ff385c— قرمز به عنوان یک رنگ تزئینی برای آیکونها، تابلوها و جزئیات گرافیکی کوچک استفاده میشود. نباید به عنوان رنگ اصلی برای دکمههای فراخوان عمل (Call to action) استفاده شود. - 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 · یک فونت سنس-سریف هندسی سفارشی که برای Airbnb طراحی شده است. متن بدنه در اندازه ۱۴ پیکسل/۴۰۰، برچسبهای رابط کاربری در اندازه ۱۶ پیکسل/۵۰۰، عنوانهای بخش در اندازه ۲۰ پیکسل/۶۰۰، ۲۲ پیکسل/۵۰۰ با فاصله حروف کم -۰.۰۲em و عنوانهای صفحه در اندازه ۲۸ پیکسل/۷۰۰ قرار دارند. فاصله منفی حروف با افزایش اندازه کاهش مییابد، که از ویژگیهای فونتهای سنس-سریف هندسی در اندازههای بزرگتر صفحه نمایش است. ویژگی علامت اختصاری جایگزین "salt" را فعال میکند.
فواصل و فرم
| هدف | معنی |
|---|---|
| تراکم | متراکم |
| گام اساسی | 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 — گالری سنگی صومعه، فضایی آرام با دیوارهای بتنی است که در آن بطریهای عطر روی پایههای سفید قرار گرفتهاند و توسط یک لامپ ۴۰۰ واتی و چهار لامپ خاکستری گرم روشن میشوند.
- Basic.Space — گالری کیوریتوریال روی سنگ مرمر سفید
- COS — یک گالری شیک با دیوارهای سفید