Dub
லிங்கின் மேட் அரிசி காகித கட்டுப்பாட்டுப் பலகம்
டப்பின் காட்சி அமைப்பு, ஒரு கட்டுப்படுத்தப்பட்ட, கிட்டத்தட்ட தலையங்க SaaS அழகியலைக் கொண்டுள்ளது: துருத்திக்கொண்டிருக்கும் கூறுகளுக்குப் பதிலாக மெல்லிய ஓரங்களால் இணைக்கப்பட்ட ஒரு கிட்டத்தட்ட வெள்ளை நிறத் தளம், அடர்த்தியான ஒற்றை வண்ண அச்சுக்கலை கட்டமைப்பு ஆதரவை வழங்குகிறது, மேலும் ஒரே ஒரு பிரகாசமான நீல நிறம் (#2563eb) ஒரு தனித்துவமான தோற்றத்தை அளிக்கிறது. முதல் பார்வையில் மேற்பரப்புகள் தட்டையாகவும் சட்டகமின்றியும் காணப்படுகின்றன, ஆனால் ஒவ்வொரு கொள்கலனும் 1px #e5e5e5 விளிம்பைக் கொண்டுள்ளது, இது அச்சிடப்பட்ட ஆவணத்தின் உணர்வைத் தூண்டுகிறது. நடுநிலையான வண்ணத் தொகுப்பிற்கு மேலே மிதக்கும் ஒரு சிறிய அளவிலான வண்ணமயமான "மாத்திரை" அலங்காரங்கள் (ஆரஞ்சு, பச்சை, ஊதா) மற்றும் பகட்டாக இல்லாமல் நம்பிக்கையுடனும் நவீனமாகவும் தோற்றமளிக்கும் தலைப்புகள் மூலம் தனித்துவம் அடையப்படுகிறது. கூறுகள் கச்சிதமாகவும் அடர்த்தியாகவும் உள்ளன: 8px இடைவெளிகள், 12px கார்டு ஆரம், 9999px அளவில் மாத்திரை வடிவ லேபிள்கள், மற்றும் கனமான, நிரப்பப்பட்ட பொத்தான்களுக்குப் பதிலாக கண்ணுக்குத் தெரியாத கட்டுப்பாடுகள்.
இந்தப் பக்கம், சுமார் 1200px அதிகபட்ச அகலத்துடன், மையப்படுத்தப்பட்ட தளவமைப்பில் உருவாக்கப்பட்டுள்ளது. இதன் முக்கியக் கூறு, ஒரு பெரிய தயாரிப்பு தளவமைப்பிற்கு மேலே கிடைமட்டமாக நிலைநிறுத்தப்பட்ட, மூன்று மிதக்கும் கூறுகளுடன் (இணைப்புத் திட்டங்கள், மாற்றப் பகுப்பாய்வு, குறுக்கு இணைப்புகள்) கூடிய ஒரு மையப்படுத்தப்பட்ட உரைத் தொகுதியாகும். வண்ணப் பிரிப்பிற்காக, வெள்ளை கேன்வாஸ் மற்றும் #f5f5f5 பேப்பர் ஹேஸ் ஆகியவற்றுக்கு இடையில் மாறி மாறி வரும் சீரான 64px இடைவெளிகளுடன், பிரிவுகள் செங்குத்தாக அமைக்கப்பட்டுள்ளன. கீழ்ப்பகுதி Z-வடிவ தளவமைப்பைப் பயன்படுத்துகிறது: தலையங்க உரை நடுப் பகுதியில் மையப்படுத்தப்பட்டுள்ளது, மேலும் மிதக்கும் UI அட்டைகள் இடது மற்றும் வலது ஓரங்களில் நிலைநிறுத்தப்பட்டு, ஒரு சமச்சீரற்ற, பத்திரிகை போன்ற தாளத்தை உருவாக்குகின்றன. லோகோ கிளவுட் என்பது பக்கத்தின் மையத்தில் உள்ள ஒரு எளிய 5x2 கட்டமாகும். வழிசெலுத்தல் என்பது ஒரு நிலையான அல்லது மெகா-மெனு இல்லாமல், ஒரு எளிமையான மேல் பட்டையாகும்—இடதுபுறத்தில் லோகோ, மையத்தில் வழிசெலுத்தல், வலதுபுறத்தில் இரண்டு பொத்தான்களின் குழு (ஒரு மங்கலான "உள்நுழை" பொத்தான் + நிரப்பப்பட்ட "பதிவு" பொத்தான்). முதன்மை சாளரத்தின் டாஷ்போர்டு தளவமைப்பு, ஒரு பாரம்பரியமான இரு-பத்தி செயலி தளவமைப்பைக் காட்டுகிறது: அதாவது, ஒரு நிலையான பக்கப் பட்டி (சுமார் 240px) மற்றும் பார்வையாளர்கள் ஸ்க்ரோல் செய்யத் தொடங்குவதற்கு முன்பு, அவர்களுக்கான தயாரிப்புத் தகவல்களின் அடர்த்தியை வரையறுக்கும் ஒரு உள்ளடக்கப் பகுதி.
காட்சிகள் வாழ்க்கை முறையை மையமாகக் கொண்டிருக்காமல், தயாரிப்பை மையமாகக் கொண்டிருக்கின்றன. பிரதான திரையானது, ஒரு பெரிய டாஷ்போர்டு ஸ்கிரீன்ஷாட்டை மையமாகக் கொண்டுள்ளது. இது ஒரு வெள்ளை கேன்வாஸில் தட்டையான பேனலாக அமைக்கப்பட்டு, பக்கவாட்டு வழிசெலுத்தல், தரவு அட்டவணை மற்றும் மிதக்கும் UI கூறுகளுடன் கூடிய ஒரு நிஜ உலகத் தயாரிப்பு மாதிரியைப் பிரதிபலிக்கிறது. வாடிக்கையாளர்களின் சமூக ஊடகச் செயல்பாட்டை அங்கீகரிக்கும் வகையில், அவர்களின் சின்னங்கள் (beehiv, superpower, Chatbase, போன்றவை) நிறம் மங்கிய சாம்பல் நிறக் கட்டத்தில் காட்டப்படுகின்றன. பக்கத்தின் ஒற்றை நீல நிறம் மேலோங்கி இருக்க, இவற்றின் நிறங்கள் நீக்கப்பட்டுள்ளன. மிதக்கும் கூட்டாளர் அட்டைகள் (வருவாய்/பணம் செலுத்துதல் தரவுகளுடன் கூடிய சிறிய சுயவிவரங்கள் மற்றும் டைல்கள்) கீழே உள்ள தலையங்க உரைத் தொகுதிகளைச் சுற்றி நகர்கின்றன. இது உரையின் மீது நிழல்களைப் பயன்படுத்தாமலேயே ஒரு ஆழமான உணர்வை உருவாக்குகிறது. புள்ளிகளால் ஆன கட்டப் பின்னணி அமைப்பு ஒரு தனித்துவமான அம்சமாகும்: மிகக் குறைந்த ஒளிபுகாத்தன்மை கொண்ட சிறிய புள்ளிகளின் ஒரு மெல்லிய வரிசை, ஒரு வடிவமைப்பு அமைப்பு/வரைதல் மேற்பரப்பின் உணர்வையும் ஒரு அமைப்பையும் உருவாக்குகிறது. இது இந்தத் தளத்தை ஒரு "நவீன இணைப்புப் பண்புக்கூறுத் தளமாக" நிலைநிறுத்துவதை வலியுறுத்துகிறது. குறியீடுகள் மிகக் குறைவாக, வெளிக்கோடுகள் மற்றும் நிரப்பு வண்ணங்களுடன் உள்ளன, மேலும் சிறப்புக் குறிச்சொற்களுக்கு டேன்ஜரின் ஆரஞ்சு, லாவெண்டர் ஊதா, புதினா பச்சை போன்ற வண்ணங்களின் கலவை பயன்படுத்தப்பட்டுள்ளது. புகைப்படங்கள், விளக்கப்படங்கள் அல்லது 3D மாதிரிகள் எதுவும் பயன்படுத்தப்படவில்லை—தயாரிப்பின் பயனர் இடைமுகமே ஒரு காட்சி மொழியாகும்.
வண்ணத் தட்டு
பிராண்ட்
- Electric Blue
#2563eb— லோகோ, இணைப்புகள், முக்கிய செயல்திறன் குறிகாட்டிகள், செயல்பாட்டு நிலைகள் மற்றும் ஐகான் சிறப்பம்சங்கள் போன்றவற்றில் முதன்மை பிராண்ட் நிறம் பயன்படுத்தப்படுகிறது. வெள்ளை பின்னணியில் உள்ள அடர் நீல நிறம், இந்த அமைப்பின் ஒரே காட்சி ஈர்ப்பை உருவாக்குகிறது. - Deep Sapphire
#1e40af— கவனத்தை ஈர்ப்பதற்காக, செயல் பொத்தானின் பிரதான பின்னணியும், செயலுக்கான அழைப்பின் தடித்த வண்ணமும்—செயலைக் குறிக்கும் ஒரே நிறம் இதுதான்—அளவோடு பயன்படுத்தப்பட்டுள்ளது.
நடுநிலை
- Canvas White
#ffffff— பக்கப் பின்னணி, அட்டை மேற்பரப்பு, பாப்-அப் பேனல்கள் ஆகியவை ஒவ்வொரு திரையின் முழுமையான அடித்தளமாகும். - Paper Mist
#f5f5f5— உள்ளமைக்கப்பட்ட அட்டைகள், கூடுதல் பேனல்கள் மற்றும் நிரப்பிகளுக்கான நுட்பமான ஹோவர் வண்ண மாற்றங்கள். - Ash
#e5e5e5— கார்டுகள், உள்ளீட்டு இணைப்பிகள் மற்றும் பிரிப்பான்களில் உள்ள மெல்லிய ஓரங்களே, அமைப்பை ஒன்றாக இணைத்து வைத்திருக்கும் கட்டமைப்பு வரியாகும். - Smoke
#d4d4d4— தேர்ந்தெடுக்கப்பட்ட கண்டெய்னர்களுக்குக் கூர்மையான எல்லைகளும் கூடுதல் பொத்தான் கோடுகளும். - Pebble
#c8c8c8— மிதமான மாறுபாடு கொண்ட எல்லைகள், கட்டுப்பாட்டுக் கோடுகள் மற்றும் கட்டமைப்புப் பிரிப்பான்கள். இந்த நிறத்தை, செயலழைப்புகளுக்கான முதன்மை நிறமாகப் பயன்படுத்தக் கூடாது. - Midnight Ink
#0a0a0a— அதிகபட்ச வேறுபாட்டிற்காக, பொத்தான்களின் முக்கிய உரை, சிறப்பித்துக் காட்டப்பட்ட பொத்தான்கள் மற்றும் வழிசெலுத்தல் உரை ஆகியவை கிட்டத்தட்ட கருப்பு நிறத்தில் உள்ளன.
அச்சுக்கலை
11 முதல் 48px வரை · 9 படிகள்
- Satoshi — மாற்று: Inter (weight 500 · வெளிப்புறங்கள் 500 · காட்சித் தலைப்புகள் – தலைப்பு மற்றும் பகுதித் தலைப்புகளுக்கு 36–48px வரிகளில் மட்டுமே பயன்படுத்தப்படுகின்றன. எழுத்துரு எடை – 500 (நடுத்தரம், தடித்தது அல்ல): தலைப்புகள் கம்பீரமாகவும் நவீனமாகவும் தோற்றமளிக்கின்றன, ஆனால் ஒருபோதும் ஆதிக்கம் செலுத்துவதில்லை. சடோஷியின் வடிவியல் விகிதாச்சாரங்கள், இன்டரின் முக்கிய உரையால் மீண்டும் உருவாக்க முடியாத ஒரு சற்றே தலையங்க, நவீன உணர்வை இந்த எழுத்துருவிற்கு அளிக்கின்றன.
- Inter — மாற்று: Inter (native) · வெளிப்புறங்கள் 400, 500, 600 · உள்ளடக்க உரை, பயனர் இடைமுக லேபிள்கள், வழிசெலுத்தல், துணைத் தலைப்புகள் மற்றும் சிறு தலைப்புகள். 11px மைக்ரோ-லேபிள்கள் முதல் 30px இரண்டாம் நிலைத் தலைப்புகள் வரை அனைத்தையும் கையாளும் இன்டர் தான் இதன் முதன்மைப் பணியாளராக உள்ளது. உள்ளடக்க உரைக்கு 400 என்ற எடையும், ஹைலைட் செய்யப்பட்ட கூறுகள் மற்றும் பொத்தான் லேபிள்களுக்கு 500 என்ற எடையும், முக்கியமான பயனர் இடைமுக லேபிள்களுக்கு 600 என்ற எடையும் இயல்புநிலையாக ஒதுக்கப்பட்டுள்ளது. 1.5 வரி உயரத்துடன் கூடிய 16px அளவுதான் மிகவும் அடிக்கடி காணப்படும் ஒற்றை-படி அளவாகும் (1220 முறை), இது 16px தான் உள்ளடக்க உரையின் அதிகாரப்பூர்வமான அளவு என்பதை உறுதிப்படுத்துகிறது.
- Geist Mono — மாற்று: JetBrains Mono or IBM Plex Mono · வெளிப்புறங்கள் 400, 500 · குறியீட்டுத் துண்டுகள், தொழில்நுட்ப மெட்டாடேட்டா மற்றும் உட்பொதிக்கப்பட்ட மோனோஸ்பேஸ்டு டோக்கன்கள் ஆகியவை 12–14px அளவிலான குறியீட்டுத் தொகுதிகளிலும், 24px அளவிலான பெரிய குறியீட்டுக் காட்சி உறுப்புகளிலும் பயன்படுத்தப்படுகின்றன. இது, Dub-இன் தயாரிப்பு நிலைப்பாட்டிற்கு ஏற்ப, டெவலப்பர் கருவியின் நம்பகத்தன்மையை உறுதி செய்கிறது.
இடைவெளிகள் மற்றும் வடிவம்
| நோக்கம் | பொருள் |
|---|---|
| அடர்த்தி | சராசரி |
| அடிப்படை படி | 8px |
| பொத்தான் ஆரம் | 8px |
| அட்டை ஆரம் | 12px |
| நிழல்கள் | நிழல்களுக்குப் பதிலாக எல்லைகள் இல்லை |
| பிரிவுகளுக்கு இடையில் | 64px |
| பக்க அகலம் | 1200px |
செயற்கை நுண்ணறிவு உங்கள் வலைத்தளத்தை Dub பாணியில் உருவாக்கி, அதை நிரப்பும்.
- Instagram, TikTok, Facebook இணைப்புகளின் வழியாக தயாரிப்புகளையும் பதிவுகளையும் நிரப்பவும்.
- உங்கள் பழைய தளத்திலிருந்து உள்ளடக்கத்தை மாற்றவும்—முகவரியைக் குறிப்பிட்டால் போதும்.
- சிறந்த இன்ஜினான React ( Next.js)-இல், சர்வர் ரெண்டரிங் மற்றும் உள்ளமைக்கப்பட்ட SEO மேம்படுத்தலுடன் கூடிய நவீன வடிவமைப்பு.
- தேடல் முடிவுகளுக்கான முழுமையாகத் தானியங்குபடுத்தப்பட்ட SEO உகப்பாக்கம் மற்றும் நியூரல் நெட்வொர்க் பரிந்துரைகள்.
ஒத்த பாணிகள்
- Mollie — காஷ்மீர் நிற கவுண்டர், அடர் நிற கணக்குப் புத்தகம். கருப்பு எழுத்துக்களைச் சுற்றி தலையங்க வடிவமைப்பிற்காகப் போதுமான வெள்ளை இடத்தை விட்டு, பின்னர் இதமான கிரீம், எஸ்பிரெசோ பழுப்பு நிறங்கள் மற்றும் உண்மையான பணம் செலுத்தும் முறைகளின் தொட்டுணரக்கூடிய புகைப்படங்கள் மூலம் தயாரிப்பு தொடர்பான அம்சங்களை வலுப்படுத்துங்கள்.
- Kagi — ஒரு தனி வாசிப்பு அறை. அடர்த்தியான கிராஃபைட் எழுத்துக்களைச் சுற்றி ஒரு திறந்த வெள்ளை வெளியை உருவாக்குங்கள்; அதன் அமைதியைக் குலைக்க, மென்மையான ஊதா நிறத் தீற்றல்களையும் இதமான பாஸ்டல் வண்ணப் பரப்புகளையும் பயன்படுத்துங்கள்.
- Milanote — மிலானோட் என்பது ஒரு பிரத்யேகமான படைப்பாக்க ஸ்டுடியோ ஆகும். மிதக்கும் காட்சிப் பலகைகளைப் பயன்படுத்தி தலையங்கக் காட்சிக்கூடப் பாணியிலான பக்கங்களை உருவாக்குங்கள்: அடர் நிறச் சட்டமிடப்பட்ட சுவர்கள், வெள்ளைக் காட்சி வெளி, மற்றும் மென்மையான ஆழத்துடன் உண்மையான பொருட்களைப் போலத் தோற்றமளிக்கும் ஸ்கிரீன்ஷாட்கள் ஆகியவை இதில் அடங்கும்.
- Co2 — குளிர்கால ஒளியில் ஒரு காலநிலை வரைபடத் தொகுப்பு. செரிஃப் தலைப்புகள், வகை வாரியாகக் குறியிடப்பட்ட தரவுகள் மற்றும் பனி படர்ந்த படங்கள் ஆகியவை அகன்ற வெள்ளை ஓரங்களை முன்னிலைப்படுத்தும் வகையில், வான்வழி ஆவண நிலப்பரப்பைப் போன்ற பக்கங்களை உருவாக்குங்கள்.
- GitButler — உரையின் இறுதியில் டர்க்கைஸ் நிறம். அதிக மாறுபாடு கொண்ட செரிஃப் தலைப்புகள், நுட்பமான தொழில்நுட்பக் கட்டங்கள், இதமான கிராஃபைட் மேற்பரப்புகள் மற்றும் கண்ணுக்குப் புலப்படாத டர்க்கைஸ் வண்ணச் சிறப்புக்கூறு ஆகியவற்றின் கலவை.
- ElevenLabs — மென்மையான தலைப்புகளுடன், இதமான கிரீம் வண்ணங்களில் அமைந்த ஒரு புகைப்படக் கட்டுரை. ஒரு பௌஹாஸ் பாணி நோட்டுப்புத்தகம்—முட்டை ஓட்டு நிறக் காகிதம், கருப்பு மை, மற்றும் பொருளைக் காட்சிப்படுத்த ஒற்றை ஊதா மற்றும் ஆரஞ்சு வண்ண அலங்காரம்.
- Awesomic — காகிதத் துண்டுகளை நினைவூட்டும் ஆரஞ்சு நிற நிறுத்தற்குறிகளுடன் கூடிய தலையங்க துத்தநாக வலை.
- Monad — வெதுவெதுப்பான தோல் காகிதம் குறித்த தலையங்க தொழில்நுட்ப இதழ்
- Seline Analytics — சூடான காகிதத்தில் ஒரு அமைதியான பகுப்பாய்வு அட்டவணை
- Notion — நண்பகல் வெயிலில் ஒரு சூடான காகித நோட்டுப்புத்தகம்
- Anthropic — வெதுவெதுப்பான தோல் தாளில் அச்சிடப்பட்ட ஒரு அறிவியல் கள ஆய்விதழ்—அமைதியான தந்த நிற மேற்பரப்புகள், செரிஃப் வடிவ தலையங்கத் தலைப்புகள், மற்றும் செயல்பாடு தேவைப்படும்போது மட்டும் தோன்றும் ஒரு களிமண் நிறச் சின்னம்.
- Calendly — குளிர்ந்த பளிங்குக் கல்லின் மீது அடர் நீல மை