
Framer
வெற்றிடத்தில் நியான் கலைக்கூடம்
ஃபிரேமர் கிட்டத்தட்ட முழுமையான இருளாகச் செயல்படுகிறது—ஒரு கலைக்கூடத் திறப்பு விழாவில் உள்ள நியான் விளக்கு போல உள்ளடக்கம் மிதந்து கொண்டிருக்கும் ஒரு கருப்புத் திரை. GT வால்ஷெய்ம் மீடியம் எழுத்துருவில், 0.8–1.1 வரையிலான இறுக்கமான வரி இடைவெளி மற்றும் தீவிரமான எதிர்மறை எழுத்து இடைவெளியுடன் (-0.04em, 54px அளவில்) அமைக்கப்பட்டுள்ள தலைப்புகள், பக்கத்தில் நேர்த்தியாகப் பொருந்தாமல் முன்னோக்கித் தள்ளும் ஒரு சுருக்கமான, அலங்கார எழுத்துருவை உருவாக்குகின்றன. ஒரேயொரு மின்னல் நீல நிறம் (#0099ff) பார்டர்கள், ஒளிர்வு, சின்னங்கள், செயல்பாட்டு நிலைகள் போன்ற அனைத்து செயல்பாட்டு அம்சங்களையும் வழங்குகிறது. அதே சமயம், இடைமுகத்தின் மற்ற பகுதிகள் நிறமற்றதாகவே இருக்கின்றன; தூய கருப்பிலிருந்து ஆழத்தை உருவாக்க, நுட்பமான சாம்பல் நிற மாற்றங்களை (#111, #171717, #242424) அது நம்பியுள்ளது. கூறுகள் அலங்காரமாக இல்லாமல், நன்கு யோசித்து உருவாக்கப்பட்டதாகத் தோன்றுகின்றன: 8–25px அளவிலான வட்டமான ஆரங்கள், மெல்லிய 1px பார்டர்கள், குறைந்தபட்ச நிழல்கள், மற்றும் வெற்றிடத்தை ஒளிர அனுமதிக்கும் ஒளிபுகும் பரப்புகள்.
முழு அகலப் பிரிவுகள் கருப்புத் திரையைத் தாண்டி நீண்டுள்ளன, அவற்றின் உள்ளடக்கம் அதிகபட்சமாக ~1200px அகலத்திற்குள் கட்டுப்படுத்தப்பட்டு, மையத்தில் அமைக்கப்பட்டுள்ளது. முக்கியப் பிரிவில் இடதுபுறம் சீரமைக்கப்பட்ட தலைப்புப் பகுதியும், ஒரேயொரு செயலுக்கான அழைப்பு (CTA) பொத்தானும் இடம்பெற்றுள்ளன; அதன் வலதுபுறம் வேண்டுமென்றே மையப்படுத்தப்படாமல், சமச்சீரற்ற முறையில் காலியாக விடப்பட்டுள்ளது. பிரிவுகள், உரை மட்டுமே கொண்ட தளவமைப்புகளுக்கும் (பெரிய தலைப்புப் பகுதி + துணை உரை) மற்றும் தயாரிப்புத் திரைப் படங்களுக்கும் இடையில் மாறி மாறி வருகின்றன. "ஃபிரேமருடன் வருகிறது" என்ற பிரிவு, 4-நெடுவரிசைக் கட்டத்தில் ஒரு லோகோ சுவரைப் பயன்படுத்துகிறது. சமூகப் பிரிவில், ஒரு தயாரிப்புத் திரைப் படம், வட்டமான மூலைகளுடன் மையப்படுத்தப்பட்ட, முழு அகலக் கொள்கலனுக்குள் வைக்கப்பட்டுள்ளது. வழிசெலுத்தல் மிகக் குறைவாகவே உள்ளது—இடதுபுறத்தில் லோகோ மற்றும் வலதுபுறத்தில் சீரமைக்கப்பட்ட இணைப்புகளுடன் கூடிய ஒரு மெல்லிய மேல் பட்டி, கண்ணுக்குத் தெரியும் கட்டுப்பாடுகள் எதுவும் இல்லை. பிரிவுகளின் அமைப்பு: பிரிவுகளுக்கு இடையில் குறிப்பிடத்தக்க 80px செங்குத்து இடைவெளிகள் உள்ளன, இது வெற்றிடத்தில் மிதக்கும் உள்ளடக்கத்தின் தனித்தனித் தீவுகளை உருவாக்குகிறது.
தயாரிப்பின் பயனர் இடைமுகத்தின் ஸ்கிரீன்ஷாட்கள் ஆதிக்கம் செலுத்துகின்றன—போக்குவரத்து விளக்குப் புள்ளிகளுடன் கூடிய குரோம் போன்ற சாளரத்தால் கட்டமைக்கப்பட்டு, செயலியின் உட்பொதிக்கப்பட்ட ஸ்கிரீன்ஷாட்கள் பிரதான படமாகின்றன. தரத்திற்கான சான்றாக விளங்கும் சின்னங்கள், அகலமான இடைவெளியுடன் கூடிய கருப்புப் பின்னணியில் வெள்ளை எழுத்துக்களில் வழங்கப்படுகின்றன. புகைப்படங்கள், விளக்கப்படங்கள் அல்லது அருவ வரைகலைகள் எதுவும் பயன்படுத்தப்படவில்லை—ஒரு உயிரோட்டமான இடைமுகமாகக் காட்டப்படும் தயாரிப்பே இதன் காட்சி மொழியாகும். சின்னங்களின் பாணி: எளிமையான, கோடிட்ட, ஒற்றை வண்ண மற்றும் சிறிய அளவிலான வெள்ளை. உரை அடர்த்தி: பெரும்பாலும் உரை, அவ்வப்போது தயாரிப்பு ஸ்கிரீன்ஷாட்கள் வடிவில் பெரிய பகுதிகளும் இடம்பெறுகின்றன. இடத்தின் காட்சிச் சமநிலை, படங்களை விட அச்சுக்கலைக்கே தெளிவாகச் சாதகமாக உள்ளது.
வண்ணத் தட்டு
பிராண்ட்
- Vivid Violet
#0066ff— இடைமுகத்தில், திடமான வண்ணப் பொத்தான் பின்னணி காட்டப்படும் ஒரே இடம் முதன்மைச் செயல்பாட்டுப் பொத்தான் மட்டுமே.
நடுநிலை
- Bone
#ffffff— முக்கியத் தலைப்புகள், அடர் பின்னணியில் உள்ள முக்கிய உரை, பொத்தானின் பின்னணி மட்டுமே ஒளியின் ஒரே ஆதாரம். - Void
#000000— பக்கத் திரை, வழிசெலுத்தல் பின்னணி, அட்டைப் பரப்புகள், சின்னங்களின் நிரப்புதல் ஆகிய அனைத்தும், அவசியமற்ற உள்ளடக்கங்கள் அனைத்தையும் உள்ளிழுக்கும் ஒரு முடிவற்ற கருப்பு நிறத்தில் உள்ளன. - Graphite
#111111— உயர்த்தப்பட்ட அட்டைப் பரப்புகள் என்பவை, பெரிய, செயல்பாட்டு அட்டைகள் மற்றும் மாதிரி கொள்கலன்களான வெற்றிடத்தை விட ஒரு படி மேலானவை. - Obsidian
#171717— பொத்தான்கள், கூடுதல் அட்டைகள், பயனர் இடைமுக நிரப்பிகளுக்கான இடைநிலை மேற்பரப்பு - ஊடாடும் கூறுகளைத் திரையிலிருந்து பிரிக்கிறது. - Slate
#242424— சுட்டியை அதன் மீது கொண்டு வரும்போது, உள்ளீட்டுப் புலங்களும் உள் தள்ளப்பட்ட பகுதிகளும் உரை வடிவத்திற்கு மாறுவதற்கு முன்பு மிகவும் பிரகாசமான நடுநிலை நிறத்தில் தோன்றும். - Ash
#333333— செயலற்ற பின்னணிப் படங்கள் மற்றும் கட்டமைப்பு கூறுகளுக்கான ஆழமான நிரப்புதல்.
அச்சுக்கலை
12 முதல் 68px வரை · 8 படிகள்
- sans-serif — மாற்று: Inter · வெளிப்புறங்கள் 400 · sans-serif - பிரித்தெடுக்கப்பட்ட தரவுகளில் காணப்படுகிறது, ஆனால் செயற்கை நுண்ணறிவால் விவரிக்கப்படவில்லை.
- GT Walsheim — மாற்று: Inter Tight · வெளிப்புறங்கள் 500 · தலைப்புகள் மற்றும் பெயர்களுக்கான எழுத்துரு, நிறுவனத்தின் பிராண்ட் எழுத்துருவாகும். இது 44–68px வரம்பில், 0.8–1.1 வரி இடைவெளி மற்றும் -0.04em முதல் -0.05em வரையிலான எழுத்து இடைவெளியுடன், மிகவும் அடர்த்தியாக வடிவமைக்கப்பட்டுள்ளது. இது ஒரு அலங்கார அம்சம் அல்ல; GT Walsheim-இன் வடிவியல் சார்ந்த இதமான தன்மையும், துல்லியமான அளவீடுகளும் இணைந்து, இந்த அமைப்பின் தனித்துவமான குரலை உருவாக்குகின்றன—அது நம்பிக்கையானதாகவும், கச்சிதமானதாகவும், சற்றே எதிர்காலத் தன்மை கொண்டதாகவும் இருக்கிறது. இதே போன்ற வடிவியல் வெளிப்பாட்டிற்கு, Inter Tight அல்லது Space Grotesk Bold எழுத்துருக்களைப் பரிசீலிக்கலாம்.
- Inter Variable — மாற்று: Inter · வெளிப்புறங்கள் 400 · முதன்மை உரை, வழிசெலுத்தல் மற்றும் இரண்டாம் நிலைத் தலைப்புகள் ஆகியவை முக்கியப் பங்காற்றுகின்றன. இன்டர் வேரியபிள் அச்சு, எடைகளின் மென்மையான இடைச்செருகலை அனுமதிக்கிறது. அளவு அதிகரிக்கும்போது டிராக்கிங் குறுகுகிறது: 18px வரை -0.001em இலிருந்து -0.027em ஆகவும், 22px வரை -0.027em ஆகவும் குறைகிறது. இந்த வேரியபிள் பதிப்பு, தளத்தின் மென்மையான நுண்-அசைவூட்டங்களை அனுமதிக்கிறது. மாற்று: இன்டர் ( Google) – இது கிட்டத்தட்ட அதே போன்ற ஒரு மாற்று ஏற்பாடு.
இடைவெளிகள் மற்றும் வடிவம்
| நோக்கம் | பொருள் |
|---|---|
| அடர்த்தி | சராசரி |
| அடிப்படை படி | 10px |
| பொத்தான் ஆரம் | 9999px |
| அட்டை ஆரம் | 20px |
| நிழல்கள் | நிழல்களுக்குப் பதிலாக எல்லைகள் இல்லை |
| பிரிவுகளுக்கு இடையில் | 80px |
| பக்க அகலம் | 1200px |
செயற்கை நுண்ணறிவு உங்கள் வலைத்தளத்தை Framer பாணியில் உருவாக்கி, அதை நிரப்பும்.
- Instagram, TikTok, Facebook இணைப்புகளின் வழியாக தயாரிப்புகளையும் பதிவுகளையும் நிரப்பவும்.
- உங்கள் பழைய தளத்திலிருந்து உள்ளடக்கத்தை மாற்றவும்—முகவரியைக் குறிப்பிட்டால் போதும்.
- சிறந்த இன்ஜினான React ( Next.js)-இல், சர்வர் ரெண்டரிங் மற்றும் உள்ளமைக்கப்பட்ட SEO மேம்படுத்தலுடன் கூடிய நவீன வடிவமைப்பு.
- தேடல் முடிவுகளுக்கான முழுமையாகத் தானியங்குபடுத்தப்பட்ட SEO உகப்பாக்கம் மற்றும் நியூரல் நெட்வொர்க் பரிந்துரைகள்.
ஒத்த பாணிகள்
- Auros — உயிரிஒளிர்வு தரவுப் பந்துகளைக் கொண்ட ஆழ்கடல் முனையம்
- Origin Financial — அமைதியான செழுமையின் ஓர் நள்ளிரவுக் கலைக்கூடம். பெரிய செரிஃப் எழுத்துருக்களும், ஒளியூட்டப்பட்ட சில வண்ணப் பலகைகளும் நிதித்துறை என்பது கவனமாகத் தொகுக்கப்பட்ட ஒரு கலைப்படைப்பு என்ற உணர்வை உருவாக்கும் ஓர் அமைதியான, கிட்டத்தட்ட இருண்ட அறை.
- Raycast — நள்ளிரவு கட்டளை மையம், கோரல் நியான்
- Dimension — மங்கலான வெளிச்சம் கொண்ட, உறைந்த கண்ணாடித் தகடுகளுடன் கூடிய ஒரு பணித்தளம்
- Reflect Notes — விண்மீன் நிறைந்த ஊதா வெளி என்பது, கிட்டத்தட்ட கருநீல வெறுமையின் பின்னணியில் விண்மீன் கூட்டங்களைப் போல இசைக்குறிப்புகள் மிதக்கும் ஒரு இருண்ட வானாய்வகம் ஆகும்.
- Ameba — நள்ளிரவில் கட்டுப்பாட்டு அறை – உறைந்த கண்ணாடித் தகடுகளுக்குள் ஒரு மின்னல் நீலத் துடிப்பு.
- Branding — கருப்புக் கலைக்கூடச் சுவர், அடர் சிவப்பு நிற அலங்காரங்கள் - ஒரு வெற்றிடத்தைப் போன்ற இருண்ட பின்னணியில் பெரிய வெள்ளை எழுத்துருக்கள் மிதக்கின்றன; இதனை ஒற்றைப் பிரகாசமான சிவப்பு நிற அலங்காரமும், இணைய இடைமுகத்தை விட கலைக்கூட அடையாளப் பலகையைப் போலத் தோற்றமளிக்கும் கண்ணைக் கவரும் அலங்காரக் கூறுகளும் குறுக்கிடுகின்றன.
- Harness — நள்ளிரவில் ஒளிரும் பச்சை நிற அலங்காரங்களுடன் கூடிய மிஷன் கண்ட்ரோல்
- Koto — நள்ளிரவில் அப்சிடியன் கேலரி. கிட்டத்தட்ட கும்மிருட்டான ஒரு மேடை; அங்கே ஒரேயொரு இதமான ஒளி ஆதாரம் ஒரு மஞ்சள் மார்க்கர் மட்டுமே. சுருங்கிய எழுத்துக்கள், கண்காட்சி சுவரொட்டிகளைப் போல அந்தப் பரந்த வெற்றிடத்தில் மிதக்கின்றன.
- Ohzi — இருண்ட கூடத்தில் தொங்கவிடப்பட்ட ஒரு ஒளிரும் கனசதுரம்
- Depot — ஒரு இருண்ட சர்வர் டெர்மினல். கிட்டத்தட்ட கருப்பு நிறத்திலான டெவலப்பர் கன்சோல், அதில் வேலையின் தொடக்கத்தைக் குறிக்கும் ஒற்றைப் பச்சை எல்.ஈ.டி.யும், கிராஃபைட் வண்ணத்தில் காட்டப்படும் மீதமுள்ள பயனர் இடைமுகமும்.
- Maciej Zadykowicz — பலவண்ணச் சுவரோவியத்தைக் கொண்ட மிட்நைட் கேலரி என்பது, கிட்டத்தட்ட கருமையான ஒரு ஸ்டுடியோ சுவராகும். அங்கு, துடிப்பான, வண்ணமயமான ஒரு அச்சுக்கலைப் படைப்பு கவனத்தை ஈர்க்க, மற்ற அனைத்தும் அமைதியாகவும் நிதானமாகவும் இருக்கின்றன.