டெலிகிராம், WhatsApp+380637610482
வலேரி டான்யுக்
வலேரி டான்யுக்டெவலப்பர்வணிகங்களுக்கான செயற்கை நுண்ணறிவு கருவிகளை உருவாக்குகிறோம். உயர் தரம். மலிவு விலை.Telegram இல் எழுதவும்
Airbnb — இந்த பாணியிலான ஒரு தளத்தின் முன்னோட்டம்

Airbnb

ஒற்றை பவள சிவப்பு புக்மார்க்குடன் கூடிய அமைதியான வெள்ளை கேலரி சுவர்.

ஏர்பிஎன்பி ஒரு "வெள்ளை கேன்வாஸ்" பாணியில் இயங்குகிறது, இதில் புகைப்படக்கலையே முதன்மை பெறுகிறது: கிட்டத்தட்ட ஒவ்வொரு திரையும் ஒரு அமைதியான ஒற்றை வண்ணச் சட்டகமாக உள்ளது, இது சொத்துக்களின் முழுத்திரை படங்கள் ஒட்டுமொத்த தோற்றத்தை வெளிப்படுத்த அனுமதிக்கிறது, மேலும் செயல்பாட்டைக் குறிக்கும் ஒரே வண்ணக் குறிப்பாக, ஒரே ஒரு அடர் பவள-சிவப்பு நிறத் தொடுப்பு (ராஷ்) உள்ளது. எழுத்துருவானது வடிவியல் சான்ஸ்-செரிஃப் (ஏர்பிஎன்பி சீரியல் விஎஃப்) வகையைச் சேர்ந்தது — இது பெரும்பாலும் சிறிய, உறுதியான அளவுகளில் — முக்கிய உரை, இடைமுகம் மற்றும் பிரிவுத் தலைப்புகளுக்கு (22-22) பயன்படுத்தப்படுகிறது. இறுக்கமான எதிர்மறை வரி இடைவெளி மற்றும் தாராளமான வரி இடைவெளியுடன், அடர்த்தியான உரையுடன் கூடிய அட்டைகள் படிக்கக்கூடியதாக இருக்கின்றன. இடைமுகம் தட்டையாகவும், சட்டகமின்றியும், வட்டமாகவும் உள்ளது: அட்டைகள் மற்றும் கட்டுப்பாடுகளில் 12-3 ஆரங்கள், வட்டமான மாத்திரை வடிவ பொத்தான்கள், மற்றும் தேடல் பட்டி போன்ற முக்கிய கூறுகளுக்கு மட்டும் மென்மையான, அடுக்கப்பட்ட நிழல்கள் பயன்படுத்தப்படுகின்றன. மற்ற அனைத்தும் — அட்டைகள், பட்டியல் உருப்படிகள், இணைப்புகள் — குரோம் தொடுப்புகளுக்குப் பதிலாக வெள்ளை இடைவெளி மற்றும் மெல்லிய கோடுகளைச் சார்ந்துள்ளன.

நிலையான அதிகபட்ச அகல வரம்பு இல்லாத ஒரு முழு அகல தளவமைப்பு—பார்க்கக்கூடிய பகுதிக்குள் உள்ளடக்கம் விளிம்பிலிருந்து விளிம்பு வரை நீண்டுள்ளது, டெஸ்க்டாப்பில் ஒவ்வொரு பக்கத்திலும் சுமார் 40px கிடைமட்ட இடைவெளி உள்ளது. முதன்மைப் பகுதி (hero) என்பது, படம் அல்லது தலைப்பு இல்லாத ஒரு நடுநிலையான வெள்ளை கேன்வாஸில் மையப்படுத்தப்பட்ட, மிதக்கும் தேடல் கேப்சூல் ஆகும்—தேடல் பட்டையே முதன்மைப் பகுதியாகும். தேடலுக்குக் கீழே, பக்கம் செங்குத்தாக அடுக்கப்பட்ட, கிடைமட்டமாக ஸ்க்ரோல் ஆகும் பிரிவுகளாக மாறுகிறது (நான்கு வரிசைகள் தெரியும்: சிறப்பு வீடுகள், சிறந்த ஹோட்டல்கள், பிற நகரம், அடுத்த மாதம் கிடைக்கும்), ஒவ்வொன்றும் சுமார் 320px உயரம் கொண்டவை, 48px செங்குத்து இடைவெளிகளால் பிரிக்கப்பட்டுள்ளன. ஒவ்வொரு பிரிவும் கிடைமட்ட வழிதல் மற்றும் அம்பு வழிசெலுத்தலுடன் கூடிய 7-கார்டு கட்டத்தைப் பயன்படுத்துகிறது. அடிக்குறிப்பு (footer) என்பது #f7f7f7 பின்னணியில் உள்ள இணைப்புகளின் 3-நெடுவரிசைக் கட்டமாகும், அதைத் தொடர்ந்து பதிப்புரிமைத் தகவல், மொழி/நாணய விருப்பங்கள் மற்றும் சமூக ஊடக ஐகான்களைக் கொண்ட ஒரு கீழ்ப் பட்டி உள்ளது. வழிசெலுத்தல் என்பது மையப்படுத்தப்பட்ட டேப் வழிசெலுத்தல் மற்றும் வலதுபுறம் சீரமைக்கப்பட்ட கட்டுப்பாடுகளுடன் கூடிய ஒரு நிலையான மேல் பட்டியாகும்.

