Airbnb

Udonga oluzolileyo lwegalari emhlophe olunebhukhimakhi enye ebomvu yekorale

I-Airbnb isebenza ngendlela "ye-canvas emhlophe", apho ukufota kulawula khona: phantse yonke isikrini singumfanekiso othuleyo we-monochrome, ovumela imifanekiso yesikrini esipheleleyo seempawu ukuba idlulise umbono opheleleyo, kunye ne-accent enye etyebileyo ebomvu-korale (iRausch) njenge-cue yombala kuphela ebonisa isenzo. Uhlobo lwefonti yi-sans-serif yejometri (i-Airbnb Cereal VF) - ubukhulu becala incinci, inobukhulu obuqinisekileyo - kumbhalo womzimba, ujongano, kunye nezihloko zamacandelo (22-22) - kunye nesithuba esincinci semigca engalunganga kunye nesithuba esikhulu semigca, okwenza amakhadi anombhalo oxineneyo afundeke. Ujongano luthe tyaba, alunafreyimu, kwaye lujikelezile: ii-radii ezili-12-3 kumakhadi kunye nolawulo, amaqhosha ajikelezileyo afana nepilisi, kunye nezithunzi ezithambileyo, ezineeleya kuphela kwizinto ezibalaseleyo ezifana nebha yokukhangela. Yonke enye into - amakhadi, izinto zoluhlu, iikhonkco - ixhomekeke kwindawo emhlophe kunye nemigca emincinci endaweni ye-accents ye-chrome.

Uyilo olupheleleyo olungenamda wobubanzi obuphezulu obumiselweyo—umxholo unwebeka umphetho ukuya kumphetho ngaphakathi kwendawo enokubonwa, malunga ne-40px ye-padding ethe tye kwicala ngalinye kwidesktop. Iqhawe liyi-capsule yokukhangela edadayo, ephakathi kwi-canvas emhlophe engathathi cala engenamfanekiso okanye isihloko—ibha yokukhangela LIQHELE. Ngaphantsi kophendlo, iphepha litshintshela kwiindawo ezibekwe ngokuthe nkqo, eziskrola ngokuthe tye (imigca emine ibonakala: Amakhaya Avelele, Iihotele Ezintle, Ezinye Izixeko, Ezifumanekayo Kwinyanga Ezayo), nganye imalunga ne-320px ubude, yahlulwe zii-gutter ezithe nkqo ze-48px. Icandelo ngalinye lisebenzisa igridi yamakhadi asi-7 ene-horizontal overflow kunye ne-arrow navigation. I-footer yigridi yeekholamu ezi-3 zeekhonkco kwimvelaphi ye-#f7f7f7, ilandelwa yibha esezantsi enolwazi lwe-copyright, ukhetho lolwimi/lwemali, kunye nee-icon zemidiya yoluntu. I-navigation yibha ephezulu ezinzileyo ene-central tab navigation kunye nolawulo oluhambelana ngasekunene.

Ukufota kulawula inkqubo yokubona, kunye nemifanekiso yesikrini esipheleleyo soluhlu lwezindlu olusebenza njengohlobo oluphambili lomxholo. Zonke iifoto zifudumele, zikhanyiswe kakuhle ngaphakathi nangaphandle kwezindlu zokwenyani kunye neehotele, zicutshungulwa ngokulungiswa kwendalo kombala (ngaphandle kwezihluzo ezinzima okanye ii-duotones). Imifanekiso inqunyulwe ngokuqinileyo ngomlinganiselo we-1:1 weempawu zamakhadi okudwelisa, ugcwalisa umphetho wekhadi ngaphandle kokuphuma kwegazi. Iimpawu kuyo yonke i-interface zinomfanekiso we-monochrome (ubunzima bomgca ~16–16), zisetyenziswa kancinci kwiindidi zokuhamba kunye nolawulo lwe-UI. Ilogo yeyona nto inemifanekiso enemibala emininzi (iRausch). Akukho mifanekiso, akukho mifanekiso ye-3D, akukho mizobo ingabonakaliyo—ulwimi olubonakalayo luyifoto ecocekileyo kunye ne-iconography ye-monochrome encinci kwi-canvas emhlophe ethambileyo.

Ivenkile ye-intanethi Ubuncinci I-monochrome Iprimiyamu

https://www.airbnb.com

Iphalethi

Uphawu

Rausch #ff385c — Ubomvu busetyenziswa njenge-accent yokuhombisa kwiimpawu, iimpawu, kunye neenkcukacha ezincinci zemizobo. Akufanele busetyenziswe njengombala oyintloko wee-call to action.
Rausch 600 #e00b41 — Ipeyinti yeRausch ecinezelweyo nemnyama esetyenziswa njengeempawu zophawu kwiindawo ezijikelezayo/ezisebenzayo.

Ukungathathi cala

