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 — модная галерэя з белымі сценамі