காட்சி அமைப்பில் புகைப்படக்கலையே ஆதிக்கம் செலுத்துகிறது, மேலும் ரியல் எஸ்டேட் பட்டியல்களின் முழுத்திரை படங்கள் முதன்மை உள்ளடக்க வகையாகச் செயல்படுகின்றன. அனைத்துப் புகைப்படங்களும் உண்மையான வீடுகள் மற்றும் ஹோட்டல்களின் இதமான, நன்கு ஒளியூட்டப்பட்ட உட்புற மற்றும் வெளிப்புறக் காட்சிகளாகும், அவை இயற்கையான வண்ணத் திருத்தத்துடன் (கனமான வடிப்பான்கள் அல்லது இருவண்ணங்கள் இல்லாமல்) செயலாக்கப்பட்டுள்ளன. பட்டியல் அட்டைகளுக்காக, படங்கள் 1:1 விகிதத்தில் நெருக்கமாக வெட்டப்பட்டுள்ளன, அவை அட்டையின் விளிம்பை விளிம்புச் சிதறல்கள் இல்லாமல் நிரப்புகின்றன. இடைமுகம் முழுவதும் உள்ள சின்னங்கள் ஒரு வண்ண வெளிப்புறக் கோட்டைக் (கோட்டின் தடிமன் ~16–16) கொண்டுள்ளன, அவை வழிசெலுத்தல் பிரிவுகள் மற்றும் பயனர் இடைமுகக் கட்டுப்பாடுகளுக்கு அளவோடு பயன்படுத்தப்படுகின்றன. சின்னம் மட்டுமே பலவண்ண வரைகலைக் கூறாகும் (ராஷ்). விளக்கப்படங்கள் இல்லை, முப்பரிமாண ரெண்டர்கள் இல்லை, அருவ வரைகலைகள் இல்லை—மென்மையான வெள்ளைத் திரையில் தூய புகைப்படக்கலை மற்றும் குறைந்தபட்ச ஒருவண்ண சின்னக்கலையே இதன் காட்சி மொழியாகும்.

வண்ணத் தட்டு

பிராண்ட்

  • Rausch #ff385c — சின்னங்கள், அடையாளங்கள் மற்றும் சிறிய வரைகலை விவரங்களுக்கு சிவப்பு ஒரு அலங்கார அம்சமாகப் பயன்படுத்தப்படுகிறது. செயல் அழைப்புகளுக்கு இதை முதன்மை நிறமாகப் பயன்படுத்தக் கூடாது.
  • Rausch 600 #e00b41 — மிதக்கும்/செயல்பாட்டு மேற்பரப்புகளில் பிராண்ட் அடையாளங்களாகப் பயன்படுத்தப்படும் ராஷ் பெயிண்டின் அழுத்தப்பட்ட மற்றும் அடர் நிறப் பதிப்பு.

நடுநிலை

  • 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 அளவிலும், UI லேபிள்கள் 16px/500 அளவிலும், பகுதித் தலைப்புகள் 20px/600, -0.02em என்ற நெருக்கமான எழுத்து இடைவெளியுடன் 22px/500 அளவிலும், மற்றும் பக்கத் தலைப்புகள் 28px/700 அளவிலும் அமைக்கப்பட்டுள்ளன. அளவு அதிகரிக்கும்போது எதிர்மறை எழுத்து இடைவெளி குறைகிறது; இது பெரிய திரை அளவுகளில் வடிவியல் சான்ஸ்-செரிஃப் எழுத்துருக்களின் ஒரு பண்பாகும். "சால்ட்" மாற்று கிளிஃப் அம்சத்தை இது செயல்படுத்துகிறது.

இடைவெளிகள் மற்றும் வடிவம்

நோக்கம்பொருள்
அடர்த்திஅடர்த்தியான
அடிப்படை படி12px
பொத்தான் ஆரம்9999px
அட்டை ஆரம்12px
நிழல்கள்மென்மையான நிழல்கள்
பிரிவுகளுக்கு இடையில்48px
பக்க அகலம்1440px

