Airbnb
Ib phab ntsa dawb ntsiag to nrog ib daim ntawv cim xim liab coral
Airbnb ua haujlwm hauv hom "daim ntaub dawb", qhov twg kev thaij duab kav zoo tshaj plaws: yuav luag txhua lub vijtsam yog lub thav duab monochrome ntsiag to, tso cai rau cov duab puv npo ntawm cov khoom kom qhia txog qhov kev xav tag nrho, nrog rau ib qho, nplua nuj coral-red accent (Rausch) ua lub cim xim tib yam uas qhia txog kev ua. Lub ntsej muag yog geometric sans-serif (Airbnb Cereal VF) - feem ntau me me, ntseeg siab - rau cov ntawv hauv lub cev, lub interface, thiab cov npe seem (22-22) - nrog qhov sib nrug kab tsis zoo thiab qhov sib nrug kab dav, ua rau cov ntawv nrog cov ntawv nyeem tau. Lub interface yog tiaj tus, tsis muaj thav duab, thiab puag ncig: 12-3 radii ntawm cov ntawv thiab kev tswj hwm, cov nyees khawm zoo li ntsiav tshuaj puag ncig, thiab cov duab ntxoov ntxoo mos, txheej txheej tsuas yog rau cov ntsiab lus tseem ceeb xws li lub bar tshawb nrhiav. Txhua yam lwm yam - cov ntawv, cov khoom teev npe, cov txuas - vam khom qhov chaw dawb thiab cov kab zoo es tsis yog chrome accents.
Ib qho layout dav tag nrho uas tsis muaj qhov txwv dav tshaj plaws uas ruaj khov—cov ntsiab lus ncab ntug mus rau ntug hauv thaj chaw pom tau, nrog kwv yees li 40px ntawm cov padding kab rov tav ntawm txhua sab ntawm lub desktop. Tus hero yog lub tshuaj nrhiav ntab, nyob hauv nruab nrab ntawm daim ntaub dawb nruab nrab uas tsis muaj duab lossis lub npe—lub kab tshawb nrhiav YOG tus hero. Hauv qab qhov kev tshawb nrhiav, nplooj ntawv hloov mus rau hauv cov ntu ntsug, kab rov tav scrolling (plaub kab pom: Cov Tsev Tshwj Xeeb, Cov Tsev So Zoo, Lwm Lub Nroog, Muaj Lub Hlis Tom Ntej), txhua kab kwv yees li 320px siab, sib cais los ntawm 48px ntsug gutters. Txhua ntu siv 7-daim npav grid nrog kab rov tav overflow thiab xub navigation. Lub footer yog 3-kab grid ntawm cov txuas ntawm #f7f7f7 keeb kwm yav dhau, ua raws li lub bar hauv qab nrog cov ntaub ntawv copyright, cov kev xaiv lus/txiaj, thiab cov cim social media. Lub navigation yog lub bar saum toj kawg nkaus nrog kev navigation tab nyob hauv nruab nrab thiab cov kev tswj hwm uas sib phim sab xis.
Kev thaij duab yog qhov tseem ceeb hauv lub kaw lus pom, nrog rau cov duab puv npo ntawm cov npe vaj tse ua lub ntsiab lus tseem ceeb. Tag nrho cov duab yog cov duab sov so, zoo nkauj sab hauv thiab sab nraud ntawm cov tsev tiag tiag thiab cov tsev so, ua tiav nrog kev kho xim ntuj (tsis muaj cov lim dej hnyav lossis duotones). Cov duab raug txiav kom nruj nrog 1: 1 piv rau cov ntawv teev npe, puv ntug ntawm daim npav yam tsis muaj ntshav. Cov cim thoob plaws lub interface muaj cov qauv monochrome (qhov hnyav ntawm kab ~ 16–16), siv tsawg rau cov pawg navigation thiab UI tswj. Lub logo yog tib qho duab ntau xim (Rausch). Tsis muaj duab kos, tsis muaj 3D renders, tsis muaj duab abstract - cov lus pom yog kev thaij duab ntshiab thiab minimalist monochrome iconography ntawm daim ntaub mos mos dawb.
Xim av
Hom
- Rausch
#ff385c— Xim liab yog siv los ua ib qho khoom dai kom zoo nkauj rau cov cim, cov paib, thiab cov duab me me. Nws yuav tsum tsis txhob siv ua xim tseem ceeb rau kev hu kom ua. - Rausch 600
#e00b41— Ib qho xim pleev rau Rausch uas nias thiab tsaus rau cov nto siv ua cov khoom dai rau ntawm cov nto hover/active.
Nruab nrab
- Hof
#222222— Cov ntawv luam ntawm lub cev, cov ntawv tseem ceeb, cov npe, cov kab kos, thiab keeb kwm yav dhau tig rov qab yog xim nruab nrab ze li dub, uas ua lub hauv paus rau tag nrho cov kab ke achromatic. - Foggy
#6a6a6a— Cov ntawv nyeem thib ob, cov lus piav qhia uas tsis muaj suab, cov ntawv nyeem pab, cov cim sau uas raug kaw, thiab cov metadata zais cia hauv qab cov npe ntawm daim npav. - Grey 500
#c1c1c1— Cov ntawv nyeem uas tsis ua haujlwm, cov ntawv qhia chaw hauv cov teb sau ntawv, thiab cov cim uas tsis muaj suab uas yuav tsum tsis txhob hais txog qhov xwm txheej. - Bebe
#ebebeb— Cov ciam teb nyias nyias, cov teb nkag uas muaj kab hauv qab, cov kab sib cais ntawm cov kab teev npe, thiab cov kab faib me me. - Deco
#dddddd— Cov duab keeb kwm yav dhau ntawm daim npav rau cov thawv tsis ua haujlwm, cov chaw tuav, thiab cov xwm txheej ntawm daim npav uas raug kaw. - Faint
#f7f7f7— Daim duab keeb kwm yav dhau ntawm nplooj ntawv canvas, qhov chaw ntawm daim ntawv hauv qab, thiab lub xeev hover rau cov ntsiab lus sib tham yog xim mos mos, creamy uas ua rau nplooj ntawv no sib txawv ntawm cov ntawv dawb huv.
Kev sau ntawv
txij li 11 mus txog 28px · 5 kauj ruam
- Airbnb Cereal VF — hloov: Circular · cov qauv qhia 400, 500, 600, 700 · Ib daim ntawv geometric sans-serif uas tsim tshwj xeeb rau Airbnb. Cov ntawv hauv lub cev nyob ntawm 14px/400, cov ntawv cim UI nyob ntawm 16px/500, cov ntawv sau ntawm ntu nyob ntawm 20px/600, 22px/500 nrog qhov sib nrug ntawm cov ntawv me me ntawm -0.02em, thiab cov ntawv sau ntawm nplooj ntawv nyob ntawm 28px/700. Qhov sib nrug ntawm cov ntawv tsis zoo yuav txo qis thaum qhov loj zuj zus, uas yog ib qho yam ntxwv ntawm cov ntawv geometric sans-serif ntawm qhov loj ntawm qhov screen loj dua. Pab kom muaj qhov tshwj xeeb "ntsev" hloov pauv glyph.
Lub sijhawm thiab daim ntawv
| Lub Hom Phiaj | Lub ntsiab lus |
|---|---|
| Qhov Ceev | ntom ntom |
| Kauj ruam yooj yim | 12px |
| Lub vojvoog ntawm lub pob | 9999px |
| Lub vojvoog ntawm daim npav | 12px |
| Duab ntxoov ntxoo | cov duab ntxoov ntxoo mos mos |
| Nruab nrab ntawm cov ntu | 48px |
| Qhov dav ntawm nplooj ntawv | 1440px |
AI yuav tsim koj lub vev xaib hauv hom ntawv Airbnb thiab sau nws
- Sau cov khoom thiab cov ntawv tshaj tawm los ntawm qhov txuas - Instagram, TikTok, Facebook.
- Hloov cov ntsiab lus ntawm koj lub xaib qub - tsuas yog qhia qhov chaw nyob xwb.
- Tsim qauv niaj hnub ntawm lub cav zoo tshaj plaws: React ( Next.js) nrog rau kev ua haujlwm ntawm lub server thiab kev ua kom zoo dua SEO tawm ntawm lub thawv.
- Kev ua kom zoo dua SEO tag nrho rau cov txiaj ntsig tshawb nrhiav thiab cov lus pom zoo ntawm neural network.
Cov qauv zoo sib xws
- Apple (España) — lub thawv tso saib dawb gallery
- Silencio — Ib chav dawb uas muaj tej khoom siv uas ntab saum ntuj. Ib daim duab kos ua los ntawm ntawv sov sov, qhov twg txhua yam nyob hauv nws qhov chaw nrog lub keeb kwm yav dhau uas tsis muaj suab nrov, thiab qhov ntsiag to yog qhov kev txiav txim siab tsim los ntawm lub siab xav.
- Oakâme — Ib lub rooj cob qhia Provençal uas muaj hnub ci ntsa iab uas tau txiav los ntawm pob zeb sov so
- Nike — Ib lub tsev khaws puav pheej monochrome ntawm kev ua tiav kis las - phab ntsa dawb, cov khoom ua ib daim duab kos duab, chrome yaj rau hauv keeb kwm yav dhau
- Arc — industrial dawb gallery hla ib tag hmo dej
- Rivian — Ib lub tshuab hluav taws xob monolith ntawm phab ntsa pob zeb ntawm lub tsev khaws puav pheej. Rivian nthuav qhia txhua lub tsheb ua ib daim duab puab tawm tsam qhov chaw dawb loj heev, nrog rau cov ntawv loj heev uas ua rau nws yog ib qho khoom siv hauv tsev, thiab ib qho daj sov uas rhuav tshem cov huab cua monochromatic, zoo li lub hnub ci ntawm qhov chaw matte.
- Analogue — Lub thawv tso saib dub hauv chav ua yeeb yam - cov khoom muag nyob hauv qhov khoob
- ddna — Lub thawv tso saib tsev khaws puav pheej sov so rau ntawm cov ntaub pua chaw tsis kho
- Zellerfeld — Ib lub chaw ua haujlwm ntawm tus kws kos duab rau ntawm cov pob zeb dawb - cov nplaim monolithic ntawm lub pedestal, ib lub teeb ci ntawm cobalt, ib lub suab nrov ntawm cov ntawv me me los ntawm hauv pem teb mus rau qab nthab
- UY Studio — Lub tsev teev ntuj lub tsev khaws puav pheej yog qhov chaw ntsiag to nrog cov phab ntsa pob zeb, qhov twg cov fwj tshuaj tsw qab sawv ntawm cov plinths dawb, ci ntsa iab los ntawm ib lub teeb 400-watt thiab plaub lub teeb grey sov.
- Basic.Space — lub tsev khaws puav pheej curatorial ntawm marble dawb
- COS — ib lub tsev khaws puav pheej zoo nkauj nrog phab ntsa dawb