Hof #222222 — Ikopi yomzimba, umbhalo oyintloko, izihloko, imigca ye icon, kunye nemvelaphi eguquliweyo zingumbala ongathathi cala osondele kumnyama, osebenza njengesiseko senkqubo yonke ye-achromatic.
Foggy #6a6a6a — Umbhalo wesibini, iingcaciso ezivaliweyo, umbhalo oncedisayo, ukuzaliswa kwe icon ekhutshazisiweyo, kunye nemetadata efihlakeleyo ngaphantsi kwezihloko zekhadi.
Grey 500 #c1c1c1 — Umbhalo ongasebenziyo, umbhalo wesibambi kwindawo yokufaka, kunye nomfanekiso we icon othuliweyo apho kufuneka ugxininise khona imeko.
Bebe #ebebeb — Imida emincinci, amasimi okufaka akrwelwe umgca, izahluli phakathi kwemigca yoluhlu, kunye nemigca yokwahlulahlula engabonakaliyo.
Deco #dddddd — Imifanekiso yangasemva yekhadi yezikhongozeli ezingasebenziyo, izibambi-ndawo, kunye neemeko zekhadi ezikhubazekileyo.
Faint #f7f7f7 — Umfanekiso ongasemva we-canvas yephepha, umphezulu osezantsi, kunye nemeko yokuma kwezinto ezisebenzisanayo zingumbala othambileyo nokhrimu ohlukanisa eli phepha namakhadi amhlophe acocekileyo.

Ubhalo lweencwadi

ukusuka kwi-11 ukuya kwi-28px · amanyathelo ama-5

Airbnb Cereal VF — ukutshintshwa: Circular · imida 400, 500, 600, 700 · Ifonti yejometri ye-sans-serif eyenzelwe i-Airbnb. Umbhalo womzimba ubekwe kwi-14px/400, iileyibhile ze-UI kwi-16px/500, izihloko zecandelo kwi-20px/600, i-22px/500 kunye nesithuba esiqinileyo soonobumba se--0.02em, kunye nezihloko zephepha kwi-28px/700. Isithuba esibi soonobumba siyancipha ngokonyuka kobukhulu, uphawu lweefonti zejometri ze-sans-serif kubungakanani obukhulu besikrini. Ivumela uphawu lwe-glyph olutshintshayo "lwetyuwa".

Amaxesha okuphumla kunye nefom

Injongo	Intsingiselo
Uxinano	xinene
Inyathelo elisisiseko	12px
Irediyasi yeqhosha	9999px
Irediyasi yekhadi	12px
Izithunzi	izithunzi ezithambileyo
Phakathi kwamacandelo	48px
Ububanzi bephepha	1440px

I-AI iza kwakha iwebhusayithi yakho ngesitayile sika- Airbnb ize iyizalise

Gcwalisa iimveliso kunye nezithuba ngekhonkco - Instagram, TikTok, Facebook.
Dlulisa umxholo usuka kwisiza sakho esidala—chaza nje idilesi.
Uyilo lwanamhlanje kwinjini engcono kakhulu: React ( Next.js) ene-server rendering kunye ne-SEO optimization ephuma kwibhokisi.
Ukulungiswa kwe-SEO ngokuzenzekelayo ngokupheleleyo kwiziphumo zophando kunye neengcebiso zenethiwekhi ye-neural.

Yenza iwebhusayithi ngolu hlobo

Iintlobo ezifanayo

Apple (España) — ibhokisi yokubonisa yegalari emhlophe
Silencio — Igumbi elimhlophe elinezinto zakudala ezidadayo. Umboniso wegalari owenziwe ngephepha elifudumeleyo, apho into nganye ithatha indawo yayo ngokuchasene nemvelaphi yomthamo ongalunganga, kwaye ukuthula sisigqibo soyilo esenziwe ngabom.
Oakâme — Indawo yokusebenzela yaseProvençal eyomileyo eqingqwe ngamatye afudumeleyo
Nike — Igalari enombala omnye yeempumelelo zemidlalo – iindonga ezimhlophe, imveliso njengomsebenzi wobugcisa, i-chrome enyibilikiswe ngasemva
Arc — igalari emhlophe yemizi-mveliso phezu kwamanzi aphakathi kobusuku
Rivian — I-monolith yombane eludongeni lwekhonkrithi kwigalari. URivian ubonisa isithuthi ngasinye njengomfanekiso oqingqiweyo kwindawo enkulu emhlophe, kunye nomzobo omkhulu kangangokuba uba yinto yokwakha, kunye nomthubi omnye ofudumeleyo ophula umoya we-monochromatic, njengokukhanya kwelanga kumphezulu ongenanto.
Analogue — Ibhokisi yokubonisa yegalari emnyama - iimpahla zijikeleza kwindawo engenanto
ddna — ikesi yokubonisa imyuziyam efudumeleyo kwilinen enganyangwanga
Zellerfeld — Indawo yokusebenzela yomqophi wemifanekiso yemarble emhlophe—imiphezulu ye-monolithic yesiseko, intlantsi enye ye-cobalt, ukubhuqa koonobumba abancinci ukusuka kumgangatho ukuya eluphahleni
UY Studio — Igalari yamatye yemonasteri yindawo ezolileyo eneendonga zesamente, apho iibhotile zeziqholo zimi khona kwiintsika ezimhlophe, zikhanyiswa sisibane esinye sama-watts angama-400 kunye neebhalbhu ezine ezimpunga ezifudumeleyo.
Basic.Space — igalari yogcino-zincwadi kwimabula emhlophe
COS — igalari yemfashini eneendonga ezimhlophe