செயற்கை நுண்ணறிவு உங்கள் வலைத்தளத்தை Airbnb பாணியில் உருவாக்கி, அதை நிரப்பும்.

  • Instagram, TikTok, Facebook இணைப்புகளின் வழியாக தயாரிப்புகளையும் பதிவுகளையும் நிரப்பவும்.
  • உங்கள் பழைய தளத்திலிருந்து உள்ளடக்கத்தை மாற்றவும்—முகவரியைக் குறிப்பிட்டால் போதும்.
  • சிறந்த இன்ஜினான React ( Next.js)-இல், சர்வர் ரெண்டரிங் மற்றும் உள்ளமைக்கப்பட்ட SEO மேம்படுத்தலுடன் கூடிய நவீன வடிவமைப்பு.
  • தேடல் முடிவுகளுக்கான முழுமையாகத் தானியங்குபடுத்தப்பட்ட SEO உகப்பாக்கம் மற்றும் நியூரல் நெட்வொர்க் பரிந்துரைகள்.

ஒத்த பாணிகள்

  • Apple (España) — வெள்ளை கேலரி காட்சிப் பெட்டி
  • Silencio — மிதக்கும் கலைப்பொருட்களைக் கொண்ட ஓர் வெள்ளை அறை. கதகதப்பான காகிதத்தால் ஆன ஒரு கலைக்கூடக் காட்சி; அதில் ஒவ்வொரு கூறும் எதிர்மறைப் பருமனின் பின்னணியில் தனக்கான இடத்தைப் பிடித்திருக்கிறது, மேலும் அந்த அமைதி என்பது திட்டமிட்டு எடுக்கப்பட்ட ஒரு வடிவமைப்பு முடிவாகும்.
  • Oakâme — வெதுவெதுப்பான கல்லால் செதுக்கப்பட்ட, சூரிய ஒளி நிறைந்த ஒரு புரோவென்சால் பட்டறை.
  • Nike — விளையாட்டுச் சாதனைகளின் ஒற்றை வண்ணக் காட்சியகம் – வெண் சுவர்கள், ஒரு கலைப்படைப்பாகத் திகழும் தயாரிப்பு, பின்னணியில் கரைந்துபோன குரோம்.
  • Arc — நள்ளிரவு நீரின் மீது தொழிற்சாலை வெள்ளை காட்சிக்கூடம்
  • Rivian — காட்சியகத்தின் கான்கிரீட் சுவரில் ஒரு மின்னூட்ட ஒற்றைக்கல். ரிவியன் ஒவ்வொரு வாகனத்தையும் ஒரு பரந்த வெள்ளை வெளியில் ஒரு சிற்பமாக முன்வைக்கிறார்; அதில், ஒரு கட்டிடக்கலைக் கூறாக மாறும் அளவுக்குப் பெரிய எழுத்துருக்களும், மங்கலான பரப்பின் மீது படும் சூரிய ஒளியைப் போல அந்த ஒற்றை வண்ணச் சூழலை உடைக்கும் ஒரு இதமான மஞ்சள் நிறமும் இடம்பெற்றுள்ளன.
  • Analogue — கருப்பு காட்சிக்கூட காட்சிப் பெட்டி – பொருட்கள் வெற்றிடத்தில் மிதக்கின்றன.
  • ddna — பதப்படுத்தப்படாத லினன் துணியின் மீது வைக்கப்பட்ட, இதமான அருங்காட்சியகக் காட்சிப் பெட்டி.
  • Zellerfeld — வெள்ளைப் பளிங்குக் கல்லில் அமைந்த ஒரு சிற்பியின் பட்டறை—பீடத்தின் பிரம்மாண்டமான மேற்பரப்புகள், கோபால்ட்டின் ஒற்றைப் பொறி, தரையிலிருந்து கூரை வரை மெல்லிய சிற்றெழுத்துக்களின் மெல்லிய ஓசை.
  • UY Studio — மடாலயத்தின் கல் மண்டபம், கான்கிரீட் சுவர்களைக் கொண்ட ஒரு அமைதியான இடமாகும். அங்கு, ஒரு 400-வாட் விளக்கு மற்றும் நான்கு வெதுவெதுப்பான சாம்பல் நிற மின்விளக்குகளின் ஒளியால், வெள்ளை நிற பீடங்களின் மீது வாசனைத் திரவியப் புட்டிகள் வைக்கப்பட்டுள்ளன.
  • Basic.Space — வெள்ளை பளிங்குக் கல்லில் காட்சியகப் பொறுப்பாளர் கலைக்கூடம்
  • COS — வெள்ளை சுவர்களைக் கொண்ட ஒரு நவநாகரீக கலைக்கூடம்