Airbnb
Тиха біла стіна галереї з однією коралово-червоною закладкою
Airbnb працює в стилі «білого полотна», де на першому місці фотографія: майже кожен екран є тихою монохромною рамкою, що дозволяє повноекранним зображенням об'єктів нерухомості передавати загальне враження, з єдиним насиченим коралово-червоним акцентом (Rausch) як єдиний колірний знак, що позначає дію. Шрифт - геометричний без засічок (Airbnb Cereal VF) - в основному невеликого, впевненого розміру: основний текст, інтерфейс, заголовки розділів (22-22) - з щільним негативним міжрядковим інтервалом і великою міжрядковою розміткою, що робить картки з текстом, що читаються. Інтерфейс плоский, без рамок і закруглений: радіуси 12–3 на картках та елементах управління, круглі кнопки у формі таблеток та м'які багатошарові тіні тільки для виступаючих елементів, таких як рядок пошуку. Все інше — картки, елементи списку, посилання — ґрунтується на порожньому просторі та тонких лініях, а не на хромованих деталях.
Повноекранне компонування без фіксованого обмеження максимальної ширини — контент розтягується від краю до краю в межах видимої області з внутрішнім горизонтальним відступом приблизно 40px з кожної сторони на настільних комп'ютерах. Героєм є плаваюча пошукова капсула, розташована по центру на спокійному білому полотні без зображення або заголовка - пошуковий рядок є героєм. Під пошуком сторінка переходить у вертикально розташовані секції з горизонтальною прокруткою (видні 4 рядки: Популярні будинки, Відмінні готелі, Інше місто, Доступно наступного місяця), кожна висотою приблизно 320px, розділені вертикальними проміжками 48px. Кожна секція використовує сітку з 7 карток з горизонтальним переповненням та стрілочною навігацією. Нижній колонтитул є сіткою посилань з 3 колонок на тлі #f7f7f7, за якою слідує нижня панель з інформацією про авторські права, мовою/валютою та іконками соціальних мереж. Навігація є фіксованою верхньою панеллю з центрованою навігацією по вкладках і вирівняними з правого краю елементами управління.
У візуальній системі домінує фотографія – основним типом контенту є повноекранні зображення об'єктів нерухомості. Всі фотографії являють собою теплі, добре освітлені інтер'єрні та екстер'єрні знімки реальних будинків та готелів, оброблені з природною корекцією кольору (без важких фільтрів або дуотонів). Зображення щільно обрізані із співвідношенням сторін 1:1 для карток оголошень, заповнюючи край картки без полів. Іконки по всьому інтерфейсу мають монохромне обведення (товщина лінії ~16–16), використовуються економно для категорій навігації та елементів керування інтерфейсу користувача. Логотип – єдиний багатобарвний графічний елемент (Rausch). Жодних ілюстрацій, жодних 3D-рендерів, жодної абстрактної графіки — візуальна мова є чистою фотографією + мінімалістичною монохромною іконографією на м'якому білому полотні.
Палітра
Бренд
- Rausch
#ff385c— Червоний колір використовується як декоративний акцент для іконок, знаків та дрібних графічних деталей. Не слід виділяти його як основний колір заклику до дії. - Rausch 600
#e00b41— Пресований та темний варіант фарби Rausch для поверхонь, що використовуються як акцент бренду при наведенні курсору/активних поверхонь.
Нейтральні
- Hof
#222222— Основний текст, основний текст, заголовки, обведення іконок та інвертований фон — нейтральний колір, близький до чорного, який є основою всієї ахроматичної системи. - Foggy
#6a6a6a— Другий текст, приглушені підписи, допоміжний текст, відключена заливка іконок і стримані метадані під заголовками карток. - Grey 500
#c1c1c1— Вимкнений текст, текст-заповнювач у полях введення та приглушене обведення піктограм там, де потрібне зниження акценту на стані. - Bebe
#ebebeb— Тонкі межі, підкреслення полів введення, роздільники між рядками списку та ледь помітні розділові лінії. - Deco
#dddddd— Фонові зображення карток для неактивних контейнерів, шаблонів-заповнювачів та відключених станів карток. - Faint
#f7f7f7— Фонове зображення полотна сторінки, поверхня нижнього колонтитула та стан при наведенні курсору для інтерактивних елементів – м'який, кремовий відтінок, який відрізняє цю сторінку від білих карток.
Друкарня
від 11 до 28px · 5 ступенів
- Airbnb Cereal VF — заміна: Circular · зображення 400, 500, 600, 700 · Користувальницький геометричний шрифт без засічок, розроблений для Airbnb. Основний текст розміщується при розмірі 14px/400, мітки інтерфейсу користувача - при розмірі 16px/500, заголовки розділів збільшуються до 20px/600, 22px/500 з щільною міжлітерною відстанню -0.02em, і 28px/70. Негативна міжлітерна відстань зменшується зі збільшенням розміру, що є характерною рисою геометричних шрифтів без засічок при великих розмірах екрану. Активує функцію альтернативних гліфів "сіль".
Інтервали та форма
| Призначення | Значення |
|---|---|
| Щільність | щільна |
| Базовий крок | 12px |
| Радіус кнопок | 9999px |
| Радіус карток | 12px |
| Тіні | м'які тіні |
| Між секціями | 48px |
| Ширина сторінки | 1440px |
ІІ збере ваш сайт у стилі Airbnb і наповнить його
- Наповнить товарами та постами за посиланням - Instagram, TikTok, Facebook.
- Перенесе контент зі старого сайту – достатньо вказати адресу.
- Сучасний дизайн на кращому движку: React ( Next.js) з серверним рендерингом та SEO-оптимізацією з коробки.
- Повна автоматична SEO-оптимізація під пошукову видачу та рекомендації нейромереж.
Схожі стилі
- Apple (España) — біла вітрина галереї
- Silencio — Біла кімната з артефактами. Галерейна вітрина з теплого паперу, де кожен елемент займає своє місце на тлі негативного об'єму, а тиша є навмисним дизайнерським рішенням
- Oakâme — Залита сонцем провансальська майстерня, висічена з теплого каменю
- Nike — Монохромна галерея спортивних досягнень — білі стіни, продукт як витвір мистецтва, хром, розчинений у фоні
- Arc — індустріальна біла галерея над опівнічною водою
- Rivian — Електричний моноліт на бетонну стіну галереї. Rivian представляє кожен автомобіль як скульптуру на тлі величезного білого простору, з типографікою настільки великою, що вона стає архітектурним елементом, і одним теплим жовтим кольором, який порушує монохромність, подібно до сонячного світла на матовій поверхні
- Analogue — Чорна галерейна вітрина — товари ширяють у порожнечі
- ddna — тепла музейна вітрина на необробленому лляному полотні
- Zellerfeld — Майстерня скульптора на білому мармурі - монолітні поверхні постаменту, єдина іскра кобальту, шепіт малих літер від підлоги до стелі.
- UY Studio — Монастирська кам'яна галерея — тихий простір із бетонними стінами, де на білих постаментах стоять флакони з парфумами, освітлені одним світильником потужністю 400 Вт та чотирма теплими сірими лампами.
- Basic.Space — кураторська галерея на білому мармурі
- COS — модна галерея з білими